1. 什么是组件:组件的出现,就是为了拆分Vue实例的代码量,能够让我们以不同的组件,来划分不同的功能模块,将来需要什么样的功能,就去调用对应的组件即可;
2. 模块化:是从代码的角度进行划分的;方便代码分层开发,保证每个模块的职能单一;
3. 组件化:是从UI界面的角度进行划分的;前端的组件化,方便UI组件的重用!
定义组件的三种方式:
第一种:
<body> <div id="app"> <!--如果使用组件,直接把组件的名称,以HTML标签的形式,引入到页面中,即可--> <mycom1></mycom1> </div> <script> // 1.1 使用 Vue.extend 来创建全局的 Vue 组件 var com1 = Vue.extend({ template:'<h3>这是使用 Vue.extend 创建的组件</h3>' // 通过 template 属性,指定了组件要展示的HTML结构 }) // 1.2 使用 Vue.component('组件的名称',创建出来的组件模板对象) // Vue.component('myCom1', com1) // 如果使用 Vue.component 定义全局组件的时候,组件名称使用了 驼峰命名,则在引用组件的时候,需要把 大写的驼峰改为小写的字母,同时,两个单词之间,使用 - 链接; // 如果不适用驼峰,则直接拿名称来使用即可; Vue.component('mycom1', com1) var vm = new Vue({ el: '#app', data: { }, methods: { } }) </script> </body>
第二种:
<body> <div id="app"> <mycom2></mycom2> </div> <script> /*注意:不论是那种方式创建出来的组件,组件的template 属性指向的模板内容,必须有且只能有唯一的一个根元素*/ Vue.component('mycom2', { template:'<div><h3>这是直接使用 Vue.component 创建的组件</h3><span>span元素</span></div>' // 通过 template 属性,指定了组件要展示的HTML结构 }) var vm = new Vue({ el: '#app', data: { }, methods: { } }) </script> </body>
第三种:
<body> <div id="app"> <mycom3></mycom3> </div> <div id="app2"> <mycom3></mycom3> <login></login> </div> <template id="tmpl"> <div> <h1>这是通过 template 元素,在外部定义的组件结构,这个方式,有代码的智能提示和高亮</h1> <h4>vue-template</h4> </div> </template> <template id="tmpl2"> <h1>这是私有的login组件</h1> </template> <script> /*注意:不论是那种方式创建出来的组件,组件的template 属性指向的模板内容,必须有且只能有唯一的一个根元素*/ Vue.component('mycom3', { template:'#tmpl' }) var vm = new Vue({ el: '#app', data: { }, methods: { } }) var vm2 = new Vue({ el:'#app2', data:{}, methods:{}, filters:{}, components:{ // 定义实例内部私有组件 login:{ template:'#tmpl2' } } }) </script> </body>