Vue2_4

Vue2_4

1、Vue 如何监测数据

1.监测对象

步骤：

1. 加工data
2. _data = data
3. 解析模版、虚拟dom…

模拟加工data（简单版）：

添加getter 和 setter

加工data步骤(简单版)：

function haha(obj) {	// obj 是data
    const keys = Object.keys(obj);

    keys.forEach((k)=>{
    Object.defineProperty(this, k, {
        get() {
        	return obj[k];
        },
        set(v) {
            console.log(`${k}被改了`)
            obj[k] = v;
        }
    })
}
let vm._data = new haha(data)

2.Vue.set()

Vue给的添加属性的功能，普通加不会加getter和setter（就是监测不到），使用这个加就行

Vue.set(路径,属性,值)	// 属性和值都要有''
Vue.set(vm._data.haha,'sex','男')
// ._data 可以不用写，因为数据代理
Vue.set(vm.haha,'sex','男')

也可用 vm.$set()，和上面用法一样

注：

• 不可以直接在 vm(vm._data) 上加
• set 前面是 Vue $set前是 vm

3.监测数组

在控制台查看data里的数组，里面没有getter和setter

但是 Vue 将被侦听的数组的变更方法进行了包裹，就是使用方法变更它会监听到，使用[0]这种下标来改不行

1.被包裹的方法：

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

包裹：

Vue 的 数组变更方法 不是 原来的方法

Array.prototype.push === vm.xiaoMing.haha.push
false

进行了两个步骤：

1. 调用原型方法
2. 解析模版、虚拟dom…

2.set修改

Vue.set(vm.xiaoMing.haha,0,'haha')
// 索引是下标

3.数组里的对象

虽然xxx数组[0] = yyy 这样检测不到，但是如果是调用里面的对象（前提是用 data里 或者方法添加的），就可以直接赋值

vm.xiaoMing.haha[0].name = '小红'

因为对象里有getter和setter

4.数据劫持（概念）

看 vm._data 它不是我设置的data的样子，它把数据进行遍历然后加了一堆getter和setter（还有其他一股对），就叫做 数据劫持

比如：修改了某个属性，就被setter劫持了

2、表单收集

v-model 的表单大收集

1.普通value

之前的 text 和 password

账号:<input type="text" v-model="yongHu.name"><br><br>
密码:<input type="password" v-model="yongHu.password"><br><br>

yongHu: {	// 整俩对象
    name: '',
    password: '',
}

2.单选框

radio

性别:
男<input type="radio" name="sex" v-model="sex" value="男">
女<input type="radio" name="sex" v-model="sex" value="女">
<br><br>

sex: '男', 	// 字符串里接受value的值，这里就是默认是男

3.多选框（大不同）

checkbox

3.1 单独布尔值收集

爱好:
<!-- 单独 -->
睡觉<input type="checkbox" name="ah" v-model="ah.sleep">
吃饭<input type="checkbox" name="ah." v-model="ah.eat">
喝水<input type="checkbox" name="ah" v-model="ah.drink">

ah: {	// 收到了就变 true
    sleep: false,
    eat: false,
	drink: false,
},

3.2 数组收集

<!-- 数组 都是v-model="ah"-->
睡觉<input type="checkbox" name="ah" v-model="ah" value="睡觉">
吃饭<input type="checkbox" name="ah" v-model="ah" value="吃饭">
喝水<input type="checkbox" name="ah" v-model="ah" value="喝水">
<br><br>

ah:[],	// 点上一个，数组里就添加一个它的 value值
// 比如点上了 睡觉  ah:['睡觉']

之前的单独收集设置了 value 值也是 布尔值

4.下拉框

select，和前面的单选框差不多

所属校区:
<select v-model="school">
    <option>请选择校区</option>
    <option>这个校区</option>
    <option>那个校区</option>
    <option>这边的校区</option>
    <option>那边的校区</option>
</select>
<br><br>

school:'请选择校区',	// 字符串里就是默认值

5.多行文本框

textarea

其他信息:
<textarea cols="17px" rows="3" v-model="qt"></textarea>
<br><br>

6.小总结

• 收集 value 值：

  • text 和 password
  • 单选框 radio
  • 下拉框 select
  • 多行文本框 textarea
  • 使用数组收集的多选框

• 特殊：

  • 使用单独的对象收集的多选框：布尔值

7.事件修饰符

7.1 trim

输入： abc，会直接变成 abc

账号:<input type="text" v-model.trim="yongHu.name"><br><br>
<!-- trim 输入时前面的空格忽略 -->

7.2 number

默认收到的value都是字符串，加了number就会自动转成数字

年龄:<input type="number" v-model.number="yongHu.age"><br><br>

注：设置了number，再在输入框输入非数字的字符，Vue就会停止收集

7.3 lazy

默认Vue是在你输入任何1个字的时候，就立马收集。设置了这个，你的鼠标点别的地儿，它才收集

<textarea cols="17px" rows="3" v-model.lazy="qt"></textarea>
<!-- 失去焦点时再收集 -->

3、过滤器

案例：把时间戳变成正常时间并显示

需要获取 day.js 获得一个 dayjs() dayjs

写：

<div id="root">
    <h2>格式化的时间:</h2>
    <h2>现在是:{{fmTime}}</h2>
</div>
<script>
    let vm = new Vue({
        el: '#root',
        data: {
            time: Date.now()
        },
        computed: {
            fmTime() {
                return dayjs(this.time).format('YYYY年MM月DD日 - HH时mm分ss秒');
                // 现在是:2024年08月25日 - 21时07分33秒
            }
        }
    });
</script>

1.filters

过滤器实现：

<h2>现在是(过滤器1):{{time | haha}}</h2>
<!-- 过滤器是一个函数，前面的是参数，后面的是接收参数的函数 -->
<!-- 然后把返回的数据，替换掉所有的{{}} -->

相当于：haha(this.time)

let vm = new Vue({
    el: '#root',
    data: {
        time: Date.now()
    },
    filters:{
       haha(time) {
          return dayjs(time).format('YYYY年MM月DD日 - HH时mm分ss秒');
       },
    },
});

2.传参

例：不要format(‘YYYY年MM月DD日 - HH时mm分ss秒’)，后面的时分秒自己设置

<h2>现在是(过滤器2):{{time | haha('HH:mm:ss')}}</h2>

haha(time,str='HH时mm分ss秒') {    // 但是前面的过滤器1就废了，所以就设置个默认值
    // 第一个参数 就 是管道前面的参数 
    return dayjs(time).format('YYYY年MM月DD日 - '+ str);
},

新添小知识：| 叫做管道

3.多重过滤

例：不要所有时间，只要前面的年

<h2>现在是(过滤器套娃):{{time | haha('HH:mm:ss') | timeSlice}}</h2>
<!-- time给haha, haha返回的结果再给timeSlice -->

haha(time,str='HH时mm分ss秒') {
    // 它的返回值当做 timeSlice 的参数
    return dayjs(time).format('YYYY年MM月DD日 - '+ str);
},
timeSlice(time) {
    // 最终页面显示的是它返回的值
    return time.slice(0,4)
}

4.全局过滤器

Vue.filter(‘过滤器名’,函数)，在实例外写

<div id="root2">
    <h2>{{xixi | timeSlice}}</h2>
    <!-- 慰问 你 -->
</div>
<script>
    Vue.filter('timeSlice',function (xixi){
    	return xixi.slice(0,4)
    })

    let vm = new Vue({
        ...
        filters:{
            // vm2 用不了这
            timeSlice(time) {
            	return time.slice(0,4)
            }
        },
    });

    let vm2 = new Vue({
        el: '#root2',
        data: {
            xixi: '慰问 你在干什么？',
        }
    })

</script>

// 一度芳容
Vue.filter('timeSlice',function (xixi){
    return xixi.slice(0,4)
})

5.注:

• 可以写在标签后面
• v-model 不能写
• 过滤器没有改变原本的数据