Vue学习笔记

Vue学习笔记_Day02

文章目录

1，指令修饰符
2，样式控制
3，v-model进阶
4，计算属性
5，监视器
6，生命周期

1，指令修饰符

跟在指令后面，具有特殊的功能。

事件修饰符：
.enter：只有enter键能触发事件。
.stop：阻止事件冒泡。
.prevent：阻止默认行为。

v-model修饰符：
.trim：自动去除首尾的空格。
.number：自动转换成数字。

比如说：

阻止a标签的默认跳转行为。

<a href="" @click.prevent="">链接</a>

按回车键清空。

<input type="text" v-model="msg" @keyup.enter="msg=''" />

data: {
    msg: ""
}

2，样式控制

class写成对象。键为类名，值为真假。
为真则具有该类名，为假则没有。

<div :class="{abc:msg}">你好，世界！</div>

data: {
    msg: true
}

style写成对象。属性名小驼峰。

<div :style="{color:msg}">你好，世界！</div>

data: {
    msg: 'red'
}

3，v-model进阶

复选框，值为真假。

<input type="checkbox" v-model="msg">

data: {
    msg: true
}

单选框，
name将多个单选框分为一组。
value作为当前单选框的值。

值为value中的一个。

<input type="radio" name="gender" value='1' v-model=msg />
<input type="radio" name="gender" value='2' v-model=msg />

data: {
    msg: '1'
}

下拉框，
值为value中的一个。

<select v-model="msg">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

data: {
    msg: '1'
}

4，计算属性

由data计算出来的属性，称为计算属性。

在computed里面声明。
写成函数，返回值就是计算属性的值。

比如说：两数之和。

<input type="text" v-model.number="a"><br />
<input type="text" v-model.number="b"><br />
{{a}}<br />
{{b}}<br />
{{abc}}

const vm = new Vue({
    el: "#app",
    data: {
        a: 0,
        b: 0
    },
    computed: {
        abc() {
            return this.a + this.b
        }
    }
})

还有一种写法。能够读取和修改计算属性。

<input type="text" v-model.number="a"><br />
<input type="text" v-model.number="b"><br />
{{a}}<br />
{{b}}<br />
{{abc}}
<button @click="abc=''">清空</button>

const vm = new Vue({
    el: "#app",
    data: {
        a: 0,
        b: 0
    },
    computed: {
        abc: {
            get() {
                return this.a + this.b
            }, 
            set(v) {
                this.a = 0
                this.b = 0
            }
        }
    }
})

5，监视器

用于当数据变化时，执行某些操作。

{{a}}
<button @click="a++">+</button>

const vm = new Vue({
    el: "#app",
    data: {
        a: 0
    },
    watch: {
        a(newV, oldV) {
            console.log(newV, oldV);
        }
    }
})

如果要监视对象的属性，加引号即可。

{{a.b}}
<button @click="a.b++">+</button>

const vm = new Vue({
    el: "#app",
    data: {
        a: {
            b: 0
        }
    },
    watch: {
        'a.b'(newV, oldV) {
            console.log(newV, oldV);
        }
    }
})

如果要监视对象的所有属性，加配置项。

{{a.b}}
<button @click="a.b++">+</button>
{{a.c}}
<button @click="a.c++">+</button>

const vm = new Vue({
    el: "#app",
    data: {
        a: {
            b: 0,
            c: 0
        }
    },
    watch: {
        a: {
            deep: true,
            handler(newV, oldV) {
                console.log(newV.b, newV.c);
            }
        }
    }
})

一进入页面，可以选择立即执行一次。

watch: {
    a: {
        deep: true,
        immediate: true,
        handler(newV, oldV) {
            console.log(newV.b, newV.c);
        }
    }
}

6，生命周期

四个阶段：创建，挂载，更新，销毁。
八个函数。
在这里插入图片描述

{{a}}
<button @click="a++">+</button>

const vm = new Vue({
    el: "#app",
    data: {
        a: 0
    },
    beforeCreate() {
        console.log(1);
    },
    created() {
        console.log(2);
    },
    beforeMount() {
        console.log(3);
    },
    mounted() {
        console.log(4);
    },
    beforeUpdate() {
        console.log(5);
    },
    updated() {
        console.log(6);
    },
    beforeDestroy() {
        console.log(7);
    },
    destroyed() {
        console.log(8);
    }
})