Vue學習筆記 一

1、vue基本模型：

一段html**配合json，再new 處理vue例項。

html**:

}               //json格式的資料

vue.js:

var vm = new vue(}

new vue(}   }

2.2.2、v-for="value in json"

} }  }

2.2.3、v-for="(k,v) in json"

}  }  }     }

如果有重複的資料:

track-by='索引' ====>> track-by='$index/uid'

2.3、v-on: 繫結事件     

2.3.1、v-on:click="回掉函式"                  ====>>>  可以簡寫為: @click=""

v-on:click/mouseout/mouseover/dbclick/mousedown......

vue.js**：

new vue("      //這裡的red是html中的屬性名，a是vue.js中data的資料

:class="json"             //json的型式為:

data:

style:

style與class的用法類似

:style="[c]"

:style="[c,d]"

:style="json"

5、模板

msg:

data:}               //資料更新，模板變化,等價於===>}

}   //資料只繫結一次,即:資料更新,模板不會發生變化,等價於===>}

}}   //html轉義輸出,即:html標籤會以html格式進行處理,等價於===>}

6、過濾器

格式：}

}舉例: }

vue提供過濾器:

capitalize uppercase        currency....

debounce 引數(毫秒)     配合事件，延遲執行

資料配合使用過濾器:

limitby 引數1  限制幾個

limitby 引數1 引數2  取幾個,從哪兒開始

filterby 引數  過濾資料

orderby  1/-1   1:正序;  -1:倒序

自定義過濾器格式:

vue.filter(name,function(input) {});

舉例:        時間轉換器}

雙向過濾器*

7、互動

如果vue想做互動，要引入:vue-resouce

get方式:

①.獲取乙個普通文字資料:

vue學習筆記（一）

一.搭建環境 1.如果我們的電腦上有了node和npm，我們就只需要執行下面的命令全域性安裝vue cli腳手架 npm install g vue cli 或者 cnpm install g vue cli 2.構建完腳手架之後，隨便進入乙個我們事先準備好的目錄，比如demo目錄，然後在目錄中做初...

vue 學習筆記（一）

例項生命週期鉤子 1 在beforecreate和created之間，進行資料觀測 data observer 也就是在這個時候開始監控data中的資料變化了，同時初始化事件 2 首先系統會判斷物件中有沒有el選項 有el選項，則繼續編譯過程 沒有el選項，則停止編譯，也意味著暫時停止了生命週期 直...

vue學習筆記（一）

1.vue介紹 vue.js是一套用於構建使用者介面的漸進式框架。與其它大型框架不同的是，vue 被設計為可以自底向上逐層應用。vue 的核心庫只關注檢視層，不僅易於上手，還便於與第三方庫或既有專案整合。另一方面，當與現代化的工具鏈以及各種支援類庫結合使用時，vue 也完全能夠為複雜的單頁應用提供驅...