简单示例

<span>Message: {{ msg }}</span>
<div id="item-{{ id }}"></div>

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

{{ message | filterA | filterB }}
{{ message | filterA 'arg1' arg2 }}

<p v-if="greeting">Hello!</p>
<a v-bind:href="url"></a>
<a v-on:click="doSomething">

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

 计算属性 > $watch

当一些数据需要根据其它数据变化时，可使用计算属性

一个常见需求是操作元素的 class 列表和它的内联样式

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

data: {
  isA: true,
  isB: false,
  classObject: {
    'class-a': true,
    'class-b': false
  }
}

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

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

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

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

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

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

 v-if

 v-show

 v-if vs. v-show

一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。 

 使用 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' }
    ]
  }
})

<ul id="example-1">
  <li>Foo</li>
  <li>Bar</li>
</ul>

使用 v-on 指令监听 DOM 事件： 

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

事件修饰符： 

<!-- 阻止单击事件冒泡 -->
<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>

按键修饰符： 

<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">
<!-- 只有在 回车时调用 vm.submit() -->
<input v-on:keyup.enter="submit">

• Text

 使用 v-model 指令在表单控件元素上创建双向数据绑定：

<input type="text" v-model="message" placeholder="edit me">

<input type="checkbox" id="checkbox" v-model="checked">

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

<select v-model="selected">
  <option selected>A</option>
  <option>B</option>
  <option>C</option>
</select>

• Checkbox

• Radio

• Select

var Example = Vue.extend({
  template: '<div>{{ message }}</div>',
  data: function () {
    return {
      message: 'Hello Vue.js!'
    }
  }
})

// 将该组件注册为 <example> 标签
Vue.component('example', Example)

<example></example>

声明组件：

使用组件：

<div>Hello Vue.js!</div>

渲染结果：

为了让组件之间能够有效的进行动态组构:

//ComponentA.js
export default {
  template: '<div>{{ message }}</div>',
  data () {
    return {
      message: 'Hello Vue.js!'
    }
  }
}

//App.js
import ComponentA from './ComponentA'

export default {
  // use another component, in this scope only.
  // ComponentA maps to the tag <component-a>
  components: { ComponentA },
  template: `
    <div>
      <p>Now I'm using another component.</p>
      <component-a></component-a>
    </div>
  `
}

 基于事件系统的问题：