一、指令修饰符
通过"."指明一些指令后缀,不同后缀封装了不同的处理操作------目的是简化代码
- 按键修饰符---@keyup.enter --->键盘回车监听
- v-model修饰符---v-model.trim--->去除首尾空格;v-model-number---->转数字(但是遇到非数字不会转成NaN)
- 事件修饰符---@事件名.stop---->阻止冒泡行为;@事件名.prevent----->阻止默认行为
二、v-bind对于样式控制的增强
v-bind操作class类名
- 语法::class="对象/数组"
- 对象的写法--->:class="{类名1:布尔值1,类名2:布尔值2}"----适用于一个类名来回切换
- 数组的写法--->:class="[类名1,类名2,类名3...]"----适用于批量添加和删除类
代码书写:
<div class="box" :class = "{pink:false,big:true }">Vue样式控制---:class</div>
<div class="box" :class = "{'pink','big'}">Vue样式控制---:class</div>
v-bind操作style行内样式
- 语法::style="样式对象"
- 写法--->:class="{类名1:布尔值1,类名2:布尔值2}"
代码书写:
<div class="box" :style="{width:'300px',height:'300px',backgroundColor:'green'}"></div>
三、v-model应用于其他表单元素----快速的获取或者设置值
会根据控件类型自动选取正确的方法来更新元素
- 单选按钮实现单选操作--->给参与单选的单选按钮添加name属性,name值相同的元素会被分到同一组中,同组之间会相互排斥,使得完成单选功能,至于value属性是用于提交给后台的数据
- 下拉菜单如何使用?--->option设置value值提交给后台,select的value值关联了选中的option的value值
四、计算属性(与data是并列关系)
概念:
基于现有数据,计算出来的新属性,依赖的数据变化,自动重新计算
语法:------将一段求值的代码进行封装
1.声明在computed配置项中,一个计算属性对应一个函数
2.使用起来和普通属性一样使用 ----> {{ 计算属性名 }}
computed:{
计算属性名(){
基于现有数据,编写求值逻辑
return 结果
}
}
computed属性和methods方法的区别
1.computed计算属性:
作用:封装了一段对于数据处理的代码,求得一个结果
语法:
1.声明在computed配置项中
2.使用起来和普通属性一样使用 ----> this.计算属性 {{ 计算属性名 }}
3.具有缓存特性(提升性能)--->使得计算属性会对计算出来的结果缓存,再次使用直接读取缓存,依赖项变化了,会重新计算并且再次缓存
2.methods方法:
作用:给实例提供了一个方法,调用以处理业务逻辑
语法:
1.声明在methods配置项中
2.作为方法,需要调用--->this.方法名() {{ 方法名() }} @事件名= "方法名"
计算属性的完整写法
计算属性的默认简写只能读取访问不能修改,如果要修改就需要完整的写出计算属性的写法
语法代码格式如下所示:
computed:{
计算属性名(){
get(){ //被获取求值时执行get函数,有缓存优先读取缓存
一段代码逻辑(计算逻辑)
return 结果
},
set(修改的值){//被修改时执行set函数
一段代码逻辑(修改逻辑)
}
}
}
五、watch侦听器(监视器,与data是并列关系)
作用:监视数据变化,执行一些业务逻辑或者异步操作
语法:
1.简单写法--->简单的数据类型,直接监视-----方法写法
watch:{
数据属性名(newValue,oldValue){
一些业务逻辑或者异步操作
},
"对象.属性名"(newValue,oldValue){
一些业务逻辑或者异步操作
}
}
2.完整写法--->添加额外的配置项----对象写法
watch:{
数据属性名:{
deep:true, //深度监视
immediate:true, //一进入页面就会立即执行
handler(newValue){
一些业务逻辑或者异步操作
}
}
}
六、案例:
水果结算页面:
Vue代码如下所示:
const defaultarr=[{
id: 1,
icon: 'img/火龙果.png',
isChecked: true,
num: 2,
price: 6,
},
{
id: 2,
icon: 'img/荔枝.png',
isChecked: false,
num: 7,
price: 20,
},
{
id: 3,
icon: 'img/榴莲.png',
isChecked: false,
num: 3,
price: 40,
},
{
id: 4,
icon: 'img/鸭梨.png',
isChecked: true,
num: 10,
price: 3,
},
{
id: 5,
icon: 'img/樱桃.png',
isChecked: false,
num: 20,
price: 34,
},]
const app = new Vue({
el: '#app',
data: {
// 水果列表
fruitList: JSON.parse(localStorage.getItem('list')) || defaultarr
},
computed:{
isAll:{
get(){
// 必须所有的选项框都选中,全选才选中--使用数组的every方法
return this.fruitList.every(item => item.isChecked)
},
set(value){
// console.log(value)
// 基于拿到的布尔值,让所有的选项框跟着变化
this.fruitList.forEach(item => item.isChecked =value)
}
},
// 总数---reduce
totalCount(){
return this.fruitList.reduce((sum,item) => item.isChecked ? sum + item.num : sum ,0 )
},
// 总价
totalPrice(){
return this.fruitList.reduce((sum,item) => item.isChecked ? sum + item.num * item.price : sum ,0)
}
},
methods: {
del(id) {
this.fruitList = this.fruitList.filter(item => item.id !== id)
},
add(id){
// console.log(id)
// 根据id找到数组中的对应项---find
const fruit = this.fruitList.find(item => item.id ===id)
fruit.num++
},
sub(id){
// console.log(id)
// 根据id找到数组中的对应项---find
const fruit = this.fruitList.find(item => item.id ===id)
fruit.num--
},
},
watch:{
deep:true,
immedate:true,
handler(newValue){
// console.log(newValue)
// 需要将变化后的存储在本地---转json
localStorage.setItem('list',JSON.stringify(newValue))
}
}
})