Vue入門教程02-模板語法

一、定義

Vue.js 使用基於 HTML 的模版語法，允許開發者聲明式地將 DOM 綁定到底層的 Vue 實例對象中，

在應用狀態改變時， Vue 能夠重新渲染DOM元素。

二、操作

1、插值

1）文本

這是最常用的綁定方式， 使用{{…}}（雙大括號）的文本插值，我們上一章節的HelloWorld顯示就是這種方式：

  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>

2）Html

使用 v-html 指令用於輸出 html 格式的代碼，我們在HelloWorld.vue文件中改成以下代碼：

<template>
  <div class="hello">
    <div v-html='msg'></div>
  </div>
</template>

<script>
  export default {
    name: 'hello',
    data () {
      return {
        msg: '<h1>HelloWorld，這個是Html插值方式</h1>'
      }
    }
  }
</script>

3）屬性

使用v-bind指令改變class屬性的取值：如果class1爲true則使用class1樣式：
算法簡介：

-定義class1新樣式；
-定義一個hello的Vue對象並默認設置對象內的use值爲false；
-在hello對象內定義一個單選框，綁定到use值：v-model="use"
-在hello對象內通過v-bind:class定義一個class屬性插值邏輯；
-通過改變use值來影響class的樣式引用。

<style>
  .class1{
    background: #333;
    color: #fff;
  }
</style>
<template>
  <div class="hello">
    <label for="r1">使用class1樣式</label>
    <input type="checkbox" v-model="use" id="r1">
    <div v-bind:class="{'class1':use}">
      v-bind指令改變class屬性的取值：如果class1爲true則使用class1樣式；
    </div>
  </div>
</template>

<script>
  export default {
    name: 'hello',
    data () {
      return {
        use: false
      }
    }
  }
</script>

4）表達式

Vue可以在模板語句中使用JavaScript 表達式，在HelloWorld.vu中實現以下代碼：

<template>
  <div class="hello">
    {{4*5}}
    <br/>
    {{use?'use是true':'use是false'}}
    <br/>
    {{ msg.split('').reverse().join('') }}
     <br/>
     <div v-bind:id="'id-' + no">可動態此DIV元素的id屬性值</div>
  </div>
</template>

<script>
  export default {
    name: 'hello',
    data () {
      return {
        use: false,
        msg:'Hello World 轉倒',
        no:0
      }
    }
  }
</script>

運行效果如下：

2、指令

指令是指使用v- 前綴的特殊屬性，指令用於執行（or理解爲讀取）表達式值並應用到 DOM 上：

<template>
  <div class="hello">
    <p v-if="use">如果爲true，就顯示這句話</p>
  </div>
</template>
<script>
  export default {
    name: 'hello',
    data () {
      return {
        use: true
      }
    }
  }
</script>

指令參數：
-我們上面使用過的 v-bind:class，就是使用v-bind指定對calss屬性進行綁定，這個class就是指令的參數（其他參數還設有href等）
修飾符：
-修飾符是以半角句號 . 指明的特殊後綴，用於指出一個指令應該以特殊方式綁定。例如，once，只執行一次，如下面代碼，只有在第一次點擊時會執行，再次點擊不會起作用

<for<div v-on:click.once='alert("1")'></div>

3、輸入

使用 input 輸入框時，我們可以使用 v-model 指令來實現雙向數據綁定：

<template>
  <div class="hello">
    <p>{{ msg }}</p>
    <input v-model="msg">
  </div>
</template>
<script>
  export default {
    name: 'hello',
    data () {
      return {
        msg: '默認內容'
      }
    }
  }
</script>

v-model 指令可以對 input、select、textarea、checkbox、radio 等表單控件元素創建雙向數據綁定關係，自動根據表單上的值更新綁定的元素值。

另外，可以使用 v-on 監聽按鈕事件，下面的代碼實現了一個click事件的監聽：

<template>
  <div class="hello">
    <p>{{ msg }}</p>
    <button v-on:click="reverseMsg">反轉字符內容</button>
  </div>
</template>
<script>
  export default {
    name: 'hello',
    data () {
      return {
        msg: '！！容內些這轉發要我'
      }
    },
    methods: {
      reverseMsg: function () {
        this.msg = this.msg.split('').reverse().join('')
      }
    }
  }
</script>

4、過濾器

過濾器場被用作一些常見的文本格式化，使用"管道符"指示的格式，下面的代碼將上面的點擊事件（反轉函數）改成過濾器模式：

<template>
  <div class="hello">
    <p>{{ msg | reverseMsg }}</p>
  </div>
</template>
<script>
  export default {
    name: 'hello',
    data () {
      return {
        msg: '！！容內些這轉發要我'
      }
    },
    filters: {
      reverseMsg: function (value) {
        value = value.toString()
        return  value.split('').reverse().join('')
      }
    }
  }
</script>

過濾器可以串聯使用：{{ msg| filterA | filterB }}
另外，也可以接收參數：{{ msg| filterA(‘arg1’, arg2) }}

5、縮寫

Vue爲兩個最爲常用的指令提供了特別縮寫：

//v-bind 縮寫: 
<a :href="url"></a>

//v-on 縮寫:
<a @click="doSomething"></a>

END.