Vue指令大全

用户855272622454
156 阅读4分钟

1.v-text

v-text主要用来更新textContent，可以等同于js的innerText属性

<span v-text="msg" ></span>

等同于

<span>{{msg}}</span>

2.v-html

v-html输出HTML，等同于JS的innerHtml属性

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

div的子元素会替换成dataHTML，当作HTML进行渲染

3.v-pre

v-pre主要用来跳过元素及其子元素的编译过程

<span v-pre v-text="name" ></span> 将不会编译v-text="name"

<span v-pre >{{name}}</span> 将不会编译{{name}}，直接显示{{name}}

4.v-cloak

在页面未完全渲染时，代码来不及编译会显示源代码导致页面闪烁，v-cloak用来保持元素及其子元素在关联实例渲染结束时进行编译，可以解决页面闪烁问题

<div v-cloak>
  <div>{{name}}</div>
</div>

5.v-once

v-once关联的元素及其子元素只会渲染一次，即使属性值改变也不会重新渲染，用于优化更新性能

6.v-if

v-if可以实现条件渲染，条件为真时才会渲染，条件为假时不渲染，并且元素被销毁不在DOM中，在为真时会被重新创建

<span v-if="bol"></span>

属性bol为true时渲染，否则不渲染

7.v-else

v-else配合v-if一起渲染，必须紧跟在v-if后面才起作用

<span v-if="bol">{{name}},{{age}}</span>
<span v-else>{{name}}</span>

8.v-else-if

v-else-if充当v-if和v-else的代码块，可以链式地多次使用

<span v-if="type === 'A' >a</span>
<span v-else-if="type === 'B' >b</span>
<span v-else-if="type === 'C' >c</span>
<span v-else >d</span>

9.v-show

v-show可以实现根据条件判断是否显示元素，与v-if不同的是，v-if为false时元素会被销毁不在存在于DOM中，v-show相当于切换了样式dispaly属性的none和block值，元素仍然存在DOM中。

  • v-if有更高的切换开销
  • v-show有更高的初始渲染开销
  • 如果是频繁的切换，则使用v-show更好

10.v-for

v-for根据遍历数组进行渲染

有两种遍历方式in 或 of

<ul>
  <li v-for="(value, index) in items" >
    value: {{value}}, index: {{index}}
  </li>
</ul>

<ul>
  <li v-for="value of items" >
    value: {{value}}
  </li>
</ul>

11.v-bind

v-bind动态绑定一个或多个特性，常用于动态绑定class、style和href等

简写为一个冒号 ：

  • 基础语法
<div :class="{"redColor": isActive, "blackColor": !active, "baseClass"}">
  Hello
</div>

<script>
  export defualt {
    data(){
      return {
        isActive: false
      }
    }
  }
</script>
  • 数组语法
<div :class="[{'redColor': isActive, 'blackColor': !isActive, 'baseClass'}] >
  Hello
</div>

<script>
  export default {
    data(){
      return {
        isActive: false
      }
    }
  }
</script>
  • 直接绑定对象
<div :class="classObj">
  Hello
</div>

<script>
export default {
  data(){
    return {
      objClass:{
        'redClass': false
        'blackClass': true
      }
    }
  }
}
</script>

12.v-model

v-model用于在表单上创建双向数据绑定

v-model会忽略表单元素上的value、checked、selected特性的初始值，因为它选择Vue实例对象的数据作为初始值

<div>
  <input type="text" v-model="msg" />
  <span>hello, {{msg}}</span>
</div>  

<script>
  export default {
    data(){
      return {
        msg: '小红'
      }
    }
  }
</script>

在input中输入值，下面显示的名字会跟着变化，这就是双向数据绑定

v-model修饰符

  • lazy修饰符 当用户使用v-model后，用户每次修改输入内容，都会将后台的数据同时绑定，为了避免这种情况的发生，使用lazy修饰符来进行限定。只有当用户的input中失去焦点或者用户点击回车按钮时，才会将后台的数据进行修改。
<div>
  <input type="text" v-model.lazy="msg" />
  <span>用户输入的内容：{{msg}}</span>
</div>

<script>
   export default {
     data(){
       return {
         msg: "hah"
       }
     }
}
</script>
  • number修饰符 当用户在input输入数字时，浏览器会默认将输入的数字转化为string类型，使用number修饰符来将输入的数字转化为numbernumber类型
<div>
  <input type="number" v-model.number="num" />
  <span>用户输入的数字为：{{num}}</span>
</div>

<script>
  export default {
    data(){
      return {
        num: 0
      }
    }
  }
</script>
  • trim修饰符 trim修饰符去掉用户输入的字符串首部和尾部的空格
<div>
  <input type="text" v-model.trim="msg" />
  <span>用户输入的值为：{{msg}}</span>
</div>

<script>
  export default {
    data(){
      return {
        msg: 'hah'
      }
    }
  }
</script>

13.v-on

v-on用来监听DOM事件，简写为@

<div>
  <button @click="handleClick">点击</button>
  <span>{{num}}</span>
</div>

<script>
  export default {
    data(){
      return {
        num: 0
      }
    },
    methods:{
      handleClick: () => {
        data.num++
      }
    }
  }
</script>

v-on修饰符

  • stop 阻止事件冒泡
<div>
  <a @click.stop="stopClick" >a链接</a>
</div>
  • prevent 阻止事件默认行为
<div>
  <form @submit.prevent="preventClick">
  </form>
</div>
  • captrue 捕获触发事件 captrue事件修饰符的作用是给元素添加一个监听器，当元素发生冒泡时，先触发带有该修饰符的事件，若有多个元素带有capture修饰符，则由外向内触发
<div>
  <div @click.captrue="firstClick" >
    <div @click.captrue="secondClick"><
      <div @click="fourthClick">
        <div @click="thirdClick">
          最内层
        </div>
      </div>
    /div>
  </div>
<div>

点击最内层的时候，因为有captrue修饰符，firstClick会最先触发，其次secondClick触发，然后是最内侧本身thirdClick事件触发，最后冒泡事件fourtClick触发

  • self 只有点击当前元素的时候
<div @click.self="testClick">
  <button @click="btnClick">点击</button>
</div>

因为testClick事件有self修饰符修饰，点击按钮不会触发testClick事件，不受事件冒泡影响，但不代表冒泡事件被阻止

  • once 只触发一次事件
<div>
  <button @click="handleClick" >点击</button>
</div>

<script>
  export default {
    data(){
      return {
        msg: 'qh'
      }
    },
    methods: {
      handleClick: function(){
        console.log(111)
      }
    }
  }
</script>

当第一次点击按钮时,控制台输出111，再次点击时控制台不再输出。当刷新网页后，第一次单机控制台输出111，再次点击控制台不再输出。

v-on指令的once修饰绑定一次性事件

⚠️修饰符可以串联

<button @click.stop.prevent="btnClick">点击</button>

stop和prevent修饰符串联在一起可以阻止事件冒泡和事件默认行为

avatar
文章
阅读
粉丝