用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文件缓存的代码
Apr 09 Javascript
微信js-sdk界面操作接口用法示例
Oct 12 Javascript
js从输入框读取内容,比较两个数字的大小方法
Mar 13 Javascript
vue-cli+webpack记事本项目创建
Apr 01 Javascript
Zepto实现密码的隐藏/显示
Apr 07 Javascript
Vue中保存用户登录状态实例代码
Jun 07 Javascript
详解基于原生JS验证表单组件xy-form
Aug 20 Javascript
layer.confirm()右边按钮实现href的例子
Sep 27 Javascript
javascript设计模式之装饰者模式
Jan 30 Javascript
《javascript设计模式》学习笔记三:Javascript面向对象程序设计单例模式原理与实现方法分析
Apr 07 Javascript
JavaScript 函数用法详解【函数定义、参数、绑定、作用域、闭包等】
May 12 Javascript
JavaScript实现简单拖拽效果
Sep 15 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
30 个很棒的PHP开源CMS内容管理系统小结
2011/10/14 PHP
PHP连接MySQL数据的操作要点
2015/03/20 PHP
typecho插件编写教程(三):保存配置
2015/05/28 PHP
javascript之AJAX框架使用说明
2010/04/24 Javascript
jQuery源码分析-03构造jQuery对象-源码结构和核心函数
2011/11/14 Javascript
Jquery命名冲突解决的五种方案分享
2012/03/16 Javascript
JS前端框架关于重构的失败经验分享
2013/03/17 Javascript
jQuery实现回车键(Enter)切换文本框焦点的代码实例
2014/05/05 Javascript
javascript实现输出指定行数正方形图案的方法
2015/08/03 Javascript
JavaScript基础语法之js表达式
2016/06/07 Javascript
JavaScript地理位置信息API
2016/06/11 Javascript
利用Query+bootstrap和js两种方式实现日期选择器
2017/01/10 Javascript
yarn的使用与升级Node.js的方法详解
2017/06/04 Javascript
微信小程序自定义模态对话框实例详解
2017/08/16 Javascript
不得不看之JavaScript构造函数及new运算符
2017/08/21 Javascript
vsCode安装使用教程和插件安装方法
2020/08/24 Javascript
ES6 更易于继承的类语法的使用
2019/02/11 Javascript
图文讲解用vue-cli脚手架创建vue项目步骤
2019/02/12 Javascript
浅谈JavaScript_DOM学习篇_图片切换小案例
2019/03/19 Javascript
实例讲解Python设计模式编程之工厂方法模式的使用
2016/03/02 Python
Python如何使用函数做字典的值
2019/11/30 Python
浅谈OpenCV中的新函数connectedComponentsWithStats用法
2020/07/05 Python
用python绘制樱花树
2020/10/09 Python
使用gunicorn部署django项目的问题
2020/12/30 Python
HTML5 Canvas的事件处理介绍
2015/04/24 HTML / CSS
AE美国鹰美国官方网站:American Eagle Outfitters
2016/08/22 全球购物
销售冠军获奖感言
2014/02/03 职场文书
一夜的工作教学反思
2014/02/08 职场文书
政府法律服务方案
2014/06/14 职场文书
汽修专业自荐信
2014/07/07 职场文书
学校食堂食品安全责任书
2014/07/28 职场文书
个人授权委托书模板
2014/09/14 职场文书
小学教师师德师风个人整改措施
2014/09/18 职场文书
2015年秋季小学开学典礼主持词
2015/07/16 职场文书
高中数学课堂教学反思
2016/02/18 职场文书
python神经网络Xception模型
2022/05/06 Python