资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

浅析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://cdkjz.cn/article/jceeis.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220