简单理解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活用事件触发对象动作
Aug 10 Javascript
编写Js代码要注意的几条规则
Sep 10 Javascript
JS实现的左侧竖向滑动菜单效果代码
Oct 19 Javascript
JavaScript编程中实现对象封装特性的实例讲解
Jun 24 Javascript
浅谈js的ajax的异步和同步请求的问题
Oct 07 Javascript
原生JS简单实现ajax的方法示例
Nov 29 Javascript
Vue项目中quill-editor带样式编辑器的使用方法
Aug 08 Javascript
解决vue中使用swiper插件问题及swiper在vue中的用法
Apr 04 Javascript
jQuery实现的页面弹幕效果【测试可用】
Aug 17 jQuery
加速vue组件渲染之性能优化
Apr 09 Javascript
js实现滑动滑块验证登录
Jul 24 Javascript
uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果
Dec 10 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
?繁体转换的class
2006/10/09 PHP
PHP中使用CURL伪造来路抓取页面或文件
2011/05/04 PHP
PHP编写文件多服务器同步程序
2016/07/02 PHP
PHP使用栈解决约瑟夫环问题算法示例
2017/08/27 PHP
PHP创建XML的方法示例【基于DOMDocument类及SimpleXMLElement类】
2019/09/10 PHP
CLASS_CONFUSION JS混淆 全源码
2007/12/12 Javascript
图像替换新技术 状态域方法
2010/01/28 Javascript
超酷的网页音乐播放器DewPlayer使用方法
2010/12/18 Javascript
JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
2011/01/06 Javascript
JQuery入门—JQuery程序的代码风格详细介绍
2013/01/03 Javascript
深入理解JavaScript系列(31):设计模式之代理模式详解
2015/03/03 Javascript
jQuery使用$.ajax提交表单完整实例
2015/12/11 Javascript
JQuery点击事件回到页面顶部效果的实现代码
2016/05/24 Javascript
深入理解JS正则表达式---分组
2016/07/18 Javascript
javascript实现自由编辑图片代码详解
2019/06/21 Javascript
vue自定义指令限制输入框输入值的步骤与完整代码
2020/08/30 Javascript
JavaScript Array.flat()函数用法解析
2020/09/02 Javascript
[58:57]2018DOTA2亚洲邀请赛3月29日小组赛B组 Effect VS VGJ.T
2018/03/30 DOTA
java直接调用python脚本的例子
2014/02/16 Python
Python编程判断这天是这一年第几天的方法示例
2017/04/18 Python
解决Python中定时任务线程无法自动退出的问题
2019/02/18 Python
Python matplotlib画曲线例题解析
2020/02/07 Python
详解Anaconda 的安装教程
2020/09/23 Python
美国体育用品在线:Modell’s Sporting Goods
2018/06/07 全球购物
Stokke美国官方网店:高级儿童家具、推车、汽车座椅和配件
2020/06/06 全球购物
客服服务心得体会
2013/12/30 职场文书
大学同学聚会邀请函
2014/01/29 职场文书
学习雷锋演讲稿
2014/05/10 职场文书
关于工作经历的证明书
2014/10/11 职场文书
2014年行政执法工作总结
2014/12/11 职场文书
出国导师推荐信
2015/03/25 职场文书
肖申克救赎观后感
2015/06/02 职场文书
安全教育培训心得体会
2016/01/15 职场文书
创业计划书之韩国烧烤店
2019/09/19 职场文书
Python必备技巧之字符数据操作详解
2022/03/23 Python
使用kubeadm命令行工具创建kubernetes集群
2022/03/31 Servers