2018年12月16日

我翻了一下之前那篇Vue已經(jīng)是一個半月前寫的了珊豹，也沒啥內(nèi)容吭练，干脆刪了重新寫好了。從基本的指令開始寫吧落午，沒什么準備工作谎懦，弄個Vue.js文件就可以開始擼了。

0.實例化一個Vue組件

使用{{}}完成數(shù)據(jù)的綁定溃斋，在Vue里有el界拦，data，methods盐类，computed等等屬性與自定義屬性寞奸。

html
<div id="app">{{msg}}</div>
JavaScript
<script src="vue.js"></script>
<script>
  var app=new Vue({
    el:"#app",
    data:{
      msg:"hello,world",
    }
  });
</script>

1.屬性v-bind

v-bind用來綁定屬性，縮寫為:在跳，頁面元素的屬性都能綁枪萄，比如class，href等等猫妙，可以傳遞一個值也可以是一個對象

<div v-bind:class="{logo1:isLogo1,logo2:isLogo2}"></div>

2.數(shù)據(jù)綁定v-model

v-model用來綁定數(shù)據(jù)瓷翻，不僅包括text冶伞，還有CheckBox和radio這類選擇標(biāo)簽蹂季，前者在選擇時會自動的對綁定的數(shù)組進行增與刪，后者也能動態(tài)的修改吐绵。
可以使用.number,.lazy等詞綴修飾彼哼，使綁定的數(shù)據(jù)更符合需求对妄。

<label>
  <input type="checkbox" v-model="sex" name="sex" value="nan" checked="checked"/>
  男
 </label>
<label>
  <input type="checkbox" v-model="sex" name="sex" value="nv" checked="checked"/>
  女
</label>
{{sex}}

3.事件監(jiān)聽v-on

v-on可以對事件進行監(jiān)聽，簡寫為@敢朱，傳遞的參數(shù)可以是一個函數(shù)名也可以是一個對象剪菱，對象可以對應(yīng)申明多個函數(shù)。函數(shù)則在Vue的構(gòu)造函數(shù)中的methods對象里申明拴签。

<button v-on="{mouseenter:onEnter,mouseleave:onLeave}" 
v-on:click="onClick()">button</button>

4.計算computed

computed申明在Vue構(gòu)造函數(shù)的computed對象中孝常，以函數(shù)形式存在，計算屬性會在被偵聽的元素發(fā)生變化后重新計算蚓哩。而當(dāng)元素沒有發(fā)生變化時构灸，會有緩存存在，減少執(zhí)行的次數(shù)岸梨。

5.組件component

5.1全局組件定義

使用Vue.component自定義組件喜颁，注意data以函數(shù)形式存在稠氮。

Vue.component("mytag", {
  props:["ms"],
  data: function () {
    return {
      islike: false,
      likeCount: 0
    }
  },
template: "<button @click='onClick'>{{ms}}({{likeCount}})</button>",
  methods: {
    onClick: function () {
      this.islike ? this.likeCount-- : this.likeCount++;
      this.islike=!this.islike;
    }
  }
})

5.2父子組件通信

使用props接收參數(shù)數(shù)組

5.3子父組件通信

在子組件的方法中使用$emit("eventName")傳遞數(shù)據(jù)，在父組件中對子組件綁定對應(yīng)的事件并傳遞數(shù)據(jù)洛巢，當(dāng)然括袒，數(shù)據(jù)需要在父組件的data中申明。

Vue.component("parent",{
  template:`<div>
              <son @parent="parent_event=true"></son>
              <p v-if="parent_event">子組件與父組件通信</p>
            </div>`,
  data:function(){
    return{
      parent_event:false,
    }
  }
});
 Vue.component("son",{
  template:`<button @click="onClick">button</button>`,
  methods:{
    onClick(){
      this.$emit("parent");
    }
   }
});

5.4平行組件通信

與上面類似稿茉，使用$emit對組件1綁定事件并傳遞數(shù)據(jù)锹锰，注意因為是全局組件所以由Vue調(diào)用該函數(shù)，在組件2的mounted函數(shù)中使用$on函數(shù)監(jiān)聽事件漓库，mounted函數(shù)在組件被掛載后尚未渲染前執(zhí)行恃慧，然后在$on中使用回調(diào)函數(shù)接收到數(shù)據(jù)完成數(shù)據(jù)的傳遞。

var event=new Vue();
  Vue.component("p1",{
    template:`<div>我說<input @keyup='onKeyup' type='text' v-model='p1_content'></input><p>{{p1_content}}</p></div>`,
    data:function(){
      return{
        p1_content:'',
      }
    },
    methods:{
      onKeyup:function(){
        event.$emit('p1Change',this.p1_content);
      }
    }
  });
Vue.component("p2",{
  template:`<div>p1:<span>{{p2_content}}</span></div>`,
    data:function(){
      return{
        p2_content:'',
      }
    },
    mounted:function() {
      var that=this;
      event.$on('p1Change',function(data){
        that.p2_content=data;
      });
    },
  });

6.過濾器filter

我就一直在想java里有個過濾器渺蒿，和前端的路由概念很像痢士，那前端的過濾器又是干嘛的呢，后來我發(fā)現(xiàn)我想多了茂装，就真的只是過濾而已怠蹂。

在{{}}中使用{{data | filtername}}這種奇怪的語法來調(diào)用過濾器，之后使用Vue.filter方法注冊過濾器少态，一般data會作為val傳遞進過濾器城侧，其它的參數(shù)可以自定定義，在過濾器中完成操作之后返回彼妻，返回的結(jié)果在調(diào)用處渲染嫌佑，就是這么low。侨歉。屋摇。

html
<input type="text" v-model.number="price">
<p>{{price | currency("usd")}}</p>
script
  Vue.filter("currency", function (val, unit) {
    val = val || 0;
    unit = unit || "元";
    return val + unit;
  });

7.條件渲染v-if/v-else/v-else-if以及v-show

別問我為什么這個時候才寫條件渲染因為我忘了。
字面意思幽邓，根據(jù)得到的布爾值決定渲染與否炮温，差異在于v-if會把頁面元素直接刪除掉的樣子，而v-show是隱藏牵舵，因此每一次切換狀態(tài)v-if都會消耗大量資源柒啤，但是我依然覺得之前那個別踩白塊兒還真得用v-if才行，不然大量頁面元素會很卡棋枕。

8.列表渲染v-for

同上
在data中申明一個對象或數(shù)組然后對其遍歷進行自動渲染

9.自定義指令Directive

9.1創(chuàng)建自定義指令

使用Vue.directive自定義指令，需要說明的是在標(biāo)簽中使用的指令需要以v-開頭妒峦，在申明的時候則不需要寫重斑，回調(diào)函數(shù)中傳遞是當(dāng)前頁面元素對象以及自定義指令需要傳遞的參數(shù)，當(dāng)然這些參數(shù)也是要在data中申明的肯骇，不過有個有意思的地方是如果有很多標(biāo)簽使用了該指令窥浪，完全可以在data中為不同的標(biāo)簽申明不同的對象屬性祖很。

<div v-finish="tag11.state" class="tag">
  <button @click="tag11.state=!tag11.state">finish</button>
  一堆廢話
</div>
Vue.directive("finish",function(el,state){
  if(state.value){
    ...樣式修改
    }else{
    ...樣式修改
    }
 });

9.2利用指令傳遞參數(shù)

首先對指令傳遞參數(shù)的寫法如下有兩種

• 第一種使用.傳遞參數(shù)一次可以傳遞多個參數(shù)，讀取時使用屬性的modifiers,在modifiers中存儲了所有通過該方法傳遞的參數(shù)漾脂，將其遍歷之后就可以取出來了
• 第二種使用:傳遞參數(shù)一次只能傳遞一個參數(shù)假颇，使用arg讀取

<div v-finish.bottom.right="tag1.state" class="tag">
<div v-finish:bottom.right="tag1.state" class="tag">

Vue.directive("finish", function (el, state) {
  if (state.value) {
    ...
    for (var key in state.modifiers) {
      if(state.modifiers[key]){
        el.style[key] = '10px';
      }
    }
   ...
  } else {
     ...
    }
  });