Vue指令 (四)

最新推荐文章于 2024-06-16 13:00:26 发布

吴佩佩佩佩

最新推荐文章于 2024-06-16 13:00:26 发布

阅读量1.5k

点赞数

分类专栏： Vue 文章标签： vue.js javascript html5 css3 css

本文链接：https://blog.csdn.net/m0_37797410/article/details/108122962

版权

Vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

指令是带有 v- 前缀的特殊属性。
指令属性的值预期是单个 JavaScript 表达式 (v-for 是例外情况)。
指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

1. v-text

更新元素的文本内容，也就是元素对象的textContent。

<div v-text="a"></div>
// 跟数据绑定的文本插值效果一样
<div>{{ a }}</div>

2. v-html

用户更新元素的innerHTML。

<div v-html="a"></div>

注意，这个指令只用在可信任的的内容上，永远不用在提交的内容上，否则容易导致XSS攻击。
单文件组件如果你的样式添加了scoped，那么样式不会应用在插入的html中。

3. v-show

根据表达式的真假值来显示和隐藏元素，他是通过css来显示隐藏，比v-if性能更好。

<div v-show="a"></div>

4. v-if

根据表达式的真假值来渲染元素，为假的时候销毁元素，在切换的时候里面的数据和组件会销毁及重建。

<div v-if="a"></div>

当和 v-if 一起使用时，v-for 的优先级比 v-if 更高

5. v-else

使用这个指令前面的同级元素必须要有v-if或者v-else-if。

<div v-if="a"></div>
<div v-else></div>

6. v-else-if

使用这个指令前面的同级元素必须要有v-if或者v-else-if。

<div v-if="a"></div>
<div v-else-if="b"></div>
<div v-else></div>

7. v-for

值必须为数组、对象、数字、字符串。
为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key。

7.1 数组

<div v-for="(item, index) in [1, 2, 3, 4]" :key="index">{{item}}|{{index}}</div>

结果:

<div>1|0</div>
<div>2|1</div>
<div>3|2</div>
<div>4|3</div>

7.2 对象

<div v-for="(val, name, index) in { name: '小明', age: 18, }" :key="name">
{{val}}|{{name}}|{{index}}
</div>

结果:

<div>小明|name|0</div>
<div>18|age|1</div>

7.3 数字

<div v-for="(val, index) in 2" :key="index">{{val}}|{{index}}</div>

结果:

<div>1|0</div>
<div>2|1</div>

7.4 字符串

<div v-for="(val, index) in '小明'" :key="index">{{val}}|{{index}}</div>

结果:

<div>小|0</div>
<div>明|1</div>

8. v-on

它的简写是@。
v-on用于绑定事件监听器，在普通元素上，它只能监听原生dom事件，如click、change这些。在自定义元素组件上，他可以监听子组件触发的自定义事件。
如果使用内联语句，语句可以访问一个 $event property：v-on:click=“handle(‘ok’, $event)”。
修饰符：
.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.capture - 添加事件侦听器时使用 capture 模式。
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。
.left - (2.2.0) 只当点击鼠标左键时触发。
.right - (2.2.0) 只当点击鼠标右键时触发。
.middle - (2.2.0) 只当点击鼠标中键时触发。
.passive - (2.3.0) 以 { passive: true } 模式添加侦听器

<!-- 方法 -->
<div v-on:click="fun"></div>
<!-- 内联语句 -->
<div v-on:click="fun('hellp', $event)"></div>
<!-- 简写 -->
<div @click="fun"></div>
<!-- 使用修饰符 阻止冒泡 -->
<div @click.stop="fun"></div>
<!-- 串联修饰符 -->
<div @click.stop.prevent="fun"></div>
<!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter">
<!-- 键修饰符，键代码 -->
<input @keyup.13="onEnter">
<!-- 点击回调只会触发一次 -->
<button v-on:click.once="doThis"></button>

9. v-bind

v-bind用于绑定动态的属性。
它的简写是：。
修饰符：
.prop - 作为一个 DOM property 绑定而不是作为 attribute 绑定。
.camel - (2.1.0+) 将 kebab-case attribute 名转换为 camelCase。(从 2.1.0 开始支持)
.sync (2.3.0+) 语法糖，会扩展成一个更新父组件绑定值的 v-on 侦听器。

<!-- 绑定一个属性 -->
<img v-bind:src="a" />
<!-- 简写 -->
<img :src="a" />
<!-- 绑定style -->
<div :style="{ fontSize: size + 'px' }">小明</div>
<!-- 绑定class -->
<div :class="[classA, classB]"></div>