<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <!-- 什么是组件？ 拥有专属的HTML,CSS,JS和数据的页面独立区域 为什么？重用 何时用？只要发现页面中有一个区域可能被反复使用，都要定义成组件 创建：每个组件都是一个缩微的 new Vue() 使用组件：组件在html中其实就是一个可重用的标签而已。组件名就是就是标签名。所以组件起名不要驼峰命名！因为HTML标签不区分大小写。可用-分隔多个单词 new Vue()必须写，因为是new Vue扫描页面时，发现不认识的标签，才会去加载自定义的组件 加载时：会用组件的template中的HTML模板片段，代替不认识的标签。 template必须有一个父元素包裹 Vue.conponent('组件名',{ tempalte:``, 模板，放着html片段 data(){ return {//调用一次data(),返回一个新的return //模型变量 } }, methods:{}, watch:{ }, computed:{}, created(){}, mounted(){}, }) new Vue({ el:"#app" }) --> <!-- 自定义组件 --> <div id="app"> <counter></counter><br> <counter></counter><br> <counter></counter><br> </div> <script src="vue2.js"></script> <script> Vue.component('counter',{ template:`<div> <button @click=change(-1)>-</button><span>{{n}}</span><button @click=change(+1)>+</button> </div>`, data(){ return{ n:1 } }, methods:{ change(i){ this.n+=i } } }) new Vue({ el:"#app" }) </script> </body> </html>