前言：

別想一下造出大海，必須先由小河川開始

--------------------------------正文---------------------------------

MVC (設計模式)

  作用: view和modle分離
  好處：解決耦合問題
        防止混亂

VueJS（官網(wǎng) https://cn.vuejs.org/）

    MVVM框架（雙向綁定）

  插件:(專注于某一個效果)
  庫:(人是主導，操作對像、DOM)（react應該是一個UI庫）
  框架:(框架是主導，操作數(shù)據(jù))

下載

  1. 直接下載vue.js文件
  2. 使用vue-cli

格式：

    new Vue({
      el:'#box',
      data:{
        aProduct:[]
      },
      filters:{
        cur:function(value){
          return ;
        }
      },
      computed:{
        aRro:function(){
          return this.aProduct.reverse();（反轉）
        }
      },
      methods:{
        send(){
        }
      }
    });

指令 v-開頭

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

  v-on              添加事件

  v-bind            綁定屬性

  v-for             循環(huán)、迭代

    建議使用v-for的時候設置v-bind:key。

  v-text            純文本

  v-html            html

  v-show            是否顯示

  v-pre             跳過編譯           // 直接寫在標簽里

  v-cloak           防止閃屏          // 寫在標簽里 
        [v-cloak] {
            display: none;
        }                       // 寫在style里面
  // 一起使用
簡寫

  v-bind

            v-bind:href         :href

            v-bind:src          :src

            v-bind:key          :key

  v-on

            v-on:click          @click

            v-on:keydown        @keydown

生命周期鉤子

    beforeCreate            創(chuàng)建前
    created                 創(chuàng)建后
    beforeMount             掛載前
    mounted                 掛載后
    beforeUpdate            數(shù)據(jù)更新前
    updated                 數(shù)據(jù)更新后
    beforeDestroy           銷毀前
    destroyed               銷毀后

自定義指令

    Vue.directive('指令名',function(el){
        當前對象
        coding....
    });

事件深入

    @click.prevent.stop（阻止默認、阻止冒泡）

    @keydown.enter.ctrl（enter鍵）

    自定義按鍵

    Vue.config.keyCodes.xxx = 鍵碼;

過濾器 filter

1、文本過濾器

   filters: {
      xxx: function(arg1,arg2...){
         return 處理后的結果;
      }
   }

   {{message:xxx(xxx,xx,xx..)}}

2、數(shù)據(jù)過濾器

   computed: {
      xxx: function(arg1,arg2,arg3){
         操作
         返回
      }
   }

   v-for="item in xxx"

computed 計算屬性

computed第一次調用一個函數(shù)，會解析一次數(shù)據(jù)，然后會有緩存，如果下次還調用這個函數(shù)，就不解析數(shù)據(jù)了，直接用緩存的數(shù)據(jù)，會提高性能。
methods第一次調用一個函數(shù)，會解析一次數(shù)據(jù)，如果下次還調用這個函數(shù)，就還會解析一次數(shù)據(jù)，調用幾次，解析幾次。
相比較methods，更加節(jié)省性能。適合用于重復渲染，邏輯復雜的計算。

    computed: {
        xxx: function(){
            操作
            return ;
        }
    }