Vue03

最新推荐文章于 2025-11-24 03:44:17 发布

原创最新推荐文章于 2025-11-24 03:44:17 发布 · 986 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

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}}