logo头像

求知若渴,虚心若愚

Vue - Vue基本指令介绍(一)

指令

  • 指令是带有 v- 前缀的特殊属性。
  • 指令用于在表达式的值改变时,将某些行为应用到 DOM 上。

v-text

  • 设置⽂文本内容
  • 和差值表达式,双花括号有相同作用
1
2
3
<span v-text="msg"></span>
<!-- 效果一样 -->
<span>{{msg}}</span>

TIP
v-text相当于原⽣DOM操作的innerText 或者 textContent

v-model

  • 在表单控件或者组件上创建双向绑定
  • v-model 其实是一个语法糖,这背后其实做了两个操作

    1. v-bind 绑定一个 value 属性
    2. v-on 指令给当前元素绑定 input 事件
  • 使用场景

    • HTML元素的v-model
    • 组件上的v-model两种

HTML元素

  • 包含:
    • input
    • select
    • textarea
1
2
3
4
<input v-model='name'>
<!-- 相当于 -->
<input v-bind:value="name" v-on:input="name = $event.target.value">
<!--当input接收到新的输入,就会触发input事件,将事件目标的value 值赋给绑定的元素 -->
  • textarea和input用法基本一致
1
2
3
4
5
6
7
<select v-model="selected">
<option disabled value="">请选择</option>
<option>西瓜</option>
<option>橘子</option>
<option>香蕉</option>
</select>
<span>Selected: {{ selected }}</span>

自定义组件

1
2
3
4
5
6
7
<my-component v-model='name'></my-componment>

<!-- 相当于 -->
<my-component v-bind:value='name' v-on:input='name = arguments[0]'></my-component>

// 触发事件绑定,这个字符串input就是v-on:冒号后面的方法名
this.$emit('input', value)
  • name接受的值就是input是事件的回掉函数的第一个参数
  • 所以在自定义的组件当中,要实现数据绑定,还需要使用 $emit 去触发input的事件。

v-html

  • 更新元素的innerHTML
  • 内容按普通 HTML 插入
    • 不会作为 Vue 模板进行编译
    • 也就是在这个指令下数据绑定会被忽略,而被当成HTML
  • 使用v-html动态渲染HTML是非常危险的,因为容易导致XSS攻击
  • 所以只能在可信的内容上使用 v-html

TIP
永远不要在用户提交和可操作的网页上使用 v-html

本质:永远不要一厢情愿的相信用户的输入,一定要对用户的输入进行限制和过滤

v-bind

  • 动态地绑定一个或多个特性,或一个组件 prop 到表达式
  • 在绑定class 或 style 特性时,支持其它类型的值,如数组或对象
  • 在绑定 prop 时,prop 必须在子组件中声明
  • 简写:冒号

v-if(v-else,v-else-if)

  • 根据表达式的值的真假条件渲染元素
  • 如果是隐藏,DOM中是没有这个元素的

v-show

  • 根据表达式之真假值,切换元素的display属性
  • 如果不显示元素,其实是display:none
  • 和v-if的区别就是这个时候DOM中是存在这个元素的

v-pre

  • 跳过这个元素和它的子元素的编译过程。
  • 可以用来显示原始 Mustache 标签。
  • 跳过大量没有指令的节点会加快编译。

v-once

  • 只渲染元素和组件一次
  • 随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。
  • 这可以用于优化更新性能

v-cloak

  • 这个指令保持在元素上直到关联实例结束编译
  • 和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
  • 结合CSS规则,解决插值表达式‘闪烁’问题
1
2
3
4
5
6
7
8
9
10

// 带有v-cloak的标签隐藏
[v-cloak] {
display: none;
}

// 标签
<div v-cloak>
{{ message }}
</div>
支付宝打赏 微信打赏

赞赏是对我们的肯定!