深圳服饰网站建设软文文章
指令修饰符：通过“.”指明一些指令的后缀，不同后缀封装了不同的处理操作->简化代码
1、按键修饰符
@keyup.enter 键盘回车监听
2、v-model修饰符
v-model.trim 去除首尾空格
v-model.number 转数字
3、事件修饰符
事件名.stop 阻止冒泡
事件名.prevent 阻止默认行为
4、v-bind对于样式控制的增强
为了方便开发者进行样式控制，Vue扩展了v-bind的语法，可以针对class类名和style行内样式进行控制
操纵class
语法：:class="对象/数组"
对象的写法：
<div class="box" :class="{pink:true,black:false}"></div>使用场景：一个类名，来回切换
数组就是数组的形式
使用场景：批量添加或删除类
* 案例-京东秒杀tab导航高亮
基本样式：
.all_gps {display: flex;flex-direction: row;}.gps {width: 150px;height: 50px;margin-left: 10px;background-color: white;text-align: center;line-height: 50px;list-style: none;font-size: 20px;font-weight: bold;color: black;cursor: pointer;}.gps_ck {color: white;background-color: red;}hr {color: red;}html部分：
<div id="app"><ul class="all_gps"><li @click="clickIndex=index" v-for="(item,index) in list":key="item.id" :class="{gps_ck: clickIndex===index}" class="gps">{{item.name}}</li></ul></div><hr>js部分：
const app=new Vue({el:'#app',data:{clickIndex: 0,list:[{id:1,name:'京东秒杀'},{id:2,name:'每日特价'},{id:3,name:'品类秒杀'}]}})效果：
点击哪个，哪个就会高亮
操作style
语法： :style="样式对象"
<div class="box" :style="{CSS属性名1:CSS属性值,CSS属性名2:CSS属性值}"></div>5、v-model应用于其他表单元素
常见的表单元素都可以用v-model绑定关联->快速获取或设置表单元素的值
它会根据控件类型自动选取正确的方法来更新元素
部分的表单控件需要绑定一个value值，传入data中，可以事项选或不选
6、计算属性
概念：基于现有的数据，计算出来的新属性。依赖的数据变化，自动重新计算
语法：
1、声明在computed配置项中，一个计算属性对应一个函数
2、使用起来和普通属性一起使用{{计算属性名}}
computed计算属性：
作用：封装了一段对于数据的处理，求得一个结果
method方法：
作用：给实例提供一个方法，调用以处理业务逻辑
语法：
1、写在methods配置项中
2、作为方法，需要调用-> this.方法名() {{方法名() }} @事件名=“方法名”
缓存特性（提升性能）：
计算属性会计算出来的结果缓存，再次使用直接读取缓存，
依赖项变化了，会自动重新计算->并再次缓存
* 计算属性完整写法
计算属性默认的简写，只能读取访问，不能修改
computed: {计算属性名: {get() {一段代码逻辑（计算逻辑）return 结果},set(修改的值) {一段代码逻辑（修改逻辑）}}}7、watch侦听器
作用：监视数据变化，执行一些业务逻辑或异步操作
语法：
简单写法：简单类型数据，直接监视
完整写法：添加额外配置项
简单写法：
data: {words:'苹果',obj: {words:'苹果'}},watch: {数据属性名(newValue,oldValue) {一些业务逻辑或异步操作},'对象.属性名'(newValue,oldValue) {一些业务逻辑或异步操作}}完整写法-添加额外配置项
1、deep:true对复杂类型深度监视
2、immediate:true初始化立刻执行一次handler方法
data: {obj: {words:'苹果',lang:'italy'}},watch: {数据属性名: {deep:true,handler(newValue) {console.log(newValue)}}}