Vue指令介绍及使用

目录

一、什么是指令

二、插值表达式 

三、vue中常用 v-指令

1.v-bind 

2.v-on 

 3.v-model

 4. v-text 与 v-html

 5.v-show 和 v-if

---

一、什么是指令

        在 vue 中提供了些对页面和数据更方便的输出方式，实质上就是特殊的 html 标签属性，指令中封装了一些DOM行为, 结合属性作为一个行为, 行为有对应的值,根据不同的值，框架会进行相关DOM操作的绑定, 特点: v- 开头 。

二、插值表达式 

        在dom标签中直接插入内容，又叫声明式渲染/文本插值。

        语法：{{ 表达式 }}

        注意：dom中插值表达式赋值, vue的变量必须在data里声明

三、vue中常用 v-指令

1.v-bind 

• 作用：给标签属性设置vue变量的值。
• 语法：v-bind:属性名="vue变量"  或  :属性名="vue变量"

• 
  我是a标签
  

2.v-on 

• 作用：给标签绑定事件
• 语法：v-on:事件名='要执行的代码(少量)'
             v-on:事件名='methods方法中的函数'
             v-on:事件名='methods方法中的函数(实参)'
          简写： @事件名='methods函数

• {{ count }}
  +5
  
  

• v-on修饰符
  在事件后面.修饰符名 - 给事件带来其他功能
  语法：@事件名.修饰符='methods函数'
          .stop --- 阻止事件冒泡
          .prevent --- 阻止默认行为
          .once --- 程序运行期间，只触发一次事件处理函数
• 按键修饰符
  语法：
          @keyup.enter --- 检测回车按键
          @keyup.esc --- 监测退出按键
  更多：事件处理 — Vue.js

 3.v-model

• 作用：双向数据绑定，数据变化与视图同步，视图变化与数据同步
• 语法：v-model='变量'

• 
   北京
   南京
   天津
  
  
  

  注意：在 input 的多选框中，变量为数组则绑定的是value属性里的值，为非数组则绑定的是checked属性(true/false)

• v-model修饰符
  语法：v-model.修饰符=‘变量’
          .number 以parseFloat形式转成数字型
          .trim 去除首尾空白字符
          .lazy 在change时触发而不是在input时

 4. v-text 与 v-html

• 作用：更新DOM对象的innerText/innerHTML
• 语法：
          v-text='变量'
          v-html='变量'
  注意：会覆盖插值表达式
• 区别：v-text把值当成普通字符串显示, v-html把值当做html解析

 5.v-show 和 v-if

• 作用：
  v-show 用display:none方式隐藏dom (频繁切换使用)
  v-if 直接从DOM树上移除
• 语法：
  v-show="变量"
  v-if="变量"
• v-if 可以跟 v-else-if 和 v-else 配合使用

6. v-for（最常用）

• 作用：渲染列表，按照数据循环生成所在标签的结构
• 语法：
          .v-for='(值,索引) in 目标数据'
          .v-for='值 in 目标数据'
• 目标数据：可以遍历数组，对象，数字，字符串（能遍历结构）
• 注意：v-for 的临时变量名不能用到v-for范围外
• 口诀：让谁循环就把v-for放在谁身上