Vue中常见指令

指令

1. 什么是指令？
   1. 指令指的就是vue元素或是组件身上的属性，带有特殊的v-标识符
2. 为什么要使用指令？
   1. 因为数据控制视图，也就意味你不能去像以前一样操作DOM
   2. 指令的目的就是操作dom
   3. dom操作交给源代码做了

• 数据展示 3种
  * {{}}
  * v-html
  * v-text

  • 对比
    • 1. {{}}语法是有弊端的，当网络比较延迟较重时，会出现源代码样式
    • 2. v-html是可以解析 标签化数据的，而另外两种是不可以的
  • 项目中使用哪个？
    • {{}}
      */

• vue中条件判断提供了四个指令
  * v-show
  * v-show 的值是一个布尔值
  * v-show不管初始条件是true,还是false,这个p元素都会创建
  * v-show渲染开销比较高
  * v-show控制的元素的显示和隐藏
  * v-if v-else v-else-if
  * 取值都是布尔值
  * v-if的形式控制的元素的创建和销毁
  * 单路分支
  * 双路分支
  * 多路分支
  * 项目中如何选用
  * 如果是频繁的切换，使用v-show
  * 如果出现多路分支，v-if
  */

• 数据绑定形式有两种
  * 单向数据绑定 v-bind
  * 凡是要将一个数据赋值给一个属性，我们就v-bind
  * 双向数据绑定 v-model
  * 只用于表单元素，默认绑定value属性
  * input select
  * 使用v-bind来实现双向数据绑定效果

  • 错误认识
    • vue是双向数据流 x
    • MVVM框架都是单向数据流
    • 单向数据流指的是数据从父流向子

列表渲染： v-for

• v-for = “item in lists”
• v-for = “item of lists”
• v-for = “(item,index) of lists” []
• v-for = “(item,key,index) of lists” {}
• v-for要求 循环元素身上 必须添加key属性
  • key最好使用id，没有那就用index

事件绑定

• vue中的事件绑定 v-on:eventType = “事件处理程序名称”
  • vue中为事件添加了修饰符
    • 修饰符的作用： 简化代码
    • 事件修饰符 **
    • 按键修饰符 **
    • 系统修饰符
      修饰符
      自定义事件
      其它事件

1. v-cloak 用于解决{{}}闪现的问题
2. v-once 只渲染一次