简单说说vue中的el属性

每个vue2.x项目中我们都会看到入口文件(即main.js)中，在生成根实例时会配置el属性，而我们自己创建的组件中则不能配置该属性，下面引用了官方文档中对el属性的说明：el类型：string | Element限制：只在用 new 创建实例时生效。详细：提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。在实

公孙元二

13372人浏览 · 2021-09-14 16:37:42

公孙元二 · 2021-09-14 16:37:42 发布

每个vue2.x项目中我们都会看到入口文件(即main.js)中，在生成根实例时会配置el属性，而我们自己创建的组件中则不能配置该属性，下面引用了官方文档中对el属性的说明：

el
类型：string | Element
限制：只在用 new 创建实例时生效。
详细：
提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。
在实例挂载之后，元素可以用 vm. $e l 访问。如果在实例化时存在这个选项，实例将立即进入编译过程，否则，需要显式调用 v m .$ mount() 手动开启编译。

简单来说el的作用就是表明我们要将当前vue组件生成的实例插入到页面的哪个元素中，el属性的值可以是css选择器的字符串，或者直接就是对应的元素对象。并且只能在使用new生成实例时才能配置el属性，而我们在组件中只是export一个配置对象，如果设置了el则会报错。

// 错误使用方式，在组件中设置el
// 提示错误： [Vue warn]: option "el" can only be used during instance creation with the `new` keyword.
export default {
    el: '#app'
}
 
// 正确写法
var vm = new Vue({
    el: '#app'
})

我们再看看项目中的index.html。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>backstage</title>
  </head>
  <body>
    <!-- {el：'#app'} 即把这里的元素作为根实例的挂载对象 -->
    <div id="app"></div>
  </body>
</html>

打印vm.$el，会发现实例已经被挂载到el对应的元素中：

在这里插入图片描述

Vue 实例属性（$option $el等）

vm.$el:获取Vue实例关联的DOM元素
vm.$data:获取Vue实例的data选项（对象）
vm.$options:获取Vue实例的自定义属性（如vm.$options.methods,获取Vue实例的自定义属性methods）
vm.$refs:获取页面中所有含有ref属性的DOM元素（如vm.$refs.hello，获取页面中含有属性ref = “hello”的DOM元素，如果有多个元素，那么只返回最后一个）;

var app   = new Vue({    
            el:"#container",    
            data:{    
                msg:"hello,2018!"    
            },    
            address:"长安西路"    
        })    
        console.log(app.$el);//返回Vue实例的关联DOM元素，在这里是#container    
        console.log(app.$data);//返回Vue实例的数据对象data，在这里就是对象{msg：”hello，2018“}    
        console.log(app.$options.address);//返回Vue实例的自定义属性address，在这里是自定义属性address    
        console.log(app.$refs.hello)//返回含有属性ref = hello的DOM元素（如果多个元素都含有这样的属性，只返回最后一个）<h3 ref = "hello">呵呵 1{{msg}}</h3>

方法：

在这里插入图片描述

vm.$mount(DOM选择器)：手动挂载实例的关联元素
vm.$destroy():销毁Vue实例
vm.$nextTick(callback):在DOM更新完成后再执行callback函数，一般在修改数据之后使用该方法，以便获取更新后的DOM元素。

var app1 = new Vue({    
            data:{    
                msg1:"hello,旺旺年！",    
                age:"19"    
            }    
        })    
        //vm.$mount（选择器）：手动挂载Vue实例的关联元素    
        app1.$mount("#wangYear")    
        //vm.$destroy():销毁Vue实例，但是数据还在    
        
    
        //vm.$nextStick(callback):    
        app1.age = 39;    
        //修改了数据age。    
        console.log(app1.$refs.age1.textContent)//19,怎么不是39，明明修改了呀，原因是-----    
        // 当执行这一句的时候，DOM还没更新完，Vue实现响应式并不是数据发生改变后DOM立即变化，而是需要一定的策略进行DOM更新，这是需要时间的!!    
        // 那为什么我们在页面中一下子就看到数据已经发生变化了呀？那是因为在我们看到的时候，DOM已经更新完成了，这个过程进行的很快。    
        app1.$nextTick(function(){    
            console.log(app1.$refs.age1.textContent)//39    
        })