初識Vue——模板語法

1、插值

一、文本

數據綁定最多見的形式是使用雙大括號（{{  }}——「Mustache」語法）的文本插值

<div class="mustache">
     <span>小紅:{{ juice }}</span>
      <span v-once>不變的選擇：{{ juice1 }}</span>
</div>

juice: '奇異果',
juice1: '百香果' 

二、原始HTML：雙大括號會將數據解釋爲普通文本，而非HTML代碼；爲了輸出真正的HTML，能夠使用v-html指令；

　　　　<div>
          <p>mustache普通文本: {{ rawHtml }}</p>
            <p>使用v-html: <span v-html="rawHtml"></span></p>
      </div>

　　　　rawHtml: '<span style="color:lightblue">html輸出，這裏是藍色的呦~</sapn>',

三、特性

「Mustache」語法不能用在HTML特性上，遇到這種狀況應該使用 v-bind指令；

1）、v-bind使用方法：

（1）動態的綁定一個或多個特性，，或一個組件prop到表達式；

（2）在綁定class或style特性時，支持其餘類型的值，如數組或對象；

（3）在綁定prop時，prop必須在子組件中聲明。能夠用修飾符制定不一樣的綁定類型；

（4）沒有參數時，能夠綁定到一個包含鍵值對的對象；注意：此時，class和style綁定不支持數組和對象；

2）、舉例：

 在布爾特性的狀況下，他們的存在即暗示爲true

<template>
  <div class="hello" >
      <div class="bind">
          <button v-bind:disabled="isButtonDisabled">button</button>
      </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      isButtonDisabled: true
    }
  }
}
</script>

　　　　

四、使用JavaScript表達式

除了綁定簡單的屬性鍵值，對於全部的數據綁定，vue還能夠使用JavaScript表達式；

注意：只是表達式，語句是不會被解析的；

<template>
  <div class="hello" >
      <div class="javascript_">
          <p class="binary">數量: {{ numbers + 1 }}</p>
          <p class="ternary">甜度: {{ sweet ? 'sugar' : 'no-sugar' }}</p>
          <p class="def">編號: {{ price.split('').reverse().join('') }}</p>
      </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      numbers: 5,
      sweet: true,
      price: '23452',
    } }
}
</script>

<style scoped>
.javascript_ p{
    font-size: 16px;
    color: cadetblue;
}

2、指令

指令是帶有 v- 前綴的特殊屬性。指令屬性的預期值是單個Javascripit表達式。指令的職責是：當表達式的值改變時將其產生的連帶影響，響應式的做用於DOM，

一、參數

一些指令可以接受一個參數，在指令名稱以後以冒號表示，例如：

<template>
  <div class="hello" >
      <div class="direc">
          <a class="koudai_link" v-bind:href="url_">口袋學生證</a>
          <a class="koudai_link" v-on:click="change_style">點擊打印123</a>
      </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      url_: 'http://koudaixueshengzheng.cn'
    }
  },
  methods: {
      change_style: function () {
              console.log(123)
      }
  }
}
</script>

<style scoped>
.koudai_link{
    font-size: 16px;color: white;text-decoration: none;display: block;background: palevioletred;border-radius: 10px;width: 150px;height: 40px;line-height: 40px;
    letter-spacing: 2px;font-weight: bold;margin: 0 auto;margin-bottom: 10px;cursor: pointer;
}
</style> 

　　　　

二、修飾符

修飾符是以半角句號 ‘.’指明的特殊後綴，用於指出一個指令應該以特殊方式綁定；後面詳細介紹；

3、縮寫

一、v-bind

<!-- 完整語法 -->
<a v-bind:href="url">...</a>

<!-- 縮寫 -->
<a :href="url">...</a>

 

二、v-on

<!-- 完整語法 -->
<a v-on:click="doSomething">...</a>

<!-- 縮寫 -->
<a @click="doSomething">...</a>