vue(5)

news2024/12/23 23:53:14

文章目录

1. 监测数据原理
- 1.1 通过问题引出
- 1.2 开始
- 1.3 Vue.set() 方法
- 1.4 vue 监视数组
- 1.5 小练习
2. 收集表数据
3. 过滤器
4. 内置指令
- 4.1 v-text
- 4.2 v-html
- 4.3 v-cloak
- 4.4 v-once
- 4.5 v-pre

1. 监测数据原理

1.1 通过问题引出

在这里插入图片描述

1.2 开始

要想解决上面的这个问题，需要知道 Vue 是如何监测数组里元素的改变 , 但是为了更好的理解，这里先来说说 vue 是如何监测对象里数据改变的。

回顾：数据代理 Vue (3) ，之前说过数据代理，是让 vm._data = data , 其实这是第二步，第一步是对 data 进行加工 ,

vue 监视原理：

在这里插入图片描述

简单来说，监视数据的原理就是靠 set ，当我们修改 data中的属性是 (比如上面的 name ， address) ， vue 就会重新解析模板，

生成新的虚拟 DOM ，然后新旧虚拟 DOM 对比，更新页面 .

知道了 set ，下面就来看看 set 这个 API

1.3 Vue.set() 方法

在这里插入图片描述

图二：上面是在控制台上写 ,下面写一个按钮，点击添加学校年龄

在这里插入图片描述

图三： set 的局限性

在这里插入图片描述

1.4 vue 监视数组

在这里插入图片描述

vue 文档 : 列表渲染 — Vue.js (vuejs.org)

图二：

在这里插入图片描述

可以看到想要 vue 监视到数组的变化，需要通过上面列举的方法，其实还可以通过之前说过的 set 来改 .

在这里插入图片描述

同理 $set 一样，这里不展示了 .

1.5 小练习

将之前说过的 API 使用以下 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../js/vue.js"></script>

</head>

<body>
    <div id="root">
        <button @click="student.age++">年龄+1岁</button><br /><br />
        <button @click="addSex()">添加性别属性, 默认值: 男</button><br /><br />
        <button @click="removeSex()">隐藏 性别</button>
        <button @click="updateSex()">修改性别</button><br /><br />

        <button @click="addFriend()">在列表首页添加一名朋友</button><br /><br />

        <button @click="updateFirstFriendName">修改第一个朋友的名字为: 鲲鹏</button><br /><br />

        <button @click="addHobby">添加一个爱好</button><br /><br />

        <button @click="updateHobby">修改第一个爱好为: 打羽毛球</button>

        <h3>姓名: {{student.name}}</h3>
        <h3>年龄: {{student.age}}</h3>
        <h3 v-if="student.sex">性别: {{student.sex}}</h3>
        <h2>爱好: </h2>
        <ul>
            <li v-for="(h,index) in student.hobby" :key="index">
                {{h}}
            </li>
        </ul>

        <h2>朋友: </h2>
        <ul>
            <li v-for="(f,index) in student.friends" :key="index">
                {{f.name}}-{{f.age}}
            </li>
        </ul>
    </div>

    <script>

        // let flag = false;
        let vm = new Vue({

            el: "#root",
            data: {
                student: {
                    name: "张三",
                    age: 18,
                    // 爱好
                    hobby: [
                        // 数组 
                        "抽烟",
                        "喝酒",
                        "烫头",
                    ],
                    flag: false,
                    friends: [
                        {
                            name: '张三', age: 35

                        },
                        {
                            name: "李四", age: 60
                        }
                    ]
                },

            },
            methods: {
                addSex() {

                    // this.$set(this.student,'sex','男')
                    Vue.set(this.student, 'sex', '男')
                    this.flag = true
                },
                updateSex() {
                    if (this.flag) {
                        if (this.student.sex === '男') {
                            this.student.sex = '女'
                        } else {
                            this.student.sex = '男'
                        }
                    }
                },
                removeSex() {
                    if (this.student.sex) {
                        this.flag = false
                        this.student.sex = null
                    }
                },
                addFriend() {
                    this.student.friends.unshift({ name: "坤哥", age: 80 })
                },
                updateFirstFriendName() {

                    this.student.friends[0].name = '鲲鹏'

                },
                addHobby() {
                    this.student.hobby.push('学习')
                },
                updateHobby(){
                    this.student.hobby.splice(0,1,'打羽毛球')

                    // 方法二 :
                    // Vue.set(this.student.hobby,0,'打羽毛球')

                    // 方法三 :
                    // this.$set(this.student.hobby,0,'打羽毛球')
                }


            }

        })
    </script>
</body>

</html>

总结 :

Vue 监视数据的原理 :

vue 会监视 data 中所有层次的数据 .
如何监测对象中的数据 ?

a.通过 setter 实现监视，且要在 new Vue 时就传入要监测的数据 (data 中写的)
- 对象中后追加的属性， Vue 默认不做响应式处理
- 如需要给后添加的属性做响应式，请使用这如下 API
- Vue.set(target,propertyName/index,value) 或 vm.$set(target,propertyName/index,value)
如何监测数组中的数据？

a. 通过包裹数组更新元素的方式实现，本质就是做了两件事 :
- 通过调用原生对应的方法对数组进行更新.
- 重新解析模板，进而更新页面
在Vue 修改数组中的某个元素一定要用如下方法 :

a. 使用这些 API ： push() , pop() , shift() , unshift(), splice() , sort() ， reverse() ,

b. Vue.set() 或 vm.$set()

特别注意： Vue.set() 和 vm.$set() 不能给 vm 或 vm 的根数据对象 (data) 添加属性

最后说以下数据劫持 :

在这里插入图片描述

2. 收集表数据

要求：

在这里插入图片描述

实现：

在这里插入图片描述

图二：

在这里插入图片描述

图三：

在这里插入图片描述

图四：

在这里插入图片描述

图五：补充

在这里插入图片描述

附上代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>收集表达</title>
    <script src="../../js/vue.js"></script>
</head>

<body>
    <div id="root">
        <form @submit.prevent="demo">
           
            <!-- form 表单提交数据 -->
            <label for="demo"> 账号 :</label>
            <input type="text" id="demo" v-model.trim="account"><br /><br />


            <label for="demo2"> 密码 :</label>
            <input type="text" id="demo2" v-model="password"><br /><br />

            <label for="demo3">年龄 : </label>
            <input type="number" id="demo3" v-model.number="age"><br /><br />




            男 <input type="radio" name="sex" v-model='sex' value="male">
            女 <input type="radio" name="sex" v-model='sex' value="female"><br /><br />

            爱好 :
            学习 <input type="checkbox" v-model='hobby' value="study">
            打游戏<input type="checkbox" v-model='hobby' value="game">
            吃饭<input type="checkbox" v-model='hobby' value="eat"> <br /><br />


            <select v-model="city">
                <option value="">请选择小区</option>
                <option value="beijing">北京</option>
                <option value="shanghai">上海</option>
                <option value="shenzhen">深圳</option>
                <option value="wuhan">武汉</option>
            </select>
            <br /><br />

            其他信息 :

            <textarea v-model.lazy="other"></textarea>




            <br /> <br />
            <input type="checkbox" v-model="agree">阅读并接收<a href="#">《用户协议》</a>

            <button>提交</button>

        </form>


    </div>
</body>

<script>
    let vm = new Vue({
        el: "#root",
        data: {
            account: '',
            password: '',
            sex: 'female',
            hobby: [],
            city: 'beijing',
            other: '',
            agree: '',
            age: '',
        },
        methods: {
            demo() {
                console.log(JSON.stringify(this._data))
            }
        }
    })
</script>

</html>

总结：

收集表单数据 :

若 <input type="text" /> ，则 v-model 收集的是 value 值，用户输入的就是 value值 .
若 <input type="radio" /> , 则 v-model 收集的就是 value 值，且要给标签配置 value 值
若 <input type="checkbox" />

a. 没有配置 inpput 的value 属性，那么收集的就是 checked (勾选 or 未勾选，是布尔值)

b. 配置 inputd value 属性 :
- v-model 的初始值是非数组，那么收集的就是 checked (勾选 or 未勾选，是布尔值)
- v-model 的初始值是数组，那么收集的就是 value 组成的数组
备注： v-model的三个修饰符

a. lazy ：失去焦点再收集数据

b. number : 数组字符串转为有效的数字

c. trim : 输入首位空格过滤