day 02

指令修饰符

通过 “.” 指明一些指令后缀，不同后缀分装了不同的处理操作 → 简化代码

按键修饰符

@keyup.enter → 键盘回车监听
v-model 修饰符

v-model.trim → 去除首尾空格（获取文本类输入框）

v-model.number → 转数字（获取年龄出生日期类输入框）
事件修饰符

@事件名.stop → 阻止冒泡

@事件名.prevent → 阻止默认行为（默认的跳转等）

v-bind 对于样式控制的增强 - 操作 class

语法 :class=”对象/数组”

对象 => 键就是类名，值是布尔值。如果值为 true，有这个类，否则没有这个类

<div class="box" :class="{类名1:布尔值，类名2:布尔值}"> </div>

数组 => 数组中所有的类，都会添加到盒子上，本质就是一个 class 列表

<div class="box" :class="[类名1, 类名2, 类名3]"> </div>

v-bind 对于样式控制的增强 - 操作 style

语法 :style = “样式对象”

<div class="box" :style="{CSS属性名1:CSS属性值，CSS属性名2:CSS属性值}"> </div>

使用场景：某个具体属性的动态设置 eg:进度条

v-model 应用于其他表单元素

常见的表单元素都可以用 v-model 绑定关联 => 快速获取或设置表单元素的值

它会根据 控件类型 自动选取 正确的方法 来更新元素

输入框	input:text	value
文本域	textarea	value
复选框	input:checkbox	checked
单选框	input:radio	checked
下拉菜单	select	value

计算属性

概念：基于现有的数据，计算出来的新属性，依赖的数据变化，自动重新计算。
语法：

声明在 computed 配置项中，一个计算属性对应一个函数
使用起来和普通属性一样使用 {{ 计算属性名 }}

computed:{
	计算属性名(){
		基于现有的数据，编写求值逻辑
		return 结果
	}
}

computed 计算属性 vs methods 方法

computed 计算属性：

作用：封装了一段对于数据的处理，求得一个结果。

语法：

写在 computed 配置项中
作为属性，直接使用 → this.计算属性 {{计算属性}}

methods 方法：

作用：给实例提供一个方法，调用以处理业务逻辑

语法：

写在 methods 配置项中
作为方法，需要调用 → this.方法名() {{方法名()}} @事件名=”方法名“

计算属性有 缓存特性(提升性能)

计算属性会计算出来的结果缓存，再次使用直接读取缓存，依赖项变化了，会自动重新计算 → 并再次缓存

计算属性完整写法

计算属性默认的简写，只能读取访问，不能”修改”.

如果要”修改“ → 需要写计算属性的完整写法。

computed:{
	计算属性名(){
	一段代码逻辑(计算逻辑)
	return 结果
	}
}

computed:{
	计算属性名：{
		get(计算逻辑){
			一段代码逻辑(计算逻辑)
			return 结果
		}
		set(修改的值){
			一段代码逻辑(修改逻辑)
		}
	}
}

watch 侦听器(监视器)

作用：监视数据变化，执行了一些 业务逻辑或异步操作。

语法：

简单写法 → 简单类型数据，直接监视

data:{
	wodrs：'苹果'，
	obj：{
		wodes：'苹果'
	}

}
watch：{
	//该方法会在数据变化时，触发执行
	数据属性名(newValue,oldValue){
		一些业务逻辑 或 异步操作。
	}，
	// 对象的属性名时候要加单引号包裹
	'对象.属性名' (newValue,oldValue) {
		一些业务逻辑 或 异步操作。
	}
}

完整写法 → 添加额外配置项目
1. deep: true 对复杂类型深度监视
2. immediate: true 初始化立刻执行一次 handler 方法

data:{
	wodrs：'苹果'，
	obj：{
		wodes：'苹果'，
		lang:'english'
	}

}
watch：{
		数据属性名:{
			deep: true,// deep 就是深度监视的开关
        	immediate: true,// 一进页面就触发
          	// handler 修改后就触发
          handler(newValue) {
          console.log(newValue)// 他是个对象哦
			一些业务逻辑 或 异步操作。
			}
		}
	}

需求：eg:简单输入内容实时翻译，复杂在简单的基础上修改语言也实时翻译

HB's blog

Vue-day02