Vue实例属性和实例方法-蒲公英云

Vue实例属性和实例方法

末蓝、 2021-07-25 12:34 596阅读 0赞

一，常用的实例属性：

二，常用的实例方法：

1，实例方法set ，delete

2，实例方法watch

3，实例方法-生命周期

Vue实例属性：vue实例直接调用的属性；

一，常用的实例属性：

vm.$data：获取属性；
vm.$el：获取实例挂载的元素；
vm.$options：获取自定义选项/属性/函数；
vm.$refs：获取通过ref属性注册的DOM对象；

<!DOCTYPE html>

05_InstanceProperties

{
{msg}}

Hello

Vue

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70

二，常用的实例方法：

数据：

vm.$set：设置属性值；
vm.$delete：删除属性值；
vm.$watch：观测数据变化；

生命周期

vm.$mount：手动挂载Vue实例；
vm.$destroy：销毁Vue实例，清理数据绑定，移除事件监听；
vm.$nextTick：将方法中的回调函数，延迟到DOM更新后；

1，实例方法set ，delete

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>06_InstanceMethod</title>
        <script type="text/javascript" src="../js/vue.js" ></script>
    </head>
    <body>
        <div>
            Id：<span>{
   {user.id}}</span><br />
            用户名：<span>{
   {user.username}}</span><br />
            <button @click="changeUsername">changeUsername</button><br />
            <button @click="addId">addId</button><br />
            <button @click="delId">delId</button>
        </div>
    </body>
    <script>
        let vm = new Vue({
                el : 'div',
                data : {
                    user : {
                        username : 'Joey'
                    }
                },
                methods : {
                    changeUsername(){
                        this.user.username = 'sikiedu-Joey';
                    },
                    addId(){
                        //this.$set(this.user, 'id', 1);  局部的
                        //Vue.set(this.user, 'id', 1);   全局的
                        if(this.user.id){
                            this.user.id++;
                        }else{
                            Vue.set(this.user, 'id', 1);
                        }
                        console.log(this.user.id);
                    },
                    delId(){
                        if(this.user.id){
                            //this.$delete(this.user, 'id');
                            Vue.delete(this.user, 'id');
                        }
                    }
                }
            });
    </script>
</html>

2，实例方法watch

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>07_InstanceMethod_watch</title>
        <script type="text/javascript" src="../js/vue.js" ></script>
    </head>
    <body>
        <div>
            <input type="text" v-model="msg" /><br />
            msg : <span>{
   {msg}}</span><br />
            <input type="text" v-model="num" /><br />
            num : <span>{
   {num}}</span><br />
            <button onclick="unWatch()">unWatch</button>
        </div>
    </body>
    <script>
        let vm = new Vue({
                el : 'div',
                data : {
                    msg : 'Joey',
                    num : 1,
                    user : {
                        id : '01',
                        username : 'sikiedu'
                    }
                },
                watch : {
                    num : function(newValue, oldValue){
                        console.log("修改了num 旧值= " + oldValue + "   新值= " + newValue);
                    }
                }
            });
            let unwatch = vm.$watch('msg', function(newValue, oldValue){
                    console.log("修改了msg 旧值= " + oldValue + "   新值= " + newValue);
            });
            function unWatch(){
                unwatch();
                console.log("点击了unwatch按钮")
            }
    </script>
</html>

3，实例方法-生命周期

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>08_InstanceMethod_lifeCycle</title>
        <script type="text/javascript" src="../js/vue.js" ></script>
    </head>
    <body>
        <div id="sikiedu">
            <input type="text" v-model="msg" /><br />
            msg : <span>{
   {msg}}</span><br />
            <button onclick="_destroy()">销毁</button><br /><br />
            oldName : <span ref='oldName'>{
   {oldName}}</span><br />
            newName : <span>{
   {newName}}</span>
        </div>
    </body>
    <script>
        let vm = new Vue({
                //el : 'div',
                data : {
                    msg : 'Joey',
                    oldName : 'AAA',
                    newName : 'BBB'
                }
            });
        vm.$mount('#sikiedu');
        vm.oldName = 'CCC';
        //vm.newName = vm.$refs.oldName.textContent;
//        vm.$nextTick(function(){
//            vm.newName = vm.$refs.oldName.textContent;
//        });
        Vue.nextTick(function(){
            vm.newName = vm.$refs.oldName.textContent;
        });
        function _destroy(){
            vm.$destroy();
        }
    </script>
</html>