1.1-v-model修饰符
官方文档:https://cn.vuejs.org/v2/api/#v-model
<!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" v-model.lazy="name" placeholder="请输入姓名"><br>
<p>您的姓名是:{{ name }}</p><hr>
<input type="text" v-model.number="age" placeholder="请输入年龄"><br>
<p>您的年龄是:{{ age }}</p><hr>
<input type="text" v-model.trim="score" placeholder="请输入分数">
<p>您的分数是:{{ score }}</p><hr>
</div>
<!--
v-model修饰符用法
v-model.lazy : 在change时触发而非inupt时(失去焦点或enter键的时候才会绑定数据)
v-model.number : 输入字符串转为有效的数字 (有效:能转数字就转,不能转就不转)
v-model.trim : 去掉字符串首尾空格
-->
<script>
/* 创建vue实例 */
let app = new Vue({
//el:挂载点
el: '#app',
//data: 要渲染的数据
data: {
name: '',
age: '',
score: '',
}
})
</script>
</body>
</html>
1.2-v-model绑定其他表单元素
官方文档:表单输入绑定 — Vue.js
1.默认情况下, v-model指令绑定的是表单元素的value值 (复选框checkbox除外)
2.如果遇到复选框checkbox
非数组 : 一般用于单个复选框,此时绑定的是checked属性
数组 : 一般用于多个复选框,此时绑定的是value属性
<!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">
<h2>性别</h2>
<input type="radio" value="男" name="sex" v-model="gender">男
<input type="radio" value="女" name="sex" v-model="gender">女
<h2>爱好</h2>
<input type="checkbox" value="学习" v-model="hobby">学习
<input type="checkbox" value="上课" v-model="hobby">上课
<input type="checkbox" value="敲代码" v-model="hobby">敲代码
<input type="checkbox" value="打游戏" v-model="hobby">打游戏
<h2>学科</h2>
<select name="" id="" value="学科" v-model="subject">
<option value="">请选择学科</option>
<option value="1">前端</option>
<option value="2">java</option>
<option value="3">测试</option>
</select>
<h2>自我介绍</h2>
<textarea v-model="info" rows="10"></textarea>
</div>
<!--
1.默认情况下, v-model指令绑定的是表单元素的value值 (复选框checkbox除外)
2.如果遇到复选框checkbox
非数组 : 一般用于单个复选框,此时绑定的是checked属性
数组 : 一般用于多个复选框,此时绑定的是value属性
-->
<script>
/* 创建vue实例 */
let app = new Vue({
//el:挂载点
el: '#app',
//data: 要渲染的数据
data: {
gender:'女',
hobby:[],
subject:'',
info:''
}
})
</script>
</body>
</html>
1.3-v-if指令
v-if官网文档:https://cn.vuejs.org/v2/api/#v-if
指令名称 | 指令作用 | 示例 | 简写形式 |
---|---|---|---|
v-if | 根据条件渲染数据 | v-if="score>=90" | 无 |
v-show | 设置元素的display | v-show="age>=30" | 无 |
<!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">
<!-- lazy :懒加载,输入框失去焦点vue才会渲染数据 -->
<input type="text" v-model.lazy="score" placeholder="请输入考试分数">
<h2>你的考试分数为:{{ score }}</h2>
<hr>
<h3 v-if="score>=90">给你买机器人</h3>
<h3 v-else-if="score>=80">给你买玩具车</h3>
<h3 v-else-if="score>=60">给你买棒棒糖</h3>
<h3 v-else>给你爱的掌声</h3>
</div>
<!--
v-if指令
(1)作用: 根据条件渲染数据
(2)语法:
单分支: v-if="条件语句"
双分支: v-else
多分支: v-else-if="条件语句"
(3)注意点
v-else与v-else-if的前面 必须要有 v-if 或者 v-else-if
-->
<script>
/* 创建vue实例 */
let app = new Vue({
//el:挂载点
el: '#app',
//data: 要渲染的数据
data: {
score: '',
}
})
</script>
</body>
</html>
1.4-v-show指令
v-show官网文档:https://cn.vuejs.org/v2/api/#v-show
<!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">
<p v-if="age>=30">我是v-if渲染出来的</p>
<p v-show="age>=30">我是v-show渲染出来的</p>
</div>
<!--
v-show 指令
(1)作用: 设置元素的display属性值
(2)语法: v-show="属性值"
属性值为true: 元素的display:block
属性值为false: 元素的display:none
(3)v-show与v-if区别
v-if : 条件渲染。 如果不满足条件,则该元素不会添加到DOM树中
v-show: 显示与隐藏。 只是修改元素的display属性值
-->
<script>
/* 创建vue实例 */
let app = new Vue({
//el:挂载点
el: '#app',
//data: 要渲染的数据
data: {
age: 20,
}
})
</script>
</body>
</html>
思考题1:v-if和v-show在功能上有什么区别?
v-show
:一定会渲染,只是修改display属性
v-if
:根据条件渲染
思考题2:列举v-if和v-show的使用场景(结合目前学过的案例
v-show : 频繁切换
。 tab栏,鼠标移入移出隐藏
1.5-vue的key值作用(了解)
key值介绍:
https://cn.vuejs.org/v2/api/#v-for
https://cn.vuejs.org/v2/api/#key
1.vue中key值作用
* (1)让vue准确的识别DOM元素 (类似于给元素添加一个身份证)
* (2)让vue强制更新DOM
2.应用场景:
2.1 使用v-if 切换元素
* 什么时候用key值 : 切换的元素dom结构一致
2.2 使用v-for 渲染列表
* 什么时候用key值 :所有的v-for推荐全部加上key值
1.6-v-for指令使用key值(了解虚拟DOM算法)
v-for指令使用key值几种情况 :
1.没有key值: 就地更新
2.key值为下标 : 就地更新 (与不设置key值没有区别)
3.key值为id (唯一字符串): 复用相同的key, 更新不同的key
* 同级父元素中,子元素的key值必须是唯一的,否则vue会报错。(类似于相同作用于变量名不能重复)
总结: v-for指令的key值优先使用唯一字符串(性能最高), 实在没有就用下标index
1.7-v-for更新检测
官方文档:https://cn.vuejs.org/v2/api/#Vue-set
1.数组的方法分为两种
第一种: 会改变原数组的元素值, 例如 reverse()、pop()、push()等 * 这种情况 v-for也会更新
第二种:不会改变原数组的元素值. 例如 slice() 、 filter() 、 concat()等 * 这种情况 v-for不会更新
2.总结 : 如果v-for没有更新. 可以覆盖整个数组, 或 使用 vue.$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">
<ul>
<li v-for="item in list" >
{{ item }}
</li>
</ul>
<button @click="revBtn">数组翻转</button>
<button @click="sliceBtn">截取前2个</button>
<button @click="updateBtn">更新第一个元素值</button>
</div>
<script>
/* v-for更新检测
1.数组的方法分为两种
第一种: 会改变原数组的元素值, 例如 reverse()、pop()、push()等
* 这种情况 v-for也会更新
第二种:不会改变原数组的元素值. 例如 slice() 、 filter() 、 concat()等
* 这种情况 v-for不会更新
2.总结 : 如果v-for没有更新. 可以覆盖整个数组, 或 使用 vue.$set() 强制更新
*/
/* 创建vue实例 */
var app = new Vue({
//el:挂载点
el: '#app',
//data: 要渲染的数据
data: {
list: [
10,20,30,40,50
]
},
//methods:事件处理函数
methods: {
revBtn() {
// 1. 数组翻转可以让v-for更新
this.list.reverse()
},
sliceBtn() {
// 2. 数组slice方法不会造成v-for更新
/* 原因:slice没有改变原始数组,只是从原始数组中获取元素
解决方案: 覆盖原始数组
*/
let newArr = this.list.slice(0, 2)
this.list = newArr
},
updateBtn() {
// 3. 替换元素值,不会造成v-for更新
// this.list[0] = 88
/* 解决方案: this.$set()
参数1: 更新目标结构
参数2: 更新位置
参数3: 更新值
*/
this.$set(this.list, 0, 88)
}
}
})
</script>
</body>
</html>
这些方法会触发数组改变, v-for会监测到并更新页面
-
push()
-
pop()
-
shift()
-
unshift()
-
splice()
-
sort()
-
reverse()
这些方法不会触发v-for更新
-
slice()
-
filter()
-
concat()
注意: vue不能监测到数组里赋值的动作而更新, 如果需要请使用Vue.set() 或者this.$set(), 或者覆盖整个数组
总结: 改变原数组的方法才能让v-for更新
02-vue计算属性
1.1-vue计算属性
vue计算属性官方文档:计算属性和侦听器 — Vue.js
1.计算属性作用 : 解决渲染数据的代码冗余问题
某些数据在渲染的时候,可能要经过一些复杂逻辑的计算处理
-
2.计算属性的语法:
在vue实例的computed对象中声明一个函数
-
这个
函数名
就是
计算属性的属性名
-
在这个函数中 return
返回值
(是
计算属性的属性值
)
-
-
3.注意点
-
这个函数一定要写在vue实例的computed对象中
-
这个函数一定要有返回值,否则计算属性无法渲染
-
<!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">
<p>{{ msg }}</p>
<!-- 翻转字符串 -->
<!-- <p> {{ msg.split('').reverse().join('') }}</p> -->
<p> {{ reverseMsg }}</p>
<!-- 别的地方也需要翻转字符串 -->
<!-- <p> {{ msg.split('').reverse().join('') }}</p> -->
<p> {{ reverseMsg }}</p>
</div>
<!--
vue计算属性
(1)计算属性作用 : 解决数据渲染代码冗余问题
(2)计算属性应用场景:当数据需要通过计算才能得到
* 例如: 商品总和,全选功能
(3)计算属性语法 :
a. 在vue实例的computed对象中声明一个函数 (计算属性的属性名)
b. 在这个函数中 return 返回值 (计算属性的属性值)
(4)计算属性注意点:
a. 这个函数一定要写在vue实例的computed对象中
b. 这个函数一定要有返回值,否则计算属性无法渲染
(5)计算属性特点及原理介绍 :
a. 计算属性本质是一个函数
b. 计算属性的值就是函数的返回值
c. 缓存机制(提高性能)
(1)计算属性在第一次使用时,会执行一次函数体,之后就会将返回值缓存起来
(2)下一次使用计算属性的时候,不会执行这个函数,而是直接从缓存中读取
(3)只有当计算属性中的数据发生变化时,这个函数才会重新执行一次
-->
<script>
/* 创建vue实例 */
let app = new Vue({
//el:挂载点
el: '#app',
//data: 要渲染的数据
data: {
msg: '我爱敲代码',
},
//计算属性
computed: {
reverseMsg(){
//this: vue实例
console.log('我被调用了');
return this.msg.split('').reverse().join('')
}
},
})
</script>
</body>
</html>
问题1:计算属性主要是用于解决什么问题的?
解决data中数据渲染冗余问题
问题2:计算属性好处
缓存功能
当计算属性依赖值不变,直接从缓存读取
当计算属性依赖值发生变化,vue会重新执行一次函数,并且将返回值放入缓存中
1.2-计算属性的set与get方法
官方文档:计算属性和侦听器 — Vue.js
<!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>
03-vue侦听器
1.1-侦听器使用
watch:{
'要侦听的属性名'(newVal,oldVal){ }
}
<!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){
}
侦听器与计算属性区别
计算属性 : 监听多个属性 (只要计算属性内部的任何属性变化,都会执行函数)
侦听器 : 监听单个属性
*/
/* 创建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>
1.2-深度侦听
watch: {
"要侦听的属性名": {
deep: true, // 深度侦听复杂类型内变化
handler (newVal, oldVal) {}
}
}
<!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="user.username"><span>{{ info }}</span>
<br>
密码: <input type="text" placeholder="请输入密码" v-model="user.password">
</div>
<script>
/*
1.深度侦听作用 : 侦听引用类型内部数据变化
2.
watch: {
"要侦听的属性名": {
deep: true, // 深度侦听复杂类型内变化
handler (newVal, oldVal) {}
}
}
*/
/* 创建vue实例 */
let app = new Vue({
//el:挂载点
el: '#app',
//data: 要渲染的数据
data: {
user: {
username: '',
password: ''
},
info: ''
},
//计算属性
watch: {
user: {
deep: true,
handler(newVal, oldVal) {
console.log(newVal, oldVal)
this.info = '验证中...'
//模拟网络请求
setTimeout(() => {
this.info = '该用户已被注册'
}, 500)
}
}
}
})
</script>
</body>
</html>