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

时间: 2024-11-10 02:50:11

vue实例属性(vm.$els)的相关文章

vue实例属性的方法

1.$mount()   手动设置挂载点  eg:vm.$mount("#app") 2.$destroy()  销毁   eg:vm.$destroy(); 3.$forceUpdate  强制更新,解决data里面没有的数据的更新(强制调用了render方法,对所有的的数据进行了更新)eg:vm.$forceUpdate(); 4.$on() 事件绑定 5.$emit() 事件触发 6.$off() 事件解绑 7.$once() 只绑定一次 原文地址:https://www.cnb

vue构造器以及实例属性

一.构造器 1.vue.js就是一个构造器,通过构造器Vue来实例化一个对象:例如:var vm = new Vue({}); 2.实例化Vue时,需要传入一个参数(选项对象): 3.参数:选项对象可以包含,数据(data).挂载元素(el).方法(methods).模版(template).生命周期函数等等: 4.扩展构造器Vue,从而用预定义选项创建可复用的组件构造器,所有组件都是被扩展的Vue的实例,使用Vue.extend({})来扩展: 注意:尽管可以命令式地创建扩展实例,不过在多数情

Vue(十二)vue实例的属性和方法

vue实例的属性和方法 1. 属性 vm.$el vm.$data vm.$options vm.$refs 2. 方法 vm.$mount() vm.$destroy() vm.$nextTick(callback) vm.$set(object,key,value) vm.$delete(object,key) vm.$watch(data,callback[,options]) 原文地址:https://www.cnblogs.com/yulingjia/p/8288273.html

Vue2.0笔记——Vue常用实例属性,实例方法

实例属性 vm.$el vm.$data vm.options vm.$refs vm.$root vm.$el 该实例属性用于获取Vue实例使用的根DOM元素,即el选项所指的元素DOM <body> <div id="app"> <h4>你好,这是四级标题</h4> <p>这是一个段落,我什么都不想说</p> </div> <button onclick="getEl()"

vue的实例属性$options

vue的实例属性$options是用来获取定义在data外的数据和方法的. <script> export default { name: "Test", data() { return { }; }, //在data外面定义的属性和方法通过$options可以获取和调用 name: "zs", age: 12, haha() { console.log("haha"); }, created() { console.log(this

Vue框架(一)——Vue导读、Vue实例(挂载点el、数据data、过滤器filters)、Vue指令(文本指令v-text、事件指令v-on、属性指令v-bind、表单指令v-model)

Vue导读 1.Vue框架 vue是可以独立完成前后端分离式web项目的js框架 三大主流框架之一:Angular.React.Vue vue:结合其他框架优点.轻量级.中文API.数据驱动.双向绑定.MVVM设计模式.组件化开发.单页面应用 Vue环境:本地导入和cdn导入 2.Vue是渐进式js框架 通过对框架的了解与运用程度,来决定其在整个项目中的应用范围,最终可以独立以框架方式完成整个web前端项目.3.怎么使用vue 去官网下载然后导入 <div id="app">

vue实例和组件的属性

vue实例: import Vue from 'vue'; import app from './app'; import myRouter from './routers'; new Vue({ el: '#app', //渲染目标 template: '<App />', //渲染内容 components: { //内容内使用到的组件 App: app }, data:{ //需要用到的数据,根实例一般不需要用 num1: 5, num2: 8, }, methods:{ //需要用到的

vue实例的watch属性

watch可以用于监听vue实例中数据的变化,数据一当变化就会执行函数中的内容, watch函数有两个参数newValue和oldValue,一般情况下只需要newValue一个足够. 注意点:定义的监听函数名称必须是打算监听的数据的变量名称,这相当于指定了需要监听的对象 原文地址:https://www.cnblogs.com/chujunqiao/p/11625416.html

vue实例整理1

一 介绍 (1)       声明式渲染, 文本插值 <div id="app"> <p>{{message}}</p> </div> <script src="scripts/vue.js"></script> <script> new Vue({ el:'#app', data:{ message:'Hello Vue.js!' } }) </script> (2)