Vue中的基本指令

vue指令, 实质上就是特殊的 html 标签属性, 特点: v- 开头
1.v-bing
语法：v-bind:属性名="vue变量"
简写：:属性名="vue变量"
vue变量的值, 赋予给dom属性上, 影响标签显示效果
2.v-on
v-on:事件名="要执行的少量代码
v-on:事件名=“methods中的函数”
v-on:事件名=“methods中的函数(实参)”
简写: @事件名=“methods中的函数”
常用@事件名, 给dom标签绑定事件, 以及=右侧事件处理函数
2.1v-on的事件对象 vue事件处理函数中, 拿到事件对象
语法:

• 无传参, 通过形参直接接收
• 传参, 通过$event指代事件对象传给事件处理函数
  2.2v-on修饰符
  语法:
• @事件名.修饰符=“methods里函数”
  • .stop - 阻止事件冒泡
  • .prevent - 阻止默认行为
  • .once - 程序运行期间, 只触发一次事件处理函数
  • 2.3v-on按键修饰符
  • 语法:
• @keyup.enter - 监测回车按键
• @keyup.esc - 监测返回按键
  ** 3. v-model**
  把value属性和vue数据变量, 双向绑定到一起
  3.1语法: v-model=“vue数据变量”
  双向数据绑定
• 数据变化 -> 视图自动同步
• 视图变化 -> 数据自动同步
  3.2v-model修饰符
• .number 以parseFloat转成数字类型
• .trim 去除首尾空白字符
• .lazy 在change时触发而非inupt时
  4. v-text和v-html
• 语法:
  • v-text=“vue数据变量”
  • v-html=“vue数据变量”
    注意: 会覆盖插值表达式
    v-text把值当成普通字符串显示, v-html把值当做html解析
    5._vue指令 v-show和v-if
• 语法:
  • v-show=“vue变量”
  • v-if=“vue变量”
• 原理
  • v-show 用的display:none隐藏 (频繁切换使用)
  • v-if 直接从DOM树上移除
• 高级
  • v-else使用。
  • 使用v-show和v-if以及v-else指令, 方便通过变量控制一套标签出现/隐藏
    6._vue指令-v-for
    语法
    v-for="(值, 索引) in 目标结构"
    v-for=“值 in 目标结构”
    目标结构:
    可以遍历数组 / 对象 / 数字 / 字符串 (可遍历结构)
    注意:
    v-for的临时变量名不能用到v-for范围外
    vue最常用指令, 铺设页面利器, 快速把数据赋予到相同的dom结构上循环生成