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定义函数的方法
Dec 06 Javascript
解析js如何获取当前url中的参数值并复制给input
Jun 23 Javascript
jQuery自动切换/点击切换选项卡效果的小例子
Aug 12 Javascript
js修改input的type属性问题探讨
Oct 12 Javascript
基于JQuery实现滚动到页面底端时自动加载更多信息
Jan 31 Javascript
JavaScript事件委托实例分析
May 26 Javascript
JS+DIV+CSS实现的经典标签切换效果代码
Sep 14 Javascript
整理关于Bootstrap导航的慕课笔记
Mar 29 Javascript
JS 60秒后重新发送验证码的实例讲解
Jul 26 Javascript
layui.tree组件的使用以及搜索节点功能的实现
Sep 26 Javascript
ligerUI的ligerDialog关闭刷新的方法
Sep 27 Javascript
BootstrapValidator验证用户名已存在(ajax)
Nov 08 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 字符串加密函数(在指定时间内加密还原字符串,超时无法还原)
2010/04/28 PHP
php checkbox复选框值的获取与checkbox默认值输出方法
2010/05/15 PHP
php中$_REQUEST、$_POST、$_GET的区别和联系小结
2011/11/23 PHP
浅析PHP的静态成员函数效率更高的原因
2014/06/13 PHP
PHP控制前台弹出对话框的实现方法
2016/08/21 PHP
php删除txt文件指定行及按行读取txt文档数据的方法
2017/01/30 PHP
20款超赞的jQuery插件 Web开发人员必备
2011/02/26 Javascript
JavaScript如何从listbox里同时删除多个项目
2013/10/12 Javascript
Javascript学习笔记之相等符号与严格相等符号
2014/11/23 Javascript
Node.js实现Excel转JSON
2015/04/24 Javascript
JavaScript实现删除,移动和复制文件的方法
2015/08/05 Javascript
arcgis for js 修改infowindow样式的方法
2016/11/02 Javascript
JavaScript常见的五种数组去重的方式
2016/12/15 Javascript
JS简单获取当前日期时间的方法(如:2017-03-29 11:41:10 星期四)
2017/03/29 Javascript
JS动态添加的div点击跳转到另一页面实现代码
2017/09/30 Javascript
vue中路由验证和相应拦截的使用详解
2017/12/13 Javascript
javascript实现点亮灯泡特效示例
2019/10/15 Javascript
Vue 路由间跳转和新开窗口的方式(query、params)
2019/12/25 Javascript
Python设计模式之代理模式简单示例
2018/01/09 Python
Python通过paramiko远程下载Linux服务器上的文件实例
2018/12/27 Python
浅析python的Lambda表达式
2019/02/27 Python
python3中替换python2中cmp函数的实现
2019/08/20 Python
Python笔记之facade模式
2019/11/20 Python
PyTorch的自适应池化Adaptive Pooling实例
2020/01/03 Python
利用CSS3实现折角效果实例源码
2016/09/28 HTML / CSS
以实惠的价格轻松租车,免费取消:Easyrentcars
2019/07/16 全球购物
main 函数执行以前,还会执行什么代码
2013/04/17 面试题
阿里巴巴Oracle DBA笔试题答案-备份恢复类
2013/11/20 面试题
法律专业求职信
2014/05/24 职场文书
乡镇八一建军节活动方案
2014/08/24 职场文书
高中课前三分钟演讲稿
2014/09/13 职场文书
党员干部四风问题整改措施思想汇报
2014/10/12 职场文书
2014年依法行政工作总结
2014/11/19 职场文书
反腐倡廉影片观后感
2015/06/08 职场文书
孙振耀退休感言
2015/08/01 职场文书
2016年教师节慰问信
2015/12/01 职场文书