二、插值操作

不會Java怎麼找女朋友發表於2021-01-03

01-Mustache語法

1.1程式碼實戰

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>01-Mustache語法</title>
</head>
<body>

<div id="app">
  <!--  mustache語法中，不僅僅可以直接寫變數，也可以寫簡單的表示式-->
  <h2>{{message}}</h2>
  <h2>{{message}}</br>Long time no see!</h2>
  <h2>{{firstName+lastName}}</h2>
  <h2>{{firstName+"_"+lastName}}</h2>
  <h2>{{firstName}} {{lastName}}</h2>
  <h2>{{counter * 2}}</h2>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<!--如果沒有安裝vue.js，就用下面的程式碼-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript">
  const vm = new Vue({
    el: '#app',
    data: {
      message: 'hello world!',
      firstName: 'lin',
      lastName: 'willen',
      counter: 100
    }
  })
</script>
</body>
</html>

1.2執行結果

在這裡插入圖片描述

02-v-once指令的使用

2.1v-once

  • 該指令後面不需要跟任何表示式
  • 該指令表示元素和元件只渲染一次，不會隨著資料的改變而改變

2.2程式碼實戰

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>02-v-once指令的使用</title>
</head>
<body>

<div id="app">
  <h2>{{message}}</h2>
  <h2 v-once>{{message}}</h2>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<!--如果沒有安裝vue.js，就用下面的程式碼-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript">
  const vm = new Vue({
    el: '#app',
    data: {
      message: 'hello world!'
    }
  })
</script>
</body>
</html>

2.3執行結果

在這裡插入圖片描述

2.4Console修改message值

在這裡插入圖片描述

03-v-html指令的使用

3.1v-html

1、 某些情況下，我們從伺服器請求到的資料本身就是一個HTML程式碼

  • 如果我們直接通過{{}}來輸出，會將HTML程式碼也一起輸出
  • 但是我們可能希望的是按照HTML格式進行解析，並且顯示對應的內容

2、 如果我們希望解析出HTML展示，可以使用v-html指令

  • 該指令後面往往會跟上一個string型別
  • 會將string的html解析出來並且進行

3.2程式碼實戰

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>03-v-html指令的使用</title>
</head>
<body>

<div id="app">
  <!--  可檢視執行效果，區別兩種效果，很顯然第二種是我們真正需要的-->
  <h2>{{url}}</h2>
  <h2 v-html="url"></h2>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<!--如果沒有安裝vue.js，就用下面的程式碼-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript">
  const vm = new Vue({
    el: '#app',
    data: {
      //伺服器返回url時，可能不止返回url，可能會把整個a標籤返回，如下
      url:'<a href="http://www.baidu.com">百度一下</a>'
    }
  })
</script>
</body>
</html>

3.3執行結果

在這裡插入圖片描述

04-v-text指令的使用

4.1v-text

  • v-text作用和Mustache比較相似：都是用於資料顯示在介面中
  • v-text通常情況下，接受一個string型別，原先在標籤內的值會被覆蓋
  • v-text不夠靈活，一般開發中，就是用Mustache語法插值

4.2程式碼實戰

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>04-v-text指令的使用</title>
</head>
<body>

<div id="app">
  <h2>{{message}} world!</h2>
  <h2 v-text="message"> world!</h2>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<!--如果沒有安裝vue.js，就用下面的程式碼-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript">
  const vm = new Vue({
    el: '#app',
    data: {
      message: 'hello'
    }
  })
</script>
</body>
</html>

4.3執行結果

在這裡插入圖片描述

05-v-pre指令的使用

5.1v-pre

  • v-pre用於跳過這個元素和它子元素的編譯過程，用於顯示原來的Mustache語法

5.2程式碼實戰

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>05-v-pre指令的使用</title>
</head>
<body>

<div id="app">
  <h2>{{message}}</h2>
  <h2 v-pre>{{message}}</h2>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<!--如果沒有安裝vue.js，就用下面的程式碼-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript">
  const vm = new Vue({
    el: '#app',
    data: {
      message: 'hello world!'
    }
  })
</script>
</body>
</html>

5.3執行結果

在這裡插入圖片描述

06-v-cloak指令的使用

6.1v-cloak

  • cloak：斗篷
  • 某些情況下，瀏覽器可能會直接顯示出未編譯的Mustache標籤

6.2程式碼實戰

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>06-v-cloak指令的使用</title>
  <style>
    [v-cloak]{
      display: none;
    }
  </style>
</head>
<body>

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

<script type="text/javascript" src="../js/vue.js"></script>
<!--如果沒有安裝vue.js，就用下面的程式碼-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript">
  setTimeout(function () {
    const vm = new Vue({
      el: '#app',
      data: {
        message: 'hello world!'
      }
    })
  },1000)

</script>
</body>
</html>

6.3執行結果

如果沒有加v-cloak以及style內容，那麼此時顯示{{message}}，使用者體驗極差
在這裡插入圖片描述
加了v-cloak以及style內容後會先顯示空白，等待1秒後Vue例項建立出來後把文字顯示出來
在這裡插入圖片描述

相關文章