用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 相关文章推荐
采用CSS和JS,刚好我最近有个站点要用到下拉菜单!
Jun 26 Javascript
推荐JavaScript实现继承的最佳方式
Nov 11 Javascript
AngularJS入门教程(一):静态模板
Dec 06 Javascript
浅谈javascript获取元素transform参数
Jul 24 Javascript
JavaScript_ECMA5数组新特性详解
Jun 12 Javascript
jQuery实现打开页面渐现效果示例
Jul 27 Javascript
BootStrap使用file-input插件上传图片的方法
Sep 05 Javascript
jQuery Mobile和HTML5开发App推广注册页
Nov 07 Javascript
BootStrap实现带关闭按钮功能
Feb 15 Javascript
vue实现购物车抛物线小球动画效果的方法详解
Feb 13 Javascript
Vue数字输入框组件示例代码详解
Jan 15 Javascript
微信小程序实现弹幕墙(祝福墙)
Nov 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 输出缓存详解
2009/06/20 PHP
php中判断文件存在是用file_exists还是is_file的整理
2012/09/12 PHP
慎用preg_replace危险的/e修饰符(一句话后门常用)
2013/06/19 PHP
php预定义变量使用帮助(带实例)
2013/10/30 PHP
php删除数组元素示例分享
2014/02/17 PHP
Yii2实现上下联动下拉框功能的方法
2016/08/10 PHP
Zend Framework入门教程之Zend_Mail用法示例
2016/12/08 PHP
jquery easyui中treegrid用法的简单实例
2014/02/18 Javascript
jQuery在ul中显示某个li索引号的方法
2015/03/17 Javascript
深入浅析AngularJS和DataModel
2016/02/16 Javascript
详解Vue.js——60分钟组件快速入门(上篇)
2016/12/05 Javascript
移动端日期插件Mobiscroll.js使用详解
2016/12/19 Javascript
React.js中常用的ES6写法总结(推荐)
2017/05/09 Javascript
JavaScript实现职责链模式概述
2018/01/25 Javascript
搭建基于express框架运行环境的方法步骤
2018/11/15 Javascript
详解关闭令人抓狂的ESlint 语法检测配置方法
2019/10/28 Javascript
js实现旋转的星空效果
2019/11/01 Javascript
关于vue3.0中的this.$router.replace({ path: '/'})刷新无效果问题
2020/01/16 Javascript
vue data变量相互赋值后被实时同步的解决步骤
2020/08/05 Javascript
[01:25:09]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第二场
2014/05/24 DOTA
[05:26]TI10典藏宝瓶套装外观展示
2020/07/03 DOTA
Python单链表的简单实现方法
2014/09/23 Python
python自定义异常实例详解
2017/07/11 Python
Python 从列表中取值和取索引的方法
2018/12/25 Python
Python 使用folium绘制leaflet地图的实现方法
2019/07/05 Python
Python一行代码解决矩阵旋转的问题
2019/11/30 Python
英国马莎百货印度官网:Marks & Spencer印度
2020/10/08 全球购物
OLEDBConnection和SQLConnection有什么区别
2013/05/31 面试题
口腔工艺技术专业毕业生自荐信
2013/09/27 职场文书
公司出纳岗位职责
2013/12/07 职场文书
经典婚礼主持开场白
2014/03/13 职场文书
校运动会广播稿(100篇)
2014/09/12 职场文书
2014光棍节大学生联谊活动方案
2014/10/10 职场文书
2019职场实习报告该怎么写?
2019/07/01 职场文书
python文件目录操作之os模块
2021/05/08 Python
梳理总结Python开发中需要摒弃的18个坏习惯
2022/01/22 Python