用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 相关文章推荐
JavaScript CSS 修改学习第四章 透明度设置
Feb 19 Javascript
js获取php变量的实现代码
Aug 10 Javascript
js中关于一个分号的崩溃示例
Nov 11 Javascript
bootstrap中使用google prettify让代码高亮的方法
Oct 21 Javascript
原生js轮播特效
May 18 Javascript
jQuery plugin animsition使用小结
Sep 14 jQuery
浅谈webpack编译vue项目生成的代码探索
Dec 11 Javascript
浅谈vue中.vue文件解析流程
Apr 24 Javascript
微信小程序自定义底部导航带跳转功能
Nov 27 Javascript
JS实现获取当前所在周的周六、周日示例分析
May 11 Javascript
jQuery treeview树形结构应用
Mar 24 jQuery
JavaScript中时间格式化新思路toLocaleString()
Nov 07 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
利用discuz实现PHP大文件上传应用实例代码
2008/11/14 PHP
PHP字符串函数系列之nl2br(),在字符串中的每个新行 (\n) 之前插入 HTML 换行符br
2011/11/10 PHP
Date对象格式化函数代码
2010/07/17 Javascript
jQuery对表单元素的取值和赋值操作代码
2011/05/19 Javascript
JavaScript高级程序设计(第3版)学习笔记5 js语句
2012/10/11 Javascript
JS保存、读取、换行、转Json报错处理方法
2013/06/14 Javascript
JavaScript返回网页中锚点数目的方法
2015/04/03 Javascript
轻量级javascript 框架Backbone使用指南
2015/07/24 Javascript
jquery解析json格式数据的方法(对象、字符串)
2015/11/24 Javascript
微信小程序使用第三方库Immutable.js实例详解
2016/09/27 Javascript
bootstrap快速制作后台界面
2016/12/05 Javascript
jquery.flot.js简单绘制折线图用法示例
2017/03/13 Javascript
详解AngularJS 路由 resolve用法
2017/04/24 Javascript
js实现鼠标移动到图片产生遮罩效果
2017/10/21 Javascript
Angular 4.x+Ionic3踩坑之Ionic 3.x界面传值详解
2018/03/13 Javascript
Vue.js递归组件实现组织架构树和选人功能案例分析
2019/07/03 Javascript
[01:06:32]DOTA2上海特级锦标赛D组资格赛#1 EG VS VP第一局
2016/02/28 DOTA
[44:10]2018DOTA2亚洲邀请赛 4.5 淘汰赛 EG vs VP 第一场
2018/04/06 DOTA
Python使用Matplotlib实现Logos设计代码
2017/12/25 Python
Win7 64位下python3.6.5安装配置图文教程
2020/10/27 Python
python中的turtle库函数简单使用教程
2018/07/23 Python
python 将list转成字符串,中间用符号分隔的方法
2018/10/23 Python
Python 保存矩阵为Excel的实现方法
2019/01/28 Python
python代码实现TSNE降维数据可视化教程
2020/02/28 Python
pandas将list数据拆分成行或列的实现
2020/12/13 Python
荷兰手表网站:Watch2Day
2018/07/02 全球购物
德国高端单身人士交友网站:ElitePartner
2018/12/02 全球购物
高中微机老师自我鉴定
2014/02/16 职场文书
《石榴》教学反思
2014/03/02 职场文书
品牌推广活动策划方案
2014/08/19 职场文书
批评与自我批评范文
2014/10/15 职场文书
2014年财政局工作总结
2014/12/09 职场文书
2015公务员试用期工作总结
2014/12/12 职场文书
第一军规观后感
2015/06/12 职场文书
python关于集合的知识案例详解
2021/05/30 Python
漫画「古见同学有交流障碍症」第25卷封面公开
2022/03/21 日漫