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 相关文章推荐
基于jQuery仿淘宝产品图片放大镜代码分享
Jun 23 Javascript
跟我学习javascript的函数和函数表达式
Nov 16 Javascript
详解JavaScript 中的 replace 方法
Jan 01 Javascript
jQuery实现图像旋转动画效果
May 29 Javascript
全面解析JS字符串和正则表达式中的match、replace、exec等函数
Jul 01 Javascript
javascript 显示全局变量与隐式全局变量的区别
Feb 09 Javascript
JavaScript表单验证实现代码
May 22 Javascript
JavaScript的setter与getter方法
Nov 29 Javascript
JS限制输入框输入的实现代码
Jul 02 Javascript
vue实现条件判断动态绑定样式的方法
Sep 29 Javascript
深入了解Vue3模板编译原理
Nov 19 Vue.js
JavaScript数组 几个常用方法总结
Nov 11 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生成mysql的数据字典
2016/07/07 PHP
javascript模仿msgbox提示效果代码
2008/06/10 Javascript
Javascript学习笔记9 prototype封装继承
2010/01/11 Javascript
java中String类型变量的赋值问题介绍
2016/03/23 Javascript
解决bootstrap导航栏navbar在IE8上存在缺陷的方法
2016/07/01 Javascript
Node.js如何自动审核团队的代码
2016/07/20 Javascript
Bootstrap图片轮播组件Carousel使用方法详解
2016/10/20 Javascript
原生JS实现日历组件的示例代码
2017/09/22 Javascript
让Vue也可以使用Redux的方法
2018/05/23 Javascript
Vue axios全局拦截 get请求、post请求、配置请求的实例代码
2018/11/28 Javascript
JavaScript解析JSON数据示例
2019/07/16 Javascript
详解vue3中组件的非兼容变更
2021/03/03 Vue.js
[52:14]VG vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python计算已经过去多少个周末的方法
2015/07/25 Python
python rsa 加密解密
2017/03/20 Python
python中requests小技巧
2017/05/10 Python
让Django支持Sql Server作后端数据库的方法
2018/05/29 Python
python读取文本中的坐标方法
2018/10/14 Python
Python正则表达式和re库知识点总结
2019/02/11 Python
关于Tensorflow 模型持久化详解
2020/02/12 Python
Python中logging日志的四个等级和使用
2020/11/17 Python
详解CSS3阴影 box-shadow的使用和技巧总结
2016/12/03 HTML / CSS
德国电子产品购物网站:TechInTheBasket德国
2018/12/07 全球购物
俄罗斯茶和咖啡网上商店:Tea.ru
2021/01/26 全球购物
毕业留言寄语大全
2014/04/10 职场文书
教师对学生的评语
2014/04/28 职场文书
建筑工地标语
2014/06/18 职场文书
无房证明范本
2014/09/17 职场文书
基层党支部整改方案
2014/10/25 职场文书
2014年食品安全工作总结
2014/12/04 职场文书
公司2014年度工作总结
2014/12/10 职场文书
银行中层干部培训心得体会
2016/01/11 职场文书
简历自我评价:教师师德表现自我评价
2019/04/24 职场文书
二年级作文之动物作文
2019/11/13 职场文书
MySQL 自定义变量的概念及特点
2021/05/13 MySQL
Python机器学习之基于Pytorch实现猫狗分类
2021/06/08 Python