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 相关文章推荐
js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)
Dec 11 Javascript
jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)
Feb 25 Javascript
深入解析JavaScript中函数的Currying柯里化
Mar 19 Javascript
jQuery编写设置和获取颜色的插件
Jan 09 Javascript
JavaScript指定断点操作实例教程
Sep 18 Javascript
vue过滤器用法实例分析
Mar 15 Javascript
vue中组件的3种使用方式详解
Mar 23 Javascript
Vue2.0 实现页面缓存和不缓存的方式
Nov 12 Javascript
原生js拖拽实现图形伸缩效果
Feb 10 Javascript
vue+ElementUI 关闭对话框清空验证,清除form表单的操作
Aug 06 Javascript
JavaScript如何实现防止重复的网络请求的示例
Jan 28 Javascript
vue 根据选择的月份动态展示日期对应的星期几
Feb 06 Vue.js
详细谈谈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与SQL注入攻击[二]
2007/04/17 PHP
CI(CodeIgniter)框架中的增删改查操作
2014/06/10 PHP
php/JS实现的生成随机密码(验证码)功能示例
2019/06/06 PHP
一个可以兼容IE FF的加为首页与加入收藏实现代码
2009/11/02 Javascript
JavaScript 操作键盘的Enter事件(键盘任何事件),兼容多浏览器
2010/10/11 Javascript
JavaScript全局函数使用简单说明
2011/03/11 Javascript
Jquery多选下拉列表插件jquery multiselect功能介绍及使用
2013/05/24 Javascript
IE6 hack for js 集锦
2014/09/23 Javascript
深入理解js中this的用法
2016/05/28 Javascript
JS中with的替代方法与String中的正则方法详解
2016/12/23 Javascript
Nodejs搭建wss服务器教程
2017/05/24 NodeJs
Webpack如何引入bootstrap的方法
2017/06/17 Javascript
浅谈mint-ui loadmore组件注意的问题
2017/11/08 Javascript
JavaScript展开操作符(Spread operator)详解
2019/07/20 Javascript
JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去
2019/07/23 Javascript
简单了解微信小程序 e.target与e.currentTarget的不同
2019/09/27 Javascript
Node.js操作MongoDB数据库实例分析
2020/01/19 Javascript
js实现翻牌小游戏
2020/07/31 Javascript
Python实现Linux下守护进程的编写方法
2014/08/22 Python
Python简单获取自身外网IP的方法
2016/09/18 Python
python使用pyqt写带界面工具的示例代码
2017/10/23 Python
python画出三角形外接圆和内切圆的方法
2018/01/25 Python
tensorflow使用神经网络实现mnist分类
2018/09/08 Python
python3+selenium自动化测试框架详解
2019/03/17 Python
Python3 批量扫描端口的例子
2019/07/25 Python
django迁移数据库错误问题解决
2019/07/29 Python
css3 2D图片转动样式可以扩充到Js当中
2014/04/29 HTML / CSS
马克华菲官方商城:Mark Fairwhale
2016/09/04 全球购物
本科生学习总结的自我评价
2013/10/02 职场文书
实习自我评价怎么写
2013/12/02 职场文书
实习教师自我鉴定
2013/12/12 职场文书
欢迎标语大全
2014/06/21 职场文书
党的群众路线教育实践活动学习笔记
2014/11/05 职场文书
干部考核工作总结2015
2015/07/24 职场文书
节水宣传标语口号
2015/12/26 职场文书
标准演讲稿格式结尾应该怎么书写?
2019/07/17 职场文书