Vue，组件-组件的创建方式1.1
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 Vue.component('myCom1', com1) 31 32 33 var vm = new Vue({ 34 el:'#app', 35 data:{ 36 37 }, 38 methods: { 39 40 } 41 }) 42 </script>
效果图
