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


Posted in Javascript onNovember 27, 2019

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

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

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

(局部方法创造模板)

<div id="app">
<haha></haha>
</div>
/*
这是最简单常用的一种创造模板方法,局部方法创造模板
要注意,局部模板 的作用范围 只在 相对的vue对象 范围内 
比如 这个例子, <haha></haha>的范围 只在 <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">
<hehe></hehe>
</div>
//这里使用Vue.component原型方法来创造
Vue.component(
"hehe",template:"<div>呵呵呵<div>"
);
let vm = new Vue({
el:"#app",
data:{
},
components:{
//这里则不需要添加,因为 互不影响
}
});

其他方法:

<div id="app">
<xixi></xixi>
</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">
<parent></parent>
</div>
//创建 孙子 模板
let grendson = { 
template:"<div>孙子</div>"
}
//创建 儿子 模板
let son= { 
template:"<son>儿子<grendson >孙子</grendson ></son>"
components:{
grendson 
}
}
//创建 父亲 模板
let parent = { 
template:"<div>父亲<son></son></div>"
components:{
son
}
}
//实例化vm对象
let vm = new Vue({
el:"#app",
data:{
},
components:{
parent
}
});

总结

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

Javascript 相关文章推荐
javascript下arguments,caller,callee,call,apply示例及理解
Dec 24 Javascript
Javascript学习笔记1 数据类型
Jan 11 Javascript
来自国外的14个图片放大编辑的jQuery插件整理
Oct 20 Javascript
jquery ui dialog ie8出现滚动条的解决方法
Dec 06 Javascript
struts2+jquery+json实现异步加载数据(自写)
Jun 24 Javascript
jQuery实现等比例缩放大图片让大图片自适应页面布局
Oct 16 Javascript
JS实现表单中checkbox对勾选中增加边框显示效果
Aug 21 Javascript
js小数运算出现多位小数如何解决
Oct 08 Javascript
jQuery过滤选择器用法示例
Sep 12 Javascript
Vue瀑布流插件的使用示例
Sep 19 Javascript
用 js 写一个 js 解释器过程详解
Aug 02 Javascript
js实现微信聊天界面
Aug 09 Javascript
d3.js 地铁轨道交通项目实战
Nov 27 #Javascript
微信小程序表单验证WxValidate的使用
Nov 27 #Javascript
vue(2.x,3.0)配置跨域代理
Nov 27 #Javascript
微信小程序加载机制及运行机制图解
Nov 27 #Javascript
webgl实现物体描边效果的方法介绍
Nov 27 #Javascript
three.js利用卷积法如何实现物体描边效果
Nov 27 #Javascript
Angular8引入百度Echarts进行图表分析的实现代码
Nov 27 #Javascript
You might like
使用zend studio for eclipse不能激活代码提示功能的解决办法
2009/10/11 PHP
php打造智能化的柱状图程序,用于报表等
2015/06/19 PHP
[原创]解决wincache不支持64位PHP5.5/5.6的问题(提供64位wincache下载)
2016/06/22 PHP
PHP脚本自动识别验证码查询汽车违章
2016/12/20 PHP
PHP实现的常规正则验证helper公共类完整实例
2017/04/27 PHP
Windows平台实现PHP连接SQL Server2008的方法
2017/07/26 PHP
PHP实现基本留言板功能原理与步骤详解
2020/03/26 PHP
Javascript控制页面链接在新窗口打开具体方法
2013/08/16 Javascript
利用javascript实现禁用网页上所有文本框,下拉菜单,多行文本域
2013/12/14 Javascript
JQuery性能优化的几点建议
2014/05/14 Javascript
JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码
2015/09/15 Javascript
jquery实现下拉框功能效果【实例代码】
2016/05/06 Javascript
sso跨域写cookie的一段js脚本(推荐)
2016/05/25 Javascript
JS+CSS实现网页加载中的动画效果
2017/10/27 Javascript
利用jquery如何从json中读取数据追加到html中
2017/12/01 jQuery
JS实现十字坐标跟随鼠标效果
2017/12/25 Javascript
React styled-components设置组件属性的方法
2018/08/07 Javascript
Angular2中监听数据更新的方法
2018/08/31 Javascript
Flutter部件内部状态管理小结之实现Vue的v-model功能
2019/06/11 Javascript
JS轮播图的实现方法2
2020/08/25 Javascript
Vant 中的Toast设置全局的延迟时间操作
2020/11/04 Javascript
Python中__call__用法实例
2014/08/29 Python
python利用datetime模块计算时间差
2015/08/04 Python
Python 访问限制 private public的详细介绍
2018/10/16 Python
Python通过kerberos安全认证操作kafka方式
2020/06/06 Python
python使用matplotlib:subplot绘制多个子图的示例
2020/09/24 Python
html5触摸事件判断滑动方向的实现
2018/06/05 HTML / CSS
CK加拿大官网:Calvin Klein加拿大
2020/03/14 全球购物
两道JAVA笔试题
2016/09/14 面试题
乡镇信息公开实施方案
2014/03/23 职场文书
聘用意向书范本
2014/04/01 职场文书
学雷锋活动总结范文
2014/04/25 职场文书
甜品店创业计划书
2014/08/14 职场文书
员工拾金不昧表扬稿
2015/05/05 职场文书
2015年企业员工工作总结范文
2015/05/21 职场文书
2016年端午节寄语
2015/12/04 职场文书