浅析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 相关文章推荐
Expandable &quot;Detail&quot; Table Rows
Aug 29 Javascript
Javascript 自定义类型方法小结
Mar 02 Javascript
$.ajax返回的JSON无法执行success的解决方法
Sep 09 Javascript
JavaScript变量声明详解
Nov 27 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
Dec 08 Javascript
js自制图片放大镜功能
Jan 24 Javascript
纯js模仿windows系统日历
Feb 04 Javascript
BootStrap实现鼠标悬停下拉列表功能
Feb 17 Javascript
node安装--linux下的快速安装教程
Mar 21 Javascript
详解SPA中前端路由基本原理与实现方式
Sep 12 Javascript
小程序和web画三角形实现解析
Sep 02 Javascript
实例讲解React 组件
Jul 07 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
php生成缩略图示例代码分享(使用gd库实现)
2014/01/20 PHP
php从给定url获取文件扩展名的方法
2015/03/14 PHP
PHP中使用array函数新建一个数组
2015/11/19 PHP
PHP下SSL加密解密、验证、签名方法(很简单)
2020/06/28 PHP
Yii2使用swiftmailer发送邮件的方法
2016/05/03 PHP
PHP list() 将数组中的值赋给变量的简单实例
2016/06/13 PHP
PHP实现的只保留字符串首尾字符功能示例【隐藏部分字符串】
2019/03/11 PHP
通过PHP实现用户注册后邮箱验证激活
2020/11/10 PHP
javascript onkeydown,onkeyup,onkeypress,onclick,ondblclick
2009/02/04 Javascript
jQuery 性能优化指南 (1)
2009/05/21 Javascript
js 蒙版进度条(结合图片)
2010/03/10 Javascript
html中使用javascript调用本地程序(exe、doc等)实现代码
2013/04/26 Javascript
JavaScript省市级联下拉菜单实例
2017/02/14 Javascript
分享一个精简的vue.js 图片lazyload插件实例
2017/03/13 Javascript
微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
2017/08/16 Javascript
js+canvas实现滑动拼图验证码功能
2018/03/26 Javascript
vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析
2019/03/11 Javascript
小程序实现搜索界面 小程序实现推荐搜索列表效果
2019/05/18 Javascript
JS数组方法reduce的用法实例分析
2020/03/03 Javascript
vue项目在webpack2实现移动端字体自适配功能
2020/06/02 Javascript
Vue封装全局过滤器Filters的步骤
2020/09/16 Javascript
vue实现图书管理系统
2020/12/29 Vue.js
[36:52]DOTA2真视界:基辅特锦赛总决赛
2017/05/21 DOTA
[03:55]TI9战队采访——TNC Predator
2019/08/22 DOTA
python赋值操作方法分享
2013/03/23 Python
python多线程之事件Event的使用详解
2018/04/27 Python
Numpy中矩阵matrix读取一列的方法及数组和矩阵的相互转换实例
2018/07/02 Python
Python版中国省市经纬度
2020/02/11 Python
可视化pytorch 模型中不同BN层的running mean曲线实例
2020/06/24 Python
我想声明一个指针并为它分配一些空间, 但却不行。这些代码有什么 问题?char *p; *p = malloc(10);
2016/10/06 面试题
2014年四风个人对照检查及整改措施
2014/10/28 职场文书
学生评语集锦
2015/01/04 职场文书
电影小兵张嘎观后感
2015/06/03 职场文书
护士爱岗敬业心得体会
2016/01/25 职场文书
2016年幼儿园万圣节活动总结
2016/04/05 职场文书
餐厅开业活动方案
2019/07/08 职场文书