简单理解vue中实例属性vm.$els


Posted in Javascript onDecember 01, 2016

vue实例属性vm.$els到底是什么?有哪些需要注意的?具体请阅读本文。

不需要表达式

参数: id(必需)

用法:

为 DOM 元素注册一个索引,方便通过所属实例的 $els 访问这个元素。

注意:

因为 HTML 不区分大小写,camelCase 名字比如 v-el:someEl 将转为全小写。可以用 v-el:some-el 设置 this.$els.someEl。

我的理解:$els类似于document.querySelector('.class')的功能,可以拿到指定的dom元素。

Eg:

<div v-el:mainContainer></div>

var _dom = this.$els.maincontainer

注意:在取该dom元素时,不识别驼峰命名,如上例,绑定的值为mainContainer,但是在取dom的时候只能写maincontainer,否则将无法识别.

其实在上一篇文章中我就用到了 vue的实例属性 vm.$els

HTML代码:

 <input type="text" class='name-input' placeholder='请填写项目名称' v-on:keyup.enter='saveProjectFun' v-el:addProject>

js代码:

//当用户按回车后,保存添加的项目
 saveProjectFun:function(){
 var obj={}
 obj.success=false;
 let name=this.$els.addproject.value;
 obj.projectName=name.replace(/\s+/g,""); 
 this.projectData.push(obj);
 this.addp=true;
 }

其实  this.$els.addproject.value就相当于:document.querySelector('.name-input').value

本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
ExtJS PropertyGrid中使用Combobox选择值问题
Jun 13 Javascript
javascript中IE浏览器不支持NEW DATE()带参数的解决方法
Mar 01 Javascript
ExtJs默认的字体大小改变的几种方法(自己整理)
Apr 18 Javascript
JS控制网页动态生成任意行列数表格的方法
Mar 09 Javascript
jquery+css3实现网页背景花瓣随机飘落特效
Aug 17 Javascript
基于javascript实现句子翻牌网页版小游戏
Mar 23 Javascript
angular forEach方法遍历源码解读
Jan 25 Javascript
Vux+Axios拦截器增加loading的问题及实现方法
Nov 08 Javascript
IDEA安装vue插件图文详解
Sep 26 Javascript
vue实现虚拟列表功能的代码
Jul 28 Javascript
LayUI+Shiro实现动态菜单并记住菜单收展的示例
May 06 Javascript
vue修饰符.capture和.self的区别
Apr 22 Vue.js
jsp 自动编译机制详细介绍
Dec 01 #Javascript
基于vue.js实现图片轮播效果
Dec 01 #Javascript
JQuery学习总结【一】
Dec 01 #Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
Dec 01 #Javascript
jQuery 如何实现一个滑动按钮开关
Dec 01 #Javascript
有趣的bootstrap走动进度条
Dec 01 #Javascript
微信小程序进行微信支付的步骤昂述
Dec 01 #Javascript
You might like
Dedecms常用函数解析
2008/02/01 PHP
php中一个完整表单处理实现代码
2011/11/10 PHP
php 去除html标记--strip_tags与htmlspecialchars的区别详解
2013/06/26 PHP
php array_key_exists() 与 isset() 的区别
2016/10/24 PHP
ExtJS 2.0实用简明教程 之Border区域布局
2009/04/29 Javascript
用jQuery的AJax实现异步访问、异步加载
2016/11/02 Javascript
手机端js和html5刮刮卡效果
2020/09/29 Javascript
js实现背景图自适应窗口大小
2017/01/10 Javascript
js eval函数使用,js对象和字符串互转实例
2017/03/06 Javascript
AngularJS ui-router (嵌套路由)实例
2017/03/10 Javascript
Vue自定义指令详解
2017/07/28 Javascript
微信小程序顶部可滚动导航效果
2017/10/31 Javascript
web前端vue实现插值文本和输出原始html
2018/01/19 Javascript
使用D3.js创建物流地图的示例代码
2018/01/27 Javascript
JavaScript常见鼠标事件与用法分析
2019/01/03 Javascript
Node.js如何优雅的封装一个实用函数的npm包的方法
2019/04/29 Javascript
详解微信小程序支付流程与梳理
2019/07/16 Javascript
JS实现骰子3D旋转效果
2019/10/24 Javascript
简单介绍Python中的readline()方法的使用
2015/05/24 Python
在python3环境下的Django中使用MySQL数据库的实例
2017/08/29 Python
python负载均衡的简单实现方法
2018/02/04 Python
python实现图片彩色转化为素描
2019/01/15 Python
使用python实现抓取腾讯视频所有电影的爬虫
2019/04/15 Python
python之拟合的实现
2019/07/19 Python
pytorch 模型可视化的例子
2019/08/17 Python
python数据爬下来保存的位置
2020/02/17 Python
基于tensorflow __init__、build 和call的使用小结
2021/02/26 Python
游戏商店:Eneba
2020/04/25 全球购物
main 主函数执行完毕后,是否可能会再执行一段代码,给出说明
2012/12/05 面试题
某科技软件测试面试题
2013/05/19 面试题
环境科学专业大学生自荐信格式
2013/09/21 职场文书
汽车维修专业毕业生的求职信分享
2013/12/04 职场文书
接待员岗位责任制
2014/02/10 职场文书
学校节能宣传周活动总结
2014/07/09 职场文书
深入浅析Redis 集群伸缩原理
2021/05/15 Redis
Java 垃圾回收超详细讲解记忆集和卡表
2022/04/08 Java/Android