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

最新推荐文章于 2023-07-18 15:29:57 发布

weixin_30950237

最新推荐文章于 2023-07-18 15:29:57 发布

阅读量203

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wo1ow1ow1/p/11138507.html

版权

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>

效果图

转载于:https://www.cnblogs.com/wo1ow1ow1/p/11138507.html

weixin_30950237

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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-sca...
复制链接

扫一扫