Vue2——数据双向绑定

事件绑定

<template>
    <div>
        <div><input type="button" value="功德+1" v-on:click="m1"></div>
        <div><input type="button" value="功德-1" @click="m2"></div>
        <div>{{ count }}</div>
    </div>
</template>
<script>
const options = {
    data () {
        return{
            count : 0
        }
    },
    methods :{
        m1(){
            this.count ++;
        },
        m2(){
            this.count --;
        } 
    }
}
export default options
</script>

你可以看到事件绑定我给了两种方式，其中第二种时缩写方式

• 简写方式：可以把 v-on: 替换为 @

• 在 methods 方法中的 this 代表的是 data 函数返回的数据对象

双向绑定

<template>
    <div>
        <div>
            <label for="">请输入姓名</label>
            <input type="text" v-model="name">
        </div>
        <div>
            <label for="">请输入年龄</label>
            <input type="text" v-model="age">
        </div>
        <div>
            <label for="">请选择性别</label>
            男 <input type="radio" value="男" v-model="sex">
            女 <input type="radio" value="女" v-model="sex">
        </div>
        <div>
            <label for="">请选择爱好</label>
            游泳 <input type="checkbox" value="游泳" v-model="fav">
            打球 <input type="checkbox" value="打球" v-model="fav">
            健身 <input type="checkbox" value="健身" v-model="fav">
        </div>
        <div>
            <select v-model="hob">
                <option value="西瓜">西瓜</option>
                <option value="芒果">芒果</option>
                <option value="香蕉">香蕉</option>
            </select>
        </div>
    </div>
</template>
<script>
const options = {
    data() {
        return { name: '', age: null, sex:'男' , fav:['打球'],hob:'西瓜'};
    },
    methods: {
    }
};
export default options;
</script>

• 用 v-model 实现双向绑定，即

  • javascript 数据可以同步到表单标签

  • 反过来用户在表单标签输入的新值也会同步到 javascript 这边

• 双向绑定只适用于表单这种带【输入】功能的标签，其它标签的数据绑定，单向就足够了

• 复选框这种标签，双向绑定的 javascript 数据类型一般用数组

计算属性

<template>
    <div>
        <div><input type="text" v-model="lastName"></div>
        <div><input type="text" v-model="firstName"></div>
        <div><h2>{{ fullName }}</h2></div>
        <div><h2>{{ fullName }}</h2></div>
        <div><h2>{{ fullName }}</h2></div>
    </div>
    
</template>
<script>
    const options = {
        data(){
            return {
                firstName:'',
                lastName:''
            }
        },
        /* methods: {
            fullName() {
                console.log('进入了 fullName')
                return this.lastName + this.firstName;
            }
        },*/
        // 自带缓存
        computed : {
            fullName(){
                console.log('进入了')
                return this.lastName+this.firstName;
            }
        }
    };
export default options;
</script>

• 普通方法调用必须加 ()，没有缓存功能

• 计算属性使用时就把它当属性来用，不加 ()，有缓存功能：

  • 一次计算后，会将结果缓存，下次再计算时，只要数据没有变化，不会重新计算，直接返回缓存结果

对于计算比较复杂且不易修改查询频繁的属性，这种方式明显比事件绑定快多了