Vue，组件-组件的创建方式1.1

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>

  效果图

                               

posted on 2019-07-05 15:19  我1我1我1  阅读(141)  评论(0)  编辑  收藏  举报

导航