这篇文章主要介绍了Vue下的components模板的使用及应用，本文通过代码介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。
在我们越来越深入Vue时，我们会发现我们对HTML代码的工程量会越来越少，今天我们来谈谈Vue下的 components模板的 初步使用方法与 应用
我们先来简单的写一段components代码
(局部方法创造模板)
<div id="app"> </div> /* 这是最简单常用的一种创造模板方法，局部方法创造模板 要注意,局部模板 的作用范围 只在 相对的vue对象 范围内 比如 这个例子, 的范围 只在 <div id="app"> </div>内 因为 haha 挂载在 vm的components下 而 vm挂载的 对应节点是 id=app的 div上 */ let vm = new Vue({ el:"#app", data:{ }, components:{ "haha":{ template:"<div>哈哈哈<div>" } } });
(共有模板/全局模板)，全局模板 顾名思义 肯定是 放在哪里都能用
<div id="app"> </div> //这里使用Vue.component原型方法来创造 Vue.component( "hehe",template:"<div>呵呵呵<div>" ); let vm = new Vue({ el:"#ap<strong>本文来源gaodai#ma#com搞@@代~&码*网2</strong>p", data:{ }, components:{ //这里则不需要添加,因为 互不影响 } });
其他方法：
<div id="app"> </div> let xixi={ template:"<div>嘻嘻嘻<div>" } let vm = new Vue({ el : "#app", data{ }, components:{ xixi } });
(模板的继承)，全局模板 顾名思义 肯定是 放在哪里都能用
/* 我们来讲个最简单的 父亲，儿子 ，孙子的 例子 要注意以下几点： 1.先实例化对象vm 2.造出parent模板,并挂载在 vm的 conponents 下 3.造出 son 模板 并 挂载 在 父级 parent 的conponents下，并在 父级template属性中 包裹住自己的 模板名标签 ；同理 造出孙子标签 4.在HTML节点中添加 目标 根节点 （节点的顺序一定要书写正确） */ <div id="app"> </div> //创建 孙子 模板 let grendson = { template:"<div>孙子</div>" } //创建 儿子 模板 let son= { template:"儿子孙子" components:{ grendson } } //创建 父亲 模板 let parent = { template:"<div>父亲</div>" components:{ son } } //实例化vm对象 let vm = new Vue({ el:"#app", data:{ }, components:{ parent } });
总结
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
以上就是浅析Vue下的components模板使用及应用的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：浅析Vue下的components模板使用及应用
转载请注明原文链接：浅析Vue下的components模板使用及应用
