Vuejs第八篇之Vuejs组件的定义实例解析


Posted in Javascript onSeptember 05, 2016

本文参考官方文档整理的一篇更加细致代码更加安全的一篇适合新手阅读学习吧教程。

本篇资料来于官方文档:

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

什么是组件?

组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展。

组件的定义

①组件的作用:

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

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

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

②写一个标准的组件:

分为以下几步:

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

【2】定义一个组件,用

var 变量名 = Vue.extend({template:”这里是html的模板内容”})
这样的形式创建,例如:

//定义一个组件 
var btn = Vue.extend({ 
template: "<button>这是一个按钮</button>" 
})

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

如代码:

//注册他到Vue实例上 
Vue.component("add-button", btn);

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

<add-button></add-button>

会被

<button>这是一个按钮</button>

所替代。

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

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

<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)

如代码:

<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】定义组件和注册组件结合起来一步完成:

//定义一个组件 
Vue.component("add-button", { 
template: "<button>这是一个按钮</button>" 
});

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

//创建根实例,也就是说让Vue对这个根生效 
var vm = new Vue({ 
el: '#app', 
template: "<add-button></add-button>", 
components: { 
"add-button": { 
template: "<button>这是一个按钮</button>" 
} 
} 
});

⑤data属性

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

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

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

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

如代码:

var vm = new Vue({ 
el: '#app', 
template: "<add-button></add-button>", 
components: { 
"add-button": { 
template: "<button>这是一个按钮{{btn}}</button>", 
data: function () { 
return {btn: "123"}; 
} 
} 
} 
});

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

<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

以上所述是小编给大家介绍的Vuejs第八篇之Vuejs组件的定义实例解析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 操作文件 实现方法小结
Jul 02 Javascript
在网页中使用document.write时遭遇的奇怪问题
Aug 24 Javascript
Wordpress ThickBox 点击图片显示下一张图的修改方法
Dec 11 Javascript
浅析jquery某一元素重复绑定的问题
Jan 03 Javascript
javascript动态添加、修改、删除对象的属性与方法详解
Jan 27 Javascript
JavaScript获取元素尺寸和大小操作总结
Feb 27 Javascript
jQuery解决IE6、7、8不能使用 JSON.stringify 函数的问题
May 31 Javascript
原生js实现对Ajax的封装(仿jquery)
Jan 22 Javascript
灵活使用console让js调试更简单的方法步骤
Apr 23 Javascript
Vue 解决父组件跳转子路由后当前导航active样式消失问题
Jul 21 Javascript
Element Popover 弹出框的使用示例
Jul 26 Javascript
原生JavaScript实现换肤
Feb 19 Javascript
详细谈谈AngularJS的子级作用域问题
Sep 05 #Javascript
Vuejs第七篇之Vuejs过渡动画案例全面解析
Sep 05 #Javascript
JS简单获取客户端IP地址的方法【调用搜狐接口】
Sep 05 #Javascript
JS简单随机数生成方法
Sep 05 #Javascript
使用React实现轮播效果组件示例代码
Sep 05 #Javascript
Bootstrap中的fileinput 多图片上传及编辑功能
Sep 05 #Javascript
Bootstrap的fileinput插件实现多文件上传的方法
Sep 05 #Javascript
You might like
PHP中获取变量的变量名的一段代码的bug分析
2011/07/07 PHP
PHP curl 并发最佳实践代码分享
2012/09/05 PHP
如何使用FireFox插件FirePHP调试PHP
2013/07/23 PHP
thinkphp5 框架结合plupload实现图片批量上传功能示例
2020/04/04 PHP
window.dialogArguments 使用说明
2011/04/11 Javascript
javascript延时加载之defer测试
2012/12/28 Javascript
javascript/jquery获取地址栏url参数的方法
2014/03/05 Javascript
js限制input标签中只能输入中文
2015/06/26 Javascript
JS简单去除数组中重复项的方法
2016/09/13 Javascript
JavaScript自定义函数实现查找两个字符串最长公共子串的方法
2016/11/24 Javascript
Angularjs 手写日历的实现代码(不用插件)
2017/10/18 Javascript
关于layui 弹出层一闪而过就消失的解决方法
2019/09/09 Javascript
Vue实现渲染数据后控制滚动条位置(推荐)
2019/12/09 Javascript
javascript canvas API内容整理
2020/02/16 Javascript
微信小程序学习总结(二)样式、属性、模板操作分析
2020/06/04 Javascript
[25:59]Newbee vs TNC 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
详细解析Python中的变量的数据类型
2015/05/13 Python
Python实现获取域名所用服务器的真实IP
2015/10/25 Python
python中urllib.unquote乱码的原因与解决方法
2017/04/24 Python
如何使用 Pylint 来规范 Python 代码风格(来自IBM)
2018/04/06 Python
python 日期操作类代码
2018/05/05 Python
windows下python 3.6.4安装配置图文教程
2018/08/21 Python
python梯度下降法的简单示例
2018/08/31 Python
python数据处理 根据颜色对图片进行分类的方法
2018/12/08 Python
10行Python代码计算汽车数量的实现方法
2019/10/23 Python
Python基于codecs模块实现文件读写案例解析
2020/05/11 Python
解决python打开https出现certificate verify failed的问题
2020/09/03 Python
Pycharm 解决自动格式化冲突的设置操作
2021/01/15 Python
SpringBoot首页设置解析(推荐)
2021/02/11 Python
Java基础知识面试要点
2016/07/29 面试题
老师自我鉴定范文
2013/12/25 职场文书
部门优秀员工推荐信
2015/03/24 职场文书
2015年药品销售工作总结范文
2015/05/25 职场文书
预备党员表决心的话
2015/09/22 职场文书
2016七一建党节慰问信
2015/11/30 职场文书
Python Pandas常用函数方法总结
2021/06/15 Python