一、组件概念
有html模板，有css样式，有js逻辑的集合体
每一个组件都是一个vue实例
每个组件均具有自身的模板template，根组件的模板就是挂载点
每个组件模板只能拥有一个根标签
子组件的数据具有作用域，以达到组件的复用
1、根组件
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>模板</title> </head> <body> <div id="app"> <h1>组件概念</h1> </div> </body> <script src="js/vue.js"></script> <script> // 组件：有html模板，有css样式，有js逻辑的集合体 // 根组件的模板就使用挂载点，子组件必须自己定义template（局部子组件， 全局子组件） new Vue({ el: '#app', template: ` <div> <h1 style="color:red;">组件渲染的模板</h1> <h2 @click="action">副标题</h2> </div> `, data: { }, methods: { action: function () { alert(123) } } }) </script> </html>