用Vue.js方法创建模板并使用多个模板合成


Posted in Javascript onJune 28, 2019

在vue.js定义模板时,可以定义多个模板,然后在components组件中调用模板,显示在界面上,注意components后面是一个对象,而不是数组。下面利用实例说明,操作如下:

用Vue.js方法创建模板并使用多个模板合成

第一步,在HBuilderX设计工具中,在指定的文件目录下新建一个静态页面,并引入vue.js核心文件,如下图所示:

用Vue.js方法创建模板并使用多个模板合成

第二步,在<body></body>标签内,插入一个div标签,并设置对应的ID属性,如下图所示:

用Vue.js方法创建模板并使用多个模板合成

第三步,接着在div标签中插入一个script标签,定义三个模板User、Student和Teacher,如下图所示:

用Vue.js方法创建模板并使用多个模板合成

第四步,使用vue.js对象实例化,添加一个el挂载节点,再添加一个components,如下图所示:

用Vue.js方法创建模板并使用多个模板合成

第五步,保存代码并打开浏览器控制台,结果出现了报错,components后面不能是数组,如下图所示:

用Vue.js方法创建模板并使用多个模板合成

第六步,返回到HBuilderX工具,修改components后面的对象,使用大括号,如下图所示:

用Vue.js方法创建模板并使用多个模板合成

总结:以上就是关于用Vue.js方法创建模板并使用多个模板合成的全部知识点,感谢大家的阅读和对三水点靠木的支持。

Javascript 相关文章推荐
了解了这些才能开始发挥jQuery的威力
Oct 10 Javascript
详解jQuery插件开发中的extend方法
Nov 19 Javascript
js获取日期:昨天今天和明天、后天
Jun 11 Javascript
js调试系列 控制台命令行API使用方法
Jun 18 Javascript
JavaScript+CSS无限极分类效果完整实现方法
Dec 22 Javascript
最常见和最有用的字符串相关的方法详解
Feb 06 Javascript
webpack学习笔记之优化缓存、合并、懒加载
Aug 24 Javascript
Vue.js移动端左滑删除组件的实现代码
Sep 08 Javascript
vue之浏览器存储方法封装实例
Mar 15 Javascript
jstree中的checkbox默认选中和隐藏示例代码
Dec 29 Javascript
Node.js fs模块原理及常见用途
Oct 22 Javascript
JS前端使用canvas实现物体的点选示例
Aug 05 Javascript
js实现随机数小游戏
Jun 28 #Javascript
Node爬取大批量文件的方法示例
Jun 28 #Javascript
JavaScript实现单英文金山打字通
Jul 24 #Javascript
javascript实现导航栏分页效果
Jun 27 #Javascript
编写更好的JavaScript条件式和匹配条件的技巧(小结)
Jun 27 #Javascript
原生js实现抽奖小游戏
Jun 27 #Javascript
JavaScript实现图片放大镜效果
Jun 27 #Javascript
You might like
删除无限级目录与文件代码共享
2006/07/12 PHP
php读取mysql的简单实例
2014/01/15 PHP
PHP回调函数与匿名函数实例详解
2017/08/16 PHP
PHP实现的AES 128位加密算法示例
2019/09/16 PHP
javascript生成/解析dom的CDATA类型的字段的代码
2007/04/22 Javascript
JAVASCRIPT  THIS详解 面向对象
2009/03/25 Javascript
js String对象中常用方法小结(字符串操作)
2012/01/27 Javascript
jquery中show()、hide()和toggle()用法实例
2015/01/15 Javascript
jquery中关于bind()方法的使用技巧分享
2017/03/30 jQuery
VUE中v-model和v-for指令详解
2017/06/23 Javascript
JS中type=&quot;button&quot;和type=&quot;submit&quot;的区别
2017/07/04 Javascript
vue的一个分页组件的示例代码
2017/12/25 Javascript
js中getBoundingClientRect的作用及兼容方案详解
2018/02/01 Javascript
微信小程序项目总结之点赞 删除列表 分享功能
2018/06/25 Javascript
Vue源码解析之Template转化为AST的实现方法
2018/12/14 Javascript
JavaScript实现与使用发布/订阅模式详解
2019/01/19 Javascript
详解小程序之简单登录注册表单验证
2019/05/13 Javascript
详解JavaScript中的Object.is()与&quot;===&quot;运算符总结
2020/06/17 Javascript
[55:47]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第三局
2016/02/27 DOTA
[46:42]DOTA2-DPC中国联赛正赛 Aster vs Magma BO3 第二场 3月5日
2021/03/11 DOTA
详解Python中的正则表达式的用法
2015/04/09 Python
详解Python之unittest单元测试代码
2018/01/24 Python
python unittest实现api自动化测试
2018/04/04 Python
python 把文件中的每一行以数组的元素放入数组中的方法
2018/04/29 Python
利用python实现汉字转拼音的2种方法
2019/08/12 Python
python解释器spython使用及原理解析
2019/08/24 Python
Python新手学习函数默认参数设置
2020/06/03 Python
安装pyinstaller遇到的各种问题(小结)
2020/11/20 Python
专升本自我鉴定
2013/10/10 职场文书
保护环境标语
2014/06/09 职场文书
学校法制宣传月活动总结
2014/07/03 职场文书
建筑学专业自荐书
2014/07/09 职场文书
12.4法制宣传日活动总结
2014/08/26 职场文书
法定代表人授权委托书范文
2014/09/22 职场文书
写一个Python脚本自动爬取Bilibili小视频
2021/04/24 Python
浅谈CSS不规则边框的生成方案
2021/05/25 HTML / CSS