• v-if、v-for、列表的过滤与排序、强制绑定class和style、收集表单信息

    v-if

    1. <body>
    2.   <div id="app">
    3.     <p v-if="isShow">表白成功p>
    4.     <p v-else>表白失败p>
    5.     <hr>
    6.     <p v-show="isShow">求婚成功p>
    7.     <p v-show="!isShow">求婚失败p>
    8.     <button @click="changeIsShow">切换button>
    9.   div>
    10.   <script src="../js/vue.js">script>
    11.   <script>
    12.     new Vue({
    13.       el:'#app',
    14.       data:{
    15.         isShow:true
    16.       },
    17.       methods: {
    18.         changeIsShow(){
    19.           this.isShow = !this.isShow
    20.         }
    21.       },
    22.     })
    23.   script>
    24. body>

    vif 和 vshow都是条件渲染有什么区别？

        vif后面的条件如果为真，当前元素才会渲染，也就是说条件为假的元素内存中都不存在

        vshow后面的条件无论是真还是假，都会进行渲染，也就是说条件为假的元素内存中仍然存在，只是使用css隐藏了

        vif和vshow根据使用场景的不同，效率是不一样的

        如果我们切换的频率很高，vshow比较合适，因为不需要重复的去渲染元素，内存也不需要重复的去创建销毁

        如果我们切换的频率不高，vif比较合适，因为内存占用比较少，效率比较高

    后期我们会使用组件标签，组件创建有生命周期，如果我们使用vif在组件标签身上

        假设条件为假，这个组件是不会创建了，内存当中没有组件对象

        如果使用的是vshow在组件标签身上，那么不管条件是真还是假，这个组件都会创建，生命周期都会执行对应的钩子

    从输入url回车，到页面渲染完成经历了什么？

      1、dns解析，本质是把域名解析为 ip:端口

      2、tcp建立连接  三次握手

      3、http请求发送请求报文

      4、后台服务器返回响应报文

      5、浏览器拿到响应报文后，解析渲染

         html  ----  domTree

         css  ----   cssTree

         把生成的domTree和cssTree合并为renderTree 进行渲染

      6、和后台断开连接  四次挥手

    v-for 

    1. <body>
    2.   <div id="app">
    3.     <ul>
    4.       
    5.       <li v-for="(person,index) in persons" :key="person.id">
    6.         {{person.id}} --- {{person.username}} --- {{person.age}}
    7.       li>
    8.     ul>
    9.   div>
    10.   <script src="../js/vue.js">script>
    11.   <script>
    12.     new Vue({
    13.       el:'#app',
    14.       data(){
    15.         return {
    16.           persons:[
    17.             {id:1,username:'zhaoliying',age:35},
    18.             {id:2,username:'yangmi',age:36},
    19.             {id:3,username:'dilireba',age:30}
    20.           ]
    21.         }
    22.       }
    23.     })
    24.   script>
    25. body>

    vue处理响应式数据

    vue如何去监视数据变化而更新页面（点击按钮修改第一项）
        1、修改数组当中对象的属性，发现页面可以改变
        2、通过数组的下标直接修改数组当中的整个对象，发现页面改变不了
        3、调用数组的方法直接修改数组当中的整个对象，发现页面也可以改变
    原因：
        修改数组当中对象的属性，都是可以修改的，因为对象的所有属性都添加了get和set方法（响应式数据），
         data当中所有的对象的属性，都是响应式
        通过下标直接修改数组整个对象，不可以展示到页面，但是数据确实改了，数组的下标没有get和set

        通过数组的方法去修改整个对象也是可以修改的，因为vue当中重写了数组的部分原生方法，额外添加了展示到页面的功能

        
        对象数据和数组数据响应式的区别

    1. <body>
    2.   <div id="app">
    3.     <ul>
    4.       <li v-for="(person, index) in persons" :key="person.id">
    5.         {{person.id}} --- {{person.username}} --- {{person.age}}
    6.       li>
    7.     ul>
    8.     <button @click="update">点击修改第一个人的名字button>
    9.   div>
    10.   <script src="../js/vue.js">script>
    11.   <script>
    12.     new Vue({
    13.       el:"#app",
    14.       data(){
    15.         return {
    16.           persons:[
    17.             {id:1,username:'zhaoliying',age:35},
    18.             {id:2,username:'yangmi',age:36},
    19.             {id:3,username:'dilireba',age:30}
    20.           ]
    21.         }
    22.       },
    23.  
    24.       methods: {
    25.         update(){
    26.           // this.persons[0].username = 'yingbao'
    27.           // this.persons[0] = {id:1,username:'yingbao',age:35}
    28.           this.persons.splice(0,1,{id:1,username:'yingbao',age:35})
    29.         }
    30.  
    31.       },
    32.     })
    33.   script>
    34. body>

            vue在处理数据的时候响应式是按照以下规则来的

            对于对象

            当我们一旦实例化vm实例的时候，vue内部会做数据劫持，把

            data当中所有的对象属性（包括深层次），都添加了getter和setter

            让每个属性都是响应式的

            因此第一项成功了

            对于数组

            数组的响应式是修改了7个方法，只要使用的是下面7个方法当中的、

            那么一定响应式，其实本质就是给这些数组方法添加了修改页面的功能而已

            push()

            pop()

            shift()

            unshift()

            splice()

            sort()

            reverse()

            所以第三种可以

    列表的过滤

    1. <body>
    2.   <div id="app">
    3.     <input type="text" v-model="keyword">
    4.     <ul>
    5.       
    6.       
    7.  
    8.       <li v-for="(person, index) in newPersons" :key="person.id">
    9.         {{person.id}} --- {{person.username}} --- {{person.age}}
    10.       li>
    11.     ul>
    12.   div>
    13.   <script src="../js/vue.js">script>
    14.   <script>
    15.     new Vue({
    16.       el:"#app",
    17.       data(){
    18.         return {
    19.           persons:[
    20.             {id:1,username:'zhaoliying',age:35},
    21.             {id:2,username:'yangmi',age:36},
    22.             {id:3,username:'dilireba',age:30}
    23.           ],
    24.           keyword:''
    25.         }
    26.       },
    27.       computed: {
    28.         newPersons(){
    29.           let {persons,keyword} = this
    30.           return persons.filter(item => item.username.indexOf(keyword) !== -1)
    31.         }
    32.       },
    33.     })
    34.   script>
    35. body>

          vfor和vif能不能同时使用？ 答案是肯定的
          vfor和vif同时使用的时候，谁的优先级高：答案是vfor
          但是不推荐vfor和vif同时使用，因为vfor本身会出现很多个元素，每个元素身上都有一个指令v-if
          vif指令都是需要进行解析的，指令进行解析的过程是很消耗性能的，这样效率就会很低下
          原因是效率极低

          解决办法：
           计算属性，我们通过计算属性把需要展示的数据，计算为一个新数组，展示的时候我们不和原数组拉关系
           这样的话，vfor遍历直接遍历计算出来的新数组即可

    列表的排序 

    1. <body>
    2.   <div id="app">
    3.     <input type="text" v-model="keyword">
    4.     <ul>
    5.       
    6.       
    7.  
    8.       <li v-for="(person, index) in newPersons" :key="person.id">
    9.         {{person.id}} --- {{person.username}} --- {{person.age}}
    10.       li>
    11.     ul>
    12.  
    13.     
    14.  
    15.     <button @click="changeFlag(0)">原样排序button>
    16.     <button @click="sortFlag = 1">年龄升序button>
    17.     <button @click="sortFlag = 2">年龄降序button>
    18.   div>
    19.   <script src="../js/vue.js">script>
    20.   <script>
    21.     new Vue({
    22.       el:"#app",
    23.       data(){
    24.         return {
    25.           persons:[
    26.             {id:1,username:'zhaoliying',age:35},
    27.             {id:2,username:'yangmi',age:36},
    28.             {id:3,username:'dilireba',age:30}
    29.           ],
    30.           keyword:'',
    31.           sortFlag:0  //设计排序标志数据
    32.         }
    33.       },
    34.       computed: {
    35.         newPersons(){
    36.           let {persons,keyword,sortFlag} = this
    37.           let arr = persons.filter(item => item.username.indexOf(keyword) !== -1)
    38.           // if(sortFlag){
    39.           //   if(sortFlag === 1){
    40.           //     arr.sort((a,b) => {
    41.           //       return a.age - b.age
    42.           //     })
    43.           //   }else{
    44.           //     arr.sort((a,b) => {
    45.           //       return b.age - a.age
    46.           //     })
    47.           //   }
    48.           // }
    49.           if (sortFlag) arr.sort((a,b) => sortFlag === 1? a.age - b.age : b.age - a.age)
    50.           return arr
    51.         }
    52.       },
    53.       
    54.       methods: {
    55.         // 如果后期写函数，函数内部只有一行代码
    56.         // 可以省略函数
    57.  
    58.         changeFlag(flag){
    59.           this.sortFlag = flag
    60.         }
    61.       },
    62.       
    63.     })
    64.   script>
    65. body>

        列表的过滤和排序

        列表过滤：

        1、收集用户输入的关键字  需要设计收集的数据  vmodel收集keyword

        2、页面展示的不再是原数组，而是根据原数组和keyword计算出来的新数组，否则就会碰到vfor和vif同时使用

        3、页面展示的数据替换为新数组

        列表排序(过滤后排序)

        1、要排序需要设计排序标识数据 sortFlag  0原样 1升序 2降序

        2、添加点击事件，点击三个按钮我们只需要负责修改sortFlag数据

        3、sortFlag的改变是要引起过滤的新数组进行改变，sortFlag也得加入到计算当中去

        4、过滤完成之后，只需要根据sortFlag的值，进行排序过滤出来的数组即可

    强制绑定class和style

    强制绑定样式class和style
        class动态绑定：
            1、类名不确定                                   字符串形式
            2、类名确定，但是不知道哪个生效                 对象形式
            3、类名有几个都生效                            数组形式   


        style动态绑定
            1、必须把原来的东西写在对象当中，样式名不变，样式值是动态的
            2、样式名如果不合法，要变为小驼峰写法

    1. <head>
    2.   <meta charset="UTF-8">
    3.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    4.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    5.   <title>Documenttitle>
    6.   <style>
    7.     .classA{
    8.       font-size: 80px;
    9.     }
    10.     .classB{
    11.       color: hotpink;
    12.     }
    13.     .classC{
    14.       background-color: greenyellow;
    15.     }
    16.     .classD{
    17.       font-size: 30px;
    18.     }
    19.   style>
    20. head>
    21. <body>
    22.   <div id="app">
    23.     
    24.     
    25.     <p  class="classD" :class="myClass" >我爱你赵丽颖p>
    26.  
    27.     
    28.     <p :class="{classA:isA,classB:isB}">我爱你赵丽颖p>
    29.  
    30.     
    31.     <p :class="classArr">我爱你赵丽颖p>
    32.  
    33.  
    34.     
    35.     
    36.     <p :style="{fontSize,color:myColor}">我爱你赵丽颖p>
    37.  
    38.     <button @click="updateClass">点击改变样式button>
    39.   div>
    40.   <script src="../js/vue.js">script>
    41.   <script>
    42.     new Vue({
    43.       el:'#app',
    44.       data(){
    45.         return {
    46.           myClass:'classA',
    47.           isA:true,
    48.           isB:false,
    49.           classArr:['classA','classB','classC'],
    50.           fontSize:'100px',
    51.           myColor:'skyblue'
    52.  
    53.         }
    54.       },
    55.       methods: {
    56.         updateClass(){
    57.           this.isA = !this.isA
    58.           this.isB = !this.isB
    59.         }
    60.       },
    61.     })
    62.   script>
    63. body>

     事件的绑定相关

    事件绑定方法
        v-on 只是绑定事件的复杂写法
        @ 只是简写


        1、回调写法
            回调不需要自己加括号，直接写函数名即可，函数在定义的时候第一个形参接收的就是事件对象


        2、函数调用
            函数调用是自己加括号调用，调用的时候，vue会自动在我们写的函数调用外层添加一个函数，这个函数才是真正的回调
            这个函数默认是有一个形参叫$event,(不能更改)， 我们在写的函数调用如果需要把事件对象传递下去，那么就得传实参
            $event,我们的函数定义就需要去接收这个参数，拿到事件对象去使用，如果不需要就不用传，函数内部也就拿不到事件对象。 如果我们传递参数不光要事件对象，还需要自己定义的参数，那么此时，需要在函数调用的时候，传递两个，一个是
            $event,一个是自己的参数

            $event后期我们称为叫做默认参数，在原生dom事件当中只要见到$event,代表的就是事件对象

    1. <body>
    2.   <div id="app">
    3.     
    4.     <button v-on:click="test">testbutton>
    5.     
    6.     <button @click="test">testbutton>
    7.     
    8.     <button @click="test1($event)">test1button>
    9.     
    10.  
    11.     
    12.     <button @click="test2(10,$event)">test2button>
    13.   div>
    14.   <script src="../js/vue.js">script>
    15.   <script>
    16.     new Vue({
    17.       el:'#app',
    18.       data(){
    19.         return {
    20.  
    21.         }
    22.       },
    23.       methods: {
    24.         test(event){
    25.           console.log(event.target.innerHTML);
    26.         },
    27.         test1(event){
    28.           console.log(event.target.innerHTML);
    29.         },
    30.         test2(num,event){
    31.           console.log(event.target.innerHTML,num);
    32.         }
    33.       },
    34.  
    35.     })
    36.   script>
    37. body>

    自动收集表单

    自动收集表单数据v-model的应用
        输入框数据    输入的数据会自动赋值给data的数据
        单选框数据    选中的value值会自动付给data的数据
        多选框数据   单个使用操作的是布尔值   多个使用操作的是value值
        下拉菜单数据    选中的option的value值会自动赋值给data的数据
        文本域数据    写上的文本会自动赋值给data的数据 

    1. html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <title>Documenttitle>
    8. head>
    9. <body>
    10.   <div id="app">
    11.     
    12.     
    13.     用户名: <input type="text" placeholder="请输入用户名" v-model="userInfo.username"> <br>
    14.     密  码: <input type="password" placeholder="请输入密码" v-model="userInfo.password"><br>
    15.  
    16.  
    17.     性  别：
    18.     
    19.         <label><input type="radio" name="sex" value="male" v-model="userInfo.gender">男label>
    20.         <label><input type="radio" name="sex" value="female" v-model="userInfo.gender">女label> <br>
    21.     爱  好：
    22.  
    23.     
    24.         <label><input type="checkbox" value="basketball" v-model="userInfo.favs">🏀label>
    25.         <label><input type="checkbox" value="football" v-model="userInfo.favs">⚽label>
    26.         <label><input type="checkbox" value="ping-pang" v-model="userInfo.favs">🏓label> <br>
    27.     城  市:
    28.     
    29.         <select v-model="userInfo.cityId">
    30.  
    31.           <option :value="city.id" v-for="(city, index) in cities" :key="city.id">
    32.             {{city.name}}
    33.           option>
    34.         select> <br>
    35.     个人简介：
    36.     
    37.         <textarea  cols="30" rows="10" v-model="userInfo.desc">textarea>
    38.         <br>
    39.     
    40.     <input type="checkbox"  v-model="userInfo.isChecked">同意协议
    41.     <button @click="submit">提交button>
    42.   div>
    43.   <script src="../js/vue.js">script>
    44.   <script>
    45.     new Vue({
    46.       el:'#app',
    47.       data(){
    48.         return {
    49.           userInfo:{
    50.             username:'',
    51.             password:'',
    52.             gender:'',
    53.             favs:[],
    54.             cityId:2,
    55.             desc:'',
    56.             isChecked:false
    57.           },
    58.           cities:[
    59.             {id:1,name:'西安'},
    60.             {id:2,name:'北京'},
    61.             {id:3,name:'上海'},
    62.           ]
    63.         }
    64.       },
    65.       methods: {
    66.         // submit(){
    67.         //   axios({
    68.         //     url:'./xxx',
    69.         //     method:'post',
    70.         //     data:this.userInfo
    71.         //   })
    72.         // }
    73.       },
    74.     })
    75.   script>
    76. body>
    77. html>

  • 相关阅读:
    本周Github有趣开源项目：Rspress等6个
    能迪科技智能控制系统对中央空调进行精准、单独调控医院案例
    获取小程序页面路径完整流程
    无代码开发平台怎么选？
    C++ Reference: Standard C++ Library reference: Containers: deque: deque: empty
    在WPF中使用WriteableBitmap对接工业相机及常用操作
    单卡成功验证RLHF DPO效果
    什么是串行通信？
    测试人即用宝典，全网最全的功能测试点，有这一篇完全足够......
    java中方法的执行顺序
  • 原文地址：https://blog.csdn.net/m0_60376759/article/details/125890464