用script引用即可

一、基礎

直接上案例自己執行就懂

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

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})

<div id="app" class="demo">
  <input v-model="message">
</div>

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})
 

<div id="app2">
  <ul>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ul>
</div>


new Vue({
  el: '#app2',
  data: {
    todos: [
      { text: 'Learn JavaScript' },
      { text: 'Learn Vue.js' },
      { text: 'Build Something Awesome' }
    ]
  }
})
 

 逆轉字串

<div id="app3">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">Reverse Message</button>
</div>



new Vue({
  el: '#app3',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})
 

 事件

<div id="app5">
  <input v-model="newTodo" v-on:keyup.enter="addTodo">
  <ul>
    <li v-for="todo in todos">
      <span>{{ todo.text }}</span>
      <button v-on:click="removeTodo($index)">X</button>
    </li>
  </ul>
</div>

new Vue({
  el: '#app5',
  data: {
    newTodo: '1',
    todos: [
      { text: 'Add some todos' }
    ]
  },
  methods: {
    addTodo: function () {
      var text = this.newTodo.trim()
	  if (text) {
        this.todos.push({ text: text })
        this.newTodo = ''
      }
    },
    removeTodo: function (index) {
      this.todos.splice(index, 1)
    }
  }
})

//輸出html程式碼需要3個{

<div>{{{ raw_html }}}</div> 

二、進階

實時重新整理資料

開啟瀏覽器的控制檯，修改 exampleData.name，你將看到相應地更新。

<div id="example-1">
  Hello {{ name }}!
</div>


//DOM 會自動響應資料的變化
var exampleData = {
  name: 'Vue.js'
}
var exampleVM = new Vue({
  el: '#example-1',
  data: exampleData
})

繼續在控制檯設定 exampleVM2.greeting 為 false，你會發現 "Hello!" 消失了

<div id="example">
  <p v-if="greeting">Hello!</p>
</div>

var exampleVM2 = new Vue({
  el: '#example',
  data: {
    greeting: true
  }
})

三、例項

var MyComponent = Vue.extend({ // 擴充套件選項 })

// 所有的 `MyComponent` 例項都將以預定義的擴充套件選項被建立

var myComponentInstance = new MyComponent()

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

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})

vm.$data === data // -> true
vm.$el === document.getElementById('example') // -> true

// $watch 是一個例項方法
vm.$watch('a', function (newVal, oldVal) {
  // 這個回撥將在 `vm.a`  改變後呼叫
})

JavaScript 表示式 

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

 有些指令可以在其名稱後面帶一個“引數” (Argument)，中間放一個冒號隔開

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

這裡 href 是引數，它告訴 v-bind 指令將元素的 href 特性跟表示式 url 的值繫結。可能你已注意到可以用特性插值 href="{{url}}"獲得同樣的結果：這樣沒錯，並且實際上在內部特性插值會轉為 v-bind 繫結。

另一個例子是 v-on 指令，它用於監聽 DOM 事件

<a v-on:click="doSomething">

v-bind 縮寫

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

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

<!-- 完整語法 -->
<button v-bind:disabled="someDynamicCondition">Button</button>

<!-- 縮寫 -->
<button :disabled="someDynamicCondition">Button</button>

v-on 縮寫

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

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

 例子

<div id="example">
  a={{ a }}, b={{ b }}
</div>

var vm = new Vue({
  el: '#example',
  data: {
    a: 1
  },
  computed: {
    // 一個計算屬性的 getter
    b: function () {
      // `this` 指向 vm 例項
      return this.a + 1
    }
  }
})

控制檯輸入vm.a 可以看到a和b的值改變

計算屬性 vs. $watch

<div id="app3">{{fullName}}</div>

var vm = new Vue({
 el: '#app3',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  }
})

vm.$watch('firstName', function (val) {
  this.fullName = val + ' ' + this.lastName
})

vm.$watch('lastName', function (val) {
  this.fullName = this.firstName + ' ' + val
})

計算setter

// ...
computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}
// ...

物件語法

我們可以傳給 v-bind:class 一個物件，以動態地切換 class。注意 v-bind:class 指令可以與普通的 class 特性共存：

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

data: {
  isA: true,
  isB: false
}
//渲染為
<div class="static class-a"></div>

陣列語法

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

<div v-bind:class="[classA, classB]">
data: {
  classA: 'class-a',
  classB: 'class-b'
}
渲染為
<div class="class-a class-b"></div>

物件語法

v-bind:style

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

data: {
  activeColor: 'red',
  fontSize: 30
}

<div v-bind:style="styleObject"></div>

data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

if語句

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

<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>

v-show

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

列表渲染

v-for

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

var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

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

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

var example2 = new Vue({
  el: '#example-2',
  data: {
    parentMessage: 'Parent',
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

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.js 包裝了被觀察陣列的變異方法，故它們能觸發檢視更新。被包裝的方法有：

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

方法與事件處理器

可以用 v-on 指令監聽 DOM 事件：

<div id="example">
  <button v-on:click="greet">Greet</button>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    name: 'Vue.js'
  },
  // 在 `methods` 物件中定義方法
  methods: {
    greet: function (event) {
      // 方法內 `this` 指向 vm
      alert('Hello ' + this.name + '!')
      // `event` 是原生 DOM 事件
      alert(event.target.tagName)
    }
  }
})

// 也可以在 JavaScript 程式碼中呼叫方法
vm.greet() // -> 'Hello Vue.js!'

內聯語句處理器

<div id="example-2">
  <button v-on:click="say('hi')">Say Hi</button>
  <button v-on:click="say('what')">Say What</button>
</div>

new Vue({
  el: '#example-2',
  methods: {
    say: function (msg) {
      alert(msg)
    }
  }
})

<button v-on:click="say('hello!', $event)">Submit</button>

methods: {
  say: function (msg, event) {
    // 現在我們可以訪問原生事件物件
    event.preventDefault()
  }
}

事件修飾符

<!-- 阻止單擊事件冒泡 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再過載頁面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修飾符可以串聯 -->
<a v-on:click.stop.prevent="doThat">

<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>

<!-- 新增事件偵聽器時使用 capture 模式 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只當事件在該元素本身（而不是子元素）觸發時觸發回撥 -->
<div v-on:click.self="doThat">...</div>

按鍵修飾符

在監聽鍵盤事件時，我們經常需要檢測 keyCode。Vue.js 允許為 v-on 新增按鍵修飾符：

<!-- 只有在 keyCode 是 13 時呼叫 vm.submit() -->
<input v-on:keyup.13="submit">

記住所有的 keyCode 比較困難，Vue.js 為最常用的按鍵提供別名：

<!-- 同上 -->
<input v-on:keyup.enter="submit">

<!-- 縮寫語法 -->
<input @keyup.enter="submit">

就先到這裡其他後面更新