vue-day02

最新推荐文章于 2024-05-30 15:07:12 发布

愿你一生清欢

最新推荐文章于 2024-05-30 15:07:12 发布

阅读量141

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/X12138J/article/details/126254648

版权

v-model绑定其他表单元素

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

2.如果遇到复选框checkbox

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

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

v-if指令

v-if 作用:根据条件渲染数据

v-show 作用:设置元素的display

区别:

v-if : 根据条件渲染

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

使用场景 :

v-if : 切换频率低 (注册方式页面)

v-show : 切换频率高(鼠标移入移出事件)

vue的key值的作用

vue的key值的几种使用情况

1.没有key值就地更新

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

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

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

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

v-for检测更新

数组的方法分为两种

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

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

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

vue计算属性

1.计算属性的作用:解决渲染页面的代码冗余问题

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

2.计算属性的语法:在vue实例对象computed中声明一个函数

这个函数名就是计算属性的属性名

在这个函数中的return返回值就是计算属性的属性值

3.注意

这个函数一定要写在vue实例对象computed中

这个函数一定要有返回值否则计算属性无法渲染

4.计算属性的好处:

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

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

计算属性的get与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">
        全名：<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>

侦听器

<!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){

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

        /* 创建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>

虚拟DOM

1.vue底层会把挂载点中的真实DOM结构，转变为虚拟DOM

真实DOM ：我们webapi学习的dom对象，一个对象里面有几百个属性

虚拟DOM ： 本质是一个js对象,只处理一些关键的属性。（其他的不处理）

2.vue是如何更新渲染数据呢

生成新的虚拟DOM结构

把几百个dom属性，变成虚拟dom十几个关键属性

和旧的虚拟DOM结构对比

找不不同, 只更新变化的部分(重绘/回流)到页面 - 也叫打补丁

好处:

1.提高了更新DOM的性能(不用把页面全删除重新渲染)

2.虚拟DOM只包含必要的属性(没有真实DOM上百个属性)