简单理解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 相关文章推荐
控制台报错object is not a function的解决方法
Aug 24 Javascript
jQuery自动完成插件completer附源码下载
Jan 04 Javascript
javascript实现右侧弹出“分享到”窗口效果
Feb 01 Javascript
Ext JS框架程序中阻止键盘触发回退或者刷新页面的代码分享
Jun 07 Javascript
第十篇BootStrap轮播插件使用详解
Jun 21 Javascript
JavaScript读二进制文件并用ajax传输二进制流的方法
Jul 18 Javascript
利用JS轻松实现获取表单数据
Dec 06 Javascript
JS正则表达式判断有效数实例代码
Mar 13 Javascript
layui从数据库中获取复选框的值并默认选中方法
Aug 15 Javascript
layui点击按钮添加可编辑的一行方法
Aug 15 Javascript
nuxt.js中间件实现拦截权限判断的方法
Nov 21 Javascript
vue2.0移动端滑动事件vue-touch的实例代码
Nov 27 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
人族 TERRAN 概述
2020/03/14 星际争霸
PHP根据传入参数合并多个JS和CSS文件的简单实现
2014/06/13 PHP
php+mysql结合Ajax实现点赞功能完整实例
2015/01/30 PHP
PHP进程通信基础之信号
2017/02/19 PHP
node.js中的fs.fchown方法使用说明
2014/12/16 Javascript
JQuery中serialize() 序列化
2015/03/13 Javascript
以jQuery中$.Deferred对象为例讲解promise对象是如何处理异步问题
2015/11/13 Javascript
JS运动相关知识点小结(附弹性运动示例)
2016/01/08 Javascript
第五篇Bootstrap 排版
2016/06/21 Javascript
JavaScript实现DOM对象选择器
2016/09/24 Javascript
javascript鼠标跟随运动3种效果(眼球效果,苹果菜单,方向跟随)
2016/10/27 Javascript
jQuery中 bind的用法简单介绍
2017/02/13 Javascript
jquery仿京东商品放大浏览页面
2017/06/06 jQuery
微信小程序开发常见问题及解决方案
2019/07/11 Javascript
vue+elementUi图片上传组件使用详解
2019/08/20 Javascript
javascript实现商品图片放大镜
2019/11/28 Javascript
vue.js实现照片放大功能
2020/06/23 Javascript
详解JavaScript执行模型
2020/11/16 Javascript
netbeans7安装python插件的方法图解
2013/12/24 Python
详谈python read readline readlines的区别
2017/09/22 Python
Redis使用watch完成秒杀抢购功能的代码
2018/05/07 Python
Python线上环境使用日志的及配置文件
2019/07/28 Python
python numpy--数组的组合和分割实例
2020/02/24 Python
python操作yaml说明
2020/04/08 Python
日本快乐生活方式购物网站:Shop Japan
2018/07/17 全球购物
三星英国官网:Samsung英国
2018/09/25 全球购物
Berghaus官网:户外服装和设备,防水服
2020/01/17 全球购物
中专生求职自荐信范文
2013/12/22 职场文书
大学生军训自我鉴定
2014/02/12 职场文书
大学生学习2014全国两会心得体会
2014/03/13 职场文书
省文明单位申报材料
2014/05/08 职场文书
2014年社区重阳节活动策划方案
2014/09/16 职场文书
就业推荐表导师评语
2014/12/31 职场文书
人代会简报
2015/07/21 职场文书
保姆聘用合同
2015/09/21 职场文书
详解Java分布式事务的 6 种解决方案
2021/06/26 Java/Android