目录
一、绑定样式和渲染
1. 绑定样式
在应用界面,某个元素的样式是变化的，class/style绑定就是专门用来实现动态样式效果的技术
绑定class样式
：class='xxx'
- 表达式是字符串：'classA'
- 表达式是对象：{classA:isA,classB:isB}
- 表达式时数组：['classA','classB']
- 字符串写法：适用于要绑定的样式类名不确定、名字也不确定
- 数组写法：是用于要绑定的样式个数不确定，名字也不确定
- 对象写法：适用于要绑定的样式个数都额定，名字也确定，但要动态决定用不用
绑定style样式
:style="{fontSize: xxx}"
- 其中xxx是动态值
：style=“[a，b]
- 其中a、b是样式对象
- 可以是对象形式
- 也可以是数组形式
2. 条件渲染
条件渲染指令：v-if与v-else、v-show
v-if与v-else
写法
- v-if=“表达式”
- v-else-if=“表达式”
- v-else=“表达式”
使用于切换频率比较低的场景
特点：
不展示的DOM元素直接被移除注意：
- v-if可以和：v-else-if、v-else一起使用，但要求结构不能被打断
- v-if与template配合使用可以不破坏布局
使用v-if做条件渲染
<!-- 使用v-if做条件渲染 -->
<h2 v-if="false">欢迎来到{{name}}</h2>
<h2 v-if="1 === 1">欢迎来到{{name}}</h2>v-else和v-else-if
要求结构不能被打断
<div v-if="n === 1">Angular</div>
<div v-else-if="n === 2">React</div>
<div v-else-if="n === 3">Vue</div>
<div v-else>哈哈</div>v-if与template的配合使用
<!-- v-if与template的配合使用 -->
<template v-if="n === 1">
<h2>你好</h2>
<h2>尚硅谷</h2>
<h2>北京</h2>
</template>
v-show
写法：
v-show=“表达式”适用于切换频率较高的场景
特点：
不展示的Dom元素未被移除，仅仅是使用样式隐藏掉
<!-- 使用v-show做条件渲染 -->
<h2 v-show="false">欢迎来到{{name}}</h2>
<h2 v-show="1 === 1">欢迎来到{{name}}</h2>3. 列表渲染
v-for指令
用于展示列表数据
语法：v-for=“（item，index） in xxx” ：key=“yyy”
可遍历：数组。对象、字符串（用的很少）、指定次数（用的很少）
<div id="root">
<!-- 数组 -->
<h1>姓名列表（数组）</h1>
<ul>
<li v-for="(p,k) in persons" :key="k">
{{p.name}}-{{p.age}}
</li>
</ul>
<!-- 对象 -->
<h1>汽车列表(对象)</h1>
<ul>
<li v-for="(p,k) in cars" :key="k">
{{p}}-{{k}}
</li>
</ul>
<!-- 字符串 -->
<h1>字符串列表</h1>
<ul>
<li v-for="(p,k) in str" :key="k">
{{p}}-{{k}}
</li>
</ul>
<!-- 遍历次数 -->
<h1>遍历次数</h1>
<ul>
<li v-for="(p,k) in 6" :key="k">
{{p}}-{{k}}
</li>
</ul>
</div>
<script>
Vue.config.productionTip = false;
new Vue({
el: '#root',
data: {
persons: [
{ id: '001', name: '张三', age: 18 },
{ id: '002', name: '李四', age: 19 },
{ id: '003', name: '王五', age: 20 }
],
cars: {
name: '奥迪A8',
price: '70万',
color: '粉色'
},
str: 'nihao'
}
})
</script>key的使用
1. 虚拟DOM中key的作用：
key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚 拟DOM】,随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较
2.对比规则：
(1).旧虚拟DOM中找到了与新虚拟DOM相同的key：
①.若虚拟DOM中内容没变, 直接使用之前的真实DOM！
②.若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实 DOM。
(2).旧虚拟DOM中未找到与新虚拟DOM相同的key
创建新的真实DOM，随后渲染到到页面。
3. 用index作为key可能会引发的问题：
1. 若对数据进行：逆序添加、逆序删除等破坏顺序操作:
会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。
2. 如果结构中还包含输入类的DOM：
会产生错误DOM更新 ==> 界面有问题。
4. 开发中如何选择key?:
1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，
使用index作为key是没有问题的。
二、收集表单数据
若：<input type='text'>则 v-model收集的是value值，用户输入的就是value值
若：<input type = "radio"> 则v-model收集的是value值，且要给标签配置value值
若: <input type=""checkbox">
1. 没有配置input的value属性，那么收集的就是checked（布尔值）
2. 配置input的value属性：
1. v-model的初始值是非数组，那么收集的就是checked（布尔值）
2. v-model的初始值是数组，那么收集的就是value组成的数组
注意：
v-model的三个修饰符：lazy: 失去焦点在收集数据
number: 输入字符串转为有效的数字
trim: 输入首位空格过滤，中间不过滤
1. 若：<input type='text'>则 v-model收集的是value值，用户输入的就是value值
2. 若：<input type = "radio"> 则v-model收集的是value值，且要给标签配置value值
3. 若: <input type=""checkbox">
1. 没有配置input的value属性，那么收集的就是checked（布尔值）
2. 配置input的value属性：
1. v-model的初始值是非数组，那么收集的就是checked（布尔值）
2. v-model的初始值是数组，那么收集的就是value组成的数组
<!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>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="root">
<form @submit.prevent="submit">
账号：<input type="text" v-model="accont"> <br><br>
密码：<input type="password" v-model="password"><br><br>
性别：
男 <input type="radio" v-model="sex" value="male">
女<input type="radio" v-model="sex" value="famale"> <br><br>
爱好：学习<input type="checkbox" v-model="hobby" value="study">
打游戏<input type="checkbox" v-model="hobby" value="game">
吃饭<input type="checkbox" v-model="hobby" value="eat"><br><br>
所属校区
<select v-model="address">
<option value="">请选择校区</option>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="shenzhen">深圳</option>
</select><br><br>
其他信息：<textarea v-model="anther"></textarea><br><br>
<button>提交</button>
</form>
</div>
<script>
Vue.config.productionTip = false;
new Vue({
el: '#root',
data: {
accont: '',
password: '',
sex: '',
hobby: [],
address: '',
anther: ''
},
methods: {
submit() {
alert("1");
}
},
})
</script>
</body>
</html>三、过滤器
定义
对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）
语法：
1. 注册过滤器：
Vue.filter(name,callback)或 new Vue{filters:{}}
2. 使用过滤器：
{{xxx | 过滤器名}} 或 v-bind：属性 = “xxx | 过滤器名”
备注：
1. 过滤器也可以接受额外的参数，多个过滤器也可以串联
2. 并没有改变原来的数据，是产生新的对应的数据
<!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>Document</title>
<script src="js/vue.js"></script>
<script src="js/dayjs.min.js"></script>
</head>
<body>
<div id="root">
<h1>当前时间</h1>
<!-- 计算属性做法 -->
<h3>{{fmTime}}</h3>
<!-- methods做法 -->
<h3>{{formatTime()}}</h3>
<!-- 过滤器 -->
<h3>{{time | timeFormat }}</h3>
<!-- 过滤器串联使用 -->
<h3>{{time | timeFormat | mySlice}}</h3>
</div>
<script>
Vue.config.productionTip = false;
// 过滤器全局使用方法
Vue.filter('mySlice', function (val) {
return val.slice(0, 4);
})
new Vue({
el: '#root',
data: {
time: 1660641877002 //获取的时间戳
},
computed: {
fmTime() {
return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
}
},
methods: {
formatTime() {
return dayjs().format('YYYY-MM-DD HH:mm:ss')
}
},
//局部过滤器
filters: {
timeFormat(val) {
return dayjs(val).format('YYYY年MM月DD日 HH:mm:ss')
},
// mySlice(val) {
// return val.slice(0, 4);
// }
}
})
</script>
</body>
</html>