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

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

建立Vue項目

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

  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項目。git

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

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

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

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

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

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

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

對於一些複雜的表達式,能夠使用methods實現:less

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

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

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

v-bind指令(directive)

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

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

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>
複製代碼
  1. 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>
複製代碼
相關文章
相關標籤/搜索