Hello World

現在就讓我們來寫第一個vue.js的實例。如下代碼：

html代碼：

<div id="demo">
  {{ message }}
</div>

JavaScript代碼:

new Vue({
  el: ‘#demo‘,
  data: {
    message: ‘Hello World!‘
  }
})

上面代碼中div中的部分 {{ message }}為數據綁定，我們將會在後面的學習中講到。而vue.js代碼是實例化一個Vue對象。在使用vue之前必須要實例化。

構造器

每個Vue.js

var vm = new Vue({
  // 選項
})

一個Vue實例其實正是一個MVVM模式中所描述的 ViewModel - 因此在文檔中經常會使用vm這個變量名。

屬性與方法

每個Vue實例都會代理其data對象裏所有的屬性，如下代碼：

    var data = {a:1};
    var vm = new Vue({
        data:data
    });
//    vm.a === data.a -> true
//    設置屬性也會影響到原始數據
    
    vm.a 
 
= 2;
//    data.a -> 2
    data.a = 3;
//    vm.a -> 3

註意只有這些被代理的屬性是響應的。如果在實例創建之後添加新的屬性到實例上，它不會觸發視圖更新。

插值

數據綁定最基礎的形式是文本插值，使用 {{}} 語法（雙大括號）：

<div id="app">
    <span>Message：{{message}}</span>
</div>

{{ msg }} 標簽會被相應數據對象的 msg 屬性的值替換。每當這個屬性變化時它也會更新。

    var data = {message:"Hello world"};
    
 
new Vue({
        el:"#app",
        data:data
    });

也可以只處理單次插值，今後的數據變化就不會再引起插值更新了：

<div id="app">
    <span>Message：{{message}}</span><br />
</div>

    var data = {message:"Hello world"};
    new Vue({
        el:"#app",
        data:data
    });

    data.message = "Hello world!!!"

原始的HTML

雙大括號標簽將數據解析為純文本而不是HTML。為了輸出真的HTML字符串，需要用三大括號標簽：

<div>{{{ msg }}}</div>

var data={msg:‘<p>Hello Vue.js!</p>‘};
new Vue({
    el: ‘#demo‘,
    data: data
   })

HTML特性

雙大括號標簽也可以用在 HTML 特性 (Attributes) 內：

<div id=‘{{id}}‘>

</div>

    var data={id:‘app‘};
    new Vue({
        el: "div",
        data: data
    })

JavaScript表達式

Vue.js 在數據綁定內支持全功能的JavaScript表達式：

{{ number + 1 }}
{{ ok ? ‘YES‘ : ‘NO‘ }}
{{ message.split(‘‘).reverse().join(‘‘) }}

過濾器

Vue.js 允許在表達式後添加可選的“過濾器 (Filter) ”，以“管道符(|)”指示。過濾器本質上是一個函數，這個函數會接收一個值，將其處理並返回。

<div id="app">
    {{ msg | lowercase }}
</div>

var data={msg:‘heLLO ‘};
new Vue({
    el: ‘#app‘,
    data: data
})

指令

Vue.js指令 (Directives) 是特殊的帶有前綴 v- 的特性。本質是模板中出現的特殊標記，讓處理模板的庫知道需要對這裏的DOM元素進行一些對應的處理。指令的職責就是當其表達式的值改變時把某些特殊的行為應用到 DOM 上。

<div id="app">
    <p v-if="msg">Hello!</p>
</div>

這裏 v-if 指令將根據表達式 msg 值的真假刪除/插入 < p > 元素。

　　在Vue.js中為我們提供了一些指令：v-text，v-html，v-model，v-on，v-else等等，同學們可以去查看Vue.js的指令api

var data={msg:1};
new Vue({
    el: ‘#app‘,
    data: data
})

計算屬性

在模板中表達式非常便利，但是它們實際上只用於簡單的操作。模板是為了描述視圖的結構。在模板中放入太多的邏輯會讓模板過重且難以維護。這就是為什麽 Vue.js 將綁定表達式限制為一個表達式。如果需要多於一個表達式的邏輯，應當使用計算屬性。

在 Vue.js 中，你可以通過 computed 選項定義計算屬性：

<div id="app">
    <p v-if="msg">Hello!</p>
    a={{a}},b={{b}}
</div>

new Vue({
    el: ‘#app‘,
    data: {
        msg:1,
        a:1
    },
    computed:{
        b:function () {
            return this.a+1;
        }
    }
})

Class對象語法

可以傳給 v-bind:class 一個對象，以動態地切換class。註意 v-bind:class 指令可以與普通的 class 特性共存。

<div class="static" v-bind:class="{ ‘class-a‘: isA, ‘class-b‘: isB }"></div>

new Vue({
    el: ‘div‘,
    data: {
        isA:true,
        isB:false
    }
})

當 isA 和 isB 變化時，class 列表將相應地更新。例如，如果 isB 變為 true，class 列表將變為 "static　class-a class-b"。

Class數組語法

可以把一個數組傳給 v-bind:class，以應用一個 class 列表：

<div v-bind:class="[classA, classB]">

var vm = new Vue({
  el: ‘div‘,
  data: {
  classA: ‘class-a‘,
  classB: ‘class-b‘
}
})

渲染為：

<div class="class-a class-b"></div>

Style對象語法

v-bind:style的對象語法十分直觀——看著非常像 CSS，其實它是一個JavaScript對象。CSS屬性名可以用駝峰式（camelCase）或短橫分隔命名（kebab-case）：

<div class="static" v-bind:style="{color:activeColor,fontSize:fontSize+‘px‘}">
    style對象語法
</div>

var vm = new Vue({
    el: ‘div‘,
    data: {
        activeColor:"red",
        fontSize:20
    }
})

渲染為：

Style數組語法

v-bind:style的數組語法可以將多個樣式對象應用到一個元素上。

<div v-bind:style="[styleObjectA, styleObjectB]">Style 數組語法</div>

javascript代碼：

var vm = new Vue({
  el: ‘div‘,
  data: {
  styleObjectA: {
    color: ‘red‘
  },
    styleObjectB: {
     fontSize: ‘30px‘
  }
}
})

渲染為：

<div style="color: red; font-size: 30px;">Style 數組語法</div>

v-if

在 Vue.js，我們使用 v-if 指令實現:

<h1 v-if="ok">Yes</h1>

也可以用 v-else 添加一個 “else” 塊：

<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>

template v-if

因為 v-if 是一個指令，需要將它添加到一個元素上。但是如果我們想切換多個元素呢？此時我們可以把一個 <template> 元素當做包裝元素，並在上面使用 v-if，最終的渲染結果不會包含它。

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

當ok為真值時，渲染為：

<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>

v-show

另一個根據條件展示元素的選項是 v-show 指令。用法大體上一樣：

<h1 v-show="ok">Hello!</h1>

不同的是有 v-show 的元素會始終渲染並保持在 DOM 中。v-show 是簡單的切換元素的 CSS 屬性 display。

v-else

可以用 v-else 指令給 v-if 或 v-show 添加一個 “else 塊”：

<div v-if="Math.random() > 0.5">
  Sorry
</div>
<div v-else>
  Not sorry
</div>

v-else 元素必須立即跟在 v-if 或 v-show元素的後面，否則它不能被識別。

v-for

可以使用 v-for 指令基於一個數組渲染一個列表。這個指令使用特殊的語法，形式為 item in items，items 是數據數組，item 是當前數組元素的別名：

<ul id="example">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>

js代碼：

var vm = new Vue({
    el: ‘#example‘,
    data: {
        items:[
            {message:"one"},
            {message:"two"}
            ]
    }
})

渲染為：

<ul id="example"><li>
        one
    </li><li>
        two
    </li></ul>

在 v-for 塊內我們能完全訪問父組件作用域內的屬性，另有一個特殊變量 $index，正如你猜到的，它是當前數組元素的索引：

<ul id="example">
  <li v-for="item in items">
    {{ parentMessage }} - {{ $index }} - {{ item.message }}
  </li>
</ul>

js代碼：

var example2 = new Vue({
  el: ‘#example‘,
  data: {
    parentMessage: ‘Parent‘,
    items: [
      { message: ‘one‘ },
      { message: ‘two‘ }
    ]
  }
})

template v-for

類似於 template v-if，也可以將 v-for 用在 template 標簽上，以渲染一個包含多個元素的塊。例如：

<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider"></li>
  </template>
</ul>

Vue深度學習（1）