【vue基础】v-if和v-show的区别；v-for更新检测($set强制更新)；计算属性的get与set方法；侦听器与计算属性区别；

最新推荐文章于 2024-08-20 10:21:10 发布

风无雨

最新推荐文章于 2024-08-20 10:21:10 发布

阅读量776

点赞数

分类专栏： # vue2.0 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/wusandaofwy/article/details/126904080

版权

vue2.0 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

vue指令补充

v-model修饰符

v-model.lazy：在change时触发而非inupt时（失去焦点或enter键的时候才会绑定数据）

v-model.number：输入字符串转为有效的数字(有效：能转数字就转，不能转就不转）

v-model.trim：去掉字符串首尾空格

<body>
    <!-- HTML结构 -->
    <div id="app">
        <input type="text" placeholder="请输入姓名" v-model.lazy="name"><br>
        <p>您的姓名是{{name}}</p>
        <hr>
        <input type="text" placeholder="请输入年龄" v-model.number="age"><br>
        <p>您的年龄是:{{age}}</p>
        <hr>
        <input type="text" placeholder="请输入分数" v-model.trim="grade">
        <p>您的分数是:{{grade}}</p>
        <hr>
    </div>
    <script>
        /* 创建vue实例 */
        let app = new Vue({
            //el:挂载点
            el: '#app',
            //data: 要渲染的数据
            data: {
                name: '',
                age: "",
                grade: '',

            }
        })
    </script>
</body>

v-model指令绑定其他表单

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

2.如果遇到复选框checkbox

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

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

<body>

    <!-- HTML结构 -->
    <div id="app">
        <h2>姓名</h2>
        <input type="text" v-model.lazy="name">
        <h2>性别</h2>
        <!-- 单选框 radio 加上name给同样属性值,实现单选效果 -->
        <!--v-model获取得到是value值,所以要给input[radio]增加value属性 -->
        <input type="radio" value="男" name="sex" v-model="gender">男
        <input type="radio" value="女" name="sex" v-model="gender">女
        <h2>爱好</h2>
        <!--v-model获取得到是value值,所以要给input[checkbox]增加value属性 -->
        <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 rows="10" v-model.lazy.trim="info"></textarea>
        {{name}}
        <br>
        {{gender}}
        <br>
        {{hobby}}
        <br>
        {{subject}}
        <br>
        {{info}}
        <br>
    </div>
    <script>
        /* 创建vue实例 */
        let app = new Vue({
            //el:挂载点
            el: '#app',
            //data: 要渲染的数据
            data: {
                name: '',
                gender: '男',
                hobby: ['学习'],
                subject: '1',
                info: '',
            }
        })
    </script>
</body>

v-if指令

(1)作用：根据条件渲染数据

(2)语法：

单分支： v-if="条件语句"

双分支： v-else

多分支: v-else-if="条件语句"

(3)注意点

v-else与v-else-if的前面必须要有 v-if 或者 v-else-if

<body>

    <!-- HTML结构 -->
    <div id="app">

        <input type="text" placeholder="请输入考试分数" v-model.number="score">
        <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>
    <script>
        /* 创建vue实例 */
        let app = new Vue({
            //el:挂载点
            el: '#app',
            //data: 要渲染的数据
            data: {
                score: ''
            }
        })
    </script>
</body>

v-show指令

(1)作用：设置元素的display属性值

(2)语法： v-show="属性值"

属性值为true: 元素的display:block

属性值为false: 元素的display:none

<body>
    <!-- HTML结构 -->
    <div id="app">
        <p v-if="age>30">我是v-if渲染出来的</p>
        <p v-if="flag">我是v-if渲染出来的</p>
        <p v-show="age>30">我是v-show渲染出来的</p>
        <p v-show="flag">我是v-show渲染出来的</p>
    </div>
    <script>
        /* 创建vue实例 */
        let app = new Vue({
            //el:挂载点
            el: '#app',
            //data: 要渲染的数据
            data: {
                age: '40',
                flag: true
            }
        })
    </script>
</body>

v-if和v-show的区别

v-show与v-if区别

🏆 v-if: 元素的新增与移除适用于不需要频繁切换

**v-if有更好的初始渲染性能，因为当条件为false的时候v-if不会渲染，只有当条件为true才会渲染.

🏆v-show: css样式display显示与隐藏。只是修改元素的display属性值用于频繁切换的盒子显示隐藏

**v-show有更好的切换性能。因为v-show无条件渲染的，本质只是修改元素的css样式。

1.原理不同：v-if本质是元素新增与移除，v-show本质是修改元素的display属性

2.场景不同：v-if用于不需要频繁切换的元素，v-show用于需要频繁切换的元素

3.性能不同：v-if初始渲染性能高，切换性能低。v-show初始渲染性能低，切换性能高

vue的key值作用介绍

vue中key值作用

* (1)让vue准确的识别DOM元素 (类似于给元素添加一个身份证)

* (2)让vue强制更新DOM

应用场景：

💎 使用v-if 切换元素

*(1)v-if：两个盒子里面的DoM结构相同的时候，使用vue值让vue准确的识别渲染元素

💎 使用v-for 渲染列表

* 什么时候用key值：所有的v-for推荐全部加上key值

了解虚拟DOM：

（1)真实DOM：存储几百个属性

（2)虚拟DOM：只存储元素核心的十几个属性

*虚拟DOM本质是一个js对象，与真实DOM最大的区别是虚拟DOM只存储少部分核心属性，从而提高渲染效率

（3）虚拟DOM如何工作的：

a.把页面元素转换为虚拟DOM（VNode）

b.当vue数据变化的时候，使用diff算法对比新旧vnode

c.只更新变化的部分

<body>
    <!-- HTML结构 -->
    <div id="app">
        <button v-text="type" @click="flag=!flag , type=flag? '手机号注册':'邮箱注册'"></button>
        <div v-if="flag" nmb="phone">
            手机号：<input type="text" placeholder="请输入手机号">
            <br>
            验证码：<input type="text" placeholder="请输入验证码">
        </div>
        <div v-else>
            邮箱：<input type="text" placeholder="请输入邮箱">
            <br>
            密码：<input type="text" placeholder="请输入邮箱密码">
        </div>
    </div>
    <script>

        /* 创建vue实例 */
        var app = new Vue({
            //el:挂载点
            el: '#app',
            //data: 要渲染的数据
            data: {
                flag: true,
                type: "手机号注册"
            }
            ,

        })
    </script>
</body>

v-for使用key值

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

1.没有key值：就地更新

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

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

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

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

<body>
    <!-- HTML结构 -->
    <div id="app">
        <ul>
            <li v-for="(item,index) in list  " :key="item.id">
                <span>姓名:{{item.name}}
                </span>
                <span>年龄:{{item.age}}</span>
            </li>
        </ul>

    </div>

    <script>
        /* 创建vue实例 */
        var app = new Vue({
            //el:挂载点
            el: '#app',
            //data: 要渲染的数据
            data: {
                list: [
                    { id: '21378', name: '张三', age: 20 },
                    { id: '12456', name: '李四', age: 22 },
                    { id: '39862', name: '王五', age: 30 },
                ]
            }
        })
    </script>
</body>

v-for更新检测($set强制更新)

v-for更新检测

1.数组的方法分为两种

第一种: 会改变原数组的元素值，例如 reverse()、pop()、push()、sort()等

* 这种情况 v-for也会更新

第二种：不会改变原数组的元素值. 例如 slice() 、 filter() 、 concat()等

* 这种情况 v-for不会更新

slice() 方法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）。原始数组不会被改变。

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

<body>

    <!-- HTML结构 -->
    <div id="app">
        <ul>
            <li v-for="(item,index) in list" ::key="index">
                {{item}}
            </li>
        </ul>
        <button @click="revBtn">数组翻转</button>
        <button @click="sliceBtn">截取前2个</button>
        <button @click="updateBtn">更新第一个元素值</button>
    </div>
    <script>
        /* 创建vue实例 */
        var app = new Vue({
            //el:挂载点
            el: '#app',
            //data: 要渲染的数据
            data: {
                list: [
                    10, 20, 30, 40, 50
                ]
            },
            //methods:事件处理函数
            methods: {
                // 翻转   reverse () :v-for会更新
                revBtn() {
                    this.list.reverse()
                },
                // 截取前俩个  slice():v-for不会更新  
                sliceBtn() {
                    this.list = this.list.slice(0, 2)//把返回的数组赋给新的数组
                },
                //3.替换元素值，不会造成v-for更新

                updateBtn() {
                    // this.$set(更新的数组,下标,更新后的值) 强制更新
                    this.$set(this.list, 0, '饿了')
                },

            }
        })
    </script>
</body>

vue计算属性（computed）

基础使用

🏆（1)计算属性作用：解决模板语法代码冗余问题

*场景：数据需要通过计算才能得到

🏆（2）计算属性语法

computed: {

计算属性名（）{

return 计算属性值

}

}

🏆（3）注意点

a.计算属性要写在vue实例computed中

b.计算属性函数一定要有返回值

🏆（4）计算属性缓存机制

a.当第一次使用计算属性的时候，vue会调用一次函数。然后把函数名和返回值平铺到vue属性中。

b.之后使用计算属性，vue不会调用这个函数，而是从缓存中直接读取。

c.只有当计算属性内部的数据发生变化的时候，才会重新执行一次这个函数，然后又放入缓存

<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>
    <script>
        /* 创建vue实例 */
        let app = new Vue({
            //el:挂载点
            el: '#app',
            //data: 要渲染的数据
            data: {
                msg: '我爱敲代码',
            },
            //计算属性
            computed: {
                reversemsg() {
                    console.log("我被调用了");
                    // 返回翻转字符串  字符串split方法和数组的reverse和join方法组合使用
                    return this.msg.split("").reverse().join("")
                }
            }
        })
    </script>
</body>

计算属性的get与set方法

1. 默认情况下，计算属性只有get方法。没有set,只能获取，不能修改。否则程序会报错

2. 如果希望计算属性可以修改，则可以实现set方法

computed: {
“计算属性名”: {
// 取值
get() {
},
// 设值
set(val) {

}
}

<body>
    <!-- HTML结构 -->
    <div id="app">
        全名：<input type="text" placeholder="请输入你的全名" v-model.lazy="fullName">
        <br>
        姓氏：<input type="text" placeholder="请输入你的姓氏" v-model.lazy="firstname">
        <br>
        名字：<input type="text" placeholder="请输入你的名字" v-model.lazy="lastname">
    </div>
    <script>
        /* 创建vue实例 */
        var app = new Vue({
            //el:挂载点
            el: '#app',
            //data: 要渲染的数据
            data: {
                firstname: '',
                lastname: '',
            },
            //计算属性
            computed: {
                fullName: {
                    // 取值
                    get() {
                        return `${this.firstname}${this.lastname}`
                    },
                    // 设值
                    set(val) {
                        console.log(val)
                        this.firstname = val[0] || ""
                        // substring() 方法返回一个字符串在开始索引到结束索引之间的一个子集，或从开始索引直到字符串的末尾的一个子集。
                        this.lastname = val.substring(1)
                        // this.lastname = val.split('').slice(1).join('')
                        // this.lastname = val.replace(val[0], '')

                    }
                }
            }
        })
    </script>
</body>

购物全选框案例

需求：

1.单选框全选后，全选框自动勾选

2.全选框勾选后单选框自动勾选

全选框的实现

💎计算属性的get把单选框的状态通过every方法传给全选框

💎全选框的状态通过计算属性的set更改单选框的状态

computed: {
                isAll: {
                    set(val) {//全选框的checked值
                        this.list.forEach(item => item.select = val)
                    },
                    get() {
                        // arr.some：判断是否'有元素'满足条件（逻辑或，一真则真，全假为假）
                        // arr.every：判断是否'所有元素'满足条件（逻辑与，一假则假，全真为真）

                        // 如果所有都被选中,则isAll为true
                        return this.list.every(item => item.select)
                    }
                }

<body>

    <!-- HTML结构 -->
    <div id="app">
        全选<input type="checkbox" v-model="isAll">
        <ul>
            <li v-for="item in list" :key="index">
                <input type="checkbox" v-model="item.select"> <label for="">{{item.name}}</label>
            </li>
        </ul>
    </div>
    <script>
        /* 创建vue实例 */
        var app = new Vue({
            //el:挂载点
            el: '#app',
            //data: 要渲染的数据
            data: {
                list: [
                    { name: '前端', select: false },
                    { name: 'UI', select: false },
                    { name: 'Java', select: false },
                    { name: 'php', select: false },
                    { name: 'python', select: false },
                    { name: 'c', select: false },
                    { name: '测试', select: false },
                    { name: '产品', select: false },
                ]
            },
            //计算属性
            computed: {
                isAll: {
                    set(val) {//全选框的checked值
                        this.list.forEach(item => item.select = val)
                    },
                    get() {
                        // arr.some：判断是否'有元素'满足条件（逻辑或，一真则真，全假为假）
                        // arr.every：判断是否'所有元素'满足条件（逻辑与，一假则假，全真为真）

                        // 如果所有都被选中,则isAll为true
                        return this.list.every(item => item.select)
                    }
                }

            }
        })
    </script>
</body>

侦听器(watch)

普通侦听

1.侦听器作用 : 监听某一个数据变化

2.侦听器语法 : 在vue实例的watch对象中

watch:{

'data属性名'(newVal,oldVal){

}

}

<body>

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

    <script>
        /* 创建vue实例 */
        let app = new Vue({
            //el:挂载点
            el: '#app',
            //data: 要渲染的数据
            data: {
                name: '',
                psw: '',
                info: "",
            },
            //侦听器
            watch: {
                name(newval, oldVal) {
                    console.log(newval, oldVal);
                    this.info = "验证中...."
                    // 模拟网络请求
                    setTimeout(() => {
                        this.info = "该用户已被注册"

                    }, 700)
                }
            }
        })


    </script>
</body>

深度侦听

1.深度侦听作用：侦听引用类型内部数据变化

2.语法:

watch: {

"要侦听的属性名": {

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

handler (newVal, oldVal) {}

}

}

<body>

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

    <script>
        /* 创建vue实例 */
        let app = new Vue({
            //el:挂载点
            el: '#app',
            //data: 要渲染的数据
            data: {
                user: {
                    name: '',
                    psd: '',
                }
                ,
                info: ''
            },
            //侦听器
            watch: {
                // 包在要监听的数据里
                user: {
                    deep: true,//深度监听变化
                    handler(newVal, oldVal) {
                        console.log(newVal, oldVal);
                        this.info = "验证中...."
                        setTimeout(() => {
                            this.info = "登录失败"

                        }, 700)
                    }
                }

            }
        })


    </script>
</body>

侦听器与计算属性区别

(1)作用不同:计算属性解决模板渲染冗余问题，侦听器侦听某一个数据变化

(2).语法不同

1)计算属性有返回值，侦听器没有返回值

2)计算属性可以新增属性，而侦听器只能侦听data中的属性

🏆(3)****缓存机制不同:计算属性有缓存,侦听器没有缓存

🏆(4)****代码不同:计算属性不支持异步操作,侦听器支持

(5) 监听数量不同:计算属性可以监听多个数据变化，侦听器只能监听一个数据变化

(6)初始执行时机不同:

计算属性在页面一加载的时候就会执行一次
侦听器只有在数据第一次发生变化的时候才会执行

moment.js使用方法

1.导入js

    <script src="./moment.js"></script>

2.基本使用

        // (1)基本使用
        let date1 = moment().format('YYYY-MM-DD')

3.在moment中传入时间

        // (2)在monent中传入时间
        let date2 = moment(new Date('2011-2-3')).format('YYYY年MM月DD日--HH时mm分ss秒')
        console.log(date2);

风无雨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录