Vue 教程第四篇—— Vue 实例化时基本属性

实例元素 el

实例元素指的是 Vue 实例化时编译的容器元素,或者说是 Vue 作用的元素容器

    <div id="app"></div>
    var vm = new Vue({
        el: '#app'
    })

也可以为实例元素指定其它选择器

    <div class="app"></div>
    var vm = new Vue({
        el: '.app'
    })

可以有多个实例元素

    <div id="app1"></div>
    <div id="app2"></div>
    var vm = new Vue({
        el: '#app1'
    })
    var vm = new Vue({
        el: '#app2'
    })    

如果有多个相同的实例元素则只有第一个起效

    <div id="app"></div>
    <!--这个只当普通 html 输出,不会被 Vue 编译-->
    <div id="app"></div>
    var vm = new Vue({
        el: '#app'
    })

也可以在实例化的时候不指定实例元素,后面用 $mount() 手动进行挂载

    <div id="app"></div>
    var vm = new Vue({
        //option
    })

    vm.$mount("#app");
    

可以通过实例获取实例元素

    var vm = new Vue({
        el: '#app'
    })

    console.log(vm.$el)

数据对象 data

在 MVVM 模式中充当着 M(Model) 数据模型层,更多的体现于将 M 层映射到 V 层

    <div id="app">
        <!--结果为:文本-->
        <span>{{key1}}</span>
        <!--结果为:11-->
        <span>{{key2 + key3}}</span>
        <!--结果为:key4_1-->
        <span>{{key4.key4_1}}</span>
        <!--结果为:{"key5_1": "key5_1"}-->
        <span>{{JSON.stringify(key5[0])}}</span>
    </div>
    var array = [{key5_1: "key5_1"}];
    var vm = new Vue({
        el: '#app',
        data: {
            key1: '文本',
            key2: 1,
            key3: 10,
            key4: {
                key4_1: 'key4_1'
            },
            key5: array
        }
    }

可以通过实例获取数据对象

    var vm = new Vue({
        el: '#app',
        data: {}
    })

    console.log(vm.$data)

事件处理器 methods

元素可以通过 v-on:事件 || @事件 进行绑定事件,事件中的 this 默认指向实例 vm

    <div id="app">
        <input type="button" @click="count += 1" value="监听事件">
        <span>{{count}}</span>
    </div>
    var vm = new Vue({
        el: '#app',
        data: {
            count: 0
        }
    })

上面的情况仅适用于很简单的处理,复杂的处理可以需要单独处理上面的情况仅适用于很简单的处理,复杂的处理可以需要单独处理

    <div id="app">
        <input type="button" value="确认" @click="counter"/>
        <p>确认按钮被点击了 {{ counter }} 次。</p>
    </div>
    var vm = new Vue({
        el: '#app',
        data: {
            count: 0
        },
        methods: {
            counter: function(){
                this.count += 1;
            }
        }
    })

在 js 的事件中默认会有个 event 对象,Vue 在事件上对 event 对象进行继承二次封装,改名为 $event,在事件当中默认传过去

    <div id="app">
        <input type="button" @click="eventer" count="1" value="event 对象">
        <span>{{count}}</span>
    </div>
    var vm = new Vue({
        el: '#app',
        data: {
            count: 0
        },
        methods: {
            eventer: function(event){
                var _count = event.target.getAttribute('count') * 1;
                this.count += _count;
                event.target.setAttribute('count', _count);
            }
        }
    })

在事件中很多情况下要传参数,Vue 也可以在事件中传参数

    <div id="app">
        <input type="button" @click="parameter(10, $event)" value="事件传参数">
        <span>{{count}}</span>
    </div>
    var vm = new Vue({
        el: '#app',
        data: {
            count: 0
        },
        methods: {
            parameter: function(n, event){
                this.count += n;
                event.target.setAttribute('disabled', true);
            }
        }
    })

事件效果预览

计算属性 computed

computed 主要是针对 data 的属性进行操作,this 的指针默认指向实例 vm

    <p>{{reversedMessage}}</p>
    data: {
        message: 'ABC'
    },
    computed: {
        reversedMessage: function(){
            return this.message.split('').reverse().join('')
        }
    }

渲染结果为

    <p>CBA</p>

在 computed 的属性中默认有两个属性,一个是 get,我们称之为 getter,另一个是 set,我们称之为 setter,所以也可以这样写:

    data: {
        message: 'ABC'
    },
    computed: {
        reversedMessage: {
            get: function(){
                return this.message.split('').reverse().join('')
            }
        }
    }

当我们在 V 层调用 {{reversedMessage}} 的时候会自动触发 reversedMessage.get()

setter 的逻辑也是一样,当改变对应的属性时,会自动触发 set 方法

    <div id="app">
        <!--调用了 fullName.get()-->
        <p>{{fullName}}</p>
        <input type="text"  v-model="newName">
        <!--changeName 事件改变了 fullName 的值,所以会自动触发 fullName.set()-->
        <input type="button" value="changeName" @click="changeName">
    </div>
    var vm = new Vue({
        el: '#app',
        data: {
            firstName:'DK',
            lastName: 'Lan',
            newName: ''
        },
        computed: {
            fullName:{
                get: function(){
                    return this.firstName + '.' + this.lastName
                },
                set: function(newValue){
                    this.firstName = newValue
                }
            }
        },
        methods: {
            changeName: function(){
                this.fullName = this.newName;
            }
        }
    })

Vue 在 getter 上面作了基于对应属性的依赖缓存,也就是说多次调用同一个属性,get 只会执行一次。而事件在每次触发时都会被调用,当然在改变该属性值的时候会再次被调用

    <div id="app">
        <!--fullName.get 只被调用一次-->
        <p>{{fullName}}</p>
        <p>{{fullName}}</p>
        <p>{{fullName}}</p>
        <!--每次点击都会调用 changeName-->
        <input type="button" value="changeName" @click="changeName('Vue')">
    </div>
    var vm = new Vue({
        el: '#app',
        data: {
            firstName:'DK',
            lastName: 'Lan',
            newName: ''
        },
        computed: {
            fullName:{
                get: function(){
                    return this.firstName + '.' + this.lastName
                },
                set: function(newValue){
                    this.firstName = newValue
                }
            }
        },
        methods: {
            changeName: function(txt){
                this.newName = txt;
                //如果在这里改变 this.fullName 的值,则会再次自动触发对应的 getter
            }
        }
    })

计算属性效果预览

监听器 watch

Vue 提供了对单个属性的监听器,当该属性发生改变的时候,自动触发,此项使用不当会影响性能,所以慎用。

    <input type="text" v-model="a">
    <p>旧值:{{aOldVal}}</p>
    <p>新值:{{aNewVal}}</p>    
    {
        data: {
            a: 1
        },
        watch: {
            a: function (newVal, oldVal) {
                //自动触发此方法
                console.log('new: %s, old: %s', newVal, oldVal)
            },
        }    
    }

也可以把方法放到 data 对象中

    {
        data: {
            a: 1,
            changeA: function (newVal, oldVal) {
                //自动触发此方法
                console.log('new: %s, old: %s', newVal, oldVal)
            }
        },
        watch: {
            a: 'changeA'
        }    
    }

watch 与 compute 区别:

  1. computed 创建新的属性, watch 监听 data 已有的属性
  2. compute 会产生依赖缓存
  3. 当 watch 监听 computed 时,watch 在这种情况下无效,仅会触发 computed.setter
    {
        computed: {
            a: {
                get: function(){
                    return '';
                },
                set: function(newVal){
                    //会触发此项
                    console.log('set val %s', newVal);
                }
            }                 
        },
        watch: {
            a: function(){
                //不会被触发
                console.log('watch');
            }
        }    
    }

监听器效果预览

    原文作者:DK_Lan
    原文地址: https://segmentfault.com/a/1190000014462886
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞