一 : key
-
说明 :
Vue 中推荐, 在使用 v-for 的时候,添加 key 属性看官网
-
介绍
就地复用
<!-- 显示组件 -->
<p v-for="(item,index) in list" :key="index">
{{ item.name}} <input type="text" />
</p>
<!-- 数据 -->
data: { list : [ { id : 1, name : '老罗' }, { id : 2, name : '涛涛' }, { id : 3,
name : '聪聪' } ]
<!-- 演示 -->
vm.list.unshift({id:4,name:'马哥'})
-
怎么使用 key
3.1 如果数组里的元素不是对象,并且又不会改变数组的顺序的话 => :key='index' 3.2 如果数组里的元素是对象,,使用对象里的固定属性,并且是唯一, id 3.3 语法 : :key='item.id' 3.4 以后,写了v-for之后,立马写好 :key
-
完善 TodoMVC + key
一 : 事件修饰符
-
.prevent 阻止默认行为
-
一般用在 a标签阻止跳转默认行为 , 相当于 :
e.preventDefault()
.prevent 阻止默认行为,调用 event.preventDefault() (常用) @click.prevent = 'fn'
-
其他不常用事件修饰符 :
- .stop 阻止冒泡,调用 event.stopPropagation() - .capture 添加事件侦听器时使用事件捕获模式 - .self 只当事件在该元素本身触发时,才会触发事件 - .once 事件只触发一次
二 : 异步 DOM 更新
- Vue 中采用了
异步DOM更新
的机制 - 如何更新页面?
-
数据发生改变后, vue 没有立即将数据的改变更新到视图中,
-
而是等到数据不再变化的时候 一次性的 将 数据的改变更新到视图中
//1. 验证了 for (let i = 0; i < 1000; i++) { this.count++ }
- 为什么是异步 DOM 更新?
- 性能的考虑
- 因为对于前端来说, 修改数据进行 DOM 操作是常有的事情,如果频繁操作 DOM,会严重影响页面的加载性能
- DOM 操作这是前端的性能的瓶颈
- 比如 : for (let i = 1; i < 10000; i++>) 如果同步 就要重新渲染 1000 次
- 验证 异步 DOM 更新 :
//2. 直接获取data 中的值 ,会立马获取成功
console.log(this.count)
this.count++
console.log(this.count)
// 但是 通过dom来获取count的值,因为DOM更新这个count值是异步的,是需要一点时间的
console.log(this.$el.children[0].innerText) // 0
this.count = 100
console.log(this.$el.children[0].innerText) // 0
-
需求 : 在数据更新后,立即获取到更新后的内容???>
DOM 更新后,会执行 this.$nextTick() 的回调函数,所以能拿到值
// setTimeout(() => {
// console.log(this.$el.children[0].innerText)
// }, 1000)
this.$nextTick(() => {
console.log(this.$el.children[0].innerText) // 100
})
三 : 监听 watch
-
说明 : Vue 中可以通过 watch 配置项,来监听 vue 实例中数据的变化
-
基本使用
watch: { // 监听name属性的数据变化 // 作用 : 只要name的值发生变化,这个方法就会被调用 // 第一个参数 : 新值 // 第二个参数 : 旧值,之前的前 name(newVal,oldVal){ console.log('新 :',newVal); console.log('旧 :',oldVal); } }
-
基本使用案例 :
需求 : 监听用户名文本框字符个数(3-6),并显示格式验证
<input type="text" v-model="name" />
<span v-show="isShow">用户名的字符 在 6-12之间</span> if
(/^[0-9a-zA-Z]{3,6}$/.test(newVal)) { 验证 }
- 监听对象 (数组也属于对象)
// data :
data: {
obj: {
name: 'zs'
}
},
// 组件
<input type="text" v-model="obj.name" />
// 监听
- 开始监听对象的属性
// 从对象的角度来监听的
因为对象和数组都是引用类型,引用类型变量存的是地址,地址没有变,所以不会触发watch
obj:{
// 深度监听 属性的变化
deep:true,
// 立即处理 进入页面就触发
immediate: true,
// 数据发生变化就会调用这个函数
handler( newVal ) {
console.log( newVal.name );
}
},
// 从属性的角度来监听
'obj.name' ( newVal ) {
console.log('监听对象的属性',newVal);
}
四 : 数据持久化
需求 : 将todoMVC中的数据,保存到
本地存储
中 (本地持久化)
-
何时存储数据?
因为功能中的 CRUD 都会修改 list 数据,所以,只要 list 数据发生改变,就要保存到本地存储中;
方法一 : 在 CRUD 中 分别调用保存数据的方法,(不推荐 太繁琐)
方法二 : 想办法监听 list 数据的改变,只要 list 数据变了, 就调用保存数据的方法
可以使用 vue 的 watch 监听 list 的数据改变
- 存储值
监听数组和监听对象一样 需要深度监听
保存值,记得把对象转化为字符串(存的快 省空间)
// 监听
watch: {
// 监听list
todoList: {
deep: true,
handler(newVal) {
// console.log('发生变化了', newVal)
// 保存起来
localStorage.setItem('todoList', JSON.stringify(newVal))
}
}
},
- 取值 , 在 data 中可以初始值
记得给一个默认值 空数组 []
const todoList = JSON.parse(localStorage.getItem('todoList')|| '[]') ,