[JavaScript知识库]Vue学习笔记-05

Vue3学习笔记-05

一、列表的过滤

1.用watch实现的列表过滤

`immediate:true`  ,  表示立即执行handler函数

<div id="root">
        <!--遍历数组-->
        <h2>人员信息</h2>
        <input type="text" placeholder="请输入名字" v-model="keyWord" />
        <ul>
            <li v-for="item in filePersons" :key="item.userId">{{item.userId}}-{{item.name}}-{{item.age}}</li>
        </ul>
    </div>
    <script>
        new Vue({
            el:'#root',
            data:{
                keyWord:'',
                persons:[
                    {
                        userId:1,
                        name:'马冬梅',
                        age:22
                    },
                    {
                        userId:2,
                        name:'周冬雨',
                        age:21
                    },
                    {
                        userId:3,
                        name:'周杰伦',
                        age:32
                    },
                    {
                        userId:4,
                        name:'温兆伦',
                        age:26
                    }
                ],
                filePersons:[]
            },
            watch:{   
                    keyWord:{
                        immediate:true,
                        handler(val){
                            this.filePersons = this.persons.filter((p)=>{
                            //这里的indexOf函数，是判断某个字符串中是否包含另外一个字符，不包含返回-1，包含返回该字符在字符串中的下标，从0开始编号
                            //当判断的字符为 '' 的时候，显示的下标是0，也就是所有的字符串都包含 '' 字符，其返回值为0
                            return p.name.indexOf(val) !=-1     
                        })
                    }

                }
            }
        })
    </script>

2.计算属性实现列表过滤

 <div id="root">
        <!--遍历数组-->
        <h2>人员信息</h2>
        <input type="text" placeholder="请输入名字" v-model="keyWord" />
        <ul>
            <li v-for="item in filePersons" :key="item.userId">{{item.userId}}-{{item.name}}-{{item.age}}</li>
        </ul>
    </div>
    <script>
        //用计算属性实现
        new Vue({
            el:'#root',
            data:{
                keyWord:'',
                persons:[
                    {
                        userId:1,
                        name:'马冬梅',
                        age:22
                    },
                    {
                        userId:2,
                        name:'周冬雨',
                        age:21
                    },
                    {
                        userId:3,
                        name:'周杰伦',
                        age:32
                    },
                    {
                        userId:4,
                        name:'温兆伦',
                        age:26
                    }
                ]
            },
           computed:{
               filePersons(){
                   return this.persons.filter((p)=>{
                        return p.name.indexOf(this.keyWord) !== -1 
                    })
               }
           }
        })
    </script>

二、列表的排序

1.arr.sort((p1,p2)是数组排序的方法

? ① p1-p2表示的是升序

? ② p2-p1表示的是降序

<!--举个简单的例子:-->
<script>
var arr = [10,20,40,30,50,80,70]
 arr.sort((p1,p2)=>{
        p1-p2
   })
</script>

 <div id="root">
        <!--遍历数组-->
        <h2>人员信息</h2>
        <input type="text" placeholder="请输入名字" v-model="keyWord" />
        <button @click="sortType = 2">年龄升序</button>
        <button @click="sortType = 1">年龄降序</button>
        <button @click="sortType = 0">原顺序</button>
        <ul>
            <li v-for="item in filePersons" :key="item.userId">{{item.userId}}-{{item.name}}-{{item.age}}</li>
        </ul>
    </div>
    <script>
        //用计算属性实现
        new Vue({
            el:'#root',
            data:{
                keyWord:'',
                sortType:0,//0代表原顺序、1代表降序、2代表升序
                persons:[
                    {
                        userId:1,
                        name:'马冬梅',
                        age:22
                    },
                    {
                        userId:2,
                        name:'周冬雨',
                        age:21
                    },
                    {
                        userId:3,
                        name:'周杰伦',
                        age:32
                    },
                    {
                        userId:4,
                        name:'温兆伦',
                        age:26
                    }
                ]
            },
           computed:{
               filePersons(){
                    const arr = this.persons.filter((p)=>{
                        return p.name.indexOf(this.keyWord) !== -1 
                    })

                    //判断是否进行排序
                    if(this.sortType){
                        arr.sort((p1,p2)=>{
                            return this.sortType === 1 ? p2.age - p1.age : p1.age - p2.age
                        })
                    }
                    return arr
               }
           }
        })
    </script>

三、 Vue监测数据改变的原理

1.Vue监视数据的原理

? (1) Vue会监视data中的所有层次的数据。

? (2) 如何监测对象中的数据？

? 通过setter实现数据的监视，切要在 new Vue 时就要传入要监测的数据。

? ①对象中后追加的属性，Vue默认不做响应式处理

? ②如果需要给后添加的属性做响应式，需要使用如下API来实现：

? Vue.set(target, propertyName/index, value) 或者使用 vm.$set(target, propertyName/index, value)

? (3) 如何监测数组中的数据？

? 通过包裹数组更新元素的方法实现，本质就是做了如下两件事：

? ① 调用原生对应的方法对数组进行更新。

? ② 重新解析模板，进行更新页面。

? (4) 在Vue修改数组中的某一个元素的时候，用以下方法才可以监测到数据的变化：

? ① 使用API： push() 、pop()、shift()、unshift()、splice()、sort()、reverse()

? ② Vue.set() 或者 vm.$set()

? 特别要注意的是：Vue.set( ) 和 vm.set( ) 不能给vm 或者 vm的根数据对象添加属性（也就是不能给data对象添加属性）

2.Vue的API中的 set 的使用方法

Vue set (target,key,val)

其中的target表示的是要追加的目标，也就是要把key追加到哪一个对象上去

<!--举个例子,在控制台中输入-->
Vue.set(vm._data.student,'sex','男')

<!--可以借用数据代理的方式-->
Vue.set(vm.student,'sex','女')

值得注意的是：这里的set只能给data中的某一个对象追加响应式属性，不能给data追加一个响应式属性。

对于数组的操作的方法：

1.push：向数组最后一个位置后面添加一个值；

2.pop：删除数组最后一个位置的值；

3.shift：删除数组第一个值；

4.unshift：向数组第一个位置插入一个值；

5.splice：向数组指定位置删除一个元素、或者替换一个指定位置某个元素、在某个位置插入一个元素；（arr.splice(x,y,z) 这里的x表示第几个位置；y表示对应的操作，当y=1的时候，表示删除；z表示要替换的内容）

6.sort：对数组进行一个排序；

7.reverse：反转一个数组；

8.filter：过滤一个数组

数组arr的push其实是Array里面的属性中的push：arr.push === Array.prototype.push 的结果就是 true

四、收集表单中的数据

收集表单数据：

? 若：<input type="text" /> , 则v-model收集的是value值，用户输入的就是value的值；

? 若：<input type="radio"/> , 则v-model收集到的就是value值，且要给标签配置value值；

? 若：<input type="checkbox" />

? ①没有配置input的value属性，那么收集的就是checked （勾选 和 未勾选，是布尔值）

? ②配置input的value属性：

? 1）.v-model的初始值是非数组，那么收集的就是checked （勾选 和 未勾选，是布尔值）

? 2）v-model的初始值是数组，那么收集的就是value组成的数组

? 备注：v-model的三个修饰符：

? lazy：失去焦点之后再收集数据，

? number：输入字符串转为有效的数字

? trim：输入的字符收尾的空格给过滤掉

练习的例子:

 <div id="root">
       <form @submit.prevent="demo">
         <label for="account">账号：</label> <input type="text" id="account" v-model.trim="account"/><br><br>
         <label for="password">密码：</label> <input type="text" id="password" v-model="password"/><br><br>
         <label for="age">密码：</label> <input type="number" id="age" v-model.number="age"/><br><br>
         <label for="sex">性别：</label> 
         男<input type="radio" name="sex" id="sex" value="1" v-model="sex" />
         女<input type="radio" name="sex" id="sex" value="2"  v-model="sex" /><br><br>
         <label for="habby">爱好：</label>
          学习<input type="checkbox" v-model="hobby" value="study"/>
          打游戏<input type="checkbox" v-model="hobby" value="game"/>
          打篮球<input type="checkbox" v-model="hobby" value="lanqiu"/><br><br>

         所属校区:
         <select v-model="address">
            <option value="0">请选择校区</option>
            <option value="1">一区</option>
            <option value="2">二区</option>
            <option value="3">三区</option>
            <option value="4">四区</option>
         </select><br><br>
         其他信息：
         <textarea v-model.lazy="other"></textarea><br><br>
         <input type="checkbox" v-model="agree"/>阅读并接受用户协议<a href="https://www.baidu.com">《用户协议》</a><br><br>
         <button>提交</button> <button>重置</button>
       </form>
    </div>
    <script>
        new Vue({
            el:'#root',
            data:{
               account:'',
               password:'',
               age:18,
               sex:'',
               hobby:[],
               address:0,
               other:'',
               agree:false
            },
            methods:{
                demo(){
                    alert(JSON.stringify(this._data))
                }
            }
        })
    </script>

五、过滤器

1.知识点：

? 1.1定义：对要显示的数据进行特定的格式化后在显示（适用于一些简单的逻辑处理）。

? 1.2.语法：

? ①注册过滤器：Vue.filter(name,callback) 或者 new Vue{ filters: {} }

? ②使用过滤器：{{xxx | 过滤器的名称 }} 或者 v-bind: 属性 = “xxx | 过滤器名”

? 备注：

? ①过滤器也可以接收额外的参数、多个过滤器也可以串联

? ②并没有改变原本的数据，是产生新的对应的数据

额外知识点：

<sctipt>
    new Vue({
    	el:'#root',
     	data:{
    	},
    	methods:{
    		 mySlice(value){
         		//截取字符串，下面是从0开始截取，一共截取4个字符
        		return value.slice(0,4)
     		}
   	 	}
    }) 
</sctipt>

2.练习的例子

<div id="root">
      <h2>显示格式化之后的时间</h2>

      <!--计算属性实现-->
      现在的时间显示为：{{fmtTime}} <br><br>

       <!--methods实现-->
       现在的时间显示为：{{getFmtTime()}} <br><br>

       <!--过滤器时间-->
       现在的时间显示为：{{time | timeFormater}}<br><br>

       <!--过滤器时间,带参数-->
       现在的时间显示为：{{time | timeFormater('YYYY-MM-DD')}}<br><br>

       <!--过滤器时间,多个过滤器结合使用-->
       现在的时间显示为：{{time | timeFormater('YYYY-MM-DD')|mySlice}}

       <!---->
       <h3 :x="msg | mySlice">小姜同学</h3>
    </div>
    <script>

        //配置全局的过滤器
        Vue.filter('mySlice',function(value){
            //截取字符串，下面是从0开始截取，一共截取4个字符
            return value.slice(0,4)
        })


        new Vue({
            el:'#root',
            data:{
                time:1626857446854,//时间戳
                msg:'你好，小艾同学'
            },
            computed:{
                fmtTime(){
                    return dayjs(this.time).format("YYYY年MM月DD日 HH:mm:ss")
                }
            },
            methods:{
                getFmtTime(){
                    return dayjs(this.time).format("YYYY年MM月DD日 HH:mm:ss")
                }
            },
            filters:{
                //timeFormater中的str这样写，表示的意思就是，当调用timeFormater函数的时候，如果给str赋值了，就用赋值后的值，
                //没有给str参数的话就默认使用下面函数给的值
                //就相当于是给str赋予了一个默认值
                timeFormater(value,str='YYYY年MM月DD日 HH:mm:ss'){
                    return dayjs(value).format(str)
                },
                mySlice(value){
                    //截取字符串，下面是从0开始截取，一共截取4个字符
                    return value.slice(0,4)
                }
            }
        })
    </script>

全局的过滤器：

<script>

      //配置全局的过滤器
     Vue.filter('mySlice',function(value){
         //截取字符串，下面是从0开始截取，一共截取4个字符
         return value.slice(0,4)
     })
     new Vue({
         el:'#root',
         data:{
             
         }
     })
</script>

六、内置指令

1.总结之前学习过的内置指令

? ①v-bind ：单向数据绑定

? ②v-model : 双向数据绑定

? ③v-for ：循环指令，遍历数组、对象、字符串等

? ④v-on ：绑定事件监听，可以简写为@，例如监听一个点击事件：@click

? ⑤v-if —> v-else-if —> v-else 或者 v-show

### 2. v-text 指令

? 向其所在的标签插入文本,v-text会把标签中的所有数据都替换掉

 <div id="root">
        <div>你好，{{name}}</div><br>
        <div v-text="name"></div>
    </div>
    <script>
        new Vue({
            el:'#root',
            data:{
              name:'小艾同学'
            }
        })
    </script>

3. v-html 指令

? 1.支持结构的解析

? 2.v-html存在安全性问题

<div id="root">
        <div>你好，{{name}}</div><br>
        <div v-text="name"></div><br>
        <div v-text="str"></div><br>
        <div v-html="str"></div><br>
    </div>
    <script>
        new Vue({
            el:'#root',
            data:{
              name:'小艾同学',
              str:'<h3>你好啊</h3>'
            }
        })
    </script>