美文网首页
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!!!

    相关文章

      网友评论

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

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