VUE参考---组件复习
一、总结
一句话总结：
组件本身是一个对象，我们需要给组件取名，才能用
// 通过 对象 字面量的形式， 定义了一个 组件模板对象 var login = { template: '<h1>1234</h1>' } // 通过 Vue.component 把 组件模板对象，注册为一个全局的Vue 组件，同时，为这个组件起了一个名称，可以让我们 通过 标签形式，在页面中直接引入这个组件 // Vue.component('mylogin', login) components: { // '组件的名称': 组件的模板对象 // 'mylogin': login login }
二、组件复习
博客对应课程的视频位置：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <script src="./lib/vue-2.4.0.js"></script> 10 </head> 11 12 <body> 13 <div id="app"> 14 <!-- <mylogin></mylogin> --> 15 <login></login> 16 </div> 17 18 <script> 19 20 // 定义组件的时候，如果要定义全局的组件， Vue.component('组件的名称', {}) 21 22 23 // 通过 对象 字面量的形式， 定义了一个 组件模板对象 24 var login = { 25 template: '<h1>1234</h1>' 26 } 27 // 通过 Vue.component 把 组件模板对象，注册为一个全局的Vue 组件，同时，为这个组件起了一个名称，可以让我们 通过 标签形式，在页面中直接引入这个组件 28 // Vue.component('mylogin', login) 29 30 31 32 // 创建 Vue 实例，得到 ViewModel 33 var vm = new Vue({ 34 el: '#app', 35 data: {}, 36 methods: {}, 37 components: { 38 // '组件的名称': 组件的模板对象 39 // 'mylogin': login 40 login 41 } 42 }); 43 </script> 44 </body> 45 46 </html>