vue.js 组件一

 分类:
 

目录(?)[-]

  1. 组件的作用
  2. 写一个标准的组件
  3. 局部注册组件
  4. 步骤简化
  5. data属性
  6. is特性
 
 

目录(?)[+]

 

 

本篇资料来于官方文档:

http://cn.vuejs.org/guide/components.html

本文是在官方文档的基础上,更加细致的说明,代码更多更全。

简单来说,更适合新手阅读


 

(二十五)组件的定义

①组件的作用:

【1】扩展HTML元素,封装可重用的代码;

【2】组件是自定义元素,Vuejs的编译器可以为其添加特殊的功能;

【3】某些情况下,组件可以是原生HTML元素的形式,以is的方式扩展。

 

②写一个标准的组件:

分为以下几步:

【1】挂载组件的地方,需要是Vue实例所渲染的html元素,具体来说,比如上面的<div id=”app”></div>这样的html元素及他的子节点;

 

【2】定义一个组件,用

var 变量名 = Vue.extend({template:”这里是html的模板内容”})

这样的形式创建,例如:

[javascript] view plain copy
 
 
 
 在CODE上查看代码片派生到我的代码片
  1. //定义一个组件  
  2. var btn = Vue.extend({  
  3.     template: "<button>这是一个按钮</button>"  
  4. })  

 

【3】将定义的组件注册到Vue实例上,这会让指定标签,被组件的内容所替代。

如代码:

[javascript] view plain copy
 
 
 
 在CODE上查看代码片派生到我的代码片
  1. //注册他到Vue实例上  
  2. Vue.component("add-button", btn);  

具体而言,每一个以下这样的标签(在Vue的根实例范围内的)

[html] view plain copy
 
 
 
 在CODE上查看代码片派生到我的代码片
  1. <add-button></add-button>  

会被

[html] view plain copy
 
 
 
 在CODE上查看代码片派生到我的代码片
  1. <button>这是一个按钮</button>  

所替代。

 

【4】以上方法是全局注册(每个Vue实例的add-button标签都会被我们定义的所替代);

解决办法是局部注册。

 

如代码:(这是是设置了template属性,也可以在没有这个属性的时候,在<div id=”app”></div>标签内放置<add-button></add-button>标签

[html] view plain copy
 
 
 
 在CODE上查看代码片派生到我的代码片
  1. <div id="app">  
  2. </div>  
  3. <script>  
  4.     //定义一个组件  
  5.     var btn = Vue.extend({  
  6.         template: "<button>这是一个按钮</button>"  
  7.     })  
  8.   
  9.     Vue.component("add-button", btn);  
  10.   
  11.     //创建根实例,也就是说让Vue对这个根生效  
  12.     var vm = new Vue({  
  13.         el: '#app',  
  14.         template: "<add-button></add-button>"  
  15.     });  
  16. </script>  

 

 

③局部注册组件:

简单来说,只对这一个Vue实例生效,具体做法是,在注册那一步,跳过;

然后在声明Vue实例的时候,将添加到components这个属性中(他是一个对象,以KV形式放置)(注意,这个单词多一个s)

如代码:

[html] view plain copy
 
 
 
 在CODE上查看代码片派生到我的代码片
  1. <div id="app">  
  2. </div>  
  3. <script>  
  4.     //定义一个组件  
  5.     var btn = Vue.extend({  
  6.         template: "<button>这是一个按钮</button>"  
  7.     })  
  8.   
  9.     //创建根实例,也就是说让Vue对这个根生效  
  10.     var vm = new Vue({  
  11.         el: '#app',  
  12.         template: "<add-button></add-button>",  
  13.         components: {  
  14.             "add-button": btn  
  15.         }  
  16.     });  
  17. </script>  

 

注:

根据官方教程,这种方法(指局部注册),也适用于其他资源,比如指令过滤器过渡

 

 

④步骤简化:

【1】定义组件注册组件结合起来一步完成:

[javascript] view plain copy
 
 
 
 在CODE上查看代码片派生到我的代码片
  1. //定义一个组件  
  2. Vue.component("add-button", {  
  3.     template: "<button>这是一个按钮</button>"  
  4. });  

 

【2】局部注册时,定义和注册一步完成:

[javascript] view plain copy
 
 
 
 在CODE上查看代码片派生到我的代码片
  1. //创建根实例,也就是说让Vue对这个根生效  
  2. var vm = new Vue({  
  3.     el: '#app',  
  4.     template: "<add-button></add-button>",  
  5.     components: {  
  6.         "add-button": {  
  7.             template: "<button>这是一个按钮</button>"  
  8.         }  
  9.     }  
  10. });  

 

⑤data属性

直接给组件添加data属性是不可以的(无效);

 

原因在于,假如这么干,那么组件的data属性有可能是一个对象,而这个对象也有可能是外部传入的(例如先声明一个对象,然后这个对象作为data的值),可能导致这个组件的所有副本,都共享一个对象(那个外部传入的),这显然是不对的。

 

因此,data属性应该是一个函数,然后有一个返回值,这个返回值作为data属性的值。

 

且这个返回值应该是一个全新的对象(即深度复制的,避免多个组件共享一个对象);

 

如代码:

[javascript] view plain copy
 
 
 
 在CODE上查看代码片派生到我的代码片
  1. var vm = new Vue({  
  2.     el: '#app',  
  3.     template: "<add-button></add-button>",  
  4.     components: {  
  5.         "add-button": {  
  6.             template: "<button>这是一个按钮{{btn}}</button>",  
  7.             data: function () {  
  8.                 return {btn: "123"};  
  9.             }  
  10.         }  
  11.     }  
  12. });  

 

另外,假如这样的话,btn的值是一样的(因为他们实际上还是共享了一个对象)

[html] view plain copy
 
 
 
 在CODE上查看代码片派生到我的代码片
  1. <div id="app">  
  2. </div>  
  3. <div id="app2">  
  4. </div>  
  5. <script>  
  6.     var obj = {btn: "123"};  
  7.     var vm = new Vue({  
  8.         el: '#app',  
  9.         template: "<add-button></add-button>",  
  10.         components: {  
  11.             "add-button": {  
  12.                 template: "<button>这是一个按钮{{btn}}</button>",  
  13.                 data: function () {  
  14.                     return obj;  
  15.                 }  
  16.             }  
  17.         }  
  18.     });  
  19.   
  20.     obj.btn = "456";  
  21.     var vm2 = new Vue({  
  22.         el: '#app2',  
  23.         template: "<add-button></add-button>",  
  24.         components: {  
  25.             "add-button": {  
  26.                 template: "<button>这是一个按钮{{btn}}</button>",  
  27.                 data: function () {  
  28.                     return obj;  
  29.                 }  
  30.             }  
  31.         }  
  32.     });  
  33. </script>  

 

注:

el属性用在Vue.extend()中时,也须是一个函数。

 

 

 

⑥is特性:

【1】按照官方教程,一些HTML元素对什么元素可以放在它之中是有限制的;

但实际我自己测试没发现问题,所以不明白。

 

【2】给个URL吧,如果真出问题了我再回头研究。

http://cn.vuejs.org/guide/components.html#u6A21_u677F_u89E3_u6790

posted on 2017-12-09 16:39  双王木  阅读(122)  评论(0编辑  收藏  举报

导航