Vue 开发基础（上）
Vue 组件
Vue 可进行组件化开发，组件是 Vue 的基本结构单元，能实现复杂的页面结构，提高代码的可复用性。
什么是组件
组件是构成页面中独立结构的单元，减少重复代码的编写，提高开发效率，降低代码之间的耦合度，是项目更容易维护。其主要以页面结构的形式存在，不同的组件也具有基本的交互功能，根据业务逻辑实现复杂的项目功能。
<body> <div id="app"> <my-component></my-component> <my-component></my-component> <my-component></my-component> </div> </body> <script> // Vue.component() 注册组件的 API // my-component 组件名称 可使用驼峰 如: myComponent Vue.component(‘my-component‘, { // 组件的数据，它必须是一个函数，通过返回值来返回初始数据 data() { return { count: 0 } }, template: ‘<button v-on:click="count++">被单击 {{ count }} 次</button>‘ }) var vm = new Vue({ el: ‘#app‘ }) </script>
局部注册组件
Vue.component() 为全局组件 components: {} 局部组件
<body> <div id="app"> <my-component></my-component> </div> </body> <script> var cp = { template: ‘<p>我是 vm 实例中的局部组件</p>‘ } var vm = new Vue({ el: ‘#app‘, // 注册局部组件 components: { myComponent: cp } }) </script>
template 模板
Vue 提供了 <template> 标签来定义结构的模板，可在标签写 HTML 代码，然后通过 id 之绑定到组件内的 template 属性上（ template会出现无法解析的错误，无需理会，这是检查插件的问题 ）
<body> <div id="app"> <p>{{title}}</p> <my-component></my-component> </div> </body> <template id="tp"> <p>{{title}}</p> </template> <script> Vue.component(‘my-component‘, { template: ‘#tp‘, data() { return { title: ‘我是组件内的 title‘, } } }) var vm = new Vue({ el: ‘#app‘, data: { title: ‘我是 vm 实例的 title‘ } }) </script>