1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>组件定义</title> 6 <script src="../lib/js/vue.js"></script> 7 </head> 8 <body> 9 <div id="app"> 10 <!--第三步：将组件名称直接以标签的形式放在页面中即可 11 注意：定义组件时采用的驼峰命名法，这里改为 -加小写字母的形式，如果没采用驼峰命名法则直接引用即可--> 12 <my-com1></my-com1> 13 </div> 14 <script> 15 /** 16 * 使用Vue.extend 来创建全局的Vue 组件 17 */ 18 //第一步：创建组件模板对象 19 const com1 = Vue.extend({ 20 // 通过template 属性，指定了组件要展示的HTML结构 21 template:'<h3>使用Vue.extend 来创建全局的Vue 组件</h3>' 22 }); 23 //第二步： 使用 Vue.component('组件的名称',创建出来的组件模板对象) 24 Vue.component('myCom1',com1); 25 26 // // 简写 27 // Vue.component('myCom1',Vue.extend({ 28 // emplate:'<h3>使用Vue.extend 来创建全局的Vue 组件</h3>' 29 // })); 30 31 const vm = new Vue({ 32 el:'#app', 33 data:{ 34 }, 35 methods:{ 36 } 37 }) 38 </script> 39 </body> 40 </html>
Day3.8组件定义方式一
猜你喜欢
转载自www.cnblogs.com/zhaohui-116/p/12057299.html
今日推荐
周排行