v-bind 指令

我们在HTML里面的标签上面一般都有属性，比如 div标签，这个div标签里面有class的属性，但是之前标签的属性都是写死的，现在想要动态的显示，那么就需要使用vue了，那么对于标签的属性，现在就需要使用 v-bind 指令。这个指令就是 绑定属性的。

HTML 属性中的值应使用 v-bind 指令。

 <div v-bind:class="{
    'class1': use}">
    v-bind:class 指令
  </div>

以上就绑定了div里面的class属性。我们在 data里面 就可以修改use的值了，这个就是动态的修改，视图层就不需要改了。

<div id="app">
v-bind绑定了href属性，href 和变量  url ，之后改变了url，那么属性href的值就变了
    <pre><a v-bind:href="url">来</a></pre>
</div>
    
<script> new Vue({
     el: '#app', data: {
     url: 'http://www.baidu.com' } }) </script>

在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。

v-model 指令

在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定：

v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。

缩写

v-bind 缩写
Vue.js 为两个最为常用的指令提供了特别的缩写：

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