10、绑定样式
class样式：
:class="xxx"xxx可以是字符串、对象、数组
- 字符串写法适用于：类名不确定，需要动态获取
- 对象写法适用于：要绑定多个样式，个数不确定，名字也不确定
- 数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用
style样式：
:style="{fongSize: xxx}"其中xxx是动态值
:style="[a,b]"其中a、b是样式对象
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>绑定样式</title>
<script src="../js/vue.js"></script>
<style>
.a1{
height: 100px;
width: 100px;
border: 1px solid black;
}
.a2{
background-color: saddlebrown;
}
.a3{
background-color: skyblue;
}
.a4{
background-color: black;
}
.a5{
border-style: double;
}
.a6{
border-color: yellowgreen;
}
.a7{
border-width: 10px;
}
</style>
</head>
<body>
<!-- 准备一个容器 -->
<div id="root">
<!-- 绑定class样式 -- 字符串写法，适用于：样式的类名不确定，需要动态指定 -->
<div class="a1" :class="mood" @click="changeClass">{{name}}</div>
<br>
<!-- 绑定class样式 -- 数组写法，适用于：要绑定的样式个数、名字都不确定 -->
<div class="a1" :class="classArr">{{name}}</div>
<!-- 绑定class样式 -- 对象写法，适用于：要绑定的样式个数、名字都确定，但要动态决定要不要 -->
<div class="a1" :class="classObj">{{name}}</div>
<!-- 绑定style样式 -- 对象写法 -->
<div class="a1" :style="styleObj">{{name}}</div>
<!-- 绑定style样式 -- 数组写法 -->
<div class="a1" :style="[styleObj,styleObj2]">{{name}}</div>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
// 绑定容器
el: '#root',
// 存储数据
data: {
name: '尚硅谷',
mood: 'a2',
classArr: ['a5','a6','a7'],
classObj: {
a5: false,
a6: false
},
styleObj: {
fontSize: '40px',
},
styleObj2: {
fontSize: '40px',
backgroundColor: 'red'
}
},
methods: {
changeClass(){
const arr = ['a2','a3','a4'];
const index = Math.floor(Math.random()*3);
this.mood = arr[index];
}
}
})
</script>
</body>
</html>11、条件渲染
v-if写法：
v-if="表达式"v-else-if="表达式"v-else="表达式"
适用于：切换频率低的场景
特点：不展示的DOM元素直接被移除
注意：
v-if可以和v-else-if、v-else一起使用，但要求结构不能被“打断”
v-show写法：v-show="表达式"
适用于：切换频率较高的场景
特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉
备注
使用v-if的时候，元素可能无法获取到，而使用v-show一定可以获取到
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>条件渲染</title>
<script src="../js/vue.js"></script>
</head>
<body>
<!-- 准备一个容器 -->
<div id="root">
<h2>当前的n值是{{n}}</h2>
<button @click="n++">点我n++</button>
<!-- v-show -->
<!-- <h2 v-show="false">欢迎来到{{school}}</h2> -->
<!-- <h2 v-show="1 === 1">欢迎来到{{school}}</h2> -->
<!-- <h2 v-show="isShow">欢迎来到{{school}}</h2> -->
<!-- v-if -->
<!-- <h2 v-if="isShow">欢迎来到{{school}}</h2> -->
<!-- 高频率切换 -->
<div v-show="n == 0">Angular</div>
<div v-show="n == 1">React</div>
<div v-show="n == 2">Vue</div>
<!-- 低频率切换 -->
<div v-if="n == 0">Angular</div>
<div v-else-if="n == 1">React</div>
<div v-else-if="n == 2">Vue</div>
<div v-else>Vue3</div>
<template v-if="n == 1">
<div>1</div>
<div>2</div>
<div>3</div>
</template>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
// 绑定容器
el: '#root',
// 存储数据
data: {
school: '尚硅谷',
isShow: true,
n: 0
}
})
</script>
</body>
</html>12、列表渲染
1.基本列表
v-for指令- 用于展示列表数据
- 语法：
v-for="(item,index) in items" :key="index" - 可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>基本列表</title>
<script src="../js/vue.js"></script>
</head>
<body>
<!-- 准备一个容器 -->
<div id="root">
<!-- 遍历数组 -->
<h2>人员列表</h2>
<ul>
<li v-for="(p,index) in persons" :key="index">
{{p.name}}-{{p.age}}--{{p.id}}
</li>
</ul>
<!-- 遍历对象 -->
<h2>汽车信息</h2>
<ul>
<li v-for="(value,k) in car">
{{k}}-{{value}}
</li>
</ul>
<!-- 遍历字符串 -->
<h2>遍历字符串</h2>
<ul>
<li v-for="(char,index) in hello" :key="index">
{{char}}-{{index}}
</li>
</ul>
<!-- 遍历指定次数 -->
<h2>遍历指定次数</h2>
<ul>
<li v-for="(number,index) in 6" :key="index">
{{number}}-{{index}}
</li>
</ul>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
// 绑定容器
el: '#root',
// 存储数据
data: {
persons:[
{id:'001',name: '张三',age: 18},
{id:'002',name: '李四',age: 19},
{id:'003',name: '五五',age: 12}
],
car: {
name: 'Q7',
price: '70万',
color: "黑色"
},
hello: 'hello'
}
})
</script>
</body>
</html>2.key的原理
面试题：react、vue中的key有什么作用? （key的内部原理）
- 虚拟DOM中key的作用
key是虚拟DOM对象的标识，当状态中的数据发生变化时，Vue会根据【新数据】生成【新的虚拟D随后Vue进行【新虚拟DOM】【虚拟DOM】的差异比较
- 对比规则
（1）旧虚拟DOM中找到了与新虚拟DOM相同的key
- 若虚拟DOM中内容没变,直接使用之前的真实DOM !
- 若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM
（2）旧虚拟DOM中未找到与新虚拟DOM相同的key
- 创建新的真实DOM,随后渲染到到页面
- 用index作为key可能会引发的问题
- 若对数据进行:逆序添加、逆序朋除等破坏顺序操作，会产生没有必要的真实DOM更新==>界面效果没问题,但效率低
- 如果结构中还包含输入类的DOM，会产生错误DOM更新==>界面有问题
- 开发中如何选择key?
- 最好使用每条数据的唯一标识作为key，比如id、手机号、身份证号、学号等唯一值
- 如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>key的原理</title>
<script src="../js/vue.js"></script>
</head>
<body>
<!-- 准备一个容器 -->
<div id="root">
<!-- 遍历数组 -->
<h2>人员列表</h2>
<button @click.once="add">添加一个老刘放在最上面</button>
<ul>
<!-- key作用：给节点做标识 -->
<li v-for="(p,index) in persons" :key="index">
{{p.name}}-{{p.age}}
<input type="text">
</li>
</ul>
<ul>
<!-- key作用：给节点做标识 -->
<li v-for="(p,index) in persons" :key="p.id">
{{p.name}}-{{p.age}}
<input type="text">
</li>
</ul>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
// 绑定容器
el: '#root',
// 存储数据
data: {
persons:[
{id:'001',name: '张三',age: 18},
{id:'002',name: '李四',age: 19},
{id:'003',name: '五五',age: 20}
]
},
methods: {
add(){
const p = {id:'004',name: '老刘',age: 18};
this.persons.unshift(p);
}
},
})
</script>
</body>
</html>
3.列表过滤
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>列表过滤</title>
<!-- 引入Vue -->
<script src="../js/vue.js"></script>
</head>
<body>
<!-- 准备一个容器 -->
<div id="root">
<!-- 遍历数组 -->
<h2>人员列表</h2>
<input type="text" placeholder="请输入名字" v-model="keyWord">
<ul>
<li v-for="(p,index) in filPersons" :key="index">
{{p.name}}-{{p.age}}--{{p.sex}}
</li>
</ul>
</div>
<script>
Vue.config.productionTip = false;
// 用watch实现
// const vm = new Vue({
// // 绑定容器
// el: '#root',
// // 存储数据
// data: {
// keyWord: '',
// persons:[
// {id:'001',name: '周冬雨',age: 18,sex: '女'},
// {id:'002',name: '马冬梅',age: 19,sex: '女'},
// {id:'003',name: '周杰伦',age: 12,sex: '男'},
// {id:'003',name: '温兆伦',age: 12,sex: '男'},
// ],
// filPersons: []
// },
// watch: {
// // 监听keyWord
// keyWord: {
// // 初始化执行一次
// immediate: true,
// handler(val){
// this.filPersons = this.persons.filter((p)=>{
// return p.name.indexOf(val) != -1;
// });
// }
// }
// }
// })
new Vue({
// 绑定容器
el: '#root',
// 存储数据
data: {
keyWord: '',
persons:[
{id:'001',name: '周冬雨',age: 18,sex: '女'},
{id:'002',name: '马冬梅',age: 20,sex: '女'},
{id:'003',name: '周杰伦',age: 19,sex: '男'},
{id:'003',name: '温兆伦',age: 21,sex: '男'},
]
},
computed:{
filPersons(){
return this.persons.filter((p)=>{
return p.name.indexOf(this.keyWord) != -1;
});
}
}
})
</script>
</body>
</html>4.列表排序
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>列表排序</title>
<!-- 引入Vue -->
<script src="../js/vue.js"></script>
</head>
<body>
<!-- 准备一个容器 -->
<div id="root">
<!-- 遍历数组 -->
<h2>人员列表</h2>
<input type="text" placeholder="请输入名字" v-model="keyWord">
<button @click="sortType = 2">年龄升序</button>
<button @click="sortType = 1">年龄降序</button>
<button @click="sortType = 0">原顺序</button>
<ul>
<li v-for="(p,index) in filPersons" :key="index">
{{p.name}}-{{p.age}}--{{p.sex}}
</li>
</ul>
</div>
<script>
Vue.config.productionTip = false;
new Vue({
// 绑定容器
el: '#root',
// 存储数据
data: {
keyWord: '',
sortType: 0,// 0 原顺序 1 降序 2 升序
persons:[
{id:'001',name: '周冬雨',age: 18,sex: '女'},
{id:'002',name: '马冬梅',age: 20,sex: '女'},
{id:'003',name: '周杰伦',age: 19,sex: '男'},
{id:'003',name: '温兆伦',age: 21,sex: '男'},
]
},
computed:{
filPersons(){
const arr = this.persons.filter((p)=>{
return p.name.indexOf(this.keyWord) != -1;
});
// 判断一下是否需要排序
if (this.sortType) {
arr.sort((p1,p2)=>{
return this.sortType === 1 ? p2.age - p1.age : p1.age - p2.age
});
};
return arr;
},
}
})
</script>
</body>
</html>5.更新时的一个问题
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>更新时的一个问题</title>
<!-- 引入Vue -->
<script src="../js/vue.js"></script>
</head>
<body>
<!-- 准备一个容器 -->
<div id="root">
<!-- 遍历数组 -->
<h2>人员列表</h2>
<button @click="updateMei">更新马冬梅的信息</button>
<ul>
<li v-for="(p,index) in persons" :key="index">
{{p.name}}-{{p.age}}--{{p.sex}}
</li>
</ul>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
// 绑定容器
el: '#root',
// 存储数据
data: {
persons:[
{id:'001',name: '周冬雨',age: 18,sex: '女'},
{id:'002',name: '马冬梅',age: 20,sex: '女'},
{id:'003',name: '周杰伦',age: 19,sex: '男'},
{id:'003',name: '温兆伦',age: 21,sex: '男'},
]
},
methods: {
updateMei(){
// this.persons[1].name = '马老师'; // 奏效
// this.persons[1].age = 50; // 奏效
// this.persons[1].sex = '男'; // 奏效
// this.persons[1] = {id:'002',name: '马老师',age: 50,sex: '男'} // 不奏效
this.persons.splice(0,1,{id:'002',name: '马老师',age: 50,sex: '男'})
}
}
})
</script>
</body>
</html>6.Vue监测数据改变的原理-对象
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue监测数据改变的原理</title>
<!-- 引入Vue -->
<script src="../js/vue.js"></script>
</head>
<body>
<!-- 准备一个容器 -->
<div id="root">
<h1>学校名称：{{schoolName}}</h1>
<h1>学校地址：{{address}}</h1>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
// 绑定容器
el: '#root',
// 存储数据
data: {
schoolName: '尚硅谷',
address: '北京',
student:{
name: 'Tom',
age: 18
}
}
})
</script>
</body>
</html>7.模拟一个数据检测
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>模拟一个数据检测</title>
</head>
<body>
<!-- 准备一个容器 -->
<div id="root">
<h1>学校名称：{{schoolName}}</h1>
<h1>学校地址：{{address}}</h1>
</div>
<script>
let data = {
schoolName: '尚硅谷',
address: '北京',
};
// 创建一个监视的实例对象，用于监视data中属性的变化
const obs = new Observer(data);
console.log(obs);
// 准备一个vm实例
let vm = {};
vm._data = data = obs;
function Observer(obj) {
// 汇总对象中所有的属性形成一个数组
const keys = Object.keys(obj);
// 遍历
keys.forEach((k)=>{
Object.defineProperty(this,k,{
get(){
return obj[k];
},
set(val){
console.log(`${k}被改了，我要去解析模板，生成虚拟DOM....我要开始忙了`);
obj[k] = val;
}
})
});
}
</script>
</body>
</html>8.Vue.set的使用
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue监测数据改变的原理</title>
<!-- 引入Vue -->
<script src="../js/vue.js"></script>
</head>
<body>
<!-- 准备一个容器 -->
<div id="root">
<h1>学校信息</h1>
<h1>学校名称：{{school.schoolName}}</h1>
<h1>学校地址：{{school.address}}</h1>
<h1>校长：{{school.leader}}</h1>
<hr>
<h1>学生信息</h1>
<button @click="addSex">添加一个性别属性，默认值：男</button>
<h2>学生姓名：{{student.name}}</h2>
<h2 v-if="student.sex">学生性别：{{student.sex}}</h2>
<h2>学生姓名：真实{{student.age.rAge}}，对外{{student.age.sAge}}</h2>
<h2>朋友们</h2>
<ul>
<li v-for="(f, index) in student.friends" :key="index">
{{f.name}} --- {{f.age}}
</li>
</ul>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
// 绑定容器
el: '#root',
// 存储数据
data: {
school:{
schoolName: '尚硅谷',
address: '北京'
},
student:{
name: 'Tom',
// age: '男',
age: {
rAge: 40,
sAge: 22
},
friends: [
{name: 'jack',age: 35},
{name: 'jerry',age: 20}
]
}
},
methods: {
addSex(){
// Vue.set(this._data.student,'sex','男');
this.$set(this.student,'sex','男');
}
}
});
// 添加响应式的属性
// Vue.set(vm._data.student,'sex','男');
// vm.$set(vm.student,'sex','男');
</script>
</body>
</html>9.Vue监测数据改变的原理-数组
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue监测数据改变的原理-数组</title>
<!-- 引入Vue -->
<script src="../js/vue.js"></script>
</head>
<body>
<!-- 准备一个容器 -->
<div id="root">
<h1>学校信息</h1>
<h1>学校名称：{{school.schoolName}}</h1>
<h1>学校地址：{{school.address}}</h1>
<h1>校长：{{school.leader}}</h1>
<hr>
<h1>学生信息</h1>
<button @click="addSex">添加一个性别属性，默认值：男</button>
<h2>学生姓名：{{student.name}}</h2>
<h2 v-if="student.sex">学生性别：{{student.sex}}</h2>
<h2>学生姓名：真实{{student.age.rAge}}，对外{{student.age.sAge}}</h2>
<h2>朋友们</h2>
<ul>
<li v-for="(f, index) in student.friends" :key="index">
{{f.name}} --- {{f.age}}
</li>
</ul>
<h2>爱好</h2>
<ul>
<li v-for="(h, index) in student.hobby" :key="index">
{{h}}
</li>
</ul>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
// 绑定容器
el: '#root',
// 存储数据
data: {
school:{
schoolName: '尚硅谷',
address: '北京',
},
student:{
name: 'Tom',
// age: '男',
age: {
rAge: 40,
sAge: 22
},
friends: [
{name: 'jack',age: 35},
{name: 'jerry',age: 20}
],
hobby: ['吃饭','睡觉','打豆豆']
}
},
methods: {
addSex(){
// Vue.set(this._data.student,'sex','男');
this.$set(this.student,'sex','男');
}
}
});
// 添加响应式的属性
// Vue.set(vm._data.student,'sex','男');
// vm.$set(vm.student,'sex','男');
</script>
</body>
</html>10.总结Vue数据监测
vue监视数据的原理：vue会监视data中所有层次的数据
如何监测对象中的数据?
- 对象中后追加的属性，Vue默认不做响应式处理
如需给后添加的属性做响应式，请使用如下API
Vue.set(target.propertyName/index,value）vm.$set(target,propertyName/index.value)
如何监测数组中的数据?
通过包裹数组更新元素的方法实现,本质就是做了两件事
- 调用原生对应的方法对数组进行更新
- 重新解析模板，进而更新页面
在Vue修改数组中的某个元素一定要用如下方法
- 使用这些API:
push()、pop()、shift()、unshift()、splice()、sort()、reverse() Vue.set()或vm.$set()
特别注意
Vue.set() 或 vm.$set() 不能给vm 或 vm的根数据对象 添加属性！！
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>总结Vue数据监测</title>
<script src="../js/vue.js"></script>
</head>
<body>
<!-- 准备一个容器 -->
<div id="root">
<h1>学生信息</h1>
<button @click="student.age++">年龄+1岁</button><br>
<button @click="addSex">添加一个性别属性，默认值：男</button><br>
<button @click="student.sex = '未知'">修改性别</button><br>
<button @click="addFriend">在列表首位添加一个朋友</button><br>
<button @click="updateFirstFriendName">修改第一个朋友的名字为：张三</button><br>
<button @click="addHobby">添加一个爱好</button><br>
<button @click="updateHobby">修改第一个爱好为：开车</button><br>
<button @click="removeEat">过滤掉爱好中的第一个：吃饭</button><br>
<h2>学生姓名：{{student.name}}</h2>
<h2 v-if="student.sex">学生性别：{{student.sex}}</h2>
<h2>学生年龄：{{student.age}}</h2>
<h2>爱好</h2>
<ul>
<li v-for="(h, index) in student.hobby" :key="index">
{{h}}
</li>
</ul>
<h2>朋友们</h2>
<ul>
<li v-for="(f, index) in student.friends" :key="index">
{{f.name}} --- {{f.age}}
</li>
</ul>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
// 绑定容器
el: '#root',
// 存储数据
data: {
student:{
name: 'Tom',
// age: '男',
age: 18,
friends: [
{name: 'jack',age: 35},
{name: 'jerry',age: 20}
],
hobby: ['吃饭','睡觉','打豆豆']
}
},
methods: {
addSex(){
// Vue.set(this.student,'sex','男');
this.$set(this.student,'sex','男');
},
addFriend(){
this.student.friends.unshift({name:'沐沐',age: 18});
},
updateFirstFriendName(){
this.student.friends[0].name = '张三';
this.student.friends[0].age = 5;
},
addHobby(){
this.student.hobby.push('学习');
},
updateHobby(){
// this.student.hobby.splice(0,1,'开车');
// Vue.set(this.student.hobby,0,'开车');
this.$set(this.student.hobby,0,'开车');
},
removeEat(){
this.student.hobby = this.student.hobby.filter((h)=>{
return h !== '吃饭';
})
}
}
})
</script>
</body>
</html>13、收集表单数据
收集表单数据
- 若
<input type="text"/>，则v-model收集的是value值，用户输入的就是value值 - 若
<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值 若
<input type="checkbox"/>- 没有配置input的value属性，那么收集的就是checked（勾选or未勾选，是布尔值）
配置input的value属性
- v-model的初始值是非数组，那么收集的就是checked（勾选or未勾选，是布尔值)
- v-model的初始值是数组，那么收集的的就是value组成的数组
备注：v-model的三个修饰符
lazy:失去焦点再收集数据number:输入字符串转为有效的数字trim:输入首尾空格过滤
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>收集表单数据</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<form @submit.prevent="demo">
账户：<input type="text" v-model.trim="userInfo.account"><br><br>
密码：<input type="password" v-model="userInfo.password"><br><br>
年龄：<input type="number" v-model.number="userInfo.age"><br><br>
性别：
男<input type="radio" name="sex" v-model="userInfo.sex" value="man">
女<input type="radio" name="sex" v-model="userInfo.sex" value="female">
<br><br>
爱好：
学习<input type="checkbox" name="hobby" value="study" v-model="userInfo.hobby">
吃饭<input type="checkbox" name="hobby" value="eat" v-model="userInfo.hobby">
睡觉<input type="checkbox" name="hobby" value="sleep" v-model="userInfo.hobby">
<br><br>
所属校区：
<select v-model="userInfo.city">
<option value="0">请选择校区</option>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">广州</option>
</select>
<br><br>
其他信息：
<textarea v-model.lazy="userInfo.other"></textarea>
<br><br>
<input type="checkbox" v-model="userInfo.agree">
阅读并接受<a href="#">《用户协议》</a>
<br><br>
<button>提交</button>
</form>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
// 绑定容器
el: '#root',
// 存储数据
data: {
userInfo:{
account:'',
password:'',
age:'',
sex:'female',
hobby: [],
city:0,
other:'',
agree:''
}
},
methods: {
demo(){
console.log(JSON.stringify(this.userInfo));
}
},
})
</script>
</body>
</html>14、过滤器
定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理）
语法
- 注册过滤器:Vue.filter(name,callback)或new Vue{filters:{}
- 使用过滤器:{{ xxx│过滤器名}}或v-bind:属性=“xxx|过滤器名"
备注
- 过滤器也可以接收额外参数、多个过滤器也可以串联
- 并没有改变原本的数据,是产生新的对应的数据
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>过滤器</title>
<!-- 引入Vue -->
<script src="../js/vue.js"></script>
<!-- 引入dayjs -->
<script src="../js/dayjs.min.js"></script>
</head>
<body>
<!-- 准备一个容器 -->
<div id="root">
<h2>显示格式化后的时间</h2>
<h3>现在是：{{time}}</h3>
<!-- 计算属性实现 -->
<h3>格式化后的时间：{{fmtTime}}</h3>
<!-- methods实现 -->
<h3>格式化后的时间：{{getFmtTime()}}</h3>
<!-- 过滤器实现 -->
<h3>格式化后的时间：{{time | timeFormater}}</h3>
<!-- 过滤器实现 (传参) + 多过滤器-->
<h3>格式化后的时间：{{time | timeFormater('YYYY-MM-DD') | mySlice}}</h3>
<h3 :x="msg | mySlice">沐沐</h3>
</div>
<div id="root2">
<h2>{{msg | mySlice}}</h2>
</div>
<script>
Vue.config.productionTip = false;
// 全局过滤器
Vue.filter('mySlice',function (value) {
return value.slice(0,4)
})
const vm = new Vue({
// 绑定容器
el: '#root',
// 存储数据
data: {
time:1656496654590,
msg:'你好，小沐沐吖'
},
// 方法
methods: {
getFmtTime(){
return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
}
},
// 属性计算
computed: {
fmtTime(){
return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
}
},
// 过滤器 - 局部
filters: {
timeFormater(value,str='YYYY-MM-DD HH:mm:ss'){
return dayjs(value).format(str)
},
// mySlice(value){
// return value.slice(0,4)
// }
}
})
new Vue({
el:"#root2",
data:{
msg:'hello，小沐沐吖'
}
})
</script>
</body>
</html>15、内置指令
1.v-text指令
我们学过的指令
v-bind: 单向绑定解析表达式,可简写为:xXXv-model: 双向数据绑定v-for: 遍历数组/对象/字符串v-on: 绑定事件监听,可简写为@v-if: 条件渲染(动态控制节点是否存存在)v-else: 条件渲染（动态控制节点是否存存在)v-show: 条件渲染(动态控制节点是否展示)
v-text指令
- 作用：向其所在节点中渲染文本内容
- 与插值语法的区别：v-text会替换掉节点中的内容，插值语法{{xx}}不会
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>1-v-text指令</title>
<script src="../js/vue.js"></script>
</head>
<body>
<!-- 准备一个容器 -->
<div id="root">
<div>你好，{{username}}</div>
<div v-text="username"></div>
<div v-text="str"></div>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
// 绑定容器
el: '#root',
// 存储数据
data: {
username:'小沐沐吖',
str:'<h3>你好呀</h3>'
}
})
</script>
</body>
</html>2.v-html指令
作用:向指定节点中渲染包含html结构的内容
与插值语法的区别
v-html会替换掉节点中所有的内容,{{xx}}则不会v-html可以识别htm1结构严重注意: v-html有安全性问题!!!!
- 在网站上动态渲染任意HTML是非常危险的,容易导致XSS攻击。
- 一定要在可信的内容上使用
v-html，永不要用在用户提交的内容上!
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>2-v-html指令</title>
<script src="../js/vue.js"></script>
</head>
<body>
<!-- 准备一个容器 -->
<div id="root">
<div>你好，{{username}}</div>
<div v-html="str"></div>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
// 绑定容器
el: '#root',
// 存储数据
data: {
username:'小沐沐吖',
str:'<h3>你好呀</h3>'
}
})
</script>
</body>
</html>3.v-cloak指令
v-cloak指令（没有值）
- 本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性
- 使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题
配合的css：
[v-cloack]{
display: none;
}<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3-v-cloak指令</title>
<style>
/* 解决网速慢时页面展示出{{xxx}}的问题 */
[v-cloack]{
display: none;
}
</style>
<!-- 引入Vue -->
<script src="../js/vue.js"></script>
</head>
<body>
<!-- 准备一个容器 -->
<div id="root">
<h2 v-cloak>{{schoolName}}</h2>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
// 绑定容器
el: '#root',
// 存储数据
data: {
schoolName:'梅洛天庭'
}
})
</script>
</body>
</html>4.v-once指令
v-once所在节点在初次动态渲染后，就视为静态内容了- 以后数据的改变不会引起
v-once所在结构的更新，可以用于优化性能
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>4-v-once指令</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h2 v-once>初始化的n值是：{{n}}</h2>
<h2>当前的n值是：{{n}}</h2>
<button @click="n++">点我n++</button>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
// 绑定容器
el: '#root',
// 存储数据
data: {
n:1
}
})
</script>
</body>
</html>5.v-pre指令
- 跳过其所在节点的编译过程
- 可利用它跳过:没有使用指令语法、没有使用插值语法的节点，会加快编译
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>5-v-pre指令</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h2 v-pre>Vue其实很简单</h2>
<h2 v-pre>当前的n值是：{{n}}</h2>
<button @click="n++">点我n++</button>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
// 绑定容器
el: '#root',
// 存储数据
data: {
n:1
}
})
</script>
</body>
</html>16、自定义指令
1.自定义指令
定义语法
- 局部指令
new Vue({ directives:{指令名:配置对象} 或 directives{指令名:回调函数} }- 全局指令
Vue.directive(指令名,配置对象) 或 Vue.directive(指令名,回调函数)
配置对象中常用的3个回调
bind：指令与元素成功绑定时调用inserted：指令所在元素被插入页面时调用update：指令所在模板结构被重新解析时调用
备注：
- 指令定义时不加v-，但使用时要加v-；
- 指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。
- 需求1:定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。
- 需求2:定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>1-自定义指令</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h2>{{schoolName}}</h2>
<h2>当前的n值是：<span v-text="n"></span></h2>
<h2>放大10倍后的n值是：<span v-big="n"></span></h2>
<!-- <h2>放大10倍后的n值是：<span v-big-number="n"></span></h2> -->
<button @click="n++">点我n++</button>
<hr/>
<input type="text" v-fbind:value="n">
</div>
<div id="root2">
<input type="text" v-fbind:value="n">
</div>
<script>
Vue.config.productionTip = false;
// 定义全局指令
Vue.directive('fbind',{
// 指令与元素成功绑定时
bind(element,binding){
console.log("bind");
element.value = binding.value;
},
// 指令所在元素被插入页面时
inserted(element,binding){
console.log("inserted");
element.focus();
},
// 指令所在的模板重新解析时
update(element,binding){
console.log("update");
element.value = binding.value;
}
})
const vm = new Vue({
// 绑定容器
el: '#root',
// 存储数据
data: {
schoolName:'梅洛天庭',
n:1
},
directives: {
/*
big函数何时被调用？
1.指令与元素成功绑定时；
2.指令所在的模板重新解析时
*/
// 'big-number'(element,binding){
// console.log("big");
// element.innerText = binding.value * 10;
// },
big(element,binding){
console.log(this); // 注意此处的this指向Window
console.log("big");
element.innerText = binding.value * 10;
},
// fbind:{
// // 指令与元素成功绑定时
// bind(element,binding){
// console.log("bind");
// element.value = binding.value;
// },
// // 指令所在元素被插入页面时
// inserted(element,binding){
// console.log("inserted");
// element.focus();
// },
// // 指令所在的模板重新解析时
// update(element,binding){
// console.log("update");
// element.value = binding.value;
// }
// }
}
})
new Vue({
el: '#root2',
data:{
n:1
}
})
</script>
</body>
</html>2.回顾一个DOM操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2-回顾一个DOM操作</title>
<style>
.demo{
border-color: orange;
}
</style>
</head>
<body>
<button id="btn">点我创建一个输入框</button>
<script>
const btn = document.getElementById("btn");
btn.onclick = ()=>{
const input = document.createElement('input');
input.className = 'demo';
input.value = 99;
input.onclick = ()=>{
alert(1);
}
// input.parentElement.style.backgroundColor = 'skyblue'; 报错
document.body.appendChild(input);
input.parentElement.style.backgroundColor = 'skyblue';
input.focus();
}
</script>
</body>
</html>17、生命周期
1.引出生命周期
- 又名:生命周期回调函数、生命周期函数、生命周期钩子
- 是什么:Vue在关键时刻帮我们调用的一些特殊名称的函数。
- 生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。
- 生命周期函数中的this指向是vm或组件实例对象。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>1-引出生命周期</title>
<script src="../js/vue.js"></script>
</head>
<body>
<!-- 准备一个容器 -->
<div id="root">
<h2 v-if="a">你好啊</h2>
<h2 :style="{opacity}">欢迎学习Vue</h2>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
// 绑定容器
el: '#root',
// 存储数据
data: {
opacity:1,
a:''
},
methods: {
// change(){
// setInterval(() => {
// this.opacity -= 0.01
// if(this.opacity <= 0)this.opacity = 1
// }, 16);
// }
},
// Vue完成模板的解析并把初始的真实的DOM元素放入页面后（挂载完毕）调用mounted
mounted () {
setInterval(() => {
this.opacity -= 0.01
if(this.opacity <= 0)this.opacity = 1
}, 16);
}
})
// 通过外部定时器实现 -- 不推荐
// setInterval(() => {
// vm.opacity -= 0.01
// if(vm.opacity <= 0){
// vm.opacity = 1
// }
// }, 16);
</script>
</body>
</html>2.分析生命周期
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2-分析生命周期</title>
<!-- 引入Vue -->
<script src="../js/vue.js"></script>
</head>
<body>
<!-- 准备一个容器 -->
<div id="root">
<h2>当前的n值是：{{n}}</h2>
<button @click="add">点我n+1</button>
<button @click="bye">点我销毁vm</button>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
// 绑定容器
el: '#root',
// template:`
// <div>
// <h2>当前的n值是：{{n}}</h2>
// <button @click="add">点我n+1</button>
// </div>
// `,
// 存储数据
data: {
n:1
},
methods: {
add(){
console.log('add');
this.n++;
},
bye(){
console.log('bye');
this.$destroy()
}
},
watch: {
n(){
console.log('n变了');
}
},
// 访问不到data中的数据和methods的方法
beforeCreate() {
console.log('beforeCreate');
// console.log(this);
// 打断点
// debugger;
},
// 可以访问data中的数据和methods的方法
created () {
console.log("created");
// console.log(this);
},
beforeMount () {
console.log("beforeMount");
},
mounted () {
console.log('mounted');
},
beforeUpdate() {
console.log('beforeUpdate');
},
updated () {
console.log('updated');
},
beforeDestroy() {
console.log('beforeDestroy');
// this.add();// 只改变虚拟DOM，不会影响真实DOM
},
destroyed () {
console.log('destroyed');
}
})
</script>
</body>
</html>3.总结生命周期
常用的生命周期钩子
mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】
关于销毁Vue实例
- 销毁后借助Vue开发者工具看不到任何信息
- 销毁后自定义事件会失效，但原生DOM事件依然有效
- 一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3-总结生命周期</title>
<script src="../js/vue.js"></script>
</head>
<body>
<!-- 准备一个容器 -->
<div id="root">
<h2 :style="{opacity}">欢迎学习Vue</h2>
<button @click="opacity = 1">透明度设置为1</button>
<button @click="stop">点我停止变幻</button>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
// 绑定容器
el: '#root',
// 存储数据
data: {
opacity:1,
},
methods: {
stop(){
this.$destroy();
}
},
mounted () {
this.timer = setInterval(() => {
console.log('setInterval');
this.opacity -= 0.01
if(this.opacity <= 0)this.opacity = 1
}, 16);
},
beforeDestroy() {
console.log('vm即将驾鹤西游！');
clearInterval(this.timer);
},
})
</script>
</body>
</html>