Vuejs——(8)Vuejs组件的定义
2016-09-05 10:15
716 查看
版权声明:我萌么~萌!么么哒~
目录(?)[+]
本篇资料来于官方文档:
http://cn.vuejs.org/guide/components.html
本文是在官方文档的基础上,更加细致的说明,代码更多更全。
简单来说,更适合新手阅读
(二十五)组件的定义
【2】组件是自定义元素,Vuejs的编译器可以为其添加特殊的功能;
【3】某些情况下,组件可以是原生HTML元素的形式,以is的方式扩展。
【1】挂载组件的地方,需要是Vue实例所渲染的html元素,具体来说,比如上面的<div id=”app”></div>这样的html元素及他的子节点;
【2】定义一个组件,用
var 变量名 = Vue.extend({template:”这里是html的模板内容”})
这样的形式创建,例如:
[javascript] view
plain copy
![](https://oscdn.geek-share.com/Uploads/Images/Content/201611/a7c8e286f463007e2a900848b93dd72c.png)
![](https://oscdn.geek-share.com/Uploads/Images/Content/201611/9e12f1d3e499fc949c886e7c9e0484f9)
//定义一个组件
var btn = Vue.extend({
template: "<button>这是一个按钮</button>"
})
【3】将定义的组件注册到Vue实例上,这会让指定标签,被组件的内容所替代。
如代码:
[javascript] view
plain copy
![](https://oscdn.geek-share.com/Uploads/Images/Content/201611/a7c8e286f463007e2a900848b93dd72c.png)
![](https://oscdn.geek-share.com/Uploads/Images/Content/201611/9e12f1d3e499fc949c886e7c9e0484f9)
//注册他到Vue实例上
Vue.component("add-button", btn);
具体而言,每一个以下这样的标签(在Vue的根实例范围内的)
[html] view
plain copy
![](https://oscdn.geek-share.com/Uploads/Images/Content/201611/a7c8e286f463007e2a900848b93dd72c.png)
![](https://oscdn.geek-share.com/Uploads/Images/Content/201611/9e12f1d3e499fc949c886e7c9e0484f9)
<add-button></add-button>
会被
[html] view
plain copy
![](https://oscdn.geek-share.com/Uploads/Images/Content/201611/a7c8e286f463007e2a900848b93dd72c.png)
![](https://oscdn.geek-share.com/Uploads/Images/Content/201611/9e12f1d3e499fc949c886e7c9e0484f9)
<button>这是一个按钮</button>
所替代。
【4】以上方法是全局注册(每个Vue实例的add-button标签都会被我们定义的所替代);
解决办法是局部注册。
如代码:(这是是设置了template属性,也可以在没有这个属性的时候,在<div id=”app”></div>标签内放置<add-button></add-button>标签
[html] view
plain copy
![](https://oscdn.geek-share.com/Uploads/Images/Content/201611/a7c8e286f463007e2a900848b93dd72c.png)
![](https://oscdn.geek-share.com/Uploads/Images/Content/201611/9e12f1d3e499fc949c886e7c9e0484f9)
<div id="app">
</div>
<script>
//定义一个组件
var btn = Vue.extend({
template: "<button>这是一个按钮</button>"
})
Vue.component("add-button", btn);
//创建根实例,也就是说让Vue对这个根生效
var vm = new Vue({
el: '#app',
template: "<add-button></add-button>"
});
</script>
然后在声明Vue实例的时候,将添加到components这个属性中(他是一个对象,以KV形式放置)(注意,这个单词多一个s)
如代码:
[html] view
plain copy
![](https://oscdn.geek-share.com/Uploads/Images/Content/201611/a7c8e286f463007e2a900848b93dd72c.png)
![](https://oscdn.geek-share.com/Uploads/Images/Content/201611/9e12f1d3e499fc949c886e7c9e0484f9)
<div id="app">
</div>
<script>
//定义一个组件
var btn = Vue.extend({
template: "<button>这是一个按钮</button>"
})
//创建根实例,也就是说让Vue对这个根生效
var vm = new Vue({
el: '#app',
template: "<add-button></add-button>",
components: {
"add-button": btn
}
});
</script>
注:
根据官方教程,这种方法(指局部注册),也适用于其他资源,比如指令、过滤器和过渡。
[javascript] view
plain copy
![](https://oscdn.geek-share.com/Uploads/Images/Content/201611/a7c8e286f463007e2a900848b93dd72c.png)
![](https://oscdn.geek-share.com/Uploads/Images/Content/201611/9e12f1d3e499fc949c886e7c9e0484f9)
//定义一个组件
Vue.component("add-button", {
template: "<button>这是一个按钮</button>"
});
【2】局部注册时,定义和注册一步完成:
[javascript] view
plain copy
![](https://oscdn.geek-share.com/Uploads/Images/Content/201611/a7c8e286f463007e2a900848b93dd72c.png)
![](https://oscdn.geek-share.com/Uploads/Images/Content/201611/9e12f1d3e499fc949c886e7c9e0484f9)
//创建根实例,也就是说让Vue对这个根生效
var vm = new Vue({
el: '#app',
template: "<add-button></add-button>",
components: {
"add-button": {
template: "<button>这是一个按钮</button>"
}
}
});
原因在于,假如这么干,那么组件的data属性有可能是一个对象,而这个对象也有可能是外部传入的(例如先声明一个对象,然后这个对象作为data的值),可能导致这个组件的所有副本,都共享一个对象(那个外部传入的),这显然是不对的。
因此,data属性应该是一个函数,然后有一个返回值,这个返回值作为data属性的值。
且这个返回值应该是一个全新的对象(即深度复制的,避免多个组件共享一个对象);
如代码:
[javascript] view
plain copy
![](https://oscdn.geek-share.com/Uploads/Images/Content/201611/a7c8e286f463007e2a900848b93dd72c.png)
![](https://oscdn.geek-share.com/Uploads/Images/Content/201611/9e12f1d3e499fc949c886e7c9e0484f9)
var vm = new Vue({
el: '#app',
template: "<add-button></add-button>",
components: {
"add-button": {
template: "<button>这是一个按钮{{btn}}</button>",
data: function () {
return {btn: "123"};
}
}
}
});
另外,假如这样的话,btn的值是一样的(因为他们实际上还是共享了一个对象)
[html] view
plain copy
![](https://oscdn.geek-share.com/Uploads/Images/Content/201611/a7c8e286f463007e2a900848b93dd72c.png)
![](https://oscdn.geek-share.com/Uploads/Images/Content/201611/9e12f1d3e499fc949c886e7c9e0484f9)
<div id="app">
</div>
<div id="app2">
</div>
<script>
var obj = {btn: "123"};
var vm = new Vue({
el: '#app',
template: "<add-button></add-button>",
components: {
"add-button": {
template: "<button>这是一个按钮{{btn}}</button>",
data: function () {
return obj;
}
}
}
});
obj.btn = "456";
var vm2 = new Vue({
el: '#app2',
template: "<add-button></add-button>",
components: {
"add-button": {
template: "<button>这是一个按钮{{btn}}</button>",
data: function () {
return obj;
}
}
}
});
</script>
注:
el属性用在Vue.extend()中时,也须是一个函数。
但实际我自己测试没发现问题,所以不明白。
【2】给个URL吧,如果真出问题了我再回头研究。
http://cn.vuejs.org/guide/components.html#u6A21_u677F_u89E3_u6790
目录(?)[+]
本篇资料来于官方文档:
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
![](https://oscdn.geek-share.com/Uploads/Images/Content/201611/a7c8e286f463007e2a900848b93dd72c.png)
//定义一个组件
var btn = Vue.extend({
template: "<button>这是一个按钮</button>"
})
【3】将定义的组件注册到Vue实例上,这会让指定标签,被组件的内容所替代。
如代码:
[javascript] view
plain copy
![](https://oscdn.geek-share.com/Uploads/Images/Content/201611/a7c8e286f463007e2a900848b93dd72c.png)
//注册他到Vue实例上
Vue.component("add-button", btn);
具体而言,每一个以下这样的标签(在Vue的根实例范围内的)
[html] view
plain copy
![](https://oscdn.geek-share.com/Uploads/Images/Content/201611/a7c8e286f463007e2a900848b93dd72c.png)
<add-button></add-button>
会被
[html] view
plain copy
![](https://oscdn.geek-share.com/Uploads/Images/Content/201611/a7c8e286f463007e2a900848b93dd72c.png)
<button>这是一个按钮</button>
所替代。
【4】以上方法是全局注册(每个Vue实例的add-button标签都会被我们定义的所替代);
解决办法是局部注册。
如代码:(这是是设置了template属性,也可以在没有这个属性的时候,在<div id=”app”></div>标签内放置<add-button></add-button>标签
[html] view
plain copy
![](https://oscdn.geek-share.com/Uploads/Images/Content/201611/a7c8e286f463007e2a900848b93dd72c.png)
<div id="app">
</div>
<script>
//定义一个组件
var btn = Vue.extend({
template: "<button>这是一个按钮</button>"
})
Vue.component("add-button", btn);
//创建根实例,也就是说让Vue对这个根生效
var vm = new Vue({
el: '#app',
template: "<add-button></add-button>"
});
</script>
③局部注册组件:
简单来说,只对这一个Vue实例生效,具体做法是,在注册那一步,跳过;然后在声明Vue实例的时候,将添加到components这个属性中(他是一个对象,以KV形式放置)(注意,这个单词多一个s)
如代码:
[html] view
plain copy
![](https://oscdn.geek-share.com/Uploads/Images/Content/201611/a7c8e286f463007e2a900848b93dd72c.png)
<div id="app">
</div>
<script>
//定义一个组件
var btn = Vue.extend({
template: "<button>这是一个按钮</button>"
})
//创建根实例,也就是说让Vue对这个根生效
var vm = new Vue({
el: '#app',
template: "<add-button></add-button>",
components: {
"add-button": btn
}
});
</script>
注:
根据官方教程,这种方法(指局部注册),也适用于其他资源,比如指令、过滤器和过渡。
④步骤简化:
【1】定义组件和注册组件结合起来一步完成:[javascript] view
plain copy
![](https://oscdn.geek-share.com/Uploads/Images/Content/201611/a7c8e286f463007e2a900848b93dd72c.png)
//定义一个组件
Vue.component("add-button", {
template: "<button>这是一个按钮</button>"
});
【2】局部注册时,定义和注册一步完成:
[javascript] view
plain copy
![](https://oscdn.geek-share.com/Uploads/Images/Content/201611/a7c8e286f463007e2a900848b93dd72c.png)
//创建根实例,也就是说让Vue对这个根生效
var vm = new Vue({
el: '#app',
template: "<add-button></add-button>",
components: {
"add-button": {
template: "<button>这是一个按钮</button>"
}
}
});
⑤data属性
直接给组件添加data属性是不可以的(无效);原因在于,假如这么干,那么组件的data属性有可能是一个对象,而这个对象也有可能是外部传入的(例如先声明一个对象,然后这个对象作为data的值),可能导致这个组件的所有副本,都共享一个对象(那个外部传入的),这显然是不对的。
因此,data属性应该是一个函数,然后有一个返回值,这个返回值作为data属性的值。
且这个返回值应该是一个全新的对象(即深度复制的,避免多个组件共享一个对象);
如代码:
[javascript] view
plain copy
![](https://oscdn.geek-share.com/Uploads/Images/Content/201611/a7c8e286f463007e2a900848b93dd72c.png)
var vm = new Vue({
el: '#app',
template: "<add-button></add-button>",
components: {
"add-button": {
template: "<button>这是一个按钮{{btn}}</button>",
data: function () {
return {btn: "123"};
}
}
}
});
另外,假如这样的话,btn的值是一样的(因为他们实际上还是共享了一个对象)
[html] view
plain copy
![](https://oscdn.geek-share.com/Uploads/Images/Content/201611/a7c8e286f463007e2a900848b93dd72c.png)
<div id="app">
</div>
<div id="app2">
</div>
<script>
var obj = {btn: "123"};
var vm = new Vue({
el: '#app',
template: "<add-button></add-button>",
components: {
"add-button": {
template: "<button>这是一个按钮{{btn}}</button>",
data: function () {
return obj;
}
}
}
});
obj.btn = "456";
var vm2 = new Vue({
el: '#app2',
template: "<add-button></add-button>",
components: {
"add-button": {
template: "<button>这是一个按钮{{btn}}</button>",
data: function () {
return obj;
}
}
}
});
</script>
注:
el属性用在Vue.extend()中时,也须是一个函数。
⑥is特性:
【1】按照官方教程,一些HTML元素对什么元素可以放在它之中是有限制的;但实际我自己测试没发现问题,所以不明白。
【2】给个URL吧,如果真出问题了我再回头研究。
http://cn.vuejs.org/guide/components.html#u6A21_u677F_u89E3_u6790
相关文章推荐
- [js高手之路] vue系列教程 - 组件定义与使用上部(7)
- Vue.js 2.x:组件的定义和注册(详细的图文教程)
- Vue.js 中,7种定义组件模板的方法
- Vuejs第八篇之Vuejs组件的定义实例解析
- Vue.js 定义组件模板的七种方式
- 【IMWeb训练营作业】vue.js-组件的定义及使用
- Vue.js 中,7种定义组件模板的方法
- Vue.js 2.x之组件的定义和注册图文详解
- Vue.js 中,7种定义组件模板的方法
- Vuejs——(8)Vuejs组件的定义
- Vue.js 中,7种定义组件模板的方法 | Codementor
- Vuejs——(8)Vuejs组件的定义
- 基于Vue.js的表格分页组件
- Vue.js学习 Item16 – 实现一个自定义分页组件vue-paginaiton
- Vue.js实现一个自定义分页组件vue-paginaiton
- Vuejs——(9)组件——props数据传递
- Vue.js——60分钟组件快速入门(上篇)
- Vuejs——(10)组件——父子组件通信
- Vue.js学习 Item11 – 组件与组件间的通信
- Vue.js——60分钟组件快速入门(下篇)