vue.js（2.0）常用指令总结以及一些指令的坑！

**凄凄惨惨凄凄切切，时间又来到了公元2017年8月11号，最近小飞飞在学习vue.js，在学习的过程中总结了一些vue中常用的指令和坑！不希望后来小伙伴再踩了！**

《1》 先说一些最基本的指令也就是最常用的呗。

`v-bind: //主要是綁定html标签中的属性，例如 href，class，name，这样绑定后属性值。看代码！

html部分！

<a v-bind:href="url">小飞飞的博客</a> //注意这里面的url不能直接写网址！，只能写变量传参数才可以
//错误示范：v-bind:href="http://blog.csdn.net/qq_37983691"

js部分

 new Vue({
   data:{
    url:"http://blog.csdn.net/qq_37983691"
   }
 })

《2》 注意！v-bind:class=”{className:boolean}” 只能这么绑定class，第一个参数class的名称，第二个是一个boolean值，就是true，false, 如果是true的话这个绑定的class才生效啊！//错误的绑定方式：v-bind:class=”sb”，v-bind:class=”{bigSb}”

上代码！再看如何用！

 //v-bind:class主要是配合v-on：click使用改变data中的数据属性值从而达到改变元素样式的目的.下面的例子是*点击p标签就会让p标签的背景改变*
//html部分
<p v-bind:class="{active:isActive}" v-on:click="changeColor">小飞飞是sb吗？<p> //注意看isActive在js中的属性值

//css部分
p{background:#000;color:white;}
.active{background:red;}

//js 部分
new Vue({
   data:{
    url:"http://blog.csdn.net/qq_37983691",
    isActive:false
   },
   methods:{
     changeColor:function(){
             if(this.isActive==true){
                        this.isActive=false
             }else{
                        this.isActive=true
             }
      }；
   }
 })

注意！源码都可以直接复制运行！前提引入vue.js!
先说这么多吧！因为就会这点！别他妈嘲笑！耻笑就行。。。。。。。。
有道友一起的就点个赞再走，不点赞的点个关注！就这样待后续学成归来继续排坑。。。。。。。。。。