Vue 指令对比详解，一文搞懂

最新推荐文章于 2024-11-01 14:29:13 发布

byg_qlh

最新推荐文章于 2024-11-01 14:29:13 发布

阅读量768

点赞数 25

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_44182424/article/details/139049194

版权

vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

v-text && v-html

相同点

都能展示数据，且属于单向绑定。即数据的变化会影响插值的变化，而插值的变化，不会影响数据的变化。其实 v-text 也可以简写为 {{ }} 。

不同点

v-text：只能渲染纯文本，浏览器不会对其进行 html 解析

v-html：用于输出 html，浏览器会解析 html

v-if、v-else && v-show

相同点

通过变量控制标签内容的显示或隐藏。

不同点

v-if 在浏览器上表现为整个 DOM 节点不会被渲染；

v-show 的呈现形式相当于给 DOM 节点添加了一个 CSS 属性 — display: none ；

v-else 则类似 JS 语法的 if else 判断语句，需要紧跟在 v-if 后面。

v-for

v-for 指令解决的是模板循环渲染问题，没有 Vue、React等框架之前都是通过 for 循环拼接字符串的形式，通过 append 将拼接好的节点塞入指定的 DOM 节点。现在有了 v-for 指令，就不用这么麻烦了，得到数组之后，只需以 (item, index) in array 的形式渲染数据。

index 数组对象所对应的索引值，渲染模版的时候如果需要做一些逻辑运算的时候，会用到这个索引值，比如只让索引值为偶数的项进行渲染，就可以结合之前的 v-if、v-show 指令去实现需求。

小知识1：v-for 和 v-if 不要一起使用

v-for 的优先级高于 v-if ，当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环。比较好的解决方式是，先通过 computed 属性将需要渲染的列表提前过滤，再将过滤后的列表放到模板中渲染，这样做的目的是让页面渲染效率更高，避免不必要的资源浪费。

小知识2：v-for可以渲染 Object 类型数据

v-on

v-on 就是监听事件，可以用 v-on 指令监听 DOM 事件来触发一些方法函数。

v-on 有一种简写形式，用 @ 符号代替。它还能监听一些键盘事件，如键盘的回车键 v-on:keyup.enter 等，大家可以类推其他的键盘事件。

键盘事件一般用作输入框，用户名或密码的输入回车事件监听。

v-model

在 Vue 的众多指令里，v-model 算是举足轻重的，因为它的双向绑定特性，能解决很多业务上的复杂需求，下面就用几个小示例来诠释它的强大，代码如下：

最简单的双向绑定

结合复选框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue Demo</title>
    <style>
    </style>
</head>

<body>
<div id='app'>
    <h2>checkbox</h2>
    <label for="apple">苹果</label>
    <input type="checkbox" v-model="fruit.apple" value="apple">

    <label for="banana">香蕉</label>
    <input type="checkbox" v-model="fruit.banana" value="banana">
    {{ fruit }}
</div>
</body>

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
    window.onload = function () {
        new Vue({
            el: '#app',
            data: {
                fruit: {
                    apple: true,
                    banana: false
                }
            }
        })
    }
</script>
</html>

结合复选框实现切换复选框内的值，动态地改变数据。

结合单选框

几个需要注意的修饰符

.lazy：接管 input 的事件监听事件，输入的时候不会马上响应在展示层，当数据确认改变的时候才会显示出来；
.trim：去掉首尾的空格，不会去除中间的空格；
.number：输入的字符串转化为数字；

v-bind

对变量属性的一个绑定，比如说需要绑定一个图片只需如下：

<img v-bind:src="imageSrc">
// 可简写为
<img :src="imageSrc">

绑定 CSS 样式，一般用在需要计算表达式的时候使用

<div :class="className">绑定class</div>
// 判断变量
<div :class="{classA: isShow}">绑定class中的判断</div>
// 三元运算符
<div :class="isShow ? classA : classB">绑定class中的三元表达式判断</div>
// 绑定 style
<div :style="{color: blue, fontSize: font}">绑定style</div>

v-cloak

作用：这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。官方API 。

介绍 v-model 的时候，第一个 demo 出现了双大括号闪烁的问题，

解决方法：

在 CSS 中加上如下属性：

[v-cloak] {
  display: none;
}

在绑定的变量的节点上加上 v-cloak

<div id="app" v-cloak>
  {{msg}}
</div>

注意：Vue 1.x 和 Vue 2.x 中 v-cloak 的用法是不同的。Vue1.x 中，允许将 Vue 实例挂载在 body 上，而 Vue2.x 是不允许的，想对整个页面实例化，需要另外用一个 div 来容纳整个页面内容，对其进行实例化。

试想用户打开网页，闪过一片 {{parmas}} ，不起眼的小指令，却极大的优化了网页的用户体验。

v-pre

直接跳过 Vue 的编译，输出原始值。在标签中如下使用：

<div v-pre>{{message}}</div>

最终在网页上输出的结果是 {{message}}。

v-once

只在第一次渲染时执行，之后的操作都被视为静态内容，跳出之后的所有渲染过程。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Vue Demo</title>
  <style>
  </style>
</head>
<body>
  <div id='app'>

    <p v-once>用户名：{{ username }}</p>
    <input v-model="username" />
  </div>
</body>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
  window.onload = function () {
    new Vue({
      el: '#app',
      data:{
        username: '十三'
      }
    })
  }
</script>
</html>