• 不需要表达式

  • 参数: 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)的更多相关文章

  1. Vue实例属性/方法/生命周期

    一 实例属性 var app = new Vue(); app.$el ===>返回当前挂在DOM对象. app.$data ===>返回当前实例data里面的数据 app.$option ...

  2. vue实例属性之el,template,render

    一.el,template,render属性优先性当Vue选项对象中有render渲染函数时,Vue构造函数将直接使用渲染函数渲染DOM树,当选项对象中没有render渲染函数时,Vue构造函数首先通 ...

  3. vue实例属性之methods和computed

    我们可以把同一函数放在methods或者computed中,区别在于computed有缓存,计算属性只有在它的相关依赖发生改变时才会重新求值,即数据改变才会执行函数.而methods每当触发重新渲染时 ...

  4. vue实例属性之el,template,render--(转载)

    转载链接:https://www.cnblogs.com/camille666/p/vue_instance_prop_el_template_render.html 一.el,template,re ...

  5. es6下 vue实例属性template不能使用

    esm模式下 不能使用template,需要引入非esm的vue.js,查看vue源码的包的dist目录下 文件标有esm是支持ems,没有标记,就是不支持(这个知识,怎么说了,应该属于webpack ...

  6. vue实例属性的方法

    1.$mount()   手动设置挂载点  eg:vm.$mount("#app") 2.$destroy()  销毁   eg:vm.$destroy(); 3.$forceUp ...

  7. Vue基础进阶 之 常用的实例属性

    Vue实例属性: vue实例直接调用的属性: 常用的实例属性: vm.$data:获取属性: vm.$el:获取实例挂载的元素: vm.$options:获取自定义选项/属性: vm.$refs:获取 ...

  8. Vue_(组件)实例属性

    Vue实例属性与方法中文文档 传送门   Vue实例属性:vue实例直接调用的属性 Learn 一.vm.$data:获取属性 二.vm.$el:获取实例挂载的元素 三.vm.$options:获取自 ...

  9. 简述Vue的实例属性、实例方法

    1.实例属性 组件树访问 $parent -----> 用来访问当前组件实例的父实例: $root -----> 用来访问当前组件树的根实例,如果当前组件没有父实例,则$root表示当前组 ...

随机推荐

  1. nginx下搭建CodeIgniter问题集锦

    nginx环境下CodeIgniter会出现一些问题! 1.数据库驱动连接失败! 出现如下问题: A PHP Error was encountered Severity: Warning Messa ...

  2. 文档ID:某某 模板文件不存在,无法解析文档!

    如果是生成栏目列表时出现这样的问题]:   1.可以修改include/arc.listview.class.php这个文件. 2.复制代码     echo "模板文件不存在,无法解析文档 ...

  3. python 虚拟环境

    python3 目录venv创建为虚拟环境,并激活. $ python3 -m venv ./venv$ source venv/bin/activate -m: -m mod : run libra ...

  4. 【PostgreSQL】PostgreSQL添加新服务器连接时,报错“Server doesn't listen ”,已解决。

    PostgreSQL添加新的服务器连接时,报错:

  5. 【OAuth2.0】Spring Security OAuth2.0篇之初识

    不吐不快 因为项目需求开始接触OAuth2.0授权协议.断断续续接触了有两周左右的时间.不得不吐槽的,依然是自己的学习习惯问题,总是着急想了解一切,习惯性地钻牛角尖去理解小的细节,而不是从宏观上去掌握 ...

  6. 移动前端不得不了解的html5 head 头标签

    本文主要内容来自一丝的常用的 HTML 头部标签和百度FEX的HTML head 头标签. 移动端的工作已经越来越成为前端工作的重要内容,除了平常的项目开发,HTML 头部标签功能,特别是meta标签 ...

  7. 对Java初学者的忠告

    1) 适合自己的图书才是最好的,最好的书并不一定适合你,看自己的情况. 如果你是一个Java初学者一上手就捧一本Thinking in Java在手里,我想你的日子是不会好过的,那样的书给有一定基础的 ...

  8. Mac git提交步骤小记

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; line-height: 19.0px; font: 13.0px "PingFang SC"; c ...

  9. 一些iOS高效开源类库

    因为iOS SDK相对比较底层,所以开发者就得受累多做一些体力活.不过幸运的是,有很多第三方的类库可以用来简化很多不必要的工作.笔者整理了一下在本人学习过程中用到的一些比较有用Objective-C开 ...

  10. 浅谈Js原型的理解

    一.js中的原型毫无疑问一个难点,学习如果不深入很容易就晕了!    在参考了多方面的资料后,发现解释都太过专业,对于很多还没有接触过面向对象    语言的小白来说,有理解不了里面的专有名词!如果你没 ...