vue指令

vue特点

• 声明式
• 组件化
• 渐近式
• 兼容ie8+

vue开发思想：改变视图界面，修改声明式变量

1.指令集合

指令的本质，就是DOM封装

一、文本指令

• {{}} 文本插值，缺点有一闪而过的效果
  • 两种解决方式：1.用v-text代替。
  • 2.v-cloak来解决还要加一个样式[v-cloak]{display:none;}
• v-text 专门用于渲染文本类的声明式的变量如：字符串 ，数值等。
  • undefide,null 类型不会渲染出来
  • 布尔类型则会隐私转换为bool值
• v-html 专门用于渲染HTML字符串
  • 会调用浏览器引擎，将字符串转为真实的DOM
  • 会防止xss攻击
• v-once 它所作用的DOM节点上的声明式的变量，只渲染一次，声明式的值变了之后就不会再改变。

​

二、动态属性

v-bind 给标签绑定动态属性

• 所有的属性都可以使用v-bind

• 可以简写为冒号：=v-bind

• v-bind对象绑定属性

进阶：使用v-bind实现动态class 动态style，是非常重要

事件绑定

v-on 给标签绑定事件

• 什么事件都能绑定
• 如： v-on:click=“handle”
• 简写为 @click=“handle”

事件对象：

• 1.当事件没有传参时，处理函数第一个值表示事件对象

• 2.若有参数时，要传$event表示事件对象

事件修饰符

• @keyup.enter
• @keyup.stop
• @keyup.prevent
• …

表单绑定

v-model 用于表单双向绑定，方便我们取值

• 约定：一般
• 好处：方便我们取表单的值

表单修饰符

• .trim 去掉表单前后的空字符串 加在v-model中
• .number 用于把数字组成的字符串转为number
• .lazy 用于“长边单”的v-model，当长表单光标失焦时，再把视图上的最新值更新到声明式变量。这是一种表单性能优化

列表循环

v-for 常用于 循环数组、数值、字符串、对象、一切可迭代的变量

• 很少用于循环map set
• 常用于数组 、数值
• v-for循环通常要加key

条件渲染

• v-show 用于对元素进行显示与隐藏，

  • 原理是给元素节点添加或者移除 display:none来实现的
  • v-show的值都是bool值

• v-if \v-else-if\v-else 用于对元素的显示与隐藏

  • ​ 原理是通过操作DOM对元素节点进行插入与移除

  • v-if=‘Boolean(表达式)’背后和v-show一样都会有个隐式转换

  • 与v-else-if 、v-else配合不能有第三者

  • v-if与v-show区别：使用v-show实现隐藏功能时，页面初始化的开销比较大。v-if实现隐藏功能时，页面初始化开销比较小。当一个一节点需要频繁的进行显示与隐藏,建议使用v-show来做，

插槽

v-slot 是组件化的基础语法之一，可以简写#

其他指令

v-pre 一般用于调试。特点被包裹起来的vue语法不起作用