数据绑定

数据绑定就是指将js中的变量自动更新到html中。如下代码, message的默认值是“Hello Vue.js!”, 那么当页面启动时，html中的默认值会被设置成“Hello Vue.js”

<!-- html -->
<div id="demo">
  <p>{{message}}</p>
  <input v-model="message">
</div>

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

如果要输出原生的html，可以使用三个大括号来实现

<p>{{{messageHtml}}}</p>

也可以做表达式的绑定

<div>{{length - 1}}</div>
<div>{{isShow ? 'block' : 'none'}}</div>

指令

指令是特殊的带有前缀 v- 的特性。当表达式的值发生变化时，响应应用特定的行为到DOM。

<!-- 当greeting为true时，才显示p节点 -->
<p v-if="greeting">hello</p>
<!-- 绑定href属性为js中url的值 -->
<a v-bind:href="url"></a>
<!-- 绑定事件，btnClick是js方法 -->
<button v-on:click="btnClick"></button>

指令可以进行缩写

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

<button v-on:click="btnClick"></button>
<button @click="btnClick"></button>

html模板

Vue.js支持对js对象进行判断(if), 循环(for)输出。类似于前端模板。

<!-- 判断，如果ok为true,则显示yes, 如果为false, 显示no -->
<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>

<!-- 类似于v-if, v-if是是否加节点， v-show是display是否为none -->
<h1 v-show="ok">Hello!</h1>

<!-- 循环， 对items属性进行循环。 track-by指item的是否重复，对重复的进行服用 -->
<!-- 循环中， $index表示数组第n个元素; $key表示对象的key -->
<ul id="example-1">
  <li v-for="item in items" track-by="_uid">
    {{ $index }} : {{ item.message }}
  </li>
</ul>

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

事件绑定

可以使用 v-on 指令来监听DOM事件。

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

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

常见的阻止冒泡，禁止默认行为等event方法可以通过修饰符来快速处理。

<!-- 禁止冒泡 -->
<a v-on:click.stop='do'></a>
<!-- 禁止冒泡和默认行为 -->
<a @click.stop.prevent="do"></a>

对特殊按键生效也可以使用修饰符

<!-- keyCode是13的时候出发。 -->
<input v-on:keyup.13="submit" />
<input v-on:keyup.enter="submit" />
<!-- 支持的键名有： enter,tab,delete,esc,space,up,down,left,right -->