简单理解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验证表单第二部分
Nov 25 Javascript
基于jQuery实现的Ajax 验证用户名是否存在的实现代码
Apr 06 Javascript
jquery之超简单的div显示和隐藏特效demo(分享)
Jul 09 Javascript
禁止iframe脚本弹出的窗口覆盖了父窗口的方法
Sep 06 Javascript
React.js入门学习第一篇
Mar 30 Javascript
Node.js的npm包管理器基础使用教程
May 26 Javascript
详解VUE 定义全局变量的几种实现方式
Jun 01 Javascript
Vue使用vue-cli创建项目
Sep 01 Javascript
解决iview打包时UglifyJs报错的问题
Mar 07 Javascript
实例讲解JS中pop使用方法
Jan 27 Javascript
layui 上传插件 带预览 非自动上传功能的实例(非常实用)
Sep 23 Javascript
解决vue-router路由拦截造成死循环问题
Aug 05 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 excel reader读取excel内容存入数据库实现代码
2012/12/06 PHP
使用GDB调试PHP代码,解决PHP代码死循环问题
2015/03/02 PHP
php递归删除指定文件夹的方法小结
2015/04/20 PHP
大家在抢红包,程序员在研究红包算法
2015/08/31 PHP
php提交post数组参数实例分析
2015/12/17 PHP
jQuery 获取和设置select下拉框的值实现代码
2013/11/08 Javascript
jquery validate demo 基础
2015/10/29 Javascript
理解Javascript文件动态加载
2016/01/29 Javascript
sso跨域写cookie的一段js脚本(推荐)
2016/05/25 Javascript
最常见的左侧分类菜单栏jQuery实现代码
2016/11/28 Javascript
js实现百度地图定位于地址逆解析,显示自己当前的地理位置
2016/12/08 Javascript
Vue中如何实现轮播图的示例代码
2017/07/27 Javascript
[js高手之路]原型式继承与寄生式继承详解
2017/08/28 Javascript
vue element upload实现图片本地预览
2019/08/20 Javascript
JS如何实现动态添加的元素绑定事件
2019/11/12 Javascript
vue quill editor 使用富文本添加上传音频功能
2020/01/14 Javascript
vue框架中props的typescript用法详解
2020/02/17 Javascript
[51:17]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.22
2019/09/05 DOTA
[42:48]完美世界DOTA2联赛PWL S3 Magma vs INK ICE 第二场 12.11
2020/12/16 DOTA
python启动办公软件进程(word、excel、ppt、以及wps的et、wps、wpp)
2009/04/09 Python
python实现的登录和操作开心网脚本分享
2014/07/09 Python
Python tkinter模块弹出窗口及传值回到主窗口操作详解
2017/07/28 Python
分析python动态规划的递归、非递归实现
2018/03/04 Python
Python实现查询某个目录下修改时间最新的文件示例
2018/08/29 Python
Python实现的读取/更改/写入xml文件操作示例
2018/08/30 Python
详解Python爬取并下载《电影天堂》3千多部电影
2019/04/26 Python
python绘制评估优化算法性能的测试函数
2019/06/25 Python
记一次pyinstaller打包pygame项目为exe的过程(带图片)
2020/03/02 Python
Python字典dict常用方法函数实例
2020/11/09 Python
字中字效果的实现【html5实例】
2016/05/03 HTML / CSS
致200米运动员广播稿
2014/02/06 职场文书
联谊会开场白
2015/06/01 职场文书
2016年万圣节活动总结
2016/04/05 职场文书
探究Mysql模糊查询是否区分大小写
2021/06/11 MySQL
方法汇总:Python 安装第三方库常用
2022/04/26 Python
Zabbix对Kafka topic积压数据监控的解决方案
2022/07/07 Servers