本文摘自PHP中文网,作者coldplay.xixi,侵删。
vue.js中component的使用方法:1、扩展HTML元素,封装可重用的代码;2、组件是自定义元素,【Vue.js】的编译器为它添加特殊功能;3、组件也可以是原生HTML元素的形式,以is特性扩展。
【相关文章推荐:vue.js】
vue.js中component的使用方法:
什么是组件
按照惯例,引用Vue官网的一句话:
组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展。
组件component的注册
全局组件:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | Vue.component( 'todo-item' ,{
props:[ 'grocery' ],
template: '<li>{{grocery.text}}</li>'
})
var app7 = new Vue({
el: "#app7" ,
data:{
groceryList:[
{ "id" :0, "text" : "蔬菜" },
{ "id" :1, "text" : "奶酪" },
{ "id" :2, "text" : "其他" }
]
}
})
|
1 2 3 4 5 6 7 8 9 | <div id= "app7" >
<ol>
<todo-item
v- for = "grocery in groceryList"
v-bind:grocery= "grocery"
v-bind:key= "grocery.id" >
</todo-item>
</ol>
</div>
|
局部注册:
1 2 3 4 5 6 7 8 9 10 | var Child = {
template: '<div>A custom component!</div>'
}
new Vue({
components: {
'my-component' : Child
}
})
|
DOM模板解析说明
阅读剩余部分
相关阅读 >>
怎么关闭vue.js中的空格报错?
vue应用程序中实现ajax的四个地方
vue.js中component怎么用
vue.js中怎么设置输入框的长度
vue.js基于什么
vue.js图片怎么插入
如何用npm安装vue.js?
深入研究vue cli3
使用vue.js需要什么知识
vue.js支持移动端开发吗
更多相关阅读请进入《vue.js》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » vue.js中component怎么用