01-vue指令补充

最新推荐文章于 2024-03-14 18:49:13 发布

ifreen

最新推荐文章于 2024-03-14 18:49:13 发布

阅读量343

点赞数 1

文章标签： vue.js 前端 javascript 前端框架

本文链接：https://blog.csdn.net/m0_70847086/article/details/127035460

版权

1.1-v-model修饰符

官方文档：https://cn.vuejs.org/v2/api/#v-model

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 导包 -->
    <script src="./vue.js"></script>
</head>

<body>

    <!-- HTML结构 -->
    <div id="app">
        <input type="text" v-model.lazy="name" placeholder="请输入姓名"><br>
        <p>您的姓名是:{{ name }}</p><hr>
        <input type="text" v-model.number="age" placeholder="请输入年龄"><br>
        <p>您的年龄是:{{ age }}</p><hr>
        <input type="text" v-model.trim="score" placeholder="请输入分数">
        <p>您的分数是:{{ score }}</p><hr>
    </div>
    <!-- 
       v-model修饰符用法
            v-model.lazy : 在change时触发而非inupt时（失去焦点或enter键的时候才会绑定数据）
            v-model.number : 输入字符串转为有效的数字 (有效：能转数字就转,不能转就不转)
            v-model.trim : 去掉字符串首尾空格

     -->
    <script>
        /* 创建vue实例 */
        let app = new Vue({
            //el:挂载点
            el: '#app',
            //data: 要渲染的数据
            data: {
                name: '',
                age: '',
                score: '',
            }
        })
    </script>
</body>
</html>

1.2-v-model绑定其他表单元素

官方文档：表单输入绑定 — Vue.js

1.默认情况下, v-model指令绑定的是表单元素的value值 (复选框checkbox除外)

2.如果遇到复选框checkbox

非数组 : 一般用于单个复选框,此时绑定的是checked属性

数组 : 一般用于多个复选框，此时绑定的是value属性

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 导包 -->
    <script src="./vue.js"></script>
</head>

<body>

    <!-- HTML结构 -->
    <div id="app">
        <h2>性别</h2>
        <input type="radio" value="男" name="sex" v-model="gender">男
        <input type="radio" value="女" name="sex" v-model="gender">女
        <h2>爱好</h2>
        <input type="checkbox" value="学习"   v-model="hobby">学习
        <input type="checkbox" value="上课"   v-model="hobby">上课
        <input type="checkbox" value="敲代码"   v-model="hobby">敲代码
        <input type="checkbox" value="打游戏"   v-model="hobby">打游戏
        <h2>学科</h2>
        <select name="" id="" value="学科" v-model="subject">
            <option value="">请选择学科</option>
            <option value="1">前端</option>
            <option value="2">java</option>
            <option value="3">测试</option>
        </select>
        <h2>自我介绍</h2>
        <textarea v-model="info" rows="10"></textarea>
    </div>
    <!-- 
        1.默认情况下, v-model指令绑定的是表单元素的value值  (复选框checkbox除外)
        2.如果遇到复选框checkbox
            非数组 : 一般用于单个复选框,此时绑定的是checked属性
            数组   : 一般用于多个复选框，此时绑定的是value属性
     -->
    <script>
        /* 创建vue实例 */
        let app = new Vue({
            //el:挂载点
            el: '#app',
            //data: 要渲染的数据
            data: {
                gender:'女',
                hobby:[],
                subject:'',
                info:''
            }
        })
    </script>
</body>
</html>

1.3-v-if指令

v-if官网文档：https://cn.vuejs.org/v2/api/#v-if

指令名称	指令作用	示例	简写形式
v-if	根据条件渲染数据	`v-if="score>=90"`	无
v-show	设置元素的display	`v-show="age>=30"`	无

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 导包 -->
    <script src="./vue.js"></script>
</head>

<body>

    <!-- HTML结构 -->
    <div id="app">
        <!-- lazy :懒加载，输入框失去焦点vue才会渲染数据  -->
        <input type="text" v-model.lazy="score" placeholder="请输入考试分数">
        <h2>你的考试分数为：{{ score }}</h2>
        <hr>
        <h3 v-if="score>=90">给你买机器人</h3>
        <h3 v-else-if="score>=80">给你买玩具车</h3>
        <h3 v-else-if="score>=60">给你买棒棒糖</h3>
        <h3 v-else>给你爱的掌声</h3>
    </div>
    <!-- 
        v-if指令   
            (1)作用： 根据条件渲染数据
            (2)语法： 
                单分支：     v-if="条件语句"
                双分支：     v-else
                多分支:      v-else-if="条件语句"
            (3)注意点
                v-else与v-else-if的前面  必须要有  v-if 或者 v-else-if
     -->
    <script>
        /* 创建vue实例 */
        let app = new Vue({
            //el:挂载点
            el: '#app',
            //data: 要渲染的数据
            data: {
                score: '',
            }
        })
    </script>
</body>
</html>

1.4-v-show指令

v-show官网文档：https://cn.vuejs.org/v2/api/#v-show

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 导包 -->
    <script src="./vue.js"></script>
</head>

<body>

    <!-- HTML结构 -->
    <div id="app">
        <p v-if="age>=30">我是v-if渲染出来的</p>
        <p v-show="age>=30">我是v-show渲染出来的</p>
    </div>
    <!-- 
        v-show 指令   
            (1)作用： 设置元素的display属性值
            (2)语法： v-show="属性值"
                属性值为true:   元素的display:block
                属性值为false:   元素的display:none
            (3)v-show与v-if区别
                v-if  : 条件渲染。  如果不满足条件，则该元素不会添加到DOM树中
                v-show: 显示与隐藏。 只是修改元素的display属性值
                
     -->
    <script>
        /* 创建vue实例 */
        let app = new Vue({
            //el:挂载点
            el: '#app',
            //data: 要渲染的数据
            data: {
                age: 20,
            }
        })
    </script>
</body>
</html>

思考题1：v-if和v-show在功能上有什么区别？

v-show:一定会渲染，只是修改display属性

v-if:根据条件渲染

思考题2：列举v-if和v-show的使用场景（结合目前学过的案例

v-show : 频繁切换。 tab栏，鼠标移入移出隐藏

1.5-vue的key值作用(了解)

key值介绍：

https://cn.vuejs.org/v2/api/#v-for

https://cn.vuejs.org/v2/api/#key

1.vue中key值作用
* (1)让vue准确的识别DOM元素 (类似于给元素添加一个身份证)
* (2)让vue强制更新DOM

2.应用场景：
2.1 使用v-if 切换元素
* 什么时候用key值 : 切换的元素dom结构一致
2.2 使用v-for 渲染列表
* 什么时候用key值：所有的v-for推荐全部加上key值

1.6-v-for指令使用key值（了解虚拟DOM算法）

v-for指令使用key值几种情况 :

1.没有key值：就地更新

2.key值为下标 : 就地更新（与不设置key值没有区别）

3.key值为id （唯一字符串）: 复用相同的key, 更新不同的key

* 同级父元素中，子元素的key值必须是唯一的，否则vue会报错。（类似于相同作用于变量名不能重复）

总结: v-for指令的key值优先使用唯一字符串（性能最高）, 实在没有就用下标index

1.7-v-for更新检测

官方文档：https://cn.vuejs.org/v2/api/#Vue-set

1.数组的方法分为两种

第一种: 会改变原数组的元素值，例如 reverse()、pop()、push()等 * 这种情况 v-for也会更新

第二种：不会改变原数组的元素值. 例如 slice() 、 filter() 、 concat()等 * 这种情况 v-for不会更新

2.总结 : 如果v-for没有更新. 可以覆盖整个数组, 或使用 vue.$set() 强制更新

<!DOCTYPE html>
<html lang="zh-CN">

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

<body>

    <!-- HTML结构 -->
    <div id="app">
        <ul>
            <li v-for="item in list" >
                {{ item }}
            </li>
        </ul>
        <button @click="revBtn">数组翻转</button>
        <button @click="sliceBtn">截取前2个</button>
        <button @click="updateBtn">更新第一个元素值</button>
    </div>

    <script>

        /* v-for更新检测
        1.数组的方法分为两种
            第一种: 会改变原数组的元素值， 例如  reverse()、pop()、push()等
                * 这种情况 v-for也会更新
            第二种：不会改变原数组的元素值. 例如  slice() 、 filter() 、 concat()等
                * 这种情况 v-for不会更新

        2.总结 : 如果v-for没有更新.  可以覆盖整个数组, 或 使用 vue.$set() 强制更新
        */
        /* 创建vue实例 */
        var app = new Vue({
            //el:挂载点
            el: '#app',
            //data: 要渲染的数据
            data: {
                list: [
                    10,20,30,40,50
                ]
            },
            //methods:事件处理函数
            methods: {
                revBtn() {
                    // 1. 数组翻转可以让v-for更新
                    this.list.reverse()
                },
                sliceBtn() {
                    // 2. 数组slice方法不会造成v-for更新
                    /* 原因:slice没有改变原始数组,只是从原始数组中获取元素
                       解决方案: 覆盖原始数组
                    */
                    let newArr = this.list.slice(0, 2)
                    this.list = newArr
                },
                updateBtn() {
                    // 3. 替换元素值,不会造成v-for更新
                    // this.list[0] = 88

                    /* 解决方案: this.$set()
                    参数1: 更新目标结构
                    参数2: 更新位置
                    参数3: 更新值
                    */
                    this.$set(this.list, 0, 88)
                }
            }
        })
    </script>
</body>

</html>

这些方法会触发数组改变, v-for会监测到并更新页面

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

这些方法不会触发v-for更新

slice()
filter()
concat()

注意: vue不能监测到数组里赋值的动作而更新, 如果需要请使用Vue.set() 或者this.$set(), 或者覆盖整个数组

总结: 改变原数组的方法才能让v-for更新

02-vue计算属性

1.1-vue计算属性

vue计算属性官方文档：计算属性和侦听器 — Vue.js

1.计算属性作用：解决渲染数据的代码冗余问题

某些数据在渲染的时候，可能要经过一些复杂逻辑的计算处理

2.计算属性的语法：在vue实例的computed对象中声明一个函数
- 这个函数名就是计算属性的属性名
- 在这个函数中 return 返回值（是计算属性的属性值）
3.注意点
- 这个函数一定要写在vue实例的computed对象中
- 这个函数一定要有返回值，否则计算属性无法渲染

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 导包 -->
    <script src="./vue.js"></script>
</head>

<body>

    <!-- HTML结构 -->
    <div id="app">
        <p>{{ msg }}</p>
        <!-- 翻转字符串 -->
        <!-- <p> {{ msg.split('').reverse().join('') }}</p> -->
        <p> {{ reverseMsg }}</p>
        <!-- 别的地方也需要翻转字符串 -->
        <!-- <p> {{ msg.split('').reverse().join('') }}</p> -->
        <p> {{ reverseMsg }}</p>
    </div>
    <!-- 
        vue计算属性
      
            (1)计算属性作用 ： 解决数据渲染代码冗余问题
            (2)计算属性应用场景：当数据需要通过计算才能得到
                * 例如： 商品总和，全选功能
            (3)计算属性语法 :  
                a. 在vue实例的computed对象中声明一个函数  (计算属性的属性名)
                b. 在这个函数中 return 返回值  (计算属性的属性值)
            (4)计算属性注意点：
                a. 这个函数一定要写在vue实例的computed对象中
                b. 这个函数一定要有返回值，否则计算属性无法渲染
            (5)计算属性特点及原理介绍 :
                a. 计算属性本质是一个函数
                b. 计算属性的值就是函数的返回值
                c. 缓存机制（提高性能）
                    （1）计算属性在第一次使用时，会执行一次函数体，之后就会将返回值缓存起来
                    （2）下一次使用计算属性的时候，不会执行这个函数，而是直接从缓存中读取
                    （3）只有当计算属性中的数据发生变化时，这个函数才会重新执行一次
     -->
    <script>
        /* 创建vue实例 */
        let app = new Vue({
            //el:挂载点
            el: '#app',
            //data: 要渲染的数据
            data: {
                msg: '我爱敲代码',
            },
            //计算属性
            computed: {
                reverseMsg(){
                    //this: vue实例
                    console.log('我被调用了');
                   return this.msg.split('').reverse().join('')
                }
            },
        })
    </script>
</body>
</html>

问题1：计算属性主要是用于解决什么问题的？

解决data中数据渲染冗余问题

问题2：计算属性好处

缓存功能

当计算属性依赖值不变，直接从缓存读取

当计算属性依赖值发生变化，vue会重新执行一次函数，并且将返回值放入缓存中

1.2-计算属性的set与get方法

官方文档：计算属性和侦听器 — Vue.js

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 导包 -->
    <script src="./vue.js"></script>
</head>

<body>

    <!-- HTML结构 -->
    <div id="app">
        全名：<input type="text" placeholder="请输入你的全名" v-model="fullName">
        <br>
        姓氏：<input type="text" placeholder="请输入你的姓氏" v-model="firstName">
        <br>
        名字：<input type="text" placeholder="请输入你的名字" v-model="lastName">
    </div>

    <script>
        /* 
        1. 默认情况下，计算属性只有get方法。只能获取，不能修改。否则程序会报错
        2. 如果希望计算属性可以修改，则可以实现set方法
        */

        /* 创建vue实例 */
        var app = new Vue({
            //el:挂载点
            el: '#app',
            //data: 要渲染的数据
            data: {
                firstName:'',
                lastName:'',
            },
            //计算属性
            computed:{
                /*计算属性两种写法 
                (1)fullName(){}  : 默认就是get函数, 无法添加set函数
                (2)fullName:{ get(){},set(val){} }   : 如果想要添加set函数，计算属性就需要写成对象格式
                */
                fullName:{
                    //获取计算属性
                    get(){
                        return `${this.firstName}${this.lastName}`
                    },
                    //设置计算属性
                    set(val){
                        console.log(val)//设置的值
                        this.firstName = val[0] || ''
                        this.lastName = val.substr(1,val.length-1)  
                    }
                }
            }
        })
    </script>
</body>
</html>

03-vue侦听器

计算属性和侦听器 — Vue.js

1.1-侦听器使用

watch:{

'要侦听的属性名'(newVal,oldVal){ }

}

<!DOCTYPE html>
<html lang="zh-CN">

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

</head>

<body>

    <!-- HTML结构 -->
    <div id="app">
        用户名: <input type="text" placeholder="请输入用户名" v-model="username"><span>{{ info }}</span>
        <br>
        密码: <input type="text" placeholder="请输入密码" v-model="password">
    </div>

    <script>
        /* 
        1.侦听器作用 : 监听某一个数据变化
        2.侦听器语法 : 在vue实例的watch对象中
            '要侦听的属性名'(newVal,oldVal){

            }
        侦听器与计算属性区别
            计算属性 :  监听多个属性 （只要计算属性内部的任何属性变化，都会执行函数）
            侦听器 : 监听单个属性
        */

        /* 创建vue实例 */
        let app = new Vue({
            //el:挂载点
            el: '#app',
            //data: 要渲染的数据
            data: {
                username: '',
                password: '',
                info:''
            },
            //计算属性
            watch: {
                username(newVal, oldVal) {
                    console.log(newVal, oldVal)
                    this.info = '验证中...'
                    //模拟网络请求
                    setTimeout(()=>{
                        this.info = '该用户已被注册'
                    },500)
                }
            }
        })


    </script>
</body>

</html>

1.2-深度侦听

watch: {

"要侦听的属性名": {

deep: true, // 深度侦听复杂类型内变化

handler (newVal, oldVal) {}

}

}

<!DOCTYPE html>
<html lang="zh-CN">

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

</head>

<body>

    <!-- HTML结构 -->
    <div id="app">
        用户名: <input type="text" placeholder="请输入用户名" v-model="user.username"><span>{{ info }}</span>
        <br>
        密码: <input type="text" placeholder="请输入密码" v-model="user.password">
    </div>

    <script>
        /* 
        1.深度侦听作用 ： 侦听引用类型内部数据变化
        2.
            watch: {
                "要侦听的属性名": {
                    deep: true, // 深度侦听复杂类型内变化
                    handler (newVal, oldVal) {}
                }
            }
        */

        /* 创建vue实例 */
        let app = new Vue({
            //el:挂载点
            el: '#app',
            //data: 要渲染的数据
            data: {
                user: {
                    username: '',
                    password: ''
                },
                info: ''
            },
            //计算属性
            watch: {
                user: {
                    deep: true,
                    handler(newVal, oldVal) {
                        console.log(newVal, oldVal)
                        this.info = '验证中...'
                        //模拟网络请求
                        setTimeout(() => {
                            this.info = '该用户已被注册'
                        }, 500)
                    }
                }
            }
        })


    </script>
</body>

</html>

ifreen

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
01-vue指令补充

第二种：不会改变原数组的元素值. 例如 slice() 、 filter() 、 concat()等 * 这种情况 v-for不会更新。注意: vue不能监测到数组里赋值的动作而更新, 如果需要请使用Vue.set() 或者this.$set(), 或者覆盖整个数组。第一种: 会改变原数组的元素值，例如 reverse()、pop()、push()等 * 这种情况 v-for也会更新。2.总结 : 如果v-for没有更新. 可以覆盖整个数组, 或使用 vue.$set() 强制更新。
复制链接

扫一扫