用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 指导方针
Apr 05 Javascript
有一段有意思的代码-javascript现实多行信息
Aug 26 Javascript
Javascript 原型和继承(Prototypes and Inheritance)
Apr 01 Javascript
JS和jquery获取各种屏幕的宽度和高度的代码
Aug 02 Javascript
Ajax局部更新导致JS事件重复触发问题的解决方法
Oct 14 Javascript
javascript常用的方法分享
Jul 01 Javascript
webpack 2.x配置reactjs基本开发环境详解
Aug 08 Javascript
vue 源码解析之虚拟Dom-render
Aug 26 Javascript
js实现自动播放匀速轮播图
Feb 06 Javascript
vue项目查看vue版本及cli版本的实现方式
Oct 24 Javascript
JS 基本概念详细介绍
Oct 16 Javascript
JS精髓原型链继承及构造函数继承问题纠正
Jun 16 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下判断网址是否有效的代码
2011/10/08 PHP
JS中简单的实现像C#中using功能(有源码下载)
2007/01/09 Javascript
用js实现层随着内容大小动态渐变改变 推荐
2009/12/19 Javascript
JavaScript实现简单的时钟实例代码
2013/11/23 Javascript
js倒计时简单实现方法
2015/12/17 Javascript
浅谈js基本数据类型和typeof
2016/08/09 Javascript
jQuery dataTables与jQuery UI 对话框dialog的使用教程
2016/09/02 Javascript
JS高仿抛物线加入购物车特效实现代码
2017/02/20 Javascript
js中的触发事件对象event.srcElement与event.target详解
2017/03/15 Javascript
如何通过非数字与字符的方式实现PHP WebShell详解
2017/07/02 Javascript
jquery操作ul的一些操作笔记整理(干货)
2017/08/31 jQuery
JS脚本实现网页自动秒杀点击
2018/01/11 Javascript
angular写一个列表的选择全选交互组件的示例
2018/01/22 Javascript
Angular 数据请求的实现方法
2018/05/07 Javascript
vue动态删除从数据库倒入列表的某一条方法
2018/09/29 Javascript
详解javascript 变量提升(Hoisting)
2019/03/12 Javascript
Object.keys() 和 Object.getOwnPropertyNames() 的区别详解
2020/05/21 Javascript
[02:25]DOTA2英雄基础教程 熊战士
2014/01/03 DOTA
[01:32]2016国际邀请赛中国区预选赛IG战队首日赛后采访
2016/06/27 DOTA
使用Python程序抓取新浪在国内的所有IP的教程
2015/05/04 Python
Python实现代码统计工具(终极篇)
2016/07/04 Python
Python多继承顺序实例分析
2018/05/26 Python
使用tensorflow实现线性svm
2018/09/07 Python
Django框架orM与自定义SQL语句混合事务控制操作
2019/06/27 Python
连接pandas以及数组转pandas的方法
2019/06/28 Python
可视化pytorch 模型中不同BN层的running mean曲线实例
2020/06/24 Python
CSS3实现swap交换动画
2016/01/19 HTML / CSS
使用HTML5捕捉音频与视频信息概述及实例
2018/08/22 HTML / CSS
财经学院自荐信范文
2014/02/02 职场文书
主要负责人任命书
2014/06/06 职场文书
制冷与空调专业毕业生推荐信
2014/07/07 职场文书
小学毕业典礼演讲稿
2014/09/09 职场文书
毕业生代领毕业材料的授权委托书
2014/09/29 职场文书
《分一些蚊子进来》读后感3篇
2020/01/09 职场文书
解决golang在import自己的包报错的问题
2021/04/29 Golang
Nginx配置使用详解
2022/07/07 Servers