初识Vue

vue中有许多指令，在这里我们对这些指令做个粗滤的解释说明，便于更好的选择使用。
1） v-bind : 动态绑定指令，使用v-bind:动态变化的值=”表达式”来修改html的属性值。 
例子：v-bind:href=”hrefData”,可以使用 : 来代替v-bind。v-bind：class 等价于 ：class
2） v-model ：在表单控件元素上创建双向数据绑定，它会根据控件类型自动选取正确的方法来更新元素。
3）v-if v-show : 条件渲染，根据条件值的真假确定html是否渲染。
区别：带有 v-show 的元素始终会被渲染并保留在 DOM 中，v-show 是简单地切换元素的 CSS 属性 display 。
v-if 是“真正的”条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
一般来说， v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件不太可能改变，则使用 v-if 较好。
4） v-for：根据一组数组的选项列表进行渲染，v-for 指令需要以 item in items 形式的特殊语法， items 是源数据数组并且 item 是数组元素迭代的别名。
```
<ul id="example">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>

var example1 = new Vue({
  el: '#example',
  data: {
    items: [
      {message: 'first' },
      {message: 'second' }
    ]
  }
})
```
5） v-on：监听 DOM 事件来触发一些 JavaScript 代码。vue.js 为 v-on 提供了 事件修饰符。
6）事件处理
```
<div id="app">
    <!-- 格式：        v-on:事件名
         简化写法：    @事件名
         还可以实现参数传递
    -->
    <input type="button" value="点我" v-on:click="abc(50)">
    <input type="button" value="点我" @click="abc(100)">
</div>

<script>
    var vue = new Vue({
        el:"#app",
        data: {

        },
        methods: {
            abc: function(i){
                console.log("点击了按钮", i);
            }
        }
    });
</script>
```