Vue的指令以及組件化開發

 

1、 自定義指令

 如何: 

  1. 建立指令

  Vue.directive("指令名",{

    inserted(elem){//指令所在的元素被加載到DOM樹上後自動執行指令

      //elem會自動得到指令所在的當前元素

      對elem執行DOM操做！

    }

  })

  2. 使用指令: <ANY v-指令名>

 

二、Axios
 什麼是: 專門發送http請求的函數庫

 爲何: ajax

  1. 本身封裝函數:

  2. jQuery: $.ajax() 小題大作

  3. Vue有一個組件resource，已不推薦使用

  4. Axios 官方推薦

 什麼時候: 只要在vue中發送ajax請求都用axios

 如何: 

  1. 引入: axios.min.js

  2. 發送2種請求: 

   get請求: 

   axios.get("url",{

     params:{

       參數:值

     }

   }).then(res=>{

     得到服務端返回的結果: res.data

   })

   post請求:

   axios.post("url","變量=值&變量=值&...").then(res=>{...})

 

3、組件化開發

 什麼是組件: 擁有專屬的HTML，CSS，JS和數據的頁面獨立區域

 什麼是組件化: 從此全部頁面都是由多個組件組成的

     每定義一個網頁，都要先劃分組件結構，再分別編寫每一個組件

 爲何: 

  1. 重用

  2. 便於大項目的分工協做

  3. 鬆散耦合

 如何: 

  1. 建立組件: 

   每一個組件包含三部分:

    HTML: 獨立的HTML片斷:

      <template id="tplxxx"></template>

      <template>是HTML5中新增的專門保存一段隱藏的HTML片斷的元素——專門爲框架保存HTML模板

    JS: <script>

      Vue.component("組件名",{

    //和new Vue()極其類似

    template:"#tplxxx", //代替了el，每建立一個組件的副本，就自動複製一次模板中的html片斷

    data:function(){//每建立一個組件的副本，就調用一次data()，爲當前組件建立專屬的模型數據data
          return {

            count:1

          }

        },

        //其他和new Vue()徹底同樣

      })

    CSS: <style> 暫時不關心

  2. 使用組件: 

   組件名其實就是一個標籤名

   只要在主內容中，添加一個<組件名></組件名>，運行時Vue就會用組件的template代替<組件名>標籤所在位置

 

 組件分類: 

  1. new Vue({ ——根組件

     el:"#app",

     data:{}

    })

  2. Vue.component("組件名",{——全局組件: 可在任何位置隨意使用的組件

      template:"#tplxxx",

      data:function(){ return {} }

    })

  3. 子組件: 僅限於在某個父組件內才能使用的組件

    如何: 3步: 

     1. 只要將Vue.component降級爲普通對象

       強調: 變量名最好是未來組件標籤名的駝峯方式

     2. 在父組件中添加components屬性: {

          子組件變量名, 子組件變量名, //ES6簡寫

        }

        Vue會將駝峯命名的組件名，轉爲小寫，並用-分隔

          好比: todoAdd -> todo-add

               todoList -> todo-list

 組件間傳遞數據: 

  父子間: 

   1. 父->子: 

    爲何: Vue中父組件的數據模型是專屬的，子組件默認不能使用父組件的數據

    解決: 2步: 

     1. 子組件: 

      var 子組件={

        template:"xxx",

        props:["變量", ... ] //聲明一個內外兩用的變量

 //對外: 父元素可爲其綁定數據

         //對內: 至關於data:{ 變量 }

      }

      <template id="tpl子組件">

        {{變量}}  <ANY :屬性="變量"

      </template>

    2. 父組件: 

     <template id="tpl父組件">

       <子組件 :變量="模型變量"></子組件>

         父組件將本身的模型變量的值傳遞給子組件的變量屬性，子組件就得到了父組件的數據

   2. 子->父: 

    1. 父組件: 在子組件身上提早定義自定義事件和處理函數: 

     <template id="tpl父組件">

       <子組件 @自定義事件="父的處理函數"//不要加()

              //當有人觸發自定義事件時，自動執行父組件中的處理函數，修改父組件本身的數據

     父組件{

       ...

       methods:{

         處理函數(形參) {//形參會收到子傳來的參數
           //操做父組件中的數據

         }

       }

     }

    2. 子組件: 

     任什麼時候候均可以: 

      this.$emit("父給子定義的事件名", 實參)

        意爲觸發父給子提早定義的事件，並自動引起執行父的處理函數。