Vue 2.0基礎語法：系統指令

時間 2019-12-06

標籤 vue 2.0 基礎語法系統指令简体版

原文原文鏈接

本文最初發表於博客園，並在GitHub上持續更新前端的系列文章。歡迎在GitHub上關注我，一塊兒入門和進階前端。javascript

如下是正文。css

Vue初體驗

新建一個空的項目，引入vue.js文件。寫以下代碼：html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--vue的版本：2.5.15-->
    <script src="vue.js"></script>
</head>
<body>
<!--這個div區域就是MVVM中的 View-->
<div id="div1">
    {{name}}
</div>
</body>

<script>
    //new出來的對象就是MVVM中的 View Module
    var myVue = new Vue({
        el: '#div1', //當前vue對象將接管上面的div區域
        data: {//data就是MVVM中的 module
            name: 'smyhvae'
        }
    });
</script>
</html>

顯示效果：前端

若是咱們在控制檯輸入myVue.data+='123'，頁面會自動更新name的值。vue

下面來說一下Vue的各類系統指令。java

v-on：註冊事件

v-on 的用法舉例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!--vue的版本：2.5.15-->
  <script src="vue.js"></script>
</head>

<body>
  <!--這個div區域就是MVVM中的 View-->
  <div id="div1">
    <!-- 給button節點綁定按鈕的點擊事件 -->
    {{name}}
    <button v-on:click="change">改變name的值</button>
  </div>


</body>

<script>
  //new出來的對象就是MVVM中的 View Module
  var myVue = new Vue({
    el: '#div1', //當前vue對象將接管上面的div區域
    data: { //data就是MVVM中的 module
      name: 'smyhvae'
    },
    //注意，下方這個 `methods` 是Vue中定義方法的關鍵字，不能改
    methods: {
      change: function() { //上面的button按鈕的點擊事件
        this.name += '1';
      }
    }
  });
</script>

</html>

上方代碼中，咱們給button按鈕綁定了點擊事件。注意，這個button標籤要寫在div區域裏（不然點擊事件不生效），由於下方的View module接管的是div區域。git

`v-on`的簡寫形式

例如：github

<button v-on:click="change">改變name的值</button>

能夠簡寫成：數組

<button @click="change">改變name的值</button>

v-on的經常使用事件

v-on:click瀏覽器
v-on:keydown
v-on:keyup
v-on:mousedown
v-on:mouseover
v-on:submit
....

v-on的事件修飾符

v-on 提供了不少事件修飾符來輔助實現一些功能。事件修飾符有以下：

.stop 阻止冒泡。本質是調用 event.stopPropagation()。
.prevent 阻止默認事件。本質是調用 event.preventDefault()。
.capture 添加事件監聽器時，使用 capture 模式。
.self 只有當事件是從偵聽器綁定的元素自己觸發時，才觸發回調。
`.{keyCode | keyAlias} 只當事件是從偵聽器綁定的元素自己觸發時，才觸發回調。
`.native 監聽組件根元素的原生事件。

寫法示範：

<!-- click事件 -->
        <button v-on:click="doThis"></button>

        <!-- 縮寫 -->
        <button @click="doThis"></button>

        <!-- 內聯語句 -->
        <button v-on:click="doThat('hello', $event)"></button>

        <!-- 阻止冒泡 -->
        <button @click.stop="doThis"></button>

        <!-- 阻止默認行爲 -->
        <button @click.prevent="doThis"></button>

        <!-- 阻止默認行爲，沒有表達式 -->
        <form @submit.prevent></form>

        <!--  串聯修飾符 -->
        <button @click.stop.prevent="doThis"></button>

舉例：（.prevent的用法舉例）

如今有一個form表單：

<form action="http://www.baidu.com">
      <input type="submit" value="表單提交">
    </form>

咱們知道，上面這個表單由於type="submit"，所以它是一個提交按鈕，點擊按鈕後，這個表單就會被提交到form標籤的action屬性中指定的那個頁面中去。這是表單的默認行爲。

如今，咱們能夠用.prevent來阻止這種默認行爲。修改成：點擊按鈕後，不提交到服務器，而是執行咱們本身想要的事件（在submit方法中另行定義）。以下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="vue2.5.16.js"></script>
</head>

<body>
  <div id="app">
    <!-- 阻止表單中submit的默認事件 -->
    <form @submit.prevent action="http://www.baidu.com">
      <!-- 執行自定義的click事件 -->
      <input type="submit" @click="mySubmit" value="表單提交">
    </form>

  </div>
</body>

<script>
  new Vue({
    el: '#app',
    data: {
    },
    methods: {
      mySubmit: function() {
        alert('ok');
      }
    }
  });
</script>

</html>

上方代碼中，咱們經過.prevent阻止了提交按鈕的默認事件，點擊按鈕後，執行的是mySubmit()方法裏的內容。這個方法名是能夠隨便起的，咱們甚至能夠起名爲submit，反正默認的submit已經失效了。

插值表達式 {{}}

數據綁定最多見的形式就是使用「Mustache」語法（雙大括號）的文本插值。例如：

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

Mustache 標籤將會被替代爲對應數據對象上 msg 屬性（msg定義在data對象中）的值。
不管什麼時候，綁定的數據對象上 msg 屬性發生了改變，插值處的內容都會自動更新。

{{}}對JavaScript 表達式支持，例如：

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ name == 'smyhvae' ? 'true' : 'false' }}

{{ message.split('').reverse().join('') }}

可是有個限制就是，每一個綁定都只能包含單個表達式，以下表達式無效：

<!-- 這是語句，不是表達式 -->
{{ var a = 1 }}

<!-- 流控制也不會生效，請使用三元表達式 -->
{{ if (ok) { return message } }}

v-text

v-text能夠將一個變量的值渲染到指定的元素中。例如：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!--vue的版本：2.5.15-->
  <script src="vue.js"></script>
</head>

<body>
  <div id="div1">
    <span v-text="name"></span>
  </div>
</body>

<script>
  new Vue({
    el: '#div1',
    data: {
      name: 'hello smyhvae'
    }
  });
</script>

</html>

結果：

v-html

v-text是純文本，而v-html會被解析成html元素。

注意：使用v-html渲染數據可能會很是危險，由於它很容易致使 XSS（跨站腳本）攻擊，使用的時候請謹慎，可以使用{{}}或者v-text實現的不要使用v-html。

v-cloak

v-cloak：保持和元素實例的關聯，直到結束編譯後自動消失。

這個指令和CSS 規則一塊兒用的時候，能夠隱藏未編譯的標籤直到實例準備完畢。好比說，在網絡很慢的狀況下，經過v-cloak隱藏元素，當加載完畢後，再顯示出來。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="vue.js"></script>
  <style>

    /*網絡很慢時，在span上加上 v-cloak和css樣式控制之後，瀏覽器在加載時會先把span隱藏起來。
    直到 Vue實例化完畢之後，v-cloak 會自動消失，那麼對應的css樣式就會失去做用，最終將span中的內容呈現給用戶 */
    [v-cloak] {
      display: none;
    }
  </style>
</head>

<body>
  <div id="div1">
    <span v-cloak>{{name}}</span>

  </div>
</body>

<script src="vue.js"></script>
<script>
  new Vue({
    el: '#div1',
    data: {
      name: 'hello1 smyhvae22'
    }
  });
</script>

</html>

v-bind

v-bind：給html元素或者組件動態綁定一個或多個特性，例如動態綁定style和class。

好比說：

<img v-bind:src="imageSrc">

    <div v-bind:style="{ fontSize: size + 'px' }"></div>

上方代碼中的imageSrc和size實際上是Vue實例裏面的變量。

上面兩行代碼能夠簡寫成：

<img :src="imageSrc">

    <div :style="{ fontSize: size + 'px' }"></div>

舉例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
  </style>
</head>

<body>
  <div id="div1">
    <!-- value裏的值只是簡單的字符串 -->
    <input type="text" value="name">
    <!-- 加上 v-bind 以後，value裏的值是 Vue 裏的變量 -->
    <input type="text" v-bind:value="name">
    <!-- 超連接後面的path是 Vue 裏面的變量 -->
    <a v-bind="{href:'http://www.baidu.com/'+path}">超連接</a>

  </div>
</body>

<script src="vue.js"></script>
<script>
  new Vue({
    el: '#div1',
    data: {
      name: 'smyhvae',
      path: `2.html`
    }
  });
</script>

</html>

效果：

v-model：雙向數據綁定

上面的一段中，咱們經過v-bind，給<input>標籤綁定了data對象裏的name屬性。當data -> name的值發生改變時，<input>標籤裏的內容會自動更新。

可我如今要作的是：我在<input>標籤裏修改內容，要求data -> name的值自動更新。從而實現雙向數據綁定。該怎麼作呢？這就能夠利用v-model這個屬性。

代碼舉例以下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">

    <form action="#">
        <input type="text" id="username" v-model="myAccount.username">
        <input type="password" id="pwd" v-model="myAccount.userpwd">

        <input type="submit" v-on:click="submit1" value="註冊">

    </form>
</div>
</body>

<script>
    var vm = new Vue({
        el: '#app',
        //上面的標籤中採用v-model進行雙向數據綁定，數據會自動更新到data裏面來
        data: {
            name: 'smyhvae',
            myAccount: {username: '', userpwd: ''}
        },
        //在methods裏綁定各類方法，根據業務須要進行操做
        methods: {
            submit1: function () {
                alert(this.myAccount.username + "  pwd=" + this.myAccount.userpwd);
            }
        }
    });
</script>

</html>

此時，即可實現咱們剛剛要求的雙向數據綁定的效果。

v-for：for循環

做用：根據數組中的元素遍歷指定模板內容生成內容。

引入

好比說，若是我想給一個ul中的多個li分別賦值一、二、3...。若是不用循環，就要挨個賦值：

<body>
  <div id="app">
    <ul>
      <li>{{list[0]}}</li>
      <li>{{list[1]}}</li>
      <li>{{list[2]}}</li>
    </ul>
  </div>
</body>

<script>
  var vm = new Vue({
    el: '#app',
    data: {
      list: [1, 2, 3]
    }

  });
</script>

效果：

爲了實現上面的效果，若是我用v-for進行賦值，代碼就簡潔不少了：

<body>
  <div id="app">
    <ul>
      <!-- 使用v-for對多個li進行遍歷賦值 -->
      <li v-for="item in list">{{item}}</li>
    </ul>
  </div>
</body>

<script>
  var vm = new Vue({
    el: '#app',
    data: {
      list: [1, 2, 3]
    }

  });
</script>

接下來，咱們詳細講一下v-for的用法。須要聲明的是，Vue 1.0的寫法和Vue 2.0的寫法是不同的。本文所有采用Vue 2.0的寫法

數組的遍歷賦值

針對下面這樣的數組：

<script>
  new Vue({
    el: '#app',
    data: {
      arr1: [2, 5, 3, 1, 1],
    }
  });
</script>

將數組中的值賦給li：

<li v-for="item in arr1">{{item}}</li>

將數組中的值和index賦給li：

<!-- 括號裏若是寫兩個參數：第一個參數表明值，第二個參數表明index -->
      <li v-for="(item,index) in arr1">值：{{item}} --- 索引：{{index}}</li>

效果以下：

對象的遍歷賦值

針對下面這樣的對象：

<script>
  new Vue({
    el: '#app',
    data: {
      obj1: {
        name: 'smyhvae',
        age: '26',
        gender: '男'
      }
    }
  });
</script>

將上面的obj1對象的數據賦值給li，寫法以下：

<body>
  <div id="app">
    <ul>
      <!-- 括號裏若是寫兩個參數：則第一個參數表明value，第二個參數表明key -->
      <li v-for="(value,key) in obj1">值：{{value}} --- 鍵：{{key}} </li>

      <h3>---分隔線---</h3>

      <!-- 括號裏若是寫三個參數：則第一個參數表明value，第二個參數表明key，第三個參數表明index -->
      <li v-for="(value,key,index) in obj1">值：{{value}} --- 鍵：{{key}} --- index：{{index}} </li>
    </ul>
  </div>
</body>

效果以下：

v-if：設置元素的顯示和隱藏

做用：根據表達式的值的真假條件，來決定是否渲染元素，若是爲false則不渲染（達到隱藏元素的目的），若是爲true則渲染。

在切換時，元素和它的數據綁定會被銷燬並重建。

舉例以下：（點擊按鈕時，切換和隱藏盒子）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="vue.js"></script>
</head>

<body>
  <div id="app">
    <button v-on:click="toggle">顯示/隱藏</button>
    <div v-if="isShow">我是盒子</div>
  </div>
</body>

<script>
  new Vue({
    el: '#app',
    data: {
      isShow: true
    },
    methods: {
      toggle: function() {
        this.isShow = !this.isShow;
      }
    }
  });
</script>

</html>

效果以下：

v-show：設置元素的顯示和隱藏

做用：根據表達式的真假條件，來切換元素的 display 屬性。若是爲false，則在元素上添加 display:none屬性；不然移除display:none屬性。

舉例以下：（點擊按鈕時，切換和隱藏盒子）

咱們直接把上一段代碼中的v-if改爲v-show就能夠了：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="vue.js"></script>
</head>

<body>
  <div id="app">
    <button v-on:click="toggle">顯示/隱藏</button>
    <div v-show="isShow">我是盒子</div>
  </div>
</body>

<script>
  new Vue({
    el: '#app',
    data: {
      isShow: true
    },
    methods: {
      toggle: function() {
        this.isShow = !this.isShow;
      }
    }
  });
</script>

</html>

效果以下：

v-if和v-show的區別：

v-if和v-show都可以實現對一個元素的隱藏和顯示操做。可是v-if是添加/刪除DOM元素，而v-show是在這個元素上添加/移除style="display:none"屬性。