常用vue指令

<label>

绑定标签:<label for="r1">修改颜色</label><input type="checkbox" v-model="class1" id="r1">

label标签里面的东西和checkbox绑定,点击任何一个,另一个都会得到点击效果

v-html

用于输出html代码

<div v-html="message"></div>

data: { message: '<h1>菜鸟教程</h1>' }

v-bind

用来相应的更新html属性

<pre><a v-bind:href="url">菜鸟教程</a></pre>

data: { url: 'http://www.runoob.com' }

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

v-on

用于监听DOM事件

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

v-for循环挺有意思的

<div id="app">
  <ol>
    <li v-for="site in sites">
      {{ site.name }}
    </li>
  </ol>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    sites: [
      { name: 'Runoob' },
      { name: 'Google' },
      { name: 'Taobao' }
    ]
  }
})
</script>