vue.js常用指令

1.如果要想实现dom操作,在vue中必须要先创建实例

    var vm = new Vue({
      el: "#diva"
     });

2.v-on  点击事件  @符号代表了v-on

<div id="diva">
已点击{{count}}次
<button @click="count++">点我</button>
</div>

         var vm = new Vue({
            el: "#diva",
            data:{
                count:0
            }
        });

3.v-if  如果要将元素隐藏,true改为false

<div id="app-3">
    <p v-if="seen">显示元素了</p>
</div>

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

            }
        })

4. v-else v-else是搭配v-if使用的，它必须紧跟在v-if或者v-else-if后面，否则不起作用。显示结果根据true和false进行切换

<div id="vue">
    <h1 v-if="ok">YES</h1>
    <h1 v-else>NO</h1>
</div>


      var vm = new Vue({
         el: '#vue',
         data: {
                ok:true
            }
        });

5.v-bind 用来动态的绑定一个或者多个特性。没有参数时，可以绑定到一个包含键值对的对象。常用于动态绑定class和style。以及href等。
简写为一个冒号【 ：】

<div id="app">
    <!--当data里面定义的isActive等于true时，a这个类才会被添加起作用-->
    <!--当data里面定义的hasError等于true时，text-danger这个类才会被添加起作用-->
    <div :class="{'a':isActive, 'text-danger':hasError}"></div>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            isActive: true,  
            hasError: false
        }
    })
</script>


结果

<!--因为hasError: false，所以text-danger不被渲染-->
<div class = "is-active"></div>