**悽悽慘慘悽悽切切，時間又來到了公元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!
先說這麼多吧！因為就會這點！別他媽嘲笑！恥笑就行。。。。。。。。
有道友一起的就點個贊再走，不點讚的點個關注！就這樣待後續學成歸來繼續排坑。。。。。。。。。。