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表示当前组 ...
随机推荐
- js中使用new Date(str)创建时间对象不兼容firefox和ie的解决方式
/** * 解决 ie,火狐浏览器不兼容new Date(s) * @param strDate * 返回 date对象 * add by zyf at 2015年11月5日 */ function ...
- router路由去掉#!的踩坑记
项目中在研究去掉router#!的过程中的踩坑过程.
- Android事件分发传递
一.与触摸事件有关的几个方法 boolean dispatchTouchEvent(MotionEvent ev); 接收到触摸事件时,是否分发事件到下面的View 返回true:分发触摸事件 返回f ...
- HTML5可视化编辑与微数据
1.HTML 5 全局 contenteditable 属性 contenteditable 属性规定是否可编辑元素的内容. <p contenteditable="true" ...
- 数据分析之Numpy基础:数组和适量计算
Numpy(Numerical Python)是高性能科学计算和数据分析的基础包. 1.Numpy的ndarray:一种多维数组对象 对于每个数组而言,都有shape和dtype这两个属性来获取数组的 ...
- radio相关
radio 按钮组, name=”sex”. <input type="radio" name="sex" value="Male"& ...
- Java实现文件在某个目录的检索
package com.filetest; import java.io.File; import java.util.Date; import java.util.Scanner; public c ...
- 如何修改SQL SERVER服务器的端口
sql server的服务器端口默认是1433,设置服务器端口的位置在这里: 这里的端口,默认是1433,我把它改成了65499 修改端口之后,客户端如何连接? 下面是SSMS的连接方式: 下面是一个 ...
- Algorithm | Binary Search
花了半天把二分查找的几种都写了一遍.验证了一下.二分查找的正确编写的关键就是,确保循环的初始.循环不变式能够保证一致. 可以先从循环里面确定循环不变式,然后再推导初始条件,最后根据循环不变式的内容推导 ...
- Code First开发系列之管理数据库创建,填充种子数据以及LINQ操作详解
返回<8天掌握EF的Code First开发>总目录 本篇目录 管理数据库创建 管理数据库连接 管理数据库初始化 填充种子数据 LINQ to Entities详解 什么是LINQ to ...