03第一个Vue-组件化

作者: 吕小凯 | 来源:发表于2019-05-15 21:10 被阅读0次

Vue组件化简单的说就是在Vue里面自定义HTML标签，并可以配置参数复制，达到可以
自定义HTML标签的效果
直接测试如下代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<message content="Vue组件化"></message>
</div>
</body>
<script type="text/javascript">
    var  Message=Vue.extend(
        {
            props:['content'],
            template:'<h1>{{content}}</h1>'
        }
    );
    Vue.component('message',Message);
    var vm=new Vue(
        {
            el:'#app',
        }
    );
</script>
</html>

如上代表生命一个message组件，其中content为该组件的参数，这样就可以直接在HTML里面使用我们
在Vue自定义的标签啦.