Vue03
Vue03
注：为Vue实例添加属性，写法如下
methods:{ addSex(){
Vue.set(this.student,"sex",'男')
}
}
Vue监视数据原理：
-
vue会监视data中所有层次的数据
-
如何监测对象中的数据
-
通过setter实现监视，且要在new Vue时就传入要监测的数据
1. 对象中后追加的属性，Vue默认不做响应式处理
2. 如需给猴添加的属性做响应式，请使用如下API
3. Vue.set(target,propertyName/index,value)
4. vm.$set(target,propertyName/index,value)
-
如何检车数组中的数据？
-
通过包裹数组更新元素的方法实现，本质就是做了两件事
1. 调用原生对应的方法对数组进行更新
2. 重新解析模板，进而更新页面
-
在Vue修改数组中的某个元素一定要用如下方法
-
使用这些API：push(),pop(),shift(),unshift(),splice(),sort(),reverse()
-
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 | 过滤器名”
-
-
过滤器也可以接受额外参数，多个过滤器也可以串联
-
并没有改变原本的数据，是产生新的对应的数据
注：BootCDN这个网站前端开源，下载dayjs
<script type="text/javascript" src="dayjs.min.js"></script>
<p>{{Date.now() | formatDate('YYYY-MM-DD HH:mm:ss')}}</p><br>
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}}
-