用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 插件学习(六)
Aug 06 Javascript
JavaScript将相对地址转换为绝对地址示例代码
Jul 19 Javascript
三种取消选中单选框radio的方法
Sep 09 Javascript
node.js中使用q.js实现api的promise化
Sep 17 Javascript
JavaScript中的toDateString()方法使用详解
Jun 12 Javascript
浅析JavaScript中命名空间namespace模式
Jun 22 Javascript
js创建数组的简单方法
Jul 27 Javascript
Vue.js实现价格计算器功能
Mar 30 Javascript
JavaScript中AOP的实现与应用
May 06 Javascript
Vue+element 解决浏览器自动填充记住的账号密码问题
Jun 11 Javascript
JavaScript类的继承多种实现方法
May 30 Javascript
JavaScript流程控制(循环)
Dec 06 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
ThinkPHP独立分组使用的注意事项
2014/11/25 PHP
php可应用于面包屑导航的递归寻找家谱树实现方法
2015/02/02 PHP
php数组冒泡排序算法实例
2016/05/06 PHP
PHP简单数据库操作类实例【支持增删改查及链式操作】
2016/10/10 PHP
form自动提交实例讲解
2017/07/10 PHP
读jQuery之二(两种扩展)
2011/06/11 Javascript
javascipt基础内容--需要注意的细节
2013/04/10 Javascript
javascript中使用正则计算中文长度的例子
2014/04/29 Javascript
js实现商品抛物线加入购物车特效
2020/11/18 Javascript
ionic js 模型 $ionicModal 可以遮住用户主界面的内容框
2016/06/06 Javascript
浅谈jQuery为哪般去掉了浏览器检测
2016/08/29 Javascript
微信小程序实战之自定义抽屉菜单(7)
2017/04/18 Javascript
Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)
2017/09/14 Javascript
Vue+webpack项目基础配置教程
2018/02/12 Javascript
浅谈Angular7 项目开发总结
2018/12/19 Javascript
ES6基础之字符串和函数的拓展详解
2019/08/22 Javascript
Python多线程爬虫简单示例
2016/03/04 Python
Django项目实战之用户头像上传与访问的示例
2018/04/21 Python
Python设计模式之简单工厂模式实例详解
2019/01/22 Python
python版DDOS攻击脚本
2019/06/12 Python
使用python 写一个静态服务(实战)
2019/06/28 Python
python 元组的使用方法
2020/06/09 Python
python制作微博图片爬取工具
2021/01/16 Python
canvas实现飞机打怪兽射击小游戏的示例代码
2018/07/09 HTML / CSS
DJI大疆无人机官方商城:全球领先的无人飞行器研发和生产商
2016/12/21 全球购物
美国球鞋寄卖网站:Stadium Goods
2018/05/09 全球购物
ZINVO手表官网:男士和女士手表
2019/03/10 全球购物
Hotels.com泰国:酒店预订网站
2019/11/20 全球购物
林肯就职演讲稿
2014/05/19 职场文书
施工安全生产承诺书
2014/05/23 职场文书
就业意向书
2014/07/29 职场文书
奥巴马上海演讲稿
2014/09/10 职场文书
法人身份证明书
2015/06/18 职场文书
财务人员入职担保书
2015/09/22 职场文书
2019职场实习报告该怎么写?
2019/07/01 职场文书
Python学习之时间包使用教程详解
2022/03/21 Python