00、Vue概述、HelloWorld程式、Mustache語法、v-html、v-on:click、v-for、v-bind動態繫結屬性、v-bind語法糖）

阿新 • • 發佈：2020-07-18

1、Vue的概述和HelloWorld的使用
2、模板語法
- 2.1、插值操作
- 2.2、v-bind指令的使用

1、Vue的概述和HelloWorld的使用

Vue安裝和使用的方式

直接用<script>引入：直接下載（右鍵，連結另存為）並用<script>標籤引入，Vue會被註冊為一個全域性變數；
CDN
- 開發環境
```
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
```
- 生產環境：對於生產環境，我們推薦連結到一個明確的版本號和構建檔案，以避免新版本造成的不可預期的破壞
```
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
```
NPM

在用 Vue 構建大型應用時推薦使用 NPM 安裝。NPM 能很好地和諸如 webpack 或 Browserify 模組打包器配合使用。同時 Vue 也提供配套工具來開發單檔案元件。
```
# 最新穩定版
$ npm install vue
```

現在初步階段使用第一種下載的方式，並且專案中引用Vue.js檔案。

Vue的HelloWorld程式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HelloWorld</title>
</head>
<body>
  <div id="app">
    <h3>{{message}}</h3>
    <span>我的ID是{{name}}</span>
  </div>

  <script src="../../../js/vue.js"></script>
  <script>
    //ES6語法中,let定義變數/const定義常量
    const app = new Vue({
      /* el:宣告要掛載的元素 */
      el: '#app',
      /* 定義一些資料 */
      data: {
        message: 'Hello Vue.js',
        name: "ShawnYue-08"
      }
    });
  </script>
</body>
</html>

展示資料列表

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>展示列表</title>
</head>
<body>
  <div id="app">
    <ol>
      <li v-for="item in movies">{{item}}</li>
    </ol>
  </div>
  <script src="../../../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        /* 陣列形式:[] */
        movies: ['盜夢空間', '鋼鐵俠', '復仇者聯盟', '星際穿越', '少年派']
      }
    });
  </script>
</body>
</html>

計數器案例---新的屬性methods

method屬性用於在Vue物件中定義方法；

v-on:click：該指令用於監聽某個元素的點選事件，並指定點選後需要執行的方法。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>計數器案例</title>
</head>
<body>
  <div id="app">
    <h3>當前計數:{{counter}}</h3>
    <button v-on:click="increment">+</button>
    <!-- <button @click="increment">+</button> -->
    <button v-on:click="decrement">-</button>
    <!-- <button @click="decrement">-</button> -->
  </div>
  <script src="../../../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        counter: 0
      },
      methods: {
        increment: function () {
          this.counter++;
        },
        decrement: function () {
          this.counter--;
        }
      }
    });
  </script>
</body>
</html>

語法糖：v-on:click指令可以用@click簡寫的方式。

2、模板語法

2.1、插值操作

文字

資料繫結最常見的形式就是使用“Mustache”語法 (雙大括號) 的文字插值：

<span>Message: {{ msg }}</span>

Mustache 標籤將會被替代為對應資料物件上 msg 屬性的值。無論何時，繫結的資料物件上 msg 屬性發生了改變，插值處的內容都會更新。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Mustache語法</title>
</head>
<body>
  <div id="app">
    <h3>我的id是{{id}}.</h3>
    <!-- Mustache語法中，不僅可以寫變數，還可以使用表示式 -->
    <h3>姓名：{{firstName + lastName}}</h3>
    <h3>{{firstName}}{{lastName}}</h3>
    <h3>{{number * 2}}</h3>
  </div>
  <script src="../../../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        id: '03163151',
        firstName: '渣',
        lastName: '渣輝',
        number: 10
      }
    });
  </script>
</body>
</html>

v-text和Mustache語法相似，將資料顯示在頁面。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-text</title>
</head>
<body>
  <div id="app">
    <p>v-text: <span v-text="message"></span></p>
    <p>v-text: <span>{{message}}</span></p>
  </div>
  <script src="../../../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue.js.'
      }
    });
  </script>
</body>
</html>

通過使用 v-once 指令，你也能執行一次性地插值，當資料改變時，插值處的內容不會更新。

<span v-once>這個將不會改變: {{ msg }}</span>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-once</title>
</head>
<body>
  <div id="app">
    <span v-once>這個將不會改變{{message}}</span>
  </div>

  <script src="../../../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue.js'
      }
    });
  </script>
</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-pre</title>
</head>
<body>
  <div id="app">
    <p>Mustache：<span>{{message}}</span></p>
    <p>v-pre：<span v-pre>{{message}}</span></p>
  </div>
  <script src="../../../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue.js.'
      }
    });
  </script>
</body>
</html>

v-cloak指令

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-cloak</title>
  <style>
    /* 屬性選擇器 */
    [v-cloak] {
      display: none;
    }
  </style>
</head>
<body>
  <div id="app" v-cloak>
    {{message}}
  </div>
  <script src="../../../js/vue.js"></script>
  <script>
    /* 在Vue解析HTML之前，div有一個v-cloak屬性 */
    /* 在Vue解析HTML之後，div中沒有一個v-cloak屬性 */
    setTimeout(function () {
      const app = new Vue({
        el: '#app',
        data: {
          message: 'Hello Vue.js.'
        }
      });
    }, 3000);
    /* 延遲3s執行 */
  </script>
</body>
</html>

原始HTML

雙大括號會將資料解釋為普通文字，而非 HTML 程式碼。為了輸出真正的 HTML，你需要使用v-html指令。

<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-html</title>
</head>
<body>
  <div id="app">
    <p>Using mustache:{{rawHtml}}</p>
    <p>Using v-html directive: <span v-html="rawHtml"></span></p>
  </div>
  <script src="../../../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        rawHtml: '<span style="color: red">There should be red.</span>'
      }
    });
  </script>
</body>
</html>

2.2、v-bind指令的使用

前面的指令主要是將值插入到內容中，除了內容需要動態繫結，某些屬性也需要動態繫結。

v-bind用於繫結一個或多個屬性值，或者向另一個元件傳遞props值（學到元件時再介紹）。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-bind</title>
</head>
<body>
  <div id="app">
    <a v-bind:href="href"><img v-bind:src="imgUrl" alt=""></a>
  </div>
  <script src="../../../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        imgUrl: 'https://pic.downk.cc/item/5e9bd9c5c2a9a83be5bd1094.jpg',
        href: 'https://www.superbed.cn/info/5e9bd9c5c2a9a83be5bd1094'
      }
    });
  </script>
</body>
</html>

v-bind語法糖

簡寫方式如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-bind語法糖</title>
</head>
<body>
  <div id="app">
    <a :href="href"><img :src="imgUrl" alt=""></a>
  </div>
  <script src="../../../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        imgUrl: 'https://pic.downk.cc/item/5e9ab3d4c2a9a83be5a462c1.jpg',
        href: 'https://www.superbed.cn/info/5e9ab3d4c2a9a83be5a462c1'
      }
    });
  </script>
</body>
</html>

v-bind繫結class屬性（物件語法）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-bind</title>
  <style>
    /* class選擇器 */
    .active {
      color: red;
    }
  </style>
</head>
<body>
  <div id="app">
    <p><span class="title" :class="{active: isActive, line: isLine}">{{message}}</span></p>
    <button v-on:click="click">點選</button>
    <!--<button @click="click">點選</button>-->
  </div>
  <script src="../../../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue.js.',
        isActive: true,
        isLine: true
      },
      methods: {
        click: function () {
          this.isActive = !this.isActive;
        }
      }
    });
  </script>
</body>
</html>

繫結的資料物件不必內聯在模板裡。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-bind</title>
</head>
<body>
  <div id="app">
    <span :class="classObject"></span>
  </div>
  <script src="../../../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        classObject: {
          active: true,
          line: true
        }
      }
    });
  </script>
</body>
</html>

v-bind繫結class屬性（陣列語法）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-bind</title>
</head>
<body>
  <div id="app">
    <p><span class="title" :class="['active', line]">{{message}}</span></p>
    <!-- 陣列中不帶單引號的，是要讀取data域中的值，帶單引號的是字串 -->
  </div>
  <script src="../../../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue.js.',
        line: 'line'
      }
    });
  </script>
</body>
</html>

作業：初始index=0的元素顯示紅色，然後點選哪個元素，哪個元素就顯示紅色。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-bind和v-for的結合</title>
  <style>
    .active {
      color: red;
    }
  </style>
</head>
<body>
  <div id="app">
    <ol>
      <li :class="{active: currentIndex === index}" @click="click(index)" v-for="(item, index) in movies">{{item}}</li>
    </ol>
  </div>
  <script src="../../../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        movies: ['星際穿越', '火影忍者', '進擊的巨人', '九品芝麻官'],
        currentIndex: 0
      },
      methods: {
        click: function (index) {
          this.currentIndex = index;
        }
      }
    });
  </script>
</body>
</html>

v-bind繫結style（物件語法）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-bind</title>
</head>
<body>
  <div id="app">
    <p><span :style="{fontSize: fontSize, color: color}">{{message}}</span></p>
  </div>
  <script src="../../../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue.js.',
        fontSize: '50px',
        color: 'red'
      }
    });
  </script>
</body>
</html>

v-bind繫結style（陣列語法）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-bind</title>
</head>
<body>
  <div id="app">
    <p><span :style="[baseStyle1, baseStyle2]">{{message}}</span></p>
  </div>
  <script src="../../../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue.js.',
        baseStyle1: {color: 'red'},
        baseStyle2: {fontSize: '50px'}
      }
    });
  </script>
</body>
</html>