用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 相关文章推荐
js类后台管理菜单类-MenuSwitch
Sep 12 Javascript
jQuery简单tab切换效果实现方法
Apr 08 Javascript
JavaScript获取指定元素位置的方法
Apr 08 Javascript
使用jQuery调用XML实现无刷新即时聊天
Aug 07 Javascript
javascript 数组去重复(在线去重工具)
Dec 17 Javascript
基于vue2.0+vuex+localStorage开发的本地记事本示例
Feb 28 Javascript
Angular.Js中过滤器filter与自定义过滤器filter实例详解
May 08 Javascript
JavaScript模拟文件拖选框样式v1.0的实例
Aug 04 Javascript
微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析
May 03 Javascript
layui 动态设置checbox 选中状态的例子
Sep 02 Javascript
vue 解决uglifyjs-webpack-plugin打包出现报错的问题
Aug 04 Javascript
Ant Design的可编辑Tree的实现操作
Oct 31 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
zf框架db类的分页示例分享
2014/03/14 PHP
PHP lcfirst()函数定义与用法
2019/03/08 PHP
TP3.2.3框架使用CKeditor编辑器在页面中上传图片的方法分析
2019/12/31 PHP
用js+xml自动生成表格的东西
2006/12/21 Javascript
返回对象在当前级别中是第几个元素的实现代码
2011/01/20 Javascript
js设置function参数默认值(适合没有传参情况)
2014/02/24 Javascript
用jquery的方法制作一个简单的导航栏
2014/06/23 Javascript
原生JS和jQuery版实现文件上传功能
2016/04/18 Javascript
jQuery利用sort对DOM元素进行排序操作
2016/11/07 Javascript
AngularJS使用ocLazyLoad实现js延迟加载
2017/07/05 Javascript
vue页面使用阿里oss上传功能的实例(二)
2017/08/09 Javascript
浅谈React深度编程之受控组件与非受控组件
2017/12/26 Javascript
Vue无限滑动周选择日期的组件的示例代码
2018/07/18 Javascript
nodejs require js文件入口,在package.json中指定默认入口main方法
2018/10/10 NodeJs
微信小程序解除10个请求并发限制
2018/12/18 Javascript
你或许不知道的一些npm实用技巧
2019/07/04 Javascript
js遍历详解(forEach, map, for, for...in, for...of)
2019/08/28 Javascript
Openlayers绘制地图标注
2020/09/28 Javascript
uniapp实现可以左右滑动导航栏
2020/10/21 Javascript
用Python的Tornado框架结合memcached页面改善博客性能
2015/04/24 Python
wxPython中listbox用法实例详解
2015/06/01 Python
Python 基于Twisted框架的文件夹网络传输源码
2016/08/28 Python
python实现植物大战僵尸游戏实例代码
2019/06/10 Python
python 应用之Pycharm 新建模板默认添加编码格式-作者-时间等信息【推荐】
2019/06/17 Python
django admin.py 外键,反向查询的实例
2019/07/26 Python
python实现取余操作的简单实例
2020/08/16 Python
AmazeUI 图标的示例代码
2020/08/13 HTML / CSS
Omio法国:全欧洲低价大巴、火车和航班搜索和比价
2017/11/13 全球购物
高级文秘工作总结的自我评价
2013/09/28 职场文书
广播电视新闻学专业应届生求职信
2013/10/08 职场文书
初三学习决心书
2014/03/11 职场文书
贷款委托书
2014/08/01 职场文书
上课迟到检讨书300字
2014/10/15 职场文书
Python实现查询剪贴板自动匹配信息的思路详解
2021/07/09 Python
java objectUtils 使用可能会出现的问题
2022/02/28 Java/Android
python实现手机推送 代码也就10行左右
2022/04/12 Python