Vue.js中的extend绑定节点并显示的方法


Posted in Javascript onJune 20, 2019

在使用Vue.js时,可以使用Vue.extend()方法创建一个子类,传入参数包含了一个对象。其中,在extend中的data和vue实例化对象中的data写法不一样。下面利用实例说明,操作如下:

Vue.js中的extend绑定节点并显示的方法

第一步,创建一个静态页面并引入vue.js文件,并在主体元素标签中插入一个div,设置id属性,如下图所示:

Vue.js中的extend绑定节点并显示的方法

第二步,在<script></script>标签中调用Vue.extend(),设置template和data,如下图所示:

Vue.js中的extend绑定节点并显示的方法

第三步,使用new关键字调用$mount(),将创建的类挂载到div元素上,如下图所示:

Vue.js中的extend绑定节点并显示的方法

Vue.js中的extend绑定节点并显示的方法

第四步,为了显示变量的字体等样式,需要添加相关的样式属性,这里使用:class,如下图所示:

Vue.js中的extend绑定节点并显示的方法

第五步,保存代码并打开浏览器预览界面效果,可是控制台出现了错误警告,如下图所示:

Vue.js中的extend绑定节点并显示的方法

第六步,调整template标签属性嵌套,去掉多层标签元素,只留一个div标签;class前面的:去掉,如下图所示:

Vue.js中的extend绑定节点并显示的方法

Javascript 相关文章推荐
jQuery基本过滤选择器使用介绍
Apr 18 Javascript
图片上传判断及预览脚本的效果实例
Aug 07 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战二)
Aug 21 Javascript
javascript 获取元素样式必杀技
May 04 Javascript
js实现点击后将文字或图片复制到剪贴板的方法
Aug 04 Javascript
javascript数据结构与算法之检索算法
Apr 04 Javascript
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
Apr 19 Javascript
JavaScript必知必会(六) delete in instanceof
Jun 08 Javascript
JS HTML5拖拽上传图片预览
Jul 18 Javascript
微信开发 消息推送实现代码
Oct 21 Javascript
JS字符串按逗号和回车分隔的方法
Apr 25 Javascript
详解Vue.js在页面加载时执行某个方法
Nov 20 Javascript
微信小程序动态显示项目倒计时
Jun 20 #Javascript
微信小程序实现日期格式化和倒计时
Nov 01 #Javascript
微信小程序实现商城倒计时
Nov 01 #Javascript
微信小程序实现批量倒计时功能
Nov 01 #Javascript
微信小程序实现订单倒计时
Nov 01 #Javascript
Vue监听页面刷新和关闭功能
Jun 20 #Javascript
Vue 2.0 中依赖注入 provide/inject组合实战
Jun 20 #Javascript
You might like
一次编写,随处运行
2006/10/09 PHP
php 静态化实现代码
2009/03/20 PHP
写出高质量的PHP程序
2012/02/04 PHP
php中heredoc与nowdoc介绍
2014/12/25 PHP
PHP 魔术变量和魔术函数详解
2015/02/25 PHP
PHP中“=&gt;
2019/03/01 PHP
PHP+百度AI OCR文字识别实现了图片的文字识别功能
2019/05/08 PHP
可以把编码转换成 gb2312编码lib.UTF8toGB2312.js
2007/08/21 Javascript
jQuery编写widget的一些技巧分享
2010/10/28 Javascript
JS实现让访问者自助选择网页文字颜色的方法
2015/02/24 Javascript
详谈Angular路由与Nodejs路由的区别
2017/03/05 NodeJs
mongoose设置unique不生效问题的解决及如何移除unique的限制
2017/11/07 Javascript
JS实现简单的星期格式转换功能示例
2018/07/23 Javascript
Vue实现星级评价效果实例详解
2019/12/30 Javascript
[51:30]OG vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.26
2018/08/30 DOTA
python2与python3共存问题的解决方法
2018/09/18 Python
pyqt5 从本地选择图片 并显示在label上的实例
2019/06/13 Python
CSS3截取字符串实例代码【推荐】
2018/06/07 HTML / CSS
html5 canvas 简单画板实现代码
2012/01/05 HTML / CSS
实例讲解HTML5的meta标签的一些应用
2015/12/08 HTML / CSS
美国户外生活方式品牌:Eddie Bauer
2016/12/28 全球购物
Tom Dixon官网:英国照明及家具设计和制造公司
2019/03/01 全球购物
英国网上自行车商店:Tredz Bikes
2019/10/29 全球购物
匡威俄罗斯官网:Converse俄罗斯
2020/05/09 全球购物
银行财务部实习生的自我鉴定
2013/11/27 职场文书
外贸业务员求职信范文
2013/12/12 职场文书
兼职业务员岗位职责
2014/01/01 职场文书
会计师职业生涯规划范文
2014/02/18 职场文书
市场营销毕业生自荐信范文
2014/04/01 职场文书
2014年五四青年节活动策划书
2014/04/22 职场文书
学校捐款活动总结
2015/05/09 职场文书
2015年小学语文工作总结
2015/05/25 职场文书
新学期主题班会
2015/08/17 职场文书
写给汽车4S店的创业计划书,拿来即用!
2019/08/09 职场文书
导游词之西安骊山
2019/12/20 职场文书
Golang 获取文件md5校验的方法以及效率对比
2021/05/08 Golang