Vue03

Vue03

注：为Vue实例添加属性，写法如下

methods:{ addSex(){         
		Vue.set(this.student,"sex",'男')     
    } 
}

Vue监视数据原理：

1. vue会监视data中所有层次的数据

2. 如何监测对象中的数据

3. 通过setter实现监视，且要在new Vue时就传入要监测的数据

1. 对象中后追加的属性，Vue默认不做响应式处理
  
2. 如需给猴添加的属性做响应式，请使用如下API
  
3. Vue.set(target,propertyName/index,value)
  
4. vm.$set(target,propertyName/index,value)

3. 如何检车数组中的数据？

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

1. 调用原生对应的方法对数组进行更新
  
2. 重新解析模板，进而更新页面

4. 在Vue修改数组中的某个元素一定要用如下方法

5. 使用这些API：push(),pop(),shift(),unshift(),splice(),sort(),reverse()

6. Vue.set() 或 vm.$set()

特别注意： Vue.set() 和 vm.$set() 不能给vm 或vm的根数据对象添加属性

$尝试数据监测的具体表现$

收集表单数据

• 若 text，则v-model 收集的是value值，用户输入的就是value值

• 若 radio，则v-model收集的是value值，且要给标签配置value值

• 若 checkbox

  • 没有配置input的value属性，那么收集的就是checked（是布尔值）

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

• v-model的三个修饰

  • lazy:失去焦点再点击数据

  • number：输入字符串转为有效数字（一般配合 type = “number” 使用）

  • trim：输入首尾空格过滤

    账号:
    密码:
    年龄:

数据提交（这里是打印出来） methods:{ demo(){ console.log(JSON.stringify(this.userInfo)) } } //注：用户信息封装在userInfo中，然后放在data里面

过滤器

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

• 语法

  • 注册过滤器：Vue.filter(name,callback) 或 new Vue{filter:{}}

  • 使用过滤器：{{xxx | 过滤器名 }} 或 v-bind:属性 = “xxx | 过滤器名”

1. 过滤器也可以接受额外参数，多个过滤器也可以串联

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

注：BootCDN这个网站前端开源，下载dayjs

{{Date.now() | formatDate('YYYY-MM-DD HH:mm:ss')}}




filters:{
					formatDate(value,format){
						return dayjs(value).format(format)
					}
				}

内置指令

前面学过的

• v-bind ：单向绑定解析表达式，可简写为 ：xxx

• v-model : 双向绑定数据

• v-for ：遍历数组/对象/字符串

• v-on ：绑定事件监听，可简写为@

• v-if ：条件渲染（动态控制结点是否存在）

• v-else ：条件渲染（动态控制结点是否存在）

• v-show ：条件渲染（动态控制结点是否存在）

新的指令

• v-text ：

  • 1.作用，向其所在的结点渲染文本内容

  • 2.与插值语法的区别：v-text会替换掉结点中的内容，{{xxx}}则不会

• v-html

  • 1.作用：向指定结点中渲染包含html结构的内容

  • 与插值语法的区别

    • v-html会替代掉结点中所有的内容，{{xx}}则不会

    • v-html可以识别html结构

  • 严重注意：v-html有安全性问题！

    • 在网址上动态渲染任意html是非常危险的，容易导致XSS攻击

    • 一定要在可信的内容上使用v-html,永不要用在用户提交的内容上

• v-cloak

  • 本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删除v-cloak属性

  • 使用css配合c-cloak 可以解决网速慢时也买你展示出未解析的问题

  • 注：css的写法如下 [v-cloak]{ display:none;}

• v-once

  • 所在结点在初次动态渲染后，就视为静态内容了

  • 以后数据的改变不会硬气v-once所在结构的更新，可以用于优化性能

• v-pre

  • 跳过其所在结点的编译过程

  • 可利用他跳过：没有使用指令语法，没有使用插值语法的结点，会加快编译

    n的初始值{{n}}