Vue(4)Vue指令的學習1

Silent丿丶黑羽發表於2021-06-27

前言

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

 

繫結屬性

如果我們想要在html元素的屬性上繫結我們Vue物件中的變數,那麼需要通過v-bind來實現。

<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:即可,當然我們也可以使用縮寫:,直接寫冒號即可
 

繫結Class

繫結Class有2種方式,一種通過陣列繫結,一種通過物件繫結

1.通過物件的方式來實現:

<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}keycolorvalueisColor,當value的值為true則渲染,為false則不渲染
 
2.通過陣列的方式來實現:

<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個屬性時,可以使用陣列的方式
 

繫結Style

繫結Style也有2種方式,一種通過陣列繫結,一種通過物件繫結

1.通過物件的方式來實現

<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中新增變數
 

2.通過陣列的方式來實現

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

相關文章