简单理解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 相关文章推荐
Javascript 生成指定范围数值随机数
Jan 09 Javascript
EXTJS内使用ACTIVEX控件引起崩溃问题的解决方法
Mar 31 Javascript
JS取文本框中最小值的简单实例
Nov 29 Javascript
jquery高级编程的最佳实践详解
Mar 23 Javascript
javascript制作的滑动图片菜单
May 15 Javascript
JavaScript仿商城实现图片广告轮播实例代码
Feb 06 Javascript
微信小程序开发经验总结(推荐)
Jan 11 Javascript
Angular 开发学习之Angular CLI的安装使用
Dec 31 Javascript
微信小程序页面生命周期详解
Jan 31 Javascript
webpack热模块替换(HMR)/热更新的方法
Apr 05 Javascript
JS数组Object.keys()方法的使用示例
Jun 05 Javascript
基于javascript原生判断DOM是否加载完毕
Oct 14 Javascript
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
叶罗丽:为什么大家对颜冰这对CP非常关心,却对金茉两人十分冷漠
2020/03/17 国漫
多文件上传的例子
2006/10/09 PHP
php xfocus防注入资料
2008/04/27 PHP
php smarty 二级分类代码和模版循环例子
2011/06/01 PHP
php结合正则获取字符串中数字
2015/06/19 PHP
php类的扩展和继承用法实例
2015/06/20 PHP
php二维数组按某个键值排序的实例讲解
2019/02/15 PHP
PHP的HTTP客户端Guzzle简单使用方法分析
2019/10/30 PHP
摘自百度的图片轮换效果代码
2007/11/19 Javascript
extjs DataReader、JsonReader、XmlReader的构造方法
2009/11/07 Javascript
基于jquery的回到页面顶部按钮
2011/06/27 Javascript
jquery弹出框的用法示例(一)
2013/08/26 Javascript
跟我学习javascript的全局变量
2015/11/16 Javascript
JavaScript中style.left与offsetLeft的使用及区别详解
2016/06/08 Javascript
一道优雅面试题分析js中fn()和return fn()的区别
2016/07/05 Javascript
轻松实现jQuery添加删除按钮Click事件
2017/03/13 Javascript
限时抢购-倒计时的完整实例(分享)
2017/09/17 Javascript
parabola.js抛物线与加入购物车效果的示例代码
2017/10/25 Javascript
JS 使用 window对象的print方法实现分页打印功能
2018/05/16 Javascript
vue中子组件调用兄弟组件方法
2018/07/06 Javascript
element-ui 设置菜单栏展开的方法
2018/08/22 Javascript
JavaScript实现的3D旋转魔方动画效果实例代码
2019/07/31 Javascript
[35:39]完美世界DOTA2联赛PWL S2 FTD.C vs Rebirth 第二场 11.22
2020/11/24 DOTA
PYQT5实现控制台显示功能的方法
2019/06/25 Python
Python 堆叠柱状图绘制方法
2019/07/29 Python
python正则表达式匹配IP代码实例
2019/12/28 Python
python实现在内存中读写str和二进制数据代码
2020/04/24 Python
童装店创业计划书
2014/01/09 职场文书
机关驾驶员违规检讨书
2014/09/13 职场文书
2014乡镇干部对照检查材料思想汇报
2014/09/26 职场文书
2014乡镇机关党员个人对照检查材料思想汇报
2014/10/09 职场文书
群众路线查摆问题整改措施思想汇报
2014/10/10 职场文书
2015年教师工作总结范文
2015/03/31 职场文书
文艺晚会开场白
2015/05/29 职场文书
pytest进阶教程之fixture函数详解
2021/03/29 Python
springboot @ConfigurationProperties和@PropertySource的区别
2021/06/11 Java/Android