浅析Vue下的components模板使用及应用
Vue.js使用了基于HTML的模板语法,允许开发者声明式地将DOM绑定至底层Vue实例的数据。所有Vue.js的模板都是合法的HTML,所以能被遵循规范的浏览器和HTML解析器解析。
在我们越来越深入Vue时,我们会发现我们对HTML代码的工程量会越来越少,今天我们来谈谈Vue下的components模板的初步使用方法与应用
我们先来简单的写一段components代码
(局部方法创造模板)
哈哈哈
"
}
}
});
//这里使用Vue.component原型方法来创造
Vue.component(
"hehe",template:"(共有模板/全局模板),全局模板顾名思义肯定是放在哪里都能用
呵呵呵
"
);
letvm=newVue({
el:"#app",
data:{
},
components:{
//这里则不需要添加,因为互不影响
}
});
letxixi={
template:"其他方法:
嘻嘻嘻儿子孙子 "
components:{
grendson
}
}
//创建父亲模板
letparent={
template:"
"
}
letvm=newVue({
el:"#app",
data{
},
components:{
xixi
}
});
//创建孙子模板
letgrendson={
template:"(模板的继承),全局模板顾名思义肯定是放在哪里都能用
/* 我们来讲个最简单的父亲,儿子,孙子的例子 要注意以下几点: 1.先实例化对象vm 2.造出parent模板,并挂载在vm的conponents下 3.造出son模板并挂载在父级parent的conponents下,并在父级template属性中包裹住自己的模板名标签;同理造出孙子标签 4.在HTML节点中添加目标根节点 (节点的顺序一定要书写正确) */
孙子
"
}
//创建儿子模板
letson={
template:"父亲
"
components:{
son
}
}
//实例化vm对象
letvm=newVue({
el:"#app",
data:{
},
components:{
parent
}
});
总结
以上所述是小编给大家介绍的Vue下的components模板使用及应用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。