用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实现图片等比例缩放以及max-width在ie中不兼容解决
Mar 21 Javascript
基于jquery实现的定时显示与隐藏div广告的实现代码
Aug 22 Javascript
用jquery仿做发微博功能示例
Apr 18 Javascript
javascript学习笔记(八)正则表达式
Oct 08 Javascript
Javascript中arguments对象详解
Oct 22 Javascript
node.js中的emitter.on方法使用说明
Dec 10 Javascript
原生JavaScript实现todolist功能
Mar 02 Javascript
微信小程序开发的基本流程步骤
Jan 31 Javascript
小程序获取当前位置加搜索附近热门小区及商区的方法
Apr 08 Javascript
vue store之状态管理模式的详细介绍
Jun 13 Javascript
vue中watch和computed为什么能监听到数据的改变以及不同之处
Dec 27 Javascript
详细分析vue响应式原理
Jun 22 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
一些 PHP 管理系统程序中的后门
2009/08/05 PHP
PHP gbk环境下json_dencode传送来的汉字
2012/11/13 PHP
PHP中的魔术方法总结和使用实例
2015/05/11 PHP
教你在header中隐藏php的版本信息
2016/08/10 PHP
php利用ffmpeg提取视频中音频与视频画面的方法详解
2017/06/07 PHP
Laravel5.5+ 使用API Resources快速输出自定义JSON方法详解
2020/04/06 PHP
Javascript技术技巧大全(五)
2007/01/22 Javascript
jQuery中filter(),not(),split()使用方法
2010/07/06 Javascript
举例讲解AngularJS中的模块
2015/06/17 Javascript
jQuery实现带分组数据的Table表头排序实例分析
2015/11/24 Javascript
使用bootstrap插件实现模态框效果
2017/05/10 Javascript
React Native 图片查看组件的方法
2018/03/01 Javascript
JS猜数字游戏实例讲解
2020/06/30 Javascript
[33:33]完美世界DOTA2联赛PWL S2 FTD.C vs SZ 第二场 11.27
2020/11/30 DOTA
在Python中处理日期和时间的基本知识点整理汇总
2015/05/22 Python
Django中模型Model添加JSON类型字段的方法
2015/06/17 Python
python获取文件扩展名的方法
2015/07/06 Python
Python黑魔法Descriptor描述符的实例解析
2016/06/02 Python
尝试用最短的Python代码来实现服务器和代理服务器
2016/06/23 Python
python算法演练_One Rule 算法(详解)
2017/05/17 Python
Python加密方法小结【md5,base64,sha1】
2017/07/13 Python
python实现比较文件内容异同
2018/06/22 Python
Python3爬虫爬取百姓网列表并保存为json功能示例【基于request、lxml和json模块】
2018/12/05 Python
python多线程下信号处理程序示例
2019/05/31 Python
scikit-learn线性回归,多元回归,多项式回归的实现
2019/08/29 Python
python银行系统实现源码
2019/10/25 Python
TensorFlow2.0使用keras训练模型的实现
2021/02/20 Python
HTML5 Canvas的常用线条属性值总结
2016/03/17 HTML / CSS
加拿大奢华时装品牌:Mackage
2018/01/10 全球购物
巴黎卡诗加拿大官网:Kérastase加拿大
2018/11/12 全球购物
英国鲜花递送:Blossoming Gifts
2020/07/10 全球购物
社区学习十八大感想
2014/01/22 职场文书
中学生旷课检讨书模板
2014/10/08 职场文书
2014年质量管理工作总结
2014/12/01 职场文书
银行优秀员工推荐信
2015/03/24 职场文书
一文了解MYSQL三大范式和表约束
2022/04/03 MySQL