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表示当前组 ...
随机推荐
- tornado学习笔记11 Web应用中模板(Template)使用应用实践
上一篇中(Web应用中模板的工作流程分析),已经分析了模板的渲染流程,以及相关参数获取及设置原理.这篇主要讲述模板在实际应用案例. 11.1 需求 根据用户输入的两次密码,判断两次密码是否一致,并将判 ...
- webservice 小小例子
Web Service的主要目标是跨平台的可互操作性.为了实现这一目标,Web Service 完全基于XML(可扩展标记语言).XSD(XML Schema)等独立于平台.独立于软件供应商的标准,是 ...
- 理解AUC
本文主要讨论了auc的实际意义,并给出了auc的常规计算方法及其证明 转载请注明出处:http://www.cnblogs.com/van19/p/5494908.html 1 ROC曲线和auc 从 ...
- java的值传递笔记
1. 背景:开发小伙伴突然问我java是值传递还是引用传递,我说当然是值传递,只不过有时候传递一个对象时实际传递的是对象的地址值,所以让人容易产生一种引用传递的假象,貌似在李刚的疯狂java讲义有提到 ...
- 在React 组件中使用Echarts
在完成一个需求的时候碰到一个场景需要使用柱状图.涉及到可视化,第一反应当然是Echarts了.平时用js加载Echarts组件很方便,但是在React中就要费下神了.各种连蒙带猜实现了.edmo里的E ...
- hadoop分布式存储(2)-hadoop的安装(毕业设计)
总共分三步:1.准备linux环境 租用"云主机",阿里云,unitedStack等,云主机不受本机性能影响(或者直接安转linux操作系统或者虚拟机也行): PuTTy Conf ...
- ButterKnife--View注入框架的使用
作为一名Android开发,是不是经常厌烦了大量的findViewById以及setOnClickListener代码,而ButterKnife是一个专注于Android系统的View注入框架,让你从 ...
- myeclipse连接数据库sql server
1.打开数据库Microsoft sql server2008,输入以下命令: 此时可是看到端口号为1619,记住此端口号,等会儿会用到. 2.打开myeclipse2014,找到最上方的myecli ...
- Git命令----放弃本地修改使用服务器上的代码
git reset --hard FETCH_HEAD FETCH_HEAD表示上一次成功git pull之后形成的commit点.
- ListView.setAdapter(adapter);空指针异常的解决的总结
报空指针异常一般的情况: 1,没有找到布局文件的ID 检验是不是id重复或者写错了 2.控件没有实例化 3.没有找到布局文件的id,要看看是不是加载了布局了,必须加载了对应的布局才能找到对应布局下的 ...