简单理解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 相关文章推荐
js使用正则实现ReplaceAll全部替换的方法
Jul 18 Javascript
Node.js 数据加密传输浅析
Nov 16 Javascript
bootstrap modal弹出框的垂直居中
Dec 14 Javascript
清除输入框内的空格
Dec 21 Javascript
Bootstrap的modal拖动效果
Dec 25 Javascript
详解Python中logging日志模块在多进程环境下的使用
Dec 26 Javascript
关于页面刷新vuex数据消失问题解决方案
Jul 03 Javascript
jQuery实现碰到边缘反弹的动画效果
Feb 24 jQuery
Vue数据双向绑定原理及简单实现方法
May 18 Javascript
javascript实现遮罩层动态效果实例
May 14 Javascript
理解Proxy及使用Proxy实现vue数据双向绑定操作
Jul 18 Javascript
微信小程序实现页面监听自定义组件的触发事件
Nov 01 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
PHP图片处理类 phpThumb参数用法介绍
2012/03/11 PHP
PHP常用函数和常见疑难问题解答
2014/03/05 PHP
getimagesize获取图片尺寸实例
2014/11/15 PHP
CodeIgniter自定义控制器MY_Controller用法分析
2016/01/20 PHP
使用Entrust扩展包在laravel 中实现RBAC的功能
2020/03/16 PHP
BOOM vs RR BO3 第一场2.13
2021/03/10 DOTA
JQuery.ajax传递中文参数的解决方法 推荐
2011/03/28 Javascript
JavaScript在XHTML中的用法详解
2013/04/11 Javascript
JQuery onload、ready概念介绍及使用方法
2013/04/27 Javascript
JavaScript通过元素的ID和name设置样式
2014/07/08 Javascript
jquery实现鼠标滑过显示提示框的方法
2015/02/05 Javascript
原生JS查找元素的方法(推荐)
2016/11/22 Javascript
Bootstrap实现带暂停功能的轮播组件(推荐)
2016/11/25 Javascript
Angular directive递归实现目录树结构代码实例
2017/05/05 Javascript
angular bootstrap timepicker TypeError提示怎么办
2017/06/13 Javascript
vue动态循环出的多个select出现过的变为disabled(实例代码)
2019/11/10 Javascript
[01:17]辉夜杯战队访谈宣传片—EHOME
2015/12/25 DOTA
[14:03]2017DOTA2亚洲邀请赛开幕式:12神兵演绎水墨中华
2017/04/01 DOTA
利用Python绘制数据的瀑布图的教程
2015/04/07 Python
Python数据结构与算法之图的广度优先与深度优先搜索算法示例
2017/12/14 Python
Python多进程写入同一文件的方法
2019/01/14 Python
windows下python虚拟环境virtualenv安装和使用详解
2019/07/16 Python
python实现简单文件读写函数
2021/02/25 Python
CSS3中border-radius属性设定圆角的使用技巧
2016/05/10 HTML / CSS
联想新加坡官方网站:Lenovo Singapore
2017/10/24 全球购物
如何选择使用结构还是类
2014/05/30 面试题
创先争优承诺书范文
2014/03/31 职场文书
平安工地汇报材料
2014/08/19 职场文书
不听老师话的万能检讨书
2014/10/04 职场文书
计算机实训报告总结
2014/11/05 职场文书
有关浪费资源的建议书
2015/09/14 职场文书
2016年学校“3.12”植树节活动总结
2016/03/16 职场文书
Python超简单容易上手的画图工具库推荐
2021/05/10 Python
Python包管理工具pip的15 个使用小技巧
2021/05/17 Python
中国古风插画师排行榜:夏达第一,第三是阴阳师姑获鸟皮肤创作者
2022/03/18 国漫
python文件与路径操作神器 pathlib
2022/04/01 Python