vue常用指令, 事件修饰符, 样式绑定_class与style

插值表达式

vue使用的是mustache模板引擎

插值表达式 – {{ 变量名 }}方式绑定Vue实例中data中的数据变量,会将绑定的数据实时的显示出来

支持的写法:

• {{ }}内支持js表达式,支持三目运算符,方法调用等

括起来的区域相当于是一个js语法区域,但是不支持var定义变量,分支语句(if等),不支持循环语句
vue中不推荐在 {{}} 内写业务逻辑

vue指令作用

指令就是vue给html标签提供的一些 自定义属性, 都带有 v- 的前缀,区别于普通属性

作用:

• 操作DOM
• 权限限制
• 表单验证

常用指令

1. v-html — 解析html输出 v-html=“html”, 跟一个属性值
2. v-text — 输出变量内容(文本内容) v-text=“html”, 跟一个属性值
3. v-cloak — 解决浏览器加载页面因网速问题出现的’闪动’问题(防止小胡子语法的{{}}出现在页面上)
4. v-pre — 跳过这个元素与它的子元素的编译过程,存放不需要vue转为虚拟DOM的代码块,提升性能
5. v-once — 只渲染元素和组件一次,之后元素和组件将失去响应功能(类似添加事件只响应一次)
6. v-if — 对DOM元素的删除和创建 v-if=“true”, true显示,false隐藏
   • 多条件v-elseif, 多条件中间不可插入标签
   • 初始加载速度较快,性能好
   • 场景: 一次性,例:用户登录到后台显示的按钮等(不会频繁改变)
7. v-show — 对DOM元素修改display的属性值, v-show=“true”, true显示,false隐藏
   • 初始加载慢一些,但由于是属性的切换,所以频繁切换时性能更好
   • 场景: 一般用于tab切换,如果tab中DOM数据过多,还是推荐使用if,(因为要切换属性,所以show会检查DOM数据,if不会)
8. v-bind — 动态绑定一个或多个属性 — 简写直接写 :变量=""
9. v-for — 需要使用(item,index) in 数组或对象, 同时还需要制定key值, key的作用在vue进行新旧数据比对渲染页面里, key会提升比对性能, key不推荐使用索引下标赋值, 推荐使用唯一的值来赋值
10. v-on — 绑定事件监听器, 简写直接写 @事件类型 — @click=“函数方法”
    • 函数方法可以加小括号, 不加小括号默认传一个 $event 事件对象 - v-on:click=“fn”
    • 写小括号可以传参数,默认不传 $event事件对象,如果需要可以在括号最后加上-@click="fn(a,$event)"
11. v-model — 表单元素的绑定,双向数据绑定

• v-model会忽略表单元素的value,checked,selected特性的初始值,总是将vue实例的data内的数据作为来源,需要在data内声明初始值
• 语法糖: 它是 v-bind:value 和 v-on:input的合集,可以使用这两个语法实现
• 绑定单选框, 多个复选框 以及 下拉菜单时需要标签提供 value值
• 将复选的每项value值写在data的一个数组内,通过判断数组内有无该项value来勾选和取消选择
• 在select绑定v-model,但value写在option内,data内的默认值写select绑定的变量名

事件修饰符

1. .stop — 阻止事件冒泡 直接点在事件类型后面即可

2. .prevent — 阻止默认行为

3. .once — 事件只执行一次

4. .self — 绑定事件的元素本身触发时才会回调

   • @click.stop.prevent=“fn” 修饰符可以串联
   • 可以通过全局 .config.keyCodes 对象自定义按键修饰符别名 - Vue.config.keyCodes={f2:113} ,给自定义名称f2绑定一个键盘码
   • 键盘事件和click事件同时存在 - @click.ctrl="fn’ - ctrl + 鼠标click
   5. .lazy — 失去焦点触发(延时更新数据源)

5. .number — 输入值转为数值类型

6. .trim — 自动过滤输入的首位空白字符(空格)

7. .native — 不使用组件内的事件, 强制使用vue自定义事件

样式绑定

class样式绑定

1. 对象语法
   :class="{active:true}" 或 :class=“classList”

active是css的类选择器名称, 第二种形式classList是写在data内的一个对象,classList:{active:true}
通过修改active的属性值进行添加和删除样式 ,

• this.classList = {…this.classList, 类名:true} — 修改之后重新赋值,生成新对象,内存地址改变,vue可以监听到
• this.classList = Object.assign({}, this.classList, {类名:true})
• this.$set(this.classList, ‘类名’, true) — vue提供的

this.classList.类名 = true — 开关已存在的样式好使,增加样式不好使,引用数据类型修改值内存地址不变

2. 数组语法
   :class="[‘active’]" 或 :class=“activeArr”

active是css的类选择器名称, 第二种形式classArr是写在data内的一个数组,classArr:[‘active’]
添加样式方法:

• this.classArr.push(‘类名’)
• this.classArr = this.classArr.concat([‘类名’]) — 因为concat方法是拼接后生成一个新数组,所以重新赋值
• this.classArr = […this.classArr, ‘类名’] — 展开运算符

style绑定

1. 对象语法
   :style="{color:‘red’}" 或 :style=“styleList”

styleList是定义在data内的对象, 在对象内直接写css样式,有-中文线的可以写小驼峰,或者用’'包裹

2. 数组语法
   :style="[color,font50]" 或 :style=“styleArr”

color,font50是在data内以对象形式写的css样式
styleArr是定义在data内的数组, 在数组内写一个个对象,在对象内写样式

​