v-model绑定其他表单元素
1.默认情况下 v-model绑定的是表单的value值 (复选框的checkbox除外)
2.如果遇到复选框checkbox
非数组:一般用于单个复选框 此时绑定的是checked属性
数组:一般用于多个复选框 此时绑定的是value值
v-if指令
v-if 作用:根据条件渲染数据
v-show 作用:设置元素的display
区别:
v-if : 根据条件渲染
v-show : 一定会渲染 只修改display属性
使用场景 :
v-if : 切换频率低 (注册方式页面)
v-show : 切换频率高(鼠标移入移出事件)
vue的key值的作用
vue的key值的几种使用情况
1.没有key值 就地更新
2.key值为下标 : 就地更新 (与不设置key值没有区别)
3.key值为id (唯一字符串) : 复用相同的key 更新不同的key
(同级父元素中 子元素的key值必须是唯一的 否则vue会报错 类似于相同作用域变量名不能重复)
总结 : v-for指令的key值优先使用唯一字符串(性能最高) 实在没有就用下标index
v-for检测更新
数组的方法分为两种
第一种:会改变原数组的元素值 例如reverse() pop() push() shift() unshift() splice() sort() 等 这种情况v-for也会更新
第二种:不会改变原数组的元素值 例如slice() filter() concat() 等 这种情况v-for不会更新
如果v-for没有更新 可以覆盖整个数组 或使用 vue.$set()强制更新
vue计算属性
1.计算属性的作用:解决渲染页面的代码冗余问题
某些数据在渲染的时候 可能要经过一些复杂逻辑的计算处理
2.计算属性的语法:在vue实例对象computed中声明一个函数
这个函数名就是计算属性的属性名
在这个函数中的return返回值就是计算属性的属性值
3.注意
这个函数一定要写在vue实例对象computed中
这个函数一定要有返回值 否则计算属性无法渲染
4.计算属性的好处:
4.1当计算属性依赖值不变 会直接从缓存中读取
4.2当计算属性依赖值发生变化 vue会重新执行一次函数 并且将返回值放入缓存中
计算属性的get与set方法
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 导包 -->
<script src="./vue.js"></script>
</head>
<body>
<!-- HTML结构 -->
<div id="app">
全名:<input type="text" placeholder="请输入你的全名" v-model="fullName">
<br>
姓氏:<input type="text" placeholder="请输入你的姓氏" v-model="firstName">
<br>
名字:<input type="text" placeholder="请输入你的名字" v-model="lastName">
</div>
<script>
/*
1. 默认情况下,计算属性只有get方法。只能获取,不能修改。否则程序会报错
2. 如果希望计算属性可以修改,则可以实现set方法
*/
/* 创建vue实例 */
var app = new Vue({
//el:挂载点
el: '#app',
//data: 要渲染的数据
data: {
firstName:'',
lastName:'',
},
//计算属性
computed:{
/*计算属性两种写法
(1)fullName(){} : 默认就是get函数, 无法添加set函数
(2)fullName:{ get(){},set(val){} } : 如果想要添加set函数,计算属性就需要写成对象格式
*/
fullName:{
//获取计算属性
get(){
return `${this.firstName}${this.lastName}`
},
//设置计算属性
set(val){
console.log(val)//设置的值
this.firstName = val[0] || ''
this.lastName = val.substr(1,val.length-1)
}
}
}
})
</script>
</body>
</html>
侦听器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 导包 -->
<script src="./vue.js"></script>
</head>
<body>
<!-- HTML结构 -->
<div id="app">
用户名: <input type="text" placeholder="请输入用户名" v-model="username"><span>{{ info }}</span>
<br>
密码: <input type="text" placeholder="请输入密码" v-model="password">
</div>
<script>
/*
1.侦听器作用 : 监听某一个数据变化
2.侦听器语法 : 在vue实例的watch对象中
'要侦听的属性名'(newVal,oldVal){
}
3.面试点 : 侦听器与计算属性区别
计算属性 : 监听多个属性 (只要计算属性内部的任何属性变化,都会执行函数)
侦听器 : 监听单个属性
*/
/* 创建vue实例 */
let app = new Vue({
//el:挂载点
el: '#app',
//data: 要渲染的数据
data: {
username: '',
password: '',
info:''
},
//计算属性
watch: {
username(newVal, oldVal) {
console.log(newVal, oldVal)
this.info = '验证中...'
//模拟网络请求
setTimeout(()=>{
this.info = '该用户已被注册'
},500)
}
}
})
</script>
</body>
</html>
虚拟DOM
1.vue底层会把挂载点中的真实DOM结构,转变为虚拟DOM
真实DOM : 我们webapi学习的dom对象, 一个对象里面有几百个属性
虚拟DOM : 本质是一个js对象
,只处理一些关键的属性。(其他的不处理)
2.vue是如何更新渲染数据呢
生成新的虚拟DOM结构
把几百个dom属性,变成虚拟dom十几个关键属性
和旧的虚拟DOM结构对比
找不不同, 只更新变化的部分(重绘/回流)到页面 - 也叫打补丁
好处:
1.提高了更新DOM的性能(不用把页面全删除重新渲染)
2.虚拟DOM只包含必要的属性(没有真实DOM上百个属性)