Vue--指令

注意：只有v-bind 和 v-on 有简写。

1、v-bind

为DOM元素的某个属性绑定Vue实例的某个属性。
控制DOM文本、属性等
简写： :title="这是一个title"

## 为 span 元素的 title属性绑定 vue实例的message属性；
## 可以通过 app2.meesage = '你好啊，在这里我修改了vue实例的message属性'; 来进行修改。

<div id="app-2">
  <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>

  <!--简写-->
  <span :title="message"></span>
</div>

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: '页面加载于 ' + new Date().toLocaleString()
  }
})

// app2.meesage = '你好啊，在这里我修改了vue实例的message属性'; 

2、v-if

条件判断
控制DOM结构,添加或者删除DOM元素。

## 该例子中，如果 app3.seen = false; 那么会从DOM中删除 <p> 标签。

<div id="app-3">
  <p v-if="seen">现在你看到我了</p>
</div>

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

3、v-show

条件判断
控制CSS的display属性，不直接操作DOM结构。

4、v-for

循环 官网
控制DOM结构

5、v-on

监听DOM事件官方1
简写：@:click="doSomething"

1）、 事件绑定的时候可以只填写方法名,如下：

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

//js
...
  methods : {
    doSomething : function(event){    // 方法会自动接受事件参数 event
      alert(event.target);
    }
  }
...
<!--简写-->
<a @:click="doSomething"></a>

2）、也可以填写内联语句，如下：

<a v-on:click="doSomething('你好','$event')"></a>   //html  ----需要手动传递 特殊参数$event,代表所触发的事件

//js
...
  methods : {
    doSomething : function(msg,event){    // 方法中接受v-on指令传递的两个参数：msg和 event
        alert(msg);
        alert(event.target);
    }
  }
...

具体区别详见 ： 官方2

6、v-model

用于实现表单输入和应用状态之间的双向绑定

7、v-html