vue: 定义组件template

vue渲染文档除了html模版之外，还有template和render，我们来了解一下template。

基础使用方法:

注意的点:

1. 会覆盖之前的dom节点

2. 需要一个根dom节点

        <div id="app">      
</div>
<script>
    new Vue({
        el : "#app",
        template : "<div>{{ name }}<div>123</div></div>",
        // 覆盖dom节点
        // 需要一个根节点
        data : {
            name : "fanghuayong" 
        },
    })
</script>
      

组件化开发的优点:
1.代码复用
2.降低代码偶合性 出问题容易找问题

template渲染多份模版

问题: 一个vue实例只会控制一段html代码

解决: vue是一个构造函数，Vue.component()方法可以解决这个问题

知识点:

1. 第一参数: 定义组件的名字
2. 第二参数: 是个对象

全局组件

全局组件可以在vue控制的任意模版下使用

        <div id="app">
    <my-component></my-component>
    <my-component></my-component>
    <my-component></my-component>
</div>
<div id="app2">
</div>
<script>
    Vue.component('my-component', {
         template: "<div>我是全局组件<div>{{ name }}</div></div>",
         // 使用vue.component定义组件
         // 第一参数: 定义组件的名字
         // 第二参数: 是个对象
         // 全局组件: 可以在vue控制的任意模版下使用
         data: function() {
         // data字段必须是函数
              return{
                  name : 'lizhuli'
              }
         }
    })
    new Vue({
        el : "#app",
        data : {
            name : "fanghuayong" 
        },
    })
    new Vue({
        el: '#app2',
        template: '<my-component></my-component>'
    })
</script>
      

局部组件

仅在实例控制的html代码段里可以使用

        new Vue({
    el : "#app",
    data : {
        name : "fanghuayong" 
    },

    // 局部组件
    components: {
    'my-fanghuayong' : {
         template: '<div>这是局部组件</div>'
    }
    }
})

      

注册组件的data字段

必须写函数返回retrun形式，直接写对象会报错

        Vue.component('my-component', {
    template: "<div>我是全局组件组件<div>{{ name }}</div></div>",

    // data字段必须是函数
    data: function() {
        return{
            name : 'data字段必须用函数'
        }
    }
})

      

如果data是一个对象会发生什么？

对象都是引用同一个内存地址，改变一个会发生所有改变

        <div id="app">
    <my-component></my-component>
    <my-component></my-component>
    <my-component></my-component>
    <my-component></my-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
 let data = {
     count : 0
 }
 Vue.component('my-component', {
     template : "<div @click = 'count++'>{{ count }}</div>",
     function() {
         return data;
     }
 })
 new Vue({
     el : "#app",
 })
</script>
      

当++的时候，所有的都在跟在改变

        Vue.component('my-component', {
     template : "<div @click = 'count++'>{{ count }}</div>",
     data : function() {
     return {
         count : 0
     }
     }
})

      

如果是内部对象就不会受影响，所以只能使用函数。

命名规范

fanghuayong-alert

fanghuayongAlert