七、绑定样式
1. class样式
写法:class="xxx" xxx可以是字符串、对象、数组。
字符串写法适用于：类名不确定，要动态获取。
<div class="basic" :class="mood" @click="changeMood">{{ name }}</div>
:class="{active:this.activeId==item.id}",数组动态获取类名：这个只能在项目中用
对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。
数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。
<div id="root">
<!--:class 绑定class样式字符串写法 适用于样式的类名不确定需要动态琢磨的状况-->
<div class="basic" :class="mood" @click="changeMood">字符串{{ name }}</div>
<hr/>
<!--:class 绑定class样式数组写法 适用于要绑定的样式个数不确定，名字也不确定的状况-->
<div class="basic" :class="classArr">数组{{ name }}</div>
<hr/>
<!--:class 绑定class样式对象写法 适用于要绑定的样式个数确定，名字确定，但动态决定要不要用的状况-->
<div class="basic" :class="classObj" >对象{{ name }}</div>
<hr/>
<!--绑定style样式 对象写法-->
<div class="basic" :style="styleObj">
{{ name }}
</div>
<hr/>
<!--绑定style样式 数组写法-->
<div class="basic" :style="[styleObj, styleObj2]">
{{ name }}
</div>
<hr/>
<div class="basic" :style="styleArr">
{{ name }}
</div>
</div>
<script type="text/javascript">
new Vue({
el:'#root',
data: {
name:'test',
mood:null,
classArr:['atguigu1', 'atguigu2', 'atguigu3'],
classObj:{
atguigu1: false,
atguigu2: false
},
styleObj:{
fontSize: '40px',
color: 'red',
},
styleObj2:{
background: 'green'
},
styleArr:[
{ color: 'orange' },
{ background: 'grey' }
]
},
methods:{
changeMood(){
//随机切换心情
const moodsArr = ['normal', 'happy', 'sad'];
const random = Math.floor(Math.random() * moodsArr.length);
this.mood = moodsArr[random];
}
}
});
</script>2. style样式
:style="{fontSize: xxx}"其中xxx是动态值。
<div class="basic" :style="[styleObj, styleObj2]">
{{ name }}
</div>
:style="[a,b]"其中a、b是样式对象。
<div class="basic" :style="styleArr">
{{ name }}
</div>
八、条件渲染
1. 条件渲染v-if
-
v-if="表达式"
-
v-else-if="表达式"
-
v-else="表达式"
适用于：切换频率较低的场景。
特点：不展示的DOM元素直接被移除。
注意：v-if 可以和 v-else-if、v-else一起使用，但要求结构不能被“打断”。
2. v-show
写法：v-show="表达式"
适用于：切换频率较高的场景。
特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉
3. 备注
使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。
九、列表渲染
1. v-for指令:
(1). 用于展示列表数据
(2). 语法：v-for="(item, index) in xxx" :key="yyy"
(3). 可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）
<div id="root">
<h2>人员列表</h2>
<ul>
<!--遍历数组-->
<!--循环列表的方法 类似与for in循环遍历-->
<!-- :代表v-bind 属性key让每一个li有了唯一的标识,key一定不要重复-->
<!--v-for(for in// for of)可以接受到两个参数,一个是当前的元素另一个是当前元素的索引 类似于下面的person,index-->
<li v-for='(person, index) in persons' :key="index">
<!--p可能来自形参，也可能来自于写在data里的属性，更可能来自于计算属性 computed-->
{{person.name}} - {{ person.age }}
</li>
</ul>
<!--遍历对象-->
<h2>汽车信息</h2>
<!--注意遍历对象的时候先收到的是每一项的属性的value，第二项是对应的键名:key-->
<ul v-for="(val, key) of car" :key="key">
<li>{{ key }} -- {{ val }}</li>
</ul>
<!--遍历字符串 用的不多-->
<h2>测试遍历字符串</h2>
<!--注意遍历字符串的时候先收到的是字符串中每一个字符，第二项是其对应的索引index-->
<ul v-for="(c, index) of str" :key="index">
<li>{{ index }} -- {{ c }}</li>
</ul>
<h2>遍历指定次数</h2>
<!--注意遍历指定次数的时候先收到的是number(例如5，则number是1，2，3，4，5)，第二项是对应index(从0开始计数,则是0,1,2,3,4)-->
<ul v-for="(num, index) in 5" :key="index">
<li>{{ index }} -- {{ num }}</li>
</ul>
</div>
<script type="text/javascript">
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}
],
car: {
name: '奥迪a8',
price: '70w',
color: '黑色'
},
str: 'hello'
}
})
</script>2. 面试题：react、vue中的key有什么作用？（key的内部原理）
-
虚拟DOM中key的作用：
key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】,
-
随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：
(1).旧虚拟DOM中找到了与新虚拟DOM相同的key：
①.若虚拟DOM中内容没变, 直接使用之前的真实DOM！
②.若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。
(2).旧虚拟DOM中未找到与新虚拟DOM相同的key 创建新的真实DOM，随后渲染到到页面。
-
用index作为key可能会引发的问题：
(1).破坏顺序操作: 会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。
(2).如果结构中还包含输入类的DOM： 会产生错误DOM更新 ==> 界面有问题。
-
开发中如何选择key?
(1). 最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
(2). 如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。
3. 列表过滤
<div id="root">
<h2>人员列表</h2>
<!--v-model双向绑定-->
<input type="text" placeholder="请输入名字" v-model="keyword"/>
<ul v-for="p in filPersons" :key="p.id">
<li>{{p.name}}-{{ p.age }}- {{ p.sex }}</li>
</ul>
</div>
<script type="text/javascript">
//用监视属性书写功能
// new Vue({
// el:'#root',
// data: {
// keyword : '',
// persons: [
// {id: "001", name:'周冬雨', age:20, sex:'女'},
// {id: "002", name:'马冬梅', age:19, sex:'女'},
// {id: "003", name:'周杰伦', age:21, sex:'男'},
// {id: "004", name:'温兆伦', age:22, sex: '男'},
// ],
// filPersons: []
// },
// //watch监听用户输入项keyword的变化
// watch:{
// keyword: {
// immediate: true, //上来就进行监视获得到的newV是''
// handler(newV){
// // console.log(newV)
// //不要修改元数据，这样只会越写越少
// //注意一个某个字符串.indexOf('')是0而不是-1(都包含空字符串)
// this.filPersons = this.persons.filter(p => p.name.indexOf(newV) !== -1);
// }
// }
// }
// })
//用计算属性书写功能
//当computed和watch都可以实现基本功能时优先考虑computed (重要)
new Vue({
el:'#root',
data: {
keyword : '',
persons: [
{id: "001", name:'周冬雨', age:20, sex:'女'},
{id: "002", name:'马冬梅', age:19, sex:'女'},
{id: "003", name:'周杰伦', age:21, sex:'男'},
{id: "004", name:'温兆伦', age:22, sex: '男'},
],
},
computed:{
filPersons(){
return this.persons.filter(p => p.name.indexOf(this.keyword) !== -1);
}
}
})
</script>4. 列表排序
<div id="root">
<h2>人员列表</h2>
<!--v-model双向绑定-->
<input type="text" placeholder="请输入名字" v-model="keyword"/>
<button @click="sortType = 2">年龄升序</button>
<button @click="sortType = 1">年龄降序</button>
<button @click="sortType = 0">原顺序</button>
<ul v-for="p in filPersons" :key="p.id">
<li>{{p.name}}-{{ p.age }}- {{ p.sex }}</li>
</ul>
</div>
<script type="text/javascript">
new Vue({
el:'#root',
data: {
keyword : '',
sortType: 0, //0代表原顺序 1代表降序 2代表升序
persons: [
{id: "001", name:'周大姐', age:20, sex:'女'},
{id: "002", name:'马大姐', age:19, sex:'女'},
{id: "003", name:'周大哥', age:21, sex:'男'},
{id: "004", name:'温弟弟', age:22, sex: '男'},
],
},
computed:{
filPersons(){
const arr = this.persons.filter(p => p.name.indexOf(this.keyword) !== -1);
//判断是否需要排序
if(!this.sortType) return arr;
//sort回调回收到前后两个数据项,a和b
//sort会改变的原数组
return arr.sort((p1, p2) => this.sortType === 1 ? p2.age-p1.age : p1.age - p2.age);
}
}
});
</script>5. Vue监视数据的原理
1）. vue会监视data中所有层次的数据。
2）. 如何监测对象中的数据？
通过setter实现监视，且要在new Vue时就传入要监测的数据。
(1).对象中后追加的属性，Vue默认不做响应式处理
(2).如需给后添加的属性做响应式，请使用如下API：
Vue.set(target，propertyName/index，value) 或
vm.$set(target，propertyName/index，value)
3）.如何监测数组中的数据？
通过包裹数组更新元素的方法实现，本质就是做了两件事：
(1).调用原生对应的方法对数组进行更新。
(2).重新解析模板，进而更新页面。
4）在Vue修改数组中的某个元素一定要用如下方法：
(1).使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
(2).Vue.set() 或 vm.$set()
特别注意：Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象 添加属性！！！
注: 数据劫持可以理解成为vue对你写在data的数据会进行加工，让它们都变成响应式的
<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="removeSmoke">过滤掉爱好中的抽烟</button> <br/>
<h3>姓名：{{student.name}}</h3>
<h3>年龄：{{student.age}}</h3>
<h3 v-if="student.sex">性别：{{student.sex}}</h3>
<h3>爱好：</h3>
<ul>
<li v-for="(h,index) in student.hobby" :key="index">
{{h}}
</li>
</ul>
<h3>朋友们：</h3>
<ul>
<li v-for="(f,index) in student.friends" :key="index">
{{f.name}}--{{f.age}}
</li>
</ul>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
const vm = new Vue({
el: '#root',
data:{
student:{
name:'tom',
age:18,
hobby:['抽烟','喝酒','烫头'],
friends:[
{name:'jerry',age:22},
{name:'tony',age:23}
]
}
},
methods:{
addSex(){
this.$set(this.student, 'sex', '男');
},
addFriend(){
this.student.friends.unshift({
name:'jack',
age:70,
})
},
updateFirstFriendName(){
this.student.friends[0].name = '张三'
},
addHobby(){
this.student.hobby.push('学习');
},
updateHobby(){
// this.student.hobby.splice(0,1,'开车');
this.$set(this.student.hobby, 0, '开车');
},
removeSmoke(){
//直接替换
this.student.hobby = this.student.hobby.filter(h => h !== '抽烟');
}
}
});
</script>十、收集表单数据
1. 收集表单数据：
若：<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。
若：<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。
若：<input type="checkbox"/>
1）没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）
2）配置input的value属性:
v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
v-model的初始值是数组，那么收集的的就是value组成的数组
2. v-model的三个修饰符：
-
lazy：失去焦点再收集数据
-
number：输入字符串转为有效的数字
-
trim：输入首尾空格过滤
<div id="root">
<form @submit.prevent="demo">
<!--写了label则点击它也能使指定的input获取焦点 for属性的值为指定元素的id-->
<label for="demo">账号:</label>
<input type="text" id="demo" v-model.trim="userInfo.account"/>
<br/>
密码: <input type="password" v-model="userInfo.password"/>
<br/>
性别:
<!--一组radio单选框的name值一定要相同 设置value值好让v-model去双向绑定-->
男:<input type="radio" v-model="userInfo.sex" name="sex" value="male"/>
女:<input type="radio" v-model="userInfo.sex" name="sex" value="female"/>
<br/>
年龄: <input type="number" v-model.number="userInfo.age"/>
<br/>
爱好:
<!--如果没有value值则v-model收集checked元素-->
学习 <input v-model="userInfo.hobby" type="checkbox" value="study"/>
打游戏 <input v-model="userInfo.hobby" type="checkbox" value="game"/>
吃饭 <input v-model="userInfo.hobby" type="checkbox" value="eat" />
<br/>
所属校区
<select v-model="userInfo.city">
<option value="">请选择校区</option>
<option value="Beijing">北京</option>
<option value="Shanghai">上海</option>
<option value="Shenzhen">深圳</option>
<option value="Wuhan">武汉</option>
</select>
<br/>
其他信息<textarea v-model.lazy="userInfo.other"></textarea>
<br/>
<input type="checkbox" v-model="userInfo.ifAgree"/>阅读并接受<a href="https://www.google.com.tw">《用户协议》</a>
<button>提交数据</button>
</form>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
const vm = new Vue({
el: '#root',
data:{
userInfo:{
account: '',
password: '',
sex: 'male',
age:'',
hobby:[],
city:'',
other:'',
ifAgree:''
}
},
methods:{
demo(){
//json转换为string
console.log(JSON.stringify(this.userInfo));
}
}
})
</script>十一、过滤器
1. 定义
对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。
2. 语法
-
注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}
-
使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名"
3. 备注
-
过滤器也可以接收额外参数、多个过滤器也可以串联
-
并没有改变原本的数据, 是产生新的对应的数据
<div id="root">
<h1>显示格式化后的时间</h1>
<!--计算属性实现-->
<h2>现在是:{{ fmtTime }}</h2>
<!--methods实现-->
<h2>现在是{{ getFmtTime() }}</h2>
<!--过滤器实现-->
<h2>现在是:{{ time | timeFormater }}</h2>
<!--过滤器也可以传递参数-->
<h2>现在是:{{ time | timeFormater('YYYY-MM-DD') | mySlice }}</h2>
<h3 :x="msg | mySlice">你好,世界</h3>
<!-- 这个在控制台那才可以显示 x="你好，世"-->
</div>
<div id="root2">
<h2>{{ msg | mySlice }}</h2>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
//全局过滤器的配置
//注意配置一定要new vue实例之前确定
Vue.filter('mySlice', function (val){
return val.slice(0,4);
});
// 这个可以直接显示出来
const vm2 = new Vue({
el:"#root2",
data:{
msg:'welcome'
}
})
new Vue({
el: "#root",
data:{
time: 18310808423062,
msg: "你好，世界"
},
computed:{
fmtTime(){
return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
}
},
methods:{
getFmtTime(){
return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
}
},
//局部过滤器
filters:{
//过滤器本质上也是一个函数
timeFormater(val, formate = 'YYYY-MM-DD HH:mm:ss'){
return dayjs(val).format(formate)
},
}
});
</script>十二、内置指令
1. v-text
-
作用：向其所在的节点中渲染文本内容。 (纯文本渲染)
-
与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。这里有点不太灵活
2. v-html
-
作用：向指定节点中渲染包含html结构的内容。
-
与插值语法的区别：
(1).v-html会替换掉节点中所有的内容，{{xx}}则不会。
(2).v-html可以识别html结构。
-
严重注意：v-html有安全性问题！！！！
(1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
(2).一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！
3. v-cloak指令（没有值）
-
本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。
-
使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。
4. v-once(初次动态渲染后，咋改都不变)
-
v-once所在节点在初次动态渲染后，就视为静态内容了。
-
以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。
5. v-pre
-
跳过其所在节点的编译过程。
-
可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。
扫一扫
464
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
