用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.fn自定义jQuery翻页插件
Jan 20 Javascript
JavaScript 命名空间 使用介绍
Aug 29 Javascript
一个js导致的jquery失效问题的解决方法
Nov 27 Javascript
node.js中的fs.writeFileSync方法使用说明
Dec 14 Javascript
Nginx上传文件全部缓存解决方案
Aug 17 Javascript
详解AngularJS中的filter过滤器用法
Jan 04 Javascript
浅谈JSON.stringify()和JOSN.parse()方法的不同
Aug 29 Javascript
微信小程序开发教程-手势解锁实例
Jan 06 Javascript
Angular4学习笔记之准备和环境搭建项目
Aug 01 Javascript
JavaScript创建对象方法实例小结
Sep 03 Javascript
30分钟用Node.js构建一个API服务器的步骤详解
May 24 Javascript
Openlayers测量距离与面积的实现方法
Sep 25 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
使用bcompiler对PHP文件进行加密的代码
2010/08/29 PHP
PHP的password_hash()使用实例
2014/03/17 PHP
php实现用于删除整个目录的递归函数
2015/03/16 PHP
php文件上传 你真的掌握了吗
2016/11/28 PHP
Laravel如何使用Redis共享Session
2018/02/23 PHP
一个对于js this关键字的问题
2007/01/09 Javascript
js 调整select 位置的函数
2008/02/21 Javascript
extjs form textfield的隐藏方法
2008/12/29 Javascript
Egret引擎开发指南之创建项目
2014/09/03 Javascript
一个JavaScript递归实现反转数组字符串的实例
2014/10/14 Javascript
AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法
2017/01/04 Javascript
详解nodejs微信公众号开发——3.封装消息响应模块
2017/04/10 NodeJs
JS实现微信里判断页面是否被分享成功的方法
2017/06/06 Javascript
基于JavaScript实现前端数据多条件筛选功能
2020/08/19 Javascript
vue实现提示保存后退出的方法
2018/03/15 Javascript
vue axios数据请求get、post方法及实例详解
2018/09/11 Javascript
vue.js的vue-cli脚手架中使用百度地图API的实例
2019/01/21 Javascript
Vue.js递归组件实现组织架构树和选人功能
2019/07/04 Javascript
JavaScript快速调试的两个技巧
2020/11/04 Javascript
JS实现公告上线滚动效果
2021/01/10 Javascript
python中argparse模块用法实例详解
2015/06/03 Python
PyCharm代码格式调整方法
2018/05/23 Python
解决Pycharm出现的部分快捷键无效问题
2018/10/22 Python
python批量处理文件或文件夹
2020/07/28 Python
python中栈的原理及实现方法示例
2019/11/27 Python
python实现修改固定模式的字符串内容操作示例
2019/12/30 Python
python实现在线翻译功能
2020/03/03 Python
详解css3 object-fit属性
2018/07/27 HTML / CSS
美国最大的城市服装和运动鞋零售商:Jimmy Jazz
2016/11/19 全球购物
Java中实现多态的机制
2015/08/09 面试题
学前班幼儿评语大全
2014/12/29 职场文书
中学教师个人总结
2015/02/10 职场文书
2015年项目经理工作总结
2015/04/30 职场文书
毕业生入职感言
2015/07/31 职场文书
2015年教师节广播稿
2015/08/19 职场文书
Golang MatrixOne使用介绍和汇编语法
2022/04/19 Golang