Vue2.0 -- 组件局部注册

目录

组件定义

注册

使用组件

组件的命名

---

再做vue之前, 需要先引入vue.js文件

    <script src="../js/vue.js"></script>

有很多官方或者非官方的cdn可以使用, 可自行前往 搜索下载

组件定义

        首先, 使用Vue.extend() 来定义一个组件 (注意这个步骤是在script标签中完成的)

    const testComponent = Vue.extend({
        
    })

       然后进行初始化操作, 初始化的时候, 在Vue.extend()中填入一个对象参数, 这个参数的格式和new Vue的操作大部分相似.

        第一个参数  : template, 也就是模板的意思, 它规定了组件以什么样的方式出现:

    const testComponent = Vue.extend({
        template : '<div>你好呀</div>'
    })

        第二个参数 : data, 如果组件中存在动态的数据, 那么就需要使用data来写入数据, 例如:

    const testComponent = Vue.extend({
        template : `<div>你好呀</div>
        <p>我是{
  
  {name}}</p>`
    })

       这个时候你就会发现, 在运行的时候这样定义template是错误的

        在使用之前就需要对这个name进行赋值, 也就是使用类似于new Vue的时候的data字段:

        vue语法规定, 组件下, 只能有一个根元素, 但是这个根元素可以包含其他元素, 如果template下面有多个元素的时候, 就需要使用div将所有元素全部包裹, 满足只有一个根元素的条件.       

        注意下面代码中的template下级标签一定是一个div或者其他标签

    const testCompone