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实例属性(vm.$els)的更多相关文章
- Vue实例属性/方法/生命周期
一 实例属性 var app = new Vue(); app.$el ===>返回当前挂在DOM对象. app.$data ===>返回当前实例data里面的数据 app.$option ...
- vue实例属性之el,template,render
一.el,template,render属性优先性当Vue选项对象中有render渲染函数时,Vue构造函数将直接使用渲染函数渲染DOM树,当选项对象中没有render渲染函数时,Vue构造函数首先通 ...
- vue实例属性之methods和computed
我们可以把同一函数放在methods或者computed中,区别在于computed有缓存,计算属性只有在它的相关依赖发生改变时才会重新求值,即数据改变才会执行函数.而methods每当触发重新渲染时 ...
- vue实例属性之el,template,render--(转载)
转载链接:https://www.cnblogs.com/camille666/p/vue_instance_prop_el_template_render.html 一.el,template,re ...
- es6下 vue实例属性template不能使用
esm模式下 不能使用template,需要引入非esm的vue.js,查看vue源码的包的dist目录下 文件标有esm是支持ems,没有标记,就是不支持(这个知识,怎么说了,应该属于webpack ...
- vue实例属性的方法
1.$mount() 手动设置挂载点 eg:vm.$mount("#app") 2.$destroy() 销毁 eg:vm.$destroy(); 3.$forceUp ...
- Vue基础进阶 之 常用的实例属性
Vue实例属性: vue实例直接调用的属性: 常用的实例属性: vm.$data:获取属性: vm.$el:获取实例挂载的元素: vm.$options:获取自定义选项/属性: vm.$refs:获取 ...
- Vue_(组件)实例属性
Vue实例属性与方法中文文档 传送门 Vue实例属性:vue实例直接调用的属性 Learn 一.vm.$data:获取属性 二.vm.$el:获取实例挂载的元素 三.vm.$options:获取自 ...
- 简述Vue的实例属性、实例方法
1.实例属性 组件树访问 $parent -----> 用来访问当前组件实例的父实例: $root -----> 用来访问当前组件树的根实例,如果当前组件没有父实例,则$root表示当前组 ...
随机推荐
- [8.1] Triple Step
A child is running up a staircase with n steps and can hop either 1 step, 2 steps, or 3 steps at a t ...
- 2016 正确 sublime安装PHPcs PHPcodesniffer代码规范提示插件,修正网上部分不详细描述
对你有助请点赞,请顶,不好请踩------送人玫瑰,手留余香!-------------------14:37 2016/3/212016 正确 sublime安装PHPcs PHPcodesniff ...
- MyXls导出Excel的各种设置
MyXls是一个操作Excel的开源类库,支持设置字体.列宽.行高(由BOSSMA实现).合并单元格.边框.背景颜色.数据类型.自动换行.对齐方式等,通过众多项目的使用表现,证明MyXls对于创建简单 ...
- 仿【Emmet】转【HTML】功能
一.定义正则表达式: var whitespace = "[\\x20\\t\\r\\n\\f]*", nvarcharEncoding = whitespace + " ...
- 网络问卷调查js实现代码
昨天一个同行妹纸写了一个网络问卷调查的效果,但是有bug,于是就来问我该如何解决这个bug.经过我的分析,bug主要还是出在复选框的那部分,经过修改,bug问题解决,现在贴出如下代码,仅供大家参考: ...
- SectionIndexer示例
This small tutorial will show you how to create a ListView, enable fast scrolling, and create a alph ...
- ie8中遇到的兼容问题以及解决方案
一.CSS3 1.可以通过在css中引入pie.htc,处理兼容问题(可处理的属性) -webkit-box-shadow: 0 1px 5px #ff2826; -webkit-border-rad ...
- 利用sqlmap进行mysql提权的小方法(win与liunx通用)
文章作者:pt007@vip.sina.com文章来源:https://www.t00ls.net/thread-36196-1-1.html1.连接mysql数据打开一个交互shell:sqlmap ...
- linux下安装启动rpc服务
1.上传包 rocky:~ # ls Desktop dts.xml jdk1..0_41 oswbb rpc.rstatd- rpc.rstatd-.tar.gz rocky:~ # cd rpc. ...
- WCF 程序入门
WCF是微软公司推出的符合SOA思想的分布式应用程序技术框架和编程模型,是建立在消息通信这一概念基础上运行的一个运行时服务系统. WCF编程模型的目标是实现以下两个实体之间的通信:WCF服务端和WCF ...