美文网首页
Vue实例的属性和方法

Vue实例的属性和方法

作者: 念念碎平安夜 | 来源:发表于2019-07-25 22:46 被阅读0次

一、属性

1、vm.属性名 => 获取data中的属性

var vm = new Vue({
    data: {
        msg: 'welcome to world'
    },
});
console.log(vm.msg);

2、vm.$el => 获取vue实例关联的元素,对其进行操作

<div id="hello">world</div>
var vm = new Vue({
    el: '#hello',
})
console.log(vm.$el); //DOM对象
vm.$el.style.color='red';

3、vm.$data => 获取数据对象data

var vm = new Vue({
    data: {
        msg: 'welcome to world'
    },
});
console.log(vm.$data);
console.log(vm.$data.msg);

4、vm.$options => 获取自定义属性

var vm = new Vue({
    data: {
        msg: 'welcome to world'
    },
    name: 'tom',
    age: 24,
    show: function() {
        console.log('show');
    }
});
console.log(vm.$options.name);
console.log(vm.$options.age);
vm.$options.show();

5、vm.$refs => 获取所有添加ref属性的元素,对其进行操作

var vm = new Vue({});
<h1 ref="hello">你好</h1>
console.log(vm.$refs);
console.log(vm.$refs.hello); //DOM对象
vm.$refs.hello.style.color = 'blue';

二、方法

1、vm.$mount() => 手动挂载vue实例

<div id="hello">
    <h1>{{name}}</h1>
</div>
 vm.$mount('#hello');
-----------------------------------------------
var vm = new Vue({
    data: {
        name: 'zhang'
    }
}).$mount('#hello');

2、vm.$destroy() => 销毁实例

var vm = new Vue({});
vm.$destroy();

3、vm.$nextTick(callback) => 在DOM更新完成后再执行回调函数,一般在修改数据之后使用该方法,以便获取更新后的DOM

<div id="hello">
    <h1 ref="title">{{name}}</h1>
</div>
var vm = new Vue({
    data: {
        name: 'zhang'
    }
}).$mount('#hello');

我们现在要对name的数据进行修改,使name的值等于cheng

vm.name="cheng";

并且立即打印出页面数据绑定的值

vm.name="cheng";
console.log(vm.$refs.title.textContent);

这个时候发现结果并不是改变之后的cheng,这是因为DOM还没更新完,Vue实现响应式并不是数据发生改变之后DOM立即变化,需要按一定的策略进行DOM更新,需要时间!!
所以我们需要等待DOM更新完成,更新完成后再执行此代码

vm.name="cheng";
vm.$nextTick(function() {
    console.log(vm.$refs.title.textContent);
});

此时打印出来的数据为期望值cheng!!!

相关文章

  • 2021-02-05 关于vue中的$符号总结,以及$在js中

    vue的实例属性和方法 除了数据属性,Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $,以便与用户定...

  • Vue.js 1.0 Official Guide Note

    Vue 实例 属性和方法 每个 Vue 实例都会代理其 data 对象里所有的属性:var data = { a:...

  • Vue进阶

    Vue实例 Vue实例生命周期函数 Vue模板语法 Vue计算属性、方法、侦听器 Vue计算属性的setter和g...

  • vue

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

  • Vue 基础

    Vue 实例 1. Vue实例 2. 实例属性 3. 实例方法/数据 4. 实例方法/事件 5. 实例方法/生命周...

  • vue

    ## Vue 实例 Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $,以便与用户定义的属性区分开来 ...

  • Vue源码浅析01

    Vue源码大致可以理解分为:初始化属性、方法(Vue.use、***等等)和实例化(new Vue)执行的一些方法...

  • Vue筛选日期 和 Vue实例的属性 计算属性

    Vue筛选日期实例: Vue实例的属性 计算属性 计算属性:案例:hello Vue变成 Vue===hello ...

  • Vue筛选日期 和 Vue实例的属性 计算属性

    Vue筛选日期实例: Vue实例的属性 计算属性 计算属性:案例:hello Vue变成 Vue===hello ...

  • vue实例的属性和方法

网友评论

      本文标题:Vue实例的属性和方法

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