Vue(一)

• 指令：带有v-前缀的特殊属性。用于在表达式的值改变时，将某些行为应用到DOM上。下面的例子，用到了v-bind指令将某一层div的属性与checkbox的值绑定，当use为true时，引用class1的样式

<style>
.class1{
background: #444;
color: #eee;
}
</style>

<div id="app">
  <label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
  <br><br>
  <div v-bind:class="{'class1': use}">
    v-bind:class 指令
  </div>
</div>
    
<script>
new Vue({
    el: '#app',
  data:{
      use: false
  }
});
</script>

• v-if:v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。

<div id="app">
    <p v-if="seen">现在你看到我了</p>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    seen: true
  }
})
</script>

• v-model:用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。
• v-on：用于监听事件。
• v-for：v-for="(value, key, index) in object"  ，其中第一个参数是属性，第二个是键，第三个是索引。
• 参数：在指令后以冒号指明，在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。

<div id="app">
    <pre><a v-bind:href="url">菜鸟教程</a></pre>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    url: 'http://www.runoob.com'
  }
})
</script>

• 修饰符：.指明一个指令应该以特殊方式绑定。
• 过滤器：由"管道符"指示。