Vue---监视数据、表单、过滤器

监视数据
❤️ Vue会监视data中所有层次的数据

//vm上，都会为其配置getter和setter来检测数据

person:{
name:‘andy’,
friends:[
{name:‘b1’,age:15},
{name:‘b1’,age:15}
]
}
❤️ 监测对象中的数据

data 后追加的属性，Vue 默认不做响应式处理
如需给后添加的属性作响应式，请使用如下 API:
Vue.set(target.propertyName/index,value)
vm.$set(target,propertyName/index,value)
举例：

methods: {
            addsex() {
                //添加一个性别属性
                Vue.set(this.student, 'sex', '男')
            },
          
           
            updatecar() {
                // 为爱好数组里面在索引0的位置添加一个爱好 this就是vm
                this.$set(this.student.hobby, 0, '开车')
            },
        },

❤️ 监测数组中的数据

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

重新解析模板，进而更新页面

❤️ 修改数组中的元素

使用能改变原数组的原生方法
push()、pop()、shift()、unshift()、splice()、sort()、reverse()

不能改变数组，但是返回一个新数组 替换原数组也可以
filter()、concat()、slice()

filterH() {
//过滤需要重新复制
this.student.hobby = this.student.hobby.filter((h) => {
//所有不是右vue控制的回调就用箭头函数
//h是数组里面的数据
return h !== ‘抽烟’
})
}
使用vue或者vue实例对象上的，比如Vue.set()或 vm.$set()不能给vm或vm的根数据对象 添加属性
收集表单数据
🌟 ,则v-model收集的是value值，用户输入的就是value值

🌟 ,则v-model收集的是value值，且要给标签配置value值

🌟

没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）
配置input的value属性：如下情况：
v-model的初始值是非数字，那么收集的就是checked（勾选 or 未勾选，是布尔值）
v-model的初始值是数组，那么收集的就是value组成的数组
🌟 v-model的三个修饰符：

lazy:失去焦点再收集数据
number：输入字符串转为有效的数字
trim：输入首尾空格过滤

过滤器 ❤️ 定义：对要显示的数据进行特定格式化后再显示【适用于一些简单逻辑的处理】

❤️ 语法：

注册过滤器Vue.filter(name,callback) 或 new Vue({filters:{ }})
使用过滤器:{{xxx | 过滤器名}} 或 v-bind:属性 = “xxx | 过滤器名”
❤️ 注意：

过滤器也可以接受额外参数，过个过滤器也可以串联
并没有改变原本的数据，是产生新的对应的数据
❤️ 可以定义局部过滤器 和全局过滤器

全局过滤器

Vue.filter(‘myslice’, function (value) {
return value.slice(0, 4)
})
局部过滤器

filters: {
timeFormater(time, str = ‘YYYY年MM月DD日 HH:mm:ss’) {
return dayjs(time).format(str)
},
// myslice(value) {
// return value.slice(0, 4)
// }
}
❤️ 参数分析

timeFormater(time, str = ‘YYYY年MM月DD日 HH:mm:ss’) {
return dayjs(time).format(str)
},

拿本例题来说：

过滤器接受一个默认参数 time =时间戳；如果过滤器里面带了参数就是有两个参数，第一个就是默认的参数，第二个就是 指定格式参数

显示格式化后的时间

computed实现-现在的时间：{{fmtTime}}

methods实现-现在的时间：{{getfmtTime()}}

过滤器实现-现在的时间：{{time | timeFormater}}

过滤器穿参实现-现在的时间：{{time | timeFormater('YYYY年MM月DD')}}

过滤器实现-现在的时间：{{time | timeFormater('YYYY年MM月DD') | myslice}}

你好呀

{{name | myslice}}