vue-常用指令 | 常用指令的修饰符

目录

什么是vue指令

v-cloak

v-text

v-html 

v-pre 

v-show /v-if

v-else/v-else-if

v-on

v-bind

v-for 

v-model 

常用指令的修饰符

v-model 指令修饰符

事件修饰符 

按键修饰符

---

什么是vue指令

指令就是带有  v- 前缀 的特殊 属性，不同的属性对应不同的功能。

分类汇总

• 内容渲染指令（v-html、v-text）
• 条件渲染指令（v-show、v-if、v-else、v-else-if）
• 事件绑定指令（v-on）
• 属性绑定指令 （v-bind）
• 双向绑定指令（v-model）
• 列表渲染指令（v-for）

v-cloak

• 【作用】解决浏览器在加载页面时因存在时间差而产生的闪动问题
• 【原理】先隐藏元素挂载位置，处理好渲染后再显示最终的结果
• 【注意】需要与CSS规则一起使用

如果后期有多个元素需要解决闪动问题，可以将v-cloak写在根元素上（id="app"顶级的div上）。 

​

  {{ message }}

v-text

 v-text：直接输出属性值，相当于  innerText。

• 【语法】

  hi

  ，意思是将 username值渲染到 p 标签中

• v-text 填充纯文本

• 相比插值表达式更加简洁

• 不存在插值表达式的闪动问题

v-html 

v-html：解析标签型数据，相当于innerHTML。

• 【语法】

  hi

  ，意思是将 showInfo值渲染到 p 标签中
• 使用该语法，会覆盖 p 标签原有内容
• 使用该语法，能够将HTML标签的样式呈现出来。

v-pre 

v-pre指令用于跳过这个元素和它的子元素的编译过程。可以用于显示原始的Mustache标签。

• 【语法】{{ raw }}  通过v-pre指令，可以让span元素及其子元素跳过Vue的编译过程，从而显示原始的{{ raw }}内容。
• 跳过编译
• 显示原始内容

v-show /v-if

v-show

• 【语法】 v-show = “表达式” 表达式值为 true 显示， false 隐藏
• 【作用】 控制元素显示隐藏
• 【原理】切换 display:none 控制显示隐藏
• 【场景】频繁切换显示隐藏的场景

v-if

• 【语法】 v-if= “表达式” 表达式值 true显示， false 隐藏
• 【作用】 控制元素显示隐藏（条件渲染）
• 【原理】基于条件判断，是否创建 或 移除元素节点
• 【场景】要么显示，要么隐藏，不频繁切换的场景

v-else/v-else-if

• 【语法】 v-else       v-else-if= “表达式”
• 【作用】 辅助v-if 进行判断渲染
• 【注意】要紧挨着v-if使用

v-on

• 【语法】v-on:事件名='内联语句'     v-on:事件名='methods中的函数名'
• 【作用】 注册事件 = 添加监听 + 提供处理逻辑
• 【简写】@事件名（事件名：click、change、submit等等）

    

        
        -
        {{ count }}
        
        切换显示隐藏
        
java
    
    
    

v-bind

• 【语法】v-bind:属性名='表达式' 
• 【作用】动态设置html标签——>src、url、title
• 【简写】:属性名='表达式'

v-bind对样式控制的增强

为了方便开发者进行样式控制，Vue 扩展了 v-bind 的语法，可以针对 class 类名 和 style 行内样式 进行控制 。

【语法】 class=”对象/数组”

• 对象 →键就是类名，值是布尔值。如果值为 true，有这个类，否则没有这个类

 使用场景：一个类名，来回的切换  (导航高亮切换)

• 数组 →数组中所有的类，都会添加到盒子上，本质就是一个 class 列表

适用场景：批量的添加或删除类 

【语法】style="样式对象'

v-for 

• 【语法】v-for="(item,index)in 数组'
• 【作用】基于循环多次渲染整个元素——>可以是‘数组’、‘对象’、数字...
• 【参数】item是每一项、index是下标。
• 【注意】v-for中的key，给列表项添加的唯一标识。便于Vue进行列表项的正确排序复用
  
  1.key 的值只能是 字符串 或 数字类型。
  2.key 的值必须具有 唯一性。
  3.推荐使用 id 作为 key(唯一)，不推荐使用 index作为 key(会变化，不对应)。

v-model 

• 【语法】v-model='变量' 
• 【作用】给 表单元素 使用，双向数据绑定→ 可以快速 获取 或 设置 表单元素内容

双向绑定

1、数据变化→ 视图自动更新

2、视图变化- 数据自动更新

常用指令的修饰符

v-model 指令修饰符

• .number: 输入字符串转为有效的数字。
• .trim: 输入首尾空格过滤。
• .lazy: 取代 input 监听 change 事件。

事件修饰符 

• .stop 修饰符：阻止事件冒泡。
  在内层元素使用了 .stop 修饰符来阻止点击事件向外层元素进行冒泡，这样点击内层元素时就不会触发外层元素的点击事件。
• .prevent 修饰符：阻止事件的默认行为。
  在 标签使用了 .prevent 修饰符，点击链接时会调用 noReload方法，同时也会阻止浏览器刷新页面的默认行为。
• .capture 修饰符：使用事件捕获模式。
  .capture修饰符来指示事件在捕获阶段处理，而不是冒泡阶段处理。
• .self 修饰符：只有事件由当前元素自身触发时才会触发处理函数。
  使用了 .self 修饰符来确保只有当点击当前元素自身时，才会触发事件处理函数。
• .once 修饰符：事件只会触发一次。
  使用了 .once 修饰符来确保事件只会在第一次触发时执行，之后的触发将被忽略。
• .passive 修饰符：指示浏览器不要阻止事件的默认行为。
  使用了 .passive 修饰符来告诉浏览器不要阻止默认行为，比如在事件处理函数中使用 event.preventDefault()。

鼠标事件修饰符

• .left 修饰符：表示左键鼠标按钮。
• .right 修饰符：表示右键鼠标按钮。
• .middle 修饰符：表示中键（滚轮键）鼠标按钮。

按键修饰符

• .enter 修饰符：当用户按下回车键时触发相应的事件处理函数。
• .tab 修饰符：当用户按下 Tab 键时触发相应的事件处理函数。
• .delete 修饰符：当用户按下 Delete 键时触发相应的事件处理函数。delete
• .esc 修饰符：当用户按下 Esc 键时触发相应的事件处理函数。
• .up 修饰符：当用户按下上箭头键时触发相应的事件处理函数。
• .space 修饰符：当用户按下空格键时触发相应的事件处理函数。
• .down 修饰符：当用户按下下箭头键时触发相应的事件处理函数。
• .left 修饰符：当用户按下左箭头键时触发相应的事件处理函数。
• .right 修饰符：当用户按下右箭头键时触发相应的事件处理函数。