Vue官网一共有提供了14个指令，分别如下：

• v-text

• v-html

• v-show
• v-if
• v-else
• v-else-if
• v-for
• v-on
• v-bind
• v-model
• v-slot

• v-pre

• v-cloak

• v-once

注意：代表重要常用的

一、v-text（v-指令名="变量"，变量需要data提供数值）

<p v-text="info"></p>
<p v-text="'abc' + info"></p>
<script>
    new Vue({
        el: '#app',
        data: {
            info: 'a'
        }
    })
</script>

v-text="info"渲染页面结果为a，因为info是个变量，就直接展示变量所对应的值

v-text="'abc' + info"渲染页面结果为abca，当你想用字符串和变量拼接时，可以在字符串上增加单引号，这样程序就认为你这个是个字符串，字符串+info变量最后的结果就是字符串abca

二、v-html（可以解析html语法）

有时候我们的Vue对象中，或者是后台返回给我们一个段原生的html代码，我们需要渲染出来，那么如果直接通过{{}}渲染，会把这个html代码当做字符串。这时候我们就可以通过v-html指令来实现。

示例代码如下：

<p v-html="'<b>ok</b>'"></p>
<p v-text="'<b>ok</b>'"></p>

以上两行代码除了用的vue指令不一样以外，没有任何区别，让我们先展示结果吧

ok
<b>ok</b>

v-html可以解析html的标签，而text传的是字符串，不用管字符串里面具体的内容是什么，统一都直接展示出原来的字符

三、v-once（只渲染元素和组件一次）

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

<input type="text" v-model="msg" v-once>  // 只渲染一次
<p v-once>{{ msg }}</p>  
 

四、v-cloak（防止页面闪烁）

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

五、v-pre（了解）

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

<div id="app">
  <span v-pre>{{message}}</span>
</div>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      message: "hello"
    }
  })
</script>

正常来讲我们会通过编译最后在网页上显示hello，但是使用了v-pre指令后，就会跳过编译，直接展示原始的标签内容也就是{{message}}

六、v-bind

6.1 绑定属性

如果我们想要在html元素的属性上绑定我们Vue对象中的变量，那么需要通过v-bind来实现。

<div id="app">
  <a v-bind:href="baidu" rel="external nofollow" >百度</a>
  <img :src="imgSrc" alt="">
</div>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      message: "hello",
      baidu: "https://www.baidu.com",
      imgSrc: "https://www.baidu.com/img/pc_a91909218349e60ed8f6f6f226c30e5f.gif"
    }
  })
</script>

我们只需要在绑定的属性前面添加v-bind:即可，当然我们也可以使用缩写:，直接写冒号即可

6.2 绑定Class

绑定Class有2种方式，一种通过数组绑定，一种通过对象绑定

通过对象的方式来实现：

<div id="app">
  <p v-bind:class="{color:isColor}">你好，世界</p>
</div>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      isColor: true
    }
  })
</script>
<style>
    .color{
        color: blue;
    }
</style>

对象的方式即像上面的代码{color:isColor} ，key是color，value是isColor，当value的值为true则渲染，为false则不渲染

通过数组的方式来实现：

<div id="app">
  <p :class="[classname1, classname2]">{{message}}</p>
</div>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      message: "hello",
      classname1: "pcolor",
      classname2: "fontSize"
    },
  })
</script>
<style>
    .pcolor{
        color: red;
    }
    .fontSize{
        font-size: 30px;
    }
</style>

当class需要绑定2个属性时，可以使用数组的方式

6.3 绑定Style

绑定Style也有2种方式，一种通过数组绑定，一种通过对象绑定

通过对象的方式来实现：

<div id="app">
  <p :style="{fontSize:'100px'}">{{message}}</p>
</div>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      message: "hello"
    }
  })
</script>

注意：对象绑定的时候只能驼峰命名法fontSize，不能使用font-size否则会报错，100px加单引号就是字符串，不加则是变量，需要在data中添加变量

通过数组的方式来实现：

<div id="app">
  <p :style="[style1, style2]">{{message}}</p>
</div>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      message: "hello",
      style1: {background:'red'},
      style2: {fontSize:'30px'},
    }
  })
</script>

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• 冻结JS对象是什么意思，该如何理解

  本文主要介绍了冻结JS对象方法技术，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

• 深入理解JS树结构深度优先算法，有哪些知识点

  什么是树在现实生活中，相信每个人对树都很熟悉，不管是柳树、杨树还是桃树，可以说树在我们生活中随处可见；在计算机世界，树是一种分层结构的抽象模型，如下图所示：树结构的应用有很多

• JS截取字符串常用方法有几种，存在什么区别呢?

  js中有三个截取字符的方法，分别是substring()、substr()、slice()，平时我们可能都用到过，但总是会对这些方法有点混淆，特别是substring()和substr()，连方法名都差不多，下面就具体来看一下区别。

• 小程序怎样实现分页查询列表的模板，及代码是什么

  小程序怎样实现分页查询列表的模板，及代码是什么？下文有实例供大家参考，对大家了解操作过程或相关知识有一定的帮助，而且实用性强，希望这篇文章能帮助大家，下面我们一起来了解看看吧。

• vue如何实现点击切换图片效果？

  这篇文章主要和大家分享用vue实现切换图片效果的小案例，点击按钮可以实现向前切换，向后切换和顺序切换的效果。下面我们就来看看具体的实现代码。