用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中匿名函数,函数直接量和闭包
May 08 Javascript
defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx,操作被中止”错误的解决方法
Apr 27 Javascript
Javascript 颜色渐变效果的实现代码
Oct 01 Javascript
JavaScript中的单引号和双引号报错的解决方法
Sep 01 Javascript
jquery实现的代替传统checkbox样式插件
Jun 19 Javascript
js倒计时小实例(多次定时)
Dec 08 Javascript
微信小程序 支付功能开发错误总结
Feb 21 Javascript
VUE开发一个图片轮播的组件示例代码
Mar 06 Javascript
详解Angular5 服务端渲染实战
Jan 04 Javascript
VuePress 快速踩坑小结
Feb 14 Javascript
js中的this的指向问题详解
Aug 29 Javascript
Layui表格行工具事件与数据回填方法
Sep 13 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递归获取目录内文件(包含子目录)封装类分享
2013/12/25 PHP
php格式文件打开的四种方法
2018/02/24 PHP
js身份证验证超强脚本
2008/10/26 Javascript
JAVASCRIPT实现的WEB页面跳转以及页面间传值方法
2010/05/13 Javascript
jquery入门—数据删除与隔行变色以及图片预览
2013/01/07 Javascript
关于textarea提交的内容无法换行的解决办法
2013/04/09 Javascript
JavaScript中setAttribute用法介绍
2013/07/20 Javascript
基于jQuery通过jQuery.form.js插件使用ajax提交form表单
2015/08/17 Javascript
js实现新年倒计时效果
2015/12/10 Javascript
jQuery实现div拖拽效果实例分析
2016/02/20 Javascript
jqGrid 学习笔记整理——进阶篇(一 )
2016/04/17 Javascript
ES6概念 Symbol toString()方法
2016/12/25 Javascript
jquery鼠标悬停导航下划线滑出效果
2017/09/29 jQuery
JS前端知识点offset,scroll,client,冒泡,事件对象的应用整理总结
2019/06/27 Javascript
Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解
2020/04/29 Javascript
[01:04]DOTA2:伟大的Roshan雕塑震撼来临
2015/01/30 DOTA
Python交换变量
2008/09/06 Python
Python对文件操作知识汇总
2016/05/15 Python
python实现遍历文件夹修改文件后缀
2018/08/28 Python
Python在图片中插入大量文字并且自动换行
2019/01/02 Python
pip安装python库的方法总结
2019/08/02 Python
Pycharm+django2.2+python3.6+MySQL实现简单的考试报名系统
2019/09/05 Python
TensorFlow实现自定义Op方式
2020/02/04 Python
Python实现获取当前目录下文件名代码详解
2020/03/10 Python
解决python3输入的坑——input()
2020/12/05 Python
Autopep8的使用(python自动编排工具)
2021/03/02 Python
HTML5 input新增type属性color颜色拾取器的实例代码
2018/08/27 HTML / CSS
英国领先的家庭时尚品牌:Peacocks
2018/01/11 全球购物
阿联酋网上花店:Ferns N Petals
2018/02/14 全球购物
学生励志演讲稿
2014/01/06 职场文书
仓管员岗位职责范本
2015/04/01 职场文书
JPA如何使用entityManager执行SQL并指定返回类型
2021/06/15 Java/Android
能用CSS实现的就不要麻烦JavaScript了
2021/10/05 HTML / CSS
Windows11插耳机没反应怎么办? win11耳机没声音的多种解决办法
2021/11/21 数码科技
一篇文章告诉你如何实现Vue前端分页和后端分页
2022/02/18 Vue.js
MySQL数据库Innodb 引擎实现mvcc锁
2022/05/06 MySQL