前言

Vue官網(wǎng)一共有提供了14個(gè)指令，分別如下

• 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提供數(shù)值）

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

v-text="info"渲染頁(yè)面結(jié)果為a，因?yàn)閕nfo是個(gè)變量，就直接展示變量所對(duì)應(yīng)的值

v-text="'abc' + info"渲染頁(yè)面結(jié)果為abca，當(dāng)你想用字符串和變量拼接時(shí)，可以在字符串上增加單引號(hào)，這樣程序就認(rèn)為你這個(gè)是個(gè)字符串，字符串+info變量最后的結(jié)果就是字符串abca

v-html（可以解析html語(yǔ)法）

有時(shí)候我們的Vue對(duì)象中，或者是后臺(tái)返回給我們一個(gè)段原生的html代碼，我們需要渲染出來(lái)，那么如果直接通過(guò){{}}渲染，會(huì)把這個(gè)html代碼當(dāng)做字符串。這時(shí)候我們就可以通過(guò)v-html指令來(lái)實(shí)現(xiàn)。示例代碼如下：

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

以上兩行代碼除了用的vue指令不一樣以外，沒(méi)有任何區(qū)別，讓我們先展示結(jié)果吧

ok
<b>ok</b>

v-html可以解析html的標(biāo)簽，而text傳的是字符串，不用管字符串里面具體的內(nèi)容是什么，統(tǒng)一都直接展示出原來(lái)的字符

v-once（只渲染元素和組件一次）

只渲染元素和組件一次。隨后的重新渲染，元素/組件及其所有的子節(jié)點(diǎn)將被視為靜態(tài)內(nèi)容并跳過(guò)。這可以用于優(yōu)化更新性能。

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

v-cloak（防止頁(yè)面閃爍）

這個(gè)指令保持在元素上直到關(guān)聯(lián)實(shí)例結(jié)束編譯。和 CSS 規(guī)則如 [v-cloak] { display: none } 一起用時(shí)，這個(gè)指令可以隱藏未編譯的Mustache標(biāo)簽直到實(shí)例準(zhǔn)備完畢。

v-pre（了解）

跳過(guò)這個(gè)元素和它的子元素的編譯過(guò)程。可以用來(lái)顯示原始 Mustache 標(biāo)簽。跳過(guò)大量沒(méi)有指令的節(jié)點(diǎn)會(huì)加快編譯。

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

正常來(lái)講我們會(huì)通過(guò)編譯最后在網(wǎng)頁(yè)上顯示hello，但是使用了v-pre指令后，就會(huì)跳過(guò)編譯，直接展示原始的標(biāo)簽內(nèi)容也就是{{message}}

v-bind

綁定屬性

如果我們想要在html元素的屬性上綁定我們Vue對(duì)象中的變量，那么需要通過(guò)v-bind來(lái)實(shí)現(xiàn)。

<div id="app">
  <a v-bind:href="baidu">百度</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:即可，當(dāng)然我們也可以使用縮寫(xiě):，直接寫(xiě)冒號(hào)即可

綁定Class

綁定Class有2種方式，一種通過(guò)數(shù)組綁定，一種通過(guò)對(duì)象綁定

1.通過(guò)對(duì)象的方式來(lái)實(shí)現(xiàn)：

<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>

對(duì)象的方式即像上面的代碼{color:isColor}，key是color，value是isColor，當(dāng)value的值為true則渲染，為false則不渲染

2.通過(guò)數(shù)組的方式來(lái)實(shí)現(xiàn)：

<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>

當(dāng)class需要綁定2個(gè)屬性時(shí)，可以使用數(shù)組的方式

綁定Style

綁定Style也有2種方式，一種通過(guò)數(shù)組綁定，一種通過(guò)對(duì)象綁定

1.通過(guò)對(duì)象的方式來(lái)實(shí)現(xiàn)

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

注意：對(duì)象綁定的時(shí)候只能駝峰命名法fontSize，不能使用font-size否則會(huì)報(bào)錯(cuò)，100px加單引號(hào)就是字符串，不加則是變量，需要在data中添加變量

2.通過(guò)數(shù)組的方式來(lái)實(shí)現(xiàn)

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

總結(jié)

以上是生活随笔為你收集整理的Vue（4）Vue指令的学习1(什么是vue)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。