Vue2学习（02）-CSDN博客

本文链接：https://blog.csdn.net/m0_63241410/article/details/138907507

一、指令修饰符

通过"."指明一些指令后缀，不同后缀封装了不同的处理操作------目的是简化代码

按键修饰符---@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))
					}
				}
			})