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

    目录

    vue指令补充

    v-model修饰符

    v-model指令绑定其他表单

    v-if指令

    v-show指令

    v-if和v-show的区别

    vue的key值作用介绍

    v-for使用key值

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

    vue计算属性（computed）

    基础使用

    计算属性的get与set方法

    购物全选框案例

    侦听器

    普通侦听

    深度侦听

    侦听器与计算属性区别

    moment.js使用方法

    vue指令补充

    v-model修饰符

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

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

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

    1. <body>
    2.     <!-- HTML结构 -->
    3.     <div id="app">
    4.         <input type="text" placeholder="请输入姓名" v-model.lazy="name"><br>
    5.         <p>您的姓名是{{name}}</p>
    6.         <hr>
    7.         <input type="text" placeholder="请输入年龄" v-model.number="age"><br>
    8.         <p>您的年龄是:{{age}}</p>
    9.         <hr>
    10.         <input type="text" placeholder="请输入分数" v-model.trim="grade">
    11.         <p>您的分数是:{{grade}}</p>
    12.         <hr>
    13.     </div>
    14.     <script>
    15.         /* 创建vue实例 */
    16.         let app = new Vue({
    17.             //el:挂载点
    18.             el: '#app',
    19.             //data: 要渲染的数据
    20.             data: {
    21.                 name: '',
    22.                 age: "",
    23.                 grade: '',
    24.  
    25.             }
    26.         })
    27.     </script>
    28. </body>

    v-model指令绑定其他表单

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

            2.如果遇到复选框checkbox

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

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

    1. <body>
    2.  
    3.     <!-- HTML结构 -->
    4.     <div id="app">
    5.         <h2>姓名</h2>
    6.         <input type="text" v-model.lazy="name">
    7.         <h2>性别</h2>
    8.         <!-- 单选框 radio 加上name给同样属性值,实现单选效果 -->
    9.         <!--v-model获取得到是value值,所以要给input[radio]增加value属性 -->
    10.         <input type="radio" value="男" name="sex" v-model="gender">男
    11.         <input type="radio" value="女" name="sex" v-model="gender">女
    12.         <h2>爱好</h2>
    13.         <!--v-model获取得到是value值,所以要给input[checkbox]增加value属性 -->
    14.         <input type="checkbox" value="学习" v-model="hobby">学习
    15.         <input type="checkbox" value="上课" v-model="hobby">上课
    16.         <input type="checkbox" value="敲代码" v-model="hobby">敲代码
    17.         <input type="checkbox" value="打游戏" v-model="hobby">打游戏
    18.         <h2>学科</h2>
    19.         <select name="" id="" value="学科" v-model="subject">
    20.             <option value="">请选择学科</option>
    21.             <option value="1">前端</option>
    22.             <option value="2">java</option>
    23.             <option value="3">测试</option>
    24.         </select>
    25.         <h2>自我介绍</h2>
    26.         <textarea rows="10" v-model.lazy.trim="info"></textarea>
    27.         {{name}}
    28.         <br>
    29.         {{gender}}
    30.         <br>
    31.         {{hobby}}
    32.         <br>
    33.         {{subject}}
    34.         <br>
    35.         {{info}}
    36.         <br>
    37.     </div>
    38.     <script>
    39.         /* 创建vue实例 */
    40.         let app = new Vue({
    41.             //el:挂载点
    42.             el: '#app',
    43.             //data: 要渲染的数据
    44.             data: {
    45.                 name: '',
    46.                 gender: '男',
    47.                 hobby: ['学习'],
    48.                 subject: '1',
    49.                 info: '',
    50.             }
    51.         })
    52.     </script>
    53. </body>

    v-if指令

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

                (2)语法：

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

                    双分支：     v-else

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

                (3)注意点

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

    1. <body>
    2.  
    3.     <!-- HTML结构 -->
    4.     <div id="app">
    5.  
    6.         <input type="text" placeholder="请输入考试分数" v-model.number="score">
    7.         <h2>你的考试分数为：{{score}}</h2>
    8.         <hr>
    9.         <h3 v-if="score>=90">爸爸给你买法拉利</h3>
    10.         <h3 v-else-if="score>=80">爸爸给你买保时捷</h3>
    11.         <h3 v-else-if="score>=60">爸爸给你买奥迪</h3>
    12.         <h3 v-else>不及格</h3>
    13.     </div>
    14.     <script>
    15.         /* 创建vue实例 */
    16.         let app = new Vue({
    17.             //el:挂载点
    18.             el: '#app',
    19.             //data: 要渲染的数据
    20.             data: {
    21.                 score: ''
    22.             }
    23.         })
    24.     </script>
    25. </body>

    v-show指令

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

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

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

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

    1. <body>
    2.     <!-- HTML结构 -->
    3.     <div id="app">
    4.         <p v-if="age>30">我是v-if渲染出来的</p>
    5.         <p v-if="flag">我是v-if渲染出来的</p>
    6.         <p v-show="age>30">我是v-show渲染出来的</p>
    7.         <p v-show="flag">我是v-show渲染出来的</p>
    8.     </div>
    9.     <script>
    10.         /* 创建vue实例 */
    11.         let app = new Vue({
    12.             //el:挂载点
    13.             el: '#app',
    14.             //data: 要渲染的数据
    15.             data: {
    16.                 age: '40',
    17.                 flag: true
    18.             }
    19.         })
    20.     </script>
    21. </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.只更新变化的部分

    1. <body>
    2.     <!-- HTML结构 -->
    3.     <div id="app">
    4.         <button v-text="type" @click="flag=!flag , type=flag? '手机号注册':'邮箱注册'"></button>
    5.         <div v-if="flag" nmb="phone">
    6.             手机号：<input type="text" placeholder="请输入手机号">
    7.             <br>
    8.             验证码：<input type="text" placeholder="请输入验证码">
    9.         </div>
    10.         <div v-else>
    11.             邮箱：<input type="text" placeholder="请输入邮箱">
    12.             <br>
    13.             密码：<input type="text" placeholder="请输入邮箱密码">
    14.         </div>
    15.     </div>
    16.     <script>
    17.  
    18.         /* 创建vue实例 */
    19.         var app = new Vue({
    20.             //el:挂载点
    21.             el: '#app',
    22.             //data: 要渲染的数据
    23.             data: {
    24.                 flag: true,
    25.                 type: "手机号注册"
    26.             }
    27.             ,
    28.  
    29.         })
    30.     </script>
    31. </body>

    v-for使用key值

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

            1.没有key值： 就地更新

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

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

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

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

    1. <body>
    2.     <!-- HTML结构 -->
    3.     <div id="app">
    4.         <ul>
    5.             <li v-for="(item,index) in list  " :key="item.id">
    6.                 <span>姓名:{{item.name}}
    7.                 </span>
    8.                 <span>年龄:{{item.age}}</span>
    9.             </li>
    10.         </ul>
    11.  
    12.     </div>
    13.  
    14.     <script>
    15.         /* 创建vue实例 */
    16.         var app = new Vue({
    17.             //el:挂载点
    18.             el: '#app',
    19.             //data: 要渲染的数据
    20.             data: {
    21.                 list: [
    22.                     { id: '21378', name: '张三', age: 20 },
    23.                     { id: '12456', name: '李四', age: 22 },
    24.                     { id: '39862', name: '王五', age: 30 },
    25.                 ]
    26.             }
    27.         })
    28.     </script>
    29. </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() 强制更新

    1. <body>
    2.  
    3.     <!-- HTML结构 -->
    4.     <div id="app">
    5.         <ul>
    6.             <li v-for="(item,index) in list" ::key="index">
    7.                 {{item}}
    8.             </li>
    9.         </ul>
    10.         <button @click="revBtn">数组翻转</button>
    11.         <button @click="sliceBtn">截取前2个</button>
    12.         <button @click="updateBtn">更新第一个元素值</button>
    13.     </div>
    14.     <script>
    15.         /* 创建vue实例 */
    16.         var app = new Vue({
    17.             //el:挂载点
    18.             el: '#app',
    19.             //data: 要渲染的数据
    20.             data: {
    21.                 list: [
    22.                     10, 20, 30, 40, 50
    23.                 ]
    24.             },
    25.             //methods:事件处理函数
    26.             methods: {
    27.                 // 翻转   reverse () :v-for会更新
    28.                 revBtn() {
    29.                     this.list.reverse()
    30.                 },
    31.                 // 截取前俩个  slice():v-for不会更新  
    32.                 sliceBtn() {
    33.                     this.list = this.list.slice(0, 2)//把返回的数组赋给新的数组
    34.                 },
    35.                 //3.替换元素值，不会造成v-for更新
    36.  
    37.                 updateBtn() {
    38.                     // this.$set(更新的数组,下标,更新后的值) 强制更新
    39.                     this.$set(this.list, 0, '饿了')
    40.                 },
    41.  
    42.             }
    43.         })
    44.     </script>
    45. </body>

    vue计算属性（computed）

    基础使用

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

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

    🏆（2）计算属性语法

                computed: {

                计算属性名（）{

                return 计算属性值

                }

                }

     🏆（3）注意点

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

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

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

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

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

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

    1. <body>
    2.     
    3.     <div id="app">
    4.         <p>{{msg}}p>
    5.         
    6.         
    7.         <p>{{reversemsg}} p>
    8.         
    9.         
    10.         <p> {{reversemsg}} p>
    11.     div>
    12.     <script>
    13.         /* 创建vue实例 */
    14.         let app = new Vue({
    15.             //el:挂载点
    16.             el: '#app',
    17.             //data: 要渲染的数据
    18.             data: {
    19.                 msg: '我爱敲代码',
    20.             },
    21.             //计算属性
    22.             computed: {
    23.                 reversemsg() {
    24.                     console.log("我被调用了");
    25.                     // 返回翻转字符串  字符串split方法和数组的reverse和join方法组合使用
    26.                     return this.msg.split("").reverse().join("")
    27.                 }
    28.             }
    29.         })
    30.     script>
    31. body>

    计算属性的get与set方法

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

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

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

                        }
                    }

    1. <body>
    2.     <!-- HTML结构 -->
    3.     <div id="app">
    4.         全名：<input type="text" placeholder="请输入你的全名" v-model.lazy="fullName">
    5.         <br>
    6.         姓氏：<input type="text" placeholder="请输入你的姓氏" v-model.lazy="firstname">
    7.         <br>
    8.         名字：<input type="text" placeholder="请输入你的名字" v-model.lazy="lastname">
    9.     </div>
    10.     <script>
    11.         /* 创建vue实例 */
    12.         var app = new Vue({
    13.             //el:挂载点
    14.             el: '#app',
    15.             //data: 要渲染的数据
    16.             data: {
    17.                 firstname: '',
    18.                 lastname: '',
    19.             },
    20.             //计算属性
    21.             computed: {
    22.                 fullName: {
    23.                     // 取值
    24.                     get() {
    25.                         return `${this.firstname}${this.lastname}`
    26.                     },
    27.                     // 设值
    28.                     set(val) {
    29.                         console.log(val)
    30.                         this.firstname = val[0] || ""
    31.                         // substring() 方法返回一个字符串在开始索引到结束索引之间的一个子集，或从开始索引直到字符串的末尾的一个子集。
    32.                         this.lastname = val.substring(1)
    33.                         // this.lastname = val.split('').slice(1).join('')
    34.                         // this.lastname = val.replace(val[0], '')
    35.  
    36.                     }
    37.                 }
    38.             }
    39.         })
    40.     </script>
    41. </body>

    购物全选框案例

    需求：

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

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

     全选框的实现  

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

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

    1. computed: {
    2.                 isAll: {
    3.                     set(val) {//全选框的checked值
    4.                         this.list.forEach(item => item.select = val)
    5.                     },
    6.                     get() {
    7.                         // arr.some：判断是否'有元素'满足条件（逻辑或，一真则真，全假为假）
    8.                         // arr.every：判断是否'所有元素'满足条件（逻辑与，一假则假，全真为真）
    9.  
    10.                         // 如果所有都被选中,则isAll为true
    11.                         return this.list.every(item => item.select)
    12.                     }
    13.                 }
    1. <body>
    2.  
    3.     <!-- HTML结构 -->
    4.     <div id="app">
    5.         全选<input type="checkbox" v-model="isAll">
    6.         <ul>
    7.             <li v-for="item in list" :key="index">
    8.                 <input type="checkbox" v-model="item.select"> <label for="">{{item.name}}</label>
    9.             </li>
    10.         </ul>
    11.     </div>
    12.     <script>
    13.         /* 创建vue实例 */
    14.         var app = new Vue({
    15.             //el:挂载点
    16.             el: '#app',
    17.             //data: 要渲染的数据
    18.             data: {
    19.                 list: [
    20.                     { name: '前端', select: false },
    21.                     { name: 'UI', select: false },
    22.                     { name: 'Java', select: false },
    23.                     { name: 'php', select: false },
    24.                     { name: 'python', select: false },
    25.                     { name: 'c', select: false },
    26.                     { name: '测试', select: false },
    27.                     { name: '产品', select: false },
    28.                 ]
    29.             },
    30.             //计算属性
    31.             computed: {
    32.                 isAll: {
    33.                     set(val) {//全选框的checked值
    34.                         this.list.forEach(item => item.select = val)
    35.                     },
    36.                     get() {
    37.                         // arr.some：判断是否'有元素'满足条件（逻辑或，一真则真，全假为假）
    38.                         // arr.every：判断是否'所有元素'满足条件（逻辑与，一假则假，全真为真）
    39.  
    40.                         // 如果所有都被选中,则isAll为true
    41.                         return this.list.every(item => item.select)
    42.                     }
    43.                 }
    44.  
    45.             }
    46.         })
    47.     </script>
    48. </body>

    侦听器(watch)

    普通侦听

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

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

                watch:{

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

                     }

                }

    1. <body>
    2.  
    3.     <!-- HTML结构 -->
    4.     <div id="app">
    5.         用户名: <input type="text" placeholder="请输入用户名" v-model.lazy="name"><span>{{info}}</span>
    6.         <br>
    7.         密码: <input type="text" placeholder="请输入密码" v-model="psw">
    8.     </div>
    9.  
    10.     <script>
    11.         /* 创建vue实例 */
    12.         let app = new Vue({
    13.             //el:挂载点
    14.             el: '#app',
    15.             //data: 要渲染的数据
    16.             data: {
    17.                 name: '',
    18.                 psw: '',
    19.                 info: "",
    20.             },
    21.             //侦听器
    22.             watch: {
    23.                 name(newval, oldVal) {
    24.                     console.log(newval, oldVal);
    25.                     this.info = "验证中...."
    26.                     // 模拟网络请求
    27.                     setTimeout(() => {
    28.                         this.info = "该用户已被注册"
    29.  
    30.                     }, 700)
    31.                 }
    32.             }
    33.         })
    34.  
    35.  
    36.     </script>
    37. </body>

    深度侦听

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

            2.语法:

                watch: {

                    "要侦听的属性名": {

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

                        handler (newVal, oldVal) {}

                    }

                }

    1. <body>
    2.  
    3.     <!-- HTML结构 -->
    4.     <div id="app">
    5.         用户名: <input type="text" placeholder="请输入用户名" v-model.lazy="user.name"><span>{{info}}</span>
    6.         <br>
    7.         密码: <input type="text" placeholder="请输入密码" v-model="user.psd">
    8.     </div>
    9.  
    10.     <script>
    11.         /* 创建vue实例 */
    12.         let app = new Vue({
    13.             //el:挂载点
    14.             el: '#app',
    15.             //data: 要渲染的数据
    16.             data: {
    17.                 user: {
    18.                     name: '',
    19.                     psd: '',
    20.                 }
    21.                 ,
    22.                 info: ''
    23.             },
    24.             //侦听器
    25.             watch: {
    26.                 // 包在要监听的数据里
    27.                 user: {
    28.                     deep: true,//深度监听变化
    29.                     handler(newVal, oldVal) {
    30.                         console.log(newVal, oldVal);
    31.                         this.info = "验证中...."
    32.                         setTimeout(() => {
    33.                             this.info = "登录失败"
    34.  
    35.                         }, 700)
    36.                     }
    37.                 }
    38.  
    39.             }
    40.         })
    41.  
    42.  
    43.     </script>
    44. </body>

    侦听器与计算属性区别

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

    (2).语法不同

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

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

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

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

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

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

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

    moment.js使用方法

    1.导入js

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

    2.基本使用

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

    3.在moment中传入时间

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

  • 相关阅读:
    Gephi弹出JVM Creation failed
    C#操作modbus
    车联网解决方案-最新全套文件
    聊聊logback的ThresholdFilter
    【golang】mysql默认排序无法实现 使用golang实现对时间字符串字段的排序
    Spring Boot项目中使用邮件服务
    字节一面：深拷贝浅拷贝的区别？如何实现一个深拷贝？
    SpringBoot 整合 Neo4j
    请求转发（J2EE）
    rust入门
  • 原文地址：https://blog.csdn.net/wusandaofwy/article/details/126904080