美文网首页前端
vue中$el等属性

vue中$el等属性

作者: 松鼠煮鳜鱼 | 来源:发表于2019-07-06 12:46 被阅读0次

[图片上传中...(3019156f-c147-39b1-a9c4-7bdb6f291897.png-c4bdc6-1562388468600-0)]

属性:

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元素,如果有多个元素,那么只返回最后一个)

Js代码

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>

转载:https://forlan.iteye.com/blog/2418359

相关文章

  • vue中$el等属性

    [图片上传中...(3019156f-c147-39b1-a9c4-7bdb6f291897.png-c4bdc6...

  • vue学习笔记

    .$data .#$el $data表示vue实例中data的值$el表示vue实例中el的值,注意 el效果等...

  • 蝈蝈领你玩--Vue.js前端库(二)

    Vue中的模板 当我们创建一个Vue实例的时候,可以设置两个属性,el和template。其中el是用来设置挂载元...

  • vue

    vue 基础 构造器 :**new Vue() **数据绑定 计算属性:el :,data:{},watch:{}...

  • vue

    vue实例的属性和方法 var vm=new Vue({ // el:'#itany', data:{ msg:'...

  • Vue实例的属性和方法

    一、属性 1、vm.属性名 => 获取data中的属性 2、vm.$el => 获取vue实例关联的元素,对其进行...

  • index.js

    实战篇:利用计算属性、指令等知识开发购物车源代码 var app = new Vue({ el:'#app',...

  • Vue.js教程_3

    计算属性:computed与el、data、methods并列,是Vue实例中的一个方法。 计算属性是基于它们的响...

  • 三、vue从入门到进阶:计算属性computed与侦听器watc

    计算属性computed var vm = new Vue({el: '#example',data: {mess...

  • vue的计算属性

    body部分: js部分: //el)vm.data)//options 获取Vue实例中的自定义属性conso...

网友评论

    本文标题:vue中$el等属性

    本文链接:https://www.haomeiwen.com/subject/qnbpqctx.html