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

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

<div id="app-2">
  <span v-bind:title="message">
    鼠標(biāo)懸停幾秒鐘查看此處動(dòng)態(tài)綁定的提示信息！
  </span>
</div>

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: '頁(yè)面加載于 ' + new Date()
        .toLocaleString()
  }
})

<div id="app-3">
  <p v-if="seen">現(xiàn)在你看到我了</p>
</div>

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

控制切換一個(gè)元素是否顯示

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: '學(xué)習(xí) JavaScript' },
      { text: '學(xué)習(xí) Vue' },
      { text: '整個(gè)牛項(xiàng)目' }
    ]
  }
})

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">
    反轉(zhuǎn)消息
  </button>
</div>

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

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

v-model 指令，它能輕松實(shí)現(xiàn)表單輸入和應(yīng)用狀態(tài)之間的雙向綁定

var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})

<span>Message: {{ msg }}</span>
<span v-once>
  這個(gè)將不會(huì)改變: {{ msg }}
</span>

使用 v-once 指令，執(zhí)行一次性地插值，當(dāng)數(shù)據(jù)改變時(shí)，插值處的內(nèi)容不會(huì)更新

<p>解釋為普通文本: {{ rawHtml }}</p>
<p>
  使用 v-html 指令: 
  <span v-html="rawHtml"></span>
</p>

使用 v-html 指令，輸出真正的 HTML

<div v-bind:id="dynamicId"></div>
<button v-bind:disabled="isDisabled">
  Button
</button>

如果 isDisabled 的值是 null/undefined/false 則 disabled 不會(huì)被渲染出來

<div id="app">
  <span>消息: {{ msg }}</span>
  <span>{{ msg + '這是字符串' }}</span>
  <span>{{ isWorking ? '是':'否' }}</span>
  <span>{{ msg.getDetials() }}</span>
  <div v-bind:id="'list-' + id"></div>
<div>

<p v-if="seen">
  現(xiàn)在你看到我了
</p>

v-if 指令將根據(jù)表達(dá)式 seen 的值的真假來插入/移除 <p> 元素

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

v-bind 指令將該元素 href 屬性與表達(dá)式 url 的值綁定

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

v-on 指令，用于監(jiān)聽 DOM 事件，oSomething 是事件名

<a v-on:[eventName]="doSomething">...</a>

當(dāng) eventName 的值為 focus 時(shí)，v-on:[eventName] 將等價(jià)于 v-on:focus

<form v-on:submit.prevent="onSubmit">
  ...
</form>

.prevent 修飾符告訴 v-on 指令對(duì)于觸發(fā)的事件調(diào)用 event.preventDefault()

<!-- 完整語法 -->
<a v-bind:href="url">...</a>
<!-- 縮寫 -->
<a :href="url">...</a>
<!-- 動(dòng)態(tài)參數(shù)的縮寫 (2.6.0+) -->
<a :[key]="url"> ... </a>

<div v-bind:class="{ active: isActive }">

</div>

傳給 v-bind:class 一個(gè)對(duì)象，以動(dòng)態(tài)地切換 class

<div v-bind:class="[
  isActive ? activeClass : ''
]">
</div>

<div v-bind:class="[
  { active: isActive }, errorClass
]"></div>

<div v-bind:class="[
  activeClass, errorClass
]">
</div>

如下 data

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

結(jié)果渲染為

<div class="active text-danger"></div>

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

如下 data

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

結(jié)果渲染為

<div style="color: red; font-size: 30px;"></div>

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

如下 data

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

同樣的，對(duì)象語法常常結(jié)合返回對(duì)象的計(jì)算屬性使用

<div v-bind:style="[
  baseStyles, overridingStyles
]"></div>

<div :style="{
  display: ['-webkit-box', 'flex']
}"></div>

<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no ??</h1>

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

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

帶有 v-show 的元素始終會(huì)被渲染并保留在 DOM 中，只是簡(jiǎn)單地切換元素的 CSS 屬性 display

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

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

<li v-for="(item, index) in items">
  {{ index }}
  {{ item.message }}
</li>

如下 data

data: {
  items: [
    { message: 'Foo' },
    { message: 'Bar' }
  ]
}

也可以用 of 替代 in 作為分隔符

<div v-for="item of items"></div>

<li
  v-for="todo in todos"
  v-if="!todo.isComplete"
>
  {{ todo }}
</li>

只渲染未完成的 todo，下面加上 v-else 示例

<ul v-if="todos.length">
  <li v-for="todo in todos">
    {{ todo }}
  </li>
</ul>
<p v-else>No todos left!</p>

注意: v-for 和 v-if 不推薦一起使用參考官方文檔

<my-component
  v-for="(item, index) in items"
  v-bind:item="item"
  v-bind:index="index"
  v-bind:key="item.id"
></my-component>

2.2.0+ 的版本里，當(dāng)在組件上使用 v-for 時(shí)，key 現(xiàn)在是必須的

<div id="example-1">
  <button v-on:click="counter += 1">
    +1
  </button>
  <p>按鈕已被點(diǎn)擊 {{ counter }} 次。</p>
</div>

var example1 = new Vue({
  el: '#example-1',
  data: {
    counter: 0
  }
})

<!-- 阻止單擊事件繼續(xù)傳播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重載頁(yè)面 -->
<form v-on:submit.prevent="submit"></form>
<!-- 修飾符可以串聯(lián) -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件監(jiān)聽器時(shí)使用事件捕獲模式 -->
<!-- 即內(nèi)部元素觸發(fā)的事件先在此處理 -->
<!-- 然后交由內(nèi)部元素進(jìn)行處理 -->
<div v-on:click.capture="doThis">...</div>
<!-- 當(dāng) event.target 是當(dāng)前元素自身時(shí)觸發(fā) -->
<!-- 即事件不是從內(nèi)部元素觸發(fā)的 -->
<div v-on:click.self="doThat">...</div>
<!-- 點(diǎn)擊事件將只會(huì)觸發(fā)一次 -->
<a v-on:click.once="doThis"></a>

<!-- 滾動(dòng)事件的默認(rèn)行為(即滾動(dòng)行為)會(huì)立即觸發(fā) -->
<!-- 而不會(huì)等待 `onScroll` 完成  -->
<!-- 包含 event.preventDefault() 的情況 -->
<p v-on:scroll.passive="onScroll">
  ...
</p>

這個(gè) .passive 修飾符尤其能夠提升移動(dòng)端的性能。

<!-- 在 key 是 Enter 時(shí)調(diào)用 vm.submit() -->
<input v-on:keyup.enter="submit">
<!-- 在 key 是 PageDown 時(shí)被調(diào)用 -->
<input v-on:keyup.page-down="onPageDown">
<!-- Alt + C -->
<input v-on:keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div v-on:click.ctrl="doSomething">

<!-- 即使 Alt 或 Shift 被一同按下時(shí)也會(huì)觸發(fā) -->
<button v-on:click.ctrl="onClick">
<!-- 有且只有 Ctrl 被按下的時(shí)候才觸發(fā) -->
<button v-on:click.ctrl.exact="ctrlClick">
<!-- 沒有任何系統(tǒng)修飾符被按下的時(shí)候才觸發(fā) -->
<button v-on:click.exact="onClick">

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>
    計(jì)算的反向消息： "{{ reversedMessage }}"
  </p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 計(jì)算屬性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 實(shí)例
      return this.message.split('')
                  .reverse().join('')
    }
  }
})

<p>
  計(jì)算的反向消息："{{ reversedMessage() }}"
</p>

在組件中，我們可以將同一函數(shù)定義為一個(gè)方法而不是一個(gè)計(jì)算屬性

methods: {
  reversedMessage: function () {
    return this.message.split('')
                .reverse().join('')
  }
}

兩種方式的最終結(jié)果確實(shí)是完全相同的。然而，不同的是計(jì)算屬性是基于它們的響應(yīng)式依賴進(jìn)行緩存的。

<input v-model="msg" placeholder="編輯我">
<p>msg is: {{ msg }}</p>

<span>Multiline message is:</span>
<textarea
  v-model="message"
  placeholder="添加多行"></textarea>
<p>{{ message }}</p>

<input
  type="checkbox"
  id="checkbox"
  v-model="checked"
>
<label for="checkbox">{{ checked}}</label>

<div id="example-4">
  <input type="radio" id="one" value="One"
    v-model="picked">
  <label for="one">One</label>
  <br>
  <input type="radio" id="two" value="Two"
    v-model="picked">
  <label for="two">Two</label>
  <div>Picked: {{ picked }}</div>
</div>

new Vue({
  el: '#example-4',
  data: {
    picked: ''
  }
})

<select v-model="selected">
  <option disabled value="">請(qǐng)選擇</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>
<span>Selected: {{ selected }}</span>

new Vue({
  el: '...',
  data: {
    selected: ''
  }
})

<select v-model="selected" multiple>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>
<div>Selected: {{ selected }}</div>

new Vue({
  el: '...',
  data: {
    selected: []
  }
})

<!-- 當(dāng)選中時(shí)，pc 為字符串 "a" -->
<input type="radio" v-model="pc" value="a">

<!-- toggle 為 true 或 false -->
<input type="checkbox" v-model="toggle">
<!-- 選中第一個(gè)選項(xiàng)時(shí)selected為字符串 abc -->
<select v-model="selected">
  <option value="abc">ABC</option>
</select>

<input
  type="radio"
  v-model="pick"
  v-bind:value="a">

當(dāng)選中時(shí)

vm.pick === vm.a

<input
  type="checkbox"
  v-model="toggle"
  true-value="yes"
  false-value="no"
>

// 當(dāng)選中時(shí)
vm.toggle === 'yes'
// 當(dāng)沒有選中時(shí)
vm.toggle === 'no'

<select v-model="selected">
  <!-- 內(nèi)聯(lián)對(duì)象字面量 -->
  <option v-bind:value="{ number: 123 }">
    123
  </option>
</select>

當(dāng)選中時(shí)

typeof vm.selected // => 'object'
vm.selected.number // => 123

<!-- lazy:在“change”時(shí)而非“input”時(shí)更新 -->
<input v-model.lazy="msg">

<!-- number:自動(dòng)將用戶的輸入值轉(zhuǎn)為數(shù)值類型 -->
<input v-model.number="age" type="number">

<!-- trim:自動(dòng)過濾用戶輸入的首尾空白字符 -->
<input v-model.trim="msg">

Vue.component('blog-post', {
  props: ['post'],
  template: `
    <div class="blog-post">
      <h3>{{ post.title }}</h3>
      <div v-html="post.content"></div>
    </div>
  `
})

<blog-post
  v-for="post in posts"
  v-bind:key="post.id"
  v-bind:post="post"
>
</blog-post>

Vue.component('blog-post', {
  props: ['title'],
  template: '<h3>{{ title }}</h3>'
})

當(dāng)值傳遞給一個(gè) prop attribute 的時(shí)候，變成了組件實(shí)例的一個(gè) property

<blog-post title="寫博客"></blog-post>
<blog-post title="如此有趣"></blog-post>

data: function () {
  return {
    count: 0
  }
}

組件的 data 選項(xiàng)必須是一個(gè)函數(shù)

<alert-box>
  發(fā)生了不好的事情。
</alert-box>

Vue.component('alert-box', {
  template: `
    <div class="demo-alert-box">
      <strong>Error!</strong>
      <slot></slot>
    </div>
  `
})

有些 HTML 元素，諸如 <ul>、<ol>、<table> 和 <select>，對(duì)于哪些元素可以出現(xiàn)在其內(nèi)部是有嚴(yán)格限制的。有些元素，諸如 <li>、<tr> 和 <option>，只能出現(xiàn)在其它某些特定的元素內(nèi)部

<table>
  <blog-post-row></blog-post-row>
</table>

<blog-post-row> 會(huì)被作為無效的內(nèi)容提升到外部

如果我們從以下來源使用模板的話，這條限制是不存在的

• 字符串 (例如：template: '...')
• 單文件組件 (.vue)
• <script type="text/x-template">

<transition> 組件上的 duration prop 定制一個(gè)顯性的過渡持續(xù)時(shí)間 (以毫秒計(jì))：

<transition :duration="1000">
  ...
</transition>

你也可以定制進(jìn)入和移出的持續(xù)時(shí)間：

<transition :duration="{
  enter: 500,
  leave: 800
}">
  ...
</transition>

<transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"

  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled"
>
  <!-- ... -->
</transition>

鉤子函數(shù)可以結(jié)合 CSS transitions/animations 使用，也可以單獨(dú)使用