用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 URL参数读取改进版
Jan 16 Javascript
Mootools 1.2教程 定时器和哈希简介
Sep 15 Javascript
JavaScript 面向对象编程(2) 定义类
May 18 Javascript
基于Jquery的跨域传输数据(JSONP)
Mar 10 Javascript
js switch case default 的用法示例介绍
Oct 23 Javascript
关于JavaScript作用域你想知道的一切
Feb 04 Javascript
Bootstrap模态框调用功能实现方法
Sep 19 Javascript
jquery Easyui Datagrid实现批量操作(编辑,删除,添加)
Feb 20 Javascript
基于JS实现移动端左滑删除功能
Jul 28 Javascript
解决vue select当前value没有更新到vue对象属性的问题
Aug 30 Javascript
vue指令之表单控件绑定v-model v-model与v-bind结合使用
Apr 17 Javascript
微信小程序实现消息框弹出动画
Apr 18 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实现字符串翻转的方法
2015/03/27 PHP
PHP 数组基本操作小结(推荐)
2016/06/13 PHP
PHP之图片上传类实例代码(加了缩略图)
2016/06/30 PHP
实例讲解YII2中多表关联的使用方法
2017/07/21 PHP
利用PHPStorm如何开发Laravel应用详解
2017/08/30 PHP
PHP使用phpunit进行单元测试示例
2019/09/23 PHP
tagName的使用,留一笔
2006/06/26 Javascript
javascript YUI 读码日记之 YAHOO.util.Dom - Part.4
2008/03/22 Javascript
javascipt基础内容--需要注意的细节
2013/04/10 Javascript
javascript关于open.window子页面执行完成后刷新父页面的问题分析
2015/04/27 Javascript
简介JavaScript中substring()方法的使用
2015/06/06 Javascript
EditPlus中的正则表达式 实战(4)
2016/12/15 Javascript
JavaScript定时器setTimeout()和setInterval()详解
2017/08/18 Javascript
vue组件开发之用户无限添加自定义填写表单的方法
2018/08/28 Javascript
js中console在一行内打印字符串和对象的方法
2019/09/10 Javascript
JavaScript实现拖拽和缩放效果
2020/08/24 Javascript
[01:32:22]DOTA2-DPC中国联赛 正赛 Ehome vs VG BO3 第一场 2月5日
2021/03/11 DOTA
python BeautifulSoup使用方法详解
2013/11/21 Python
Python基类函数的重载与调用实例分析
2015/01/12 Python
python读取csv文件并把文件放入一个list中的实例讲解
2018/04/27 Python
Python中的单下划线和双下划线使用场景详解
2019/09/09 Python
Python帮你识破双11的套路
2019/11/11 Python
让Django的BooleanField支持字符串形式的输入方式
2020/05/20 Python
详解Flask前后端分离项目案例
2020/07/24 Python
详解利用python识别图片中的条码(pyzbar)及条码图片矫正和增强
2020/11/17 Python
html5自定义video标签的海报与播放按钮功能
2019/12/04 HTML / CSS
创业计划书模版
2014/02/05 职场文书
软件售后服务承诺书
2014/05/21 职场文书
文明城市创建标语
2014/06/16 职场文书
大学生交通专业求职信
2014/09/01 职场文书
2014党员干部四风问题对照检查材料思想汇报
2014/09/24 职场文书
群众路线党员个人剖析材料
2014/10/08 职场文书
初中中等生评语
2014/12/29 职场文书
单位计划生育责任书
2015/05/09 职场文书
教师思想工作总结2015
2015/05/13 职场文书
讲解Python实例练习逆序输出字符串
2022/05/06 Python