Vue教程01：Vue表達式與v-bind指令

閱讀更多系列文章請訪問個人GitHub博客，示例代碼請訪問這裏。

建立Vue項目

代碼參考/lesson01/01. Vue表達式.html

1. 建立一個HTML文件，將Vue.js引入。
2. HTML中須要有一個id爲app的標籤。
3. 在script標籤中實例化一個Vue對象。

let vm = new Vue({
  el: '#app', // 根元素或掛載點。
  data: {
    name: 'lee',
    age: 18
  }
})
複製代碼

1. el屬性稱做根元素或掛載點，Vuejs項目的全部內容都會渲染到這個標籤內部。
2. data屬性中的值爲項目的數據。

這樣咱們就建立好了一個最基本的Vue項目。

使用Vue表達式向頁面中插入值

代碼參考/lesson01/01. Vue表達式.html

使用Vue表達式{{}}，就能夠將數據插入到頁面中的相應位置。

<div id="app">
  <!-- 使用Vue表達式插入值 -->
  姓名：{{name}}<br/>
  年齡：{{age}}
</div>
複製代碼

此時能夠嘗試在控制檯修改數據，如vm.age++，就能夠看到頁面現實的值跟着改變。

在Vue表達式中，支持書寫簡單的表達式，如

出生日期：{{new Date().getFullYear() - age}}
複製代碼

對於一些複雜的表達式，能夠使用methods實現：

let vm = new Vue({
  el: '#app', // 根元素或掛載點。
  data: {
    name: 'lee',
    age: 18
  },
  methods: {
    getBirth() {
      return new Date().getFullYear() - this.age
    },
  }
})
複製代碼

再將方法用Vue表達式插入到頁面中：

出生日期：{{this.getBirth()}}
複製代碼

v-bind指令（directive）

代碼參考/lesson01/02. v-bind指令.html

經過v-bind指令向標籤中插入屬性。

JavaScript：

let vm = new Vue({
  el: '#app', // 根元素或掛載點。
  data: {
    name: 'lee',
    age: 18
  }
})
複製代碼

HTML：

<div id="app">
  <!-- 經過v-bind指令插入屬性，能夠簡寫爲:title="age + '歲'" -->
  <span v-bind:title="age + '歲'">{{name}}</span>
</div>
複製代碼

2. class與style屬性的特殊寫法 class和style屬性的值除了支持字符串，還支持對象、數組形式。

JavaScript：

let vm = new Vue({
  el: '#app', // 根元素或掛載點。
  data: {
    name: 'lee',
    age: 18,
    classStr: 'class1 class2 class3',
    classArr: ['class1', 'class2', 'class3'],
    classObj: { // 爲false的屬性將不會被渲染到標籤中
      class1: true,
      class2: true,
      class3: false
    },
    styleStr: 'display: block; height: 20px; background-color: red;',
    styleObj: {
      display: 'block',
      height: '20px',
      backgroundColor: 'blue'
    },
    styleObj2: {
      width: '200px',
      margin: '0 auto'
    }
  }
})
複製代碼

HTML：

<div :class="classStr"></div>
<div :class="classArr"></div>
<div :class="classObj"></div>
<div :style="styleStr"></div>
<div :style="styleObj"></div>
<div :style="[styleObj, styleObj2]"></div>
複製代碼