Vue从零开始总结20

恭喜你！到此为止终于走出了新手村，可以做日常活动了。那么今日我们将进入的是名为组件的岛屿，它位于Vue大陆，紧贴繁华区。

说到组件，第一想到的应该是component这个单词，紧接着仔细想想什么是组件？好比一台机器，有好多个零件，每个零件都有自己的分工，同时呢，这种零件在另一台机器上也同样适用，说白了像java一样，一次编译到处运行。

要注意的是，你得先有一个Vue对象，然后你写的组件呢，都在Vue挂载的元素内写才有效

// 2.创建组件对象

//es6里改成``指代字符串并自带换行效果
const my=Vue.extend({
 template:`
  <div>
   <p>我是个组件</p>
  </div>`
})
//3.注册组件
Vue.component('cpn-x',my)//两个参数，第一个是你定义的标签名，第二个是组件对象

//1.创建Vue对象，并挂载到指定元素上
const app=new Vue({
    el:document.querySelector('#app'),
    data:{
        message:'hello world',
        movies:['海贼','火影'],
        counter:0
    },
    methods:{

    }
})

//4.组件的使用

<div id="app"><cpn-x></cpn-x></div>