vue 筆記二

vue製做weibo
交互

vue-> 1.0
vue-resource ajax php
服務器環境(node)

this.$http.get()/post()/jsonp()

this.$http({
  url:地址
  data:給後臺提交數據,
  method:'get'/post/jsonp
  jsonp:'cb' //cbName
});

----------------------------------
vue事件:

@click=""

數據:

添加一條留言：

獲取某一頁數據:

getPageData(1);

----------------------------------
vue生命週期:
鉤子函數:

created	-> 實例已經建立	√
beforeCompile	-> 編譯以前
compiled	-> 編譯以後
ready	-> 插入到文檔中	√

beforeDestroy	-> 銷燬以前
destroyed	-> 銷燬以後

----------------------------------
用戶會看到花括號標記:

v-cloak	防止閃爍, 比較大段落

----------------------------------

<span>{{msg}}</span>	-> v-text
{{{msg}}}	-> v-html

----------------------------------
ng: $scope.$watch

計算屬性的使用:

computed:{
  b:function(){ //默認調用get
    return 值
  }
}

--------------------------

computed:{
  b:{
    get:
    set:
  }
}

* computed裏面能夠放置一些業務邏輯代碼，必定記得return
---------------------------------
vue實例簡單方法:

vm.$el	-> 就是元素
vm.$data -> 就是data
vm.$mount -> 手動掛在vue程序

vm.$options	-> 獲取自定義屬性
vm.$destroy	-> 銷燬對象

vm.$log();	-> 查看如今數據的狀態

---------------------------------
循環：

v-for="value in data"

會有重複數據？
track-by='索引' 提升循環性能

track-by='$index/uid'

---------------------------------
過濾器:
vue提供過濾器:
capitalize uppercase currency....

debounce	配合事件，延遲執行
數據配合使用過濾器:
limitBy	限制幾個
limitBy 參數(取幾個)
limitBy 取幾個 從哪開始

filterBy	過濾數據
filterBy ‘誰’

orderBy	排序
orderBy 誰 1/-1
1 -> 正序
2 -> 倒序

自定義過濾器: model ->過濾 -> view

Vue.filter(name,function(input){

});

時間轉化器
過濾html標記

雙向過濾器:*

Vue.filter('filterHtml',{
  read:function(input){ //model-view
    return input.replace(/<[^<+]>/g,'');
  },
  write:function(val){ //view -> model
    return val;
  }
});

數據 -> 視圖
model -> view

view -> model
---------------------------------
v-text
v-for
v-html
指令: 擴展html語法

自定義指令:
屬性:

Vue.directive(指令名稱,function(參數){
    this.el	-> 原生DOM元素
});

<div v-red="參數"></div>

指令名稱: v-red -> red

* 注意: 必須以 v-開頭

拖拽:
-------------------------------
自定義元素指令:（用處不大）

Vue.elementDirective('zns-red',{
  bind:function(){
    this.el.style.background='red';
  }
});

------------------------------------------------
@keydown.up
@keydown.enter

@keydown.a/b/c....

自定義鍵盤信息:

Vue.directive('on').keyCodes.ctrl=17;
Vue.directive('on').keyCodes.myenter=13;

------------------------------------------------
監聽數據變化:

vm.$el/$mount/$options/....

vm.$watch(name,fnCb); //淺度
vm.$watch(name,fnCb,{deep:true}); //深度監視

------------------------------------------------vue組件:組件間各類通訊slotvue-loader webpack .vuevue-router