vue 指令

Posted 2022-12-21 chujunqiao

1 v-text

注意点：v-txt 会替换 html标签中的所有内容 （包括差值表达式）

2 v-html

v-html 有类似 v-text的功能，并且会自动解析url字符串中的html标签

3 v-cloak

    由于vue实例未加载时，页面上的一些差值表达式会显现出来，若加上v-cloak指令则可以隐藏这些内容。vue实例未加载完成时，差值表达式也不会显现。vue实例加载完成后，自动删v-cloak属性，从而使隐藏的内容显示。

4 v-once

数据渲染页面只会进行一次，之后绑定的数据变化，页面也不会重新渲染

5 v-pre

    v-pre可以阻止vue自动解析内容，因此上述代码中的message不会以差值表达式解析，而是保留原来的表达式

6 v-if和v-show

v-if为true时显示，此时v-else不显示。与之相反v-else为false时显示，而v-if不显示。

v-if的每次显示与隐藏，都会重新建立和删除标签，因此会浪费性能

v-show为true时显示，false则隐藏

    与v-if不同，v-show控制的是标签的display，进而控制其显示或隐藏。因此不必每次都建立或删除标签

7 v-for

v-for可以用来遍历数组或者对象

遍历数组：v-for="item in movies"  v-for="(item,index) in movies"

遍历对象：v-for="value in movies" v-for=“(value,key) in movies”

v-for=“(value,key,index) in movies”

注意点：v-for 遍历时经常绑定属性:key=‘唯一标志‘（给节点作唯一标志） 实现节点与内容一一对应 这样节点内容有变动时，节点与内容还是会保持对应。

  数组的index有唯一性，但本身并无法与内容进行一一对应，内容改变时index也会随之变动，因此数组时不适合用index作为key属性值

8 v-on

    @click  => v-on:click

  绑定事件不写小括号，实际有一个参数传入，若函数的定义上有定义参数event，则默认将event对象传入（绑定事件手动传入则写$event）

  eq：<button @click="btnClick3(123,$event)">MouseEvent对象</button>

  事件修饰符：

  @click.stop 阻止冒泡 

  @click.prevent 阻止默认事件 

  @keyup.enter|KeyCode 监听键盘