浅析Vue下的components模板使用及应用

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。

创新互联专业为企业提供甘井子网站建设、甘井子做网站、甘井子网站设计、甘井子网站制作等企业网站建设、网页设计与制作、甘井子企业网站模板建站服务，10多年甘井子做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

在我们越来越深入Vue时，我们会发现我们对HTML代码的工程量会越来越少，今天我们来谈谈Vue下的 components模板的初步使用方法与应用

我们先来简单的写一段components代码

(局部方法创造模板)




/*
这是最简单常用的一种创造模板方法，局部方法创造模板
要注意,局部模板 的作用范围 只在 相对的vue对象 范围内 
比如 这个例子, 的范围 只在  内
因为 haha 挂载在 vm的components下 而 vm挂载的 对应节点是 id=app的 div上
*/
let vm = new Vue({
el:"#app",
data:{
},
components:{
"haha":{
template:"哈哈哈"
}
}
});

(共有模板/全局模板)，全局模板顾名思义肯定是放在哪里都能用




//这里使用Vue.component原型方法来创造
Vue.component(
"hehe",template:"呵呵呵"
);
let vm = new Vue({
el:"#app",
data:{
},
components:{
//这里则不需要添加,因为 互不影响
}
});

其他方法：




let xixi={
template:"嘻嘻嘻"
}
let vm = new Vue({
el : "#app",
data{
},
components:{
xixi
}
});

(模板的继承)，全局模板顾名思义肯定是放在哪里都能用

/*
我们来讲个最简单的 父亲，儿子 ，孙子的 例子
要注意以下几点：
1.先实例化对象vm
2.造出parent模板,并挂载在 vm的 conponents 下
3.造出 son 模板 并 挂载 在 父级 parent 的conponents下，并在 父级template属性中 包裹住自己的 模板名标签 ；同理 造出孙子标签
4.在HTML节点中添加 目标 根节点
（节点的顺序一定要书写正确）
*/



//创建 孙子 模板
let grendson = { 
template:"孙子"
}
//创建 儿子 模板
let son= { 
template:"儿子孙子"
components:{
grendson 
}
}
//创建 父亲 模板
let parent = { 
template:"父亲"
components:{
son
}
}
//实例化vm对象
let vm = new Vue({
el:"#app",
data:{
},
components:{
parent
}
});

总结

以上所述是小编给大家介绍的Vue下的components模板使用及应用，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对创新互联网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

新闻标题：浅析Vue下的components模板使用及应用
转载来于：http://scyanting.com/article/jceeis.html

浅析Vue下的components模板使用及应用

其他资讯