Vue学习笔记——声明式渲染

学习准备

安装VSCode，安装LiveServer插件。

可以右键打开html文件。

入门案例

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.9/vue.js"></script>
<div id="app">{{msg}}</div>
<script>
    new Vue({
        el: "#app",
        data: {
            msg: "你好，世界！"
        }
    })
</script>

效果：

插值表达式

双大括号，可以渲染表达式的值，以及data中的数据，到页面上。

<div id="app">
    {{1+1}}<br />
    {{"ABC".toLowerCase()}}<br />
    {{Date.now()}}
</div>

效果：

响应式特性

数据变化，视图会自动更新。

验证步骤：
1，用vm接收Vue对象。

const vm = new Vue({
    el: "#app",
    data: {
        msg: "你好，世界！"
    }
})

2，在控制台调整vm.msg的值。

3，效果：视图自动更新。

安装浏览器插件

https://chromewebstore.google.com/detail/iaajmlceplecbljialhhkmedjlpdblhp?hl=zh-CN&utm_source=ext_sidebar

可以方便的修改数据。

v-html

v-html可以指定标签的html内容。

<div v-html="msg"></div>

msg: "<h1>你好，世界！</h1>"

v-show和v-if

如果v-show的值为false，元素会被添加display:none。

<div v-show="msg">A</div>
<div v-show="!msg">B</div>

msg: true

如果v-if的值为false，元素会被移除。

<div v-if="msg">A</div>
<div v-if="!msg">B</div>

msg: true

v-else和v-else-if

用于辅助v-if。

<div v-if="msg>80">优秀</div>
<div v-else-if="msg>60">及格</div>
<div v-else>不及格</div>

msg: 79

v-on

用于事件处理，值可以是内联语句。

<button v-on:click="msg++">{{msg}}</button>

msg: 79

值也可以是methods中的方法名。

<button v-on:click="add">{{msg}}</button>

const vm = new Vue({
    el: "#app",
    data: {
        msg: 79
    },
    methods: {
        add() {
            this.msg++
        }
    }
})

可以简写为@。

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

msg: 79

写成方法调用，即可传递参数。

<button @click="add(1,2)">{{msg}}</button>

add(a, b) {
    console.log(a + b);
}

v-bind

可以设置标签属性值。

<a v-bind:href="msg">链接</a>

msg: "http://www.baidu.com"

可以简写。

<a :href="msg">链接</a>

msg: "http://www.baidu.com"

v-for

可以基于数据，多次渲染元素。

key属性是必须的，值为列表项的唯一标识。

<ul>
    <li v-for="item in msg" :key="item.id">{{item.name}}</li>
</ul>

msg: [{ name: "AAA", id: 1 }, { name: "BBB", id: 2 }, { name: "CCC", id: 3 }]

v-mdoel

可以管理表单值。

双向数据绑定：
表单变化，值跟着变化。
值变化，表单跟着变化。

<input type="text" v-model="msg" />{{msg}}

msg: "abc"

指令的修饰符

.enter

只针对回车键的事件。

<input type="text" @keyup.enter="msg++" />{{msg}}

msg: "89"

.trim

自动去除首尾的空格。

<input type="text" v-model.trim="msg" />{{msg}}

msg: "89"

.number

自动转数字。

.stop

阻止事件的冒泡。

.prevent

阻止事件的默认行为。

<a href="http://www.baidu.com" @click.prevent="">链接</a>

样式处理

class写成对象格式，值为真则具有该类名。

.a {
    background-color: red;
}

<div :class="{a:msg}" @click="msg=!msg">DIV</div>

msg: true

v-model应用于其他元素

复选框：绑定布尔值。

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

msg: true

单选框：name分组，value代表当前数据，绑定字符串值。

<input type="radio" v-model="msg2" name="abc" value="a" />
<input type="radio" v-model="msg2" name="abc" value="b" />

msg2: "a"

下拉框：类似于单选框。

<select v-model="msg3">
    <option value="a">A</option>
    <option value="b">B</option>
    <option value="c">C</option>
</select>

msg3: "a"

计算属性

由data衍生的数据。

data变化，计算属性会跟着变化。

<input type="text" v-model.number="a">{{a}}个
<input type="text" v-model.number="b">{{b}}个
<p>总数{{total}}</p>

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

完整写法，可以读取和修改。

<input type="text" v-model.number="a">{{a}}个
<input type="text" v-model.number="b">{{b}}个
<p>总数{{total}}</p>
<button @click="total=0">清空</button>

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

监视器

数据变化时自动调用。

<input type="text" v-model="a">{{a}}

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

可以监视对象的属性。

<input type="text" v-model="a.b">{{a.b}}

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

可以立即执行一次。
可以监视对象的所有属性。

<input type="text" v-model="a.b">{{a.b}}

const vm = new Vue({
    el: "#app",
    data: {
        a: { b: "asd" }
    },
    watch: {
        a: {
            immediate: true,//立即执行一次
            deep: true,//监视所有属性
            handler(newV, oldV) {
                console.log(oldV + "==>" + newV);
            }
        }
    }
})

生命周期

创建阶段。生成响应式数据。
挂载阶段。渲染页面。
更新阶段。数据变化触发页面更新。
销毁阶段。销毁实例。

created：创建完毕调用。
mounted：渲染完毕调用。

{{msg}}

const vm = new Vue({
    el: "#app",
    data: {
        msg: "你好，世界！"
    },
    created() {
        console.log('created');
    },
    mounted() {
        console.log('mounted');
    }
})

更多生命周期方法；