• 不需要表达式

  • 参数: 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. pyqt 发射接收信号

    翻页控件: 一.定义并发射信号: #!/usr/bin/python # #coding=utf-8 # __author__='' from PyQt4.QtCore import * from P ...

  2. Errors occurred during the build. Errors running builder 'JavaScript Validator' on project

    1.问题:Errors occurred during the build. Errors running builder 'JavaScript Validator' on project 2.解决 ...

  3. 【Silverlight】打开Silverlight程序报错,"未找到导入的项目......请确认<Import>声明中的路径正确,且磁盘上存在该文件"

    在打开Silverlight程序时,报错(如图所示),程序使用的是Visual Studio 2013和最新的Silverlight版本(Silverlight5). 然后我在网上找了下说:Silve ...

  4. Python 爬虫3——第一个爬虫脚本的创建

    在进行真正的爬虫工程创建之前,我们先要明确我们所要操作的对象是什么?完成所有操作之后要获取到的数据或信息是什么? 首先是第一个问题:操作对象,爬虫全称是网络爬虫,顾名思义,它所操作的对象当然就是网页, ...

  5. 常用类-StringBuffer

    总结:凡是要频繁的修改字符串内容的时候,都要使用StringBuffer类来完成,而且在StringBuffer类里提供了一些在String类中没有的,包括:delete(),insert()等等 / ...

  6. Mysql 表分区

    是否支持分区:mysql> show variables like '%partition%';+-----------------------+-------+| Variable_name ...

  7. 疯狂C#~伴随着我的库存管理¥

    每次的等待都是期待下一次的勃发!但激进的我非常想和大家学习一些东西,所以特地的分享了一个库存管理, 生活中容易运用的很多,但现在的学业希望能够得到各界人士的帮助!!! 首先:会有几个类来让它们协调 ( ...

  8. Proxy

    Proxy: Script: http://apgutmg01:8080/array.dll?Get.Routing.Script Server: apgutmg01 Port: 8080

  9. HTML设计模式学习笔记

    本周我主要学习了HTML的设计模式,现将我的学习内容总结如下: 一.盒模型的学习 CSS中有一种基础的设计模型叫做盒模型,它定义了元素是如何被看做盒子来解析的.我主要学习了六种盒模型,分别为内联盒模型 ...

  10. 安卓工具箱:color of Style

    <?xml version="1.0" encoding="utf-8"?> <resources> <color name=&q ...