Vue，组件-组件的创建方式1.2
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 </head> 9 <script src="../js/vue.js"></script> 10 <body> 11 <div id="app"> 12 <!-- 如果要使用组件， 直接， 把组件的名称， 以 HTML 标签的形式， 引入页面中， 即可 --> 13 <!-- 注意： 定义组件的时候 用的是驼峰命名法， 引入页面时， 大写的字母需要变成小写， 前面加- --> 14 <my-com1></my-com1> 15 </div> 16 </body> 17 </html> 18 <script> 19 20 // 1.1 使用 Vue.extend 来创建全局的Vue组件 21 // var com1 = Vue.extend({ 22 // template:'<h3>这是使用Vue.extend 创建的组件</h3>' // 通过template属性， 指定了组件要展示的HTML结构 23 // }) 24 25 // 1.2 使用 Vue.component('组件的名称', 创建出来的组件模板对象) 26 // Vue.component('myCom1', com1) 27 // 如果使用 Vue.component 定义全局组件的时候， 组件使用了 驼峰命名， 则在引用组件的时候， 需要把 大写的驼峰改成小写的字母， 28 // 同时， 两个单词之前， 使用 - 连接 29 // 如果不使用驼峰命名， 则直接拿 命名名称 使用即可 30 31 // Vue.component('myCom1', com1) 32 33 34 // Vue.component 第一个参数： 组件的名称， 将来在引用组件的时候， 就是一个 标签形式 来引入 它的 35 // 第二个参数： Vue.extend 创建的组件， 其中 template 就是组件将来要展示的HTML内容 36 Vue.component('myCom1', Vue.extend({ 37 template:'<h3>这是使用Vue.extend 创建的组件</h3>' // 通过template属性， 指定了组件要展示的HTML结构 38 })) 39 40 41 var vm = new Vue({ 42 el:'#app', 43 data:{ 44 45 }, 46 methods: { 47 48 } 49 }) 50 </script>
效果图
