vue.js_ZenDei技術網路在線

最近開發公司vue前端項目，做一下筆記，偶爾上來查漏補缺 Vue指令之v-bind的三種用法直接使用指令v-bind 使用簡化指令: 在綁定的時候，拼接綁定內容：:title="btnTitle + ', 這是追加的內容'" Vue指令之v-on的縮寫和事件修飾符事件修飾符： .stop 阻止冒 ...

最近開發公司vue前端項目，做一下筆記，偶爾上來查漏補缺

Vue指令之`v-bind`的三種用法

直接使用指令v-bind
使用簡化指令:
在綁定的時候，拼接綁定內容：:title="btnTitle + ', 這是追加的內容'"

Vue指令之`v-on的縮寫`和`事件修飾符`

事件修飾符：

.stop 阻止冒泡
.prevent 阻止預設事件
.capture 添加事件偵聽器時使用事件捕獲模式
.self 只當事件在該元素本身（比如不是子元素）觸發時觸發回調
.once 事件只觸發一次

在Vue中使用樣式

使用class樣式

數組

<h1 :class="['red', 'thin']">這是一個H1</h1>

數組中使用三元表達式

<h1 :class="['red', 'thin', isactive?'active':'']">這是一個H1</h1>

數組中嵌套對象

<h1 :class="['red', 'thin', {'active': isactive}]">這是一個H1</h1>

直接使用對象

<h1 :class="{red:true, italic:true, active:true, thin:true}">這是一個H1</h1>

使用內聯樣式

直接在元素上通過 :style 的形式，書寫樣式對象

<h1 :style="{color: 'red', 'font-size': '40px'}">這是一個善良的H1</h1>

將樣式對象，定義到 data 中，並直接引用到 :style 中

在data上定義樣式：

data: {
        h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' }
}

在元素中，通過屬性綁定的形式，將樣式對象應用到元素中：

<h1 :style="h1StyleObj">這是一個善良的H1</h1>

在 :style 中通過數組，引用多個 data 上的樣式對象

在data上定義樣式：

data: {
        h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' },
        h1StyleObj2: { fontStyle: 'italic' }
}

在元素中，通過屬性綁定的形式，將樣式對象應用到元素中：

<h1 :style="[h1StyleObj, h1StyleObj2]">這是一個善良的H1</h1>

Vue指令之`v-for`和`key`屬性

迭代數組

　　<ul>
 　　 <li v-for="(item, i) in list">索引：{{i}} --- 姓名：{{item.name}} --- 年齡：{{item.age}}</li>
　　</ul>

迭代對象中的屬性

    <!-- 迴圈遍歷對象身上的屬性 -->

    <div v-for="(val, key, i) in userInfo">{{val}} --- {{key}} --- {{i}}</div>

迭代數字

　　<p v-for="i in 10">這是第 {{i}} 個P標簽</p>

2.2.0+ 的版本里，當在組件中使用 v-for 時，key 現在是必須的。

過濾器

概念：Vue.js 允許你自定義過濾器，可被用作一些常見的文本格式化。過濾器可以用在兩個地方：mustache 插值和 v-bind 表達式。過濾器應該被添加在 JavaScript 表達式的尾部，由“管道”符指示；

私有過濾器

HTML元素：

　　<td>{{item.ctime | dataFormat('yyyy-mm-dd')}}</td>

私有 filters 定義方式：　　filters: { // 私有局部過濾器，只能在當前 VM 對象所控制的 View 區域進行使用


dataFormat(input, pattern = "") { // 在參數列表中 通過 pattern="" 來指定形參預設值，防止報錯

      var dt = new Date(input);

      // 獲取年月日

      var y = dt.getFullYear();

      var m = (dt.getMonth() + 1).toString().padStart(2, '0');

      var d = dt.getDate().toString().padStart(2, '0');


      // 如果 傳遞進來的字元串類型，轉為小寫之後，等於 yyyy-mm-dd，那麼就返回 年-月-日

      // 否則，就返回  年-月-日 時：分：秒

      if (pattern.toLowerCase() === 'yyyy-mm-dd') {

        return `${y}-${m}-${d}`;

      } else {

        // 獲取時分秒

        var hh = dt.getHours().toString().padStart(2, '0');

        var mm = dt.getMinutes().toString().padStart(2, '0');

        var ss = dt.getSeconds().toString().padStart(2, '0');

        return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;

      }

    }

  }

使用ES6中的字元串新方法 String.prototype.padStart(maxLength, fillString='') 或 String.prototype.padEnd(maxLength, fillString='')來填充字元串；

全局過濾器

// 定義一個全局過濾器

Vue.filter('dataFormat', function (input, pattern = '') {

  var dt = new Date(input);

  // 獲取年月日

  var y = dt.getFullYear();

  var m = (dt.getMonth() + 1).toString().padStart(2, '0');

  var d = dt.getDate().toString().padStart(2, '0');



  // 如果 傳遞進來的字元串類型，轉為小寫之後，等於 yyyy-mm-dd，那麼就返回 年-月-日

  // 否則，就返回  年-月-日 時：分：秒

  if (pattern.toLowerCase() === 'yyyy-mm-dd') {

    return `${y}-${m}-${d}`;

  } else {

    // 獲取時分秒

    var hh = dt.getHours().toString().padStart(2, '0');

    var mm = dt.getMinutes().toString().padStart(2, '0');

    var ss = dt.getSeconds().toString().padStart(2, '0');



    return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;

  }

});

註意：當有局部和全局兩個名稱相同的過濾器時候，會以就近原則進行調用，即：局部過濾器優先於全局過濾器被調用！

vue實例的生命周期

什麼是生命周期：從Vue實例創建、運行、到銷毀期間，總是伴隨著各種各樣的事件，這些事件，統稱為生命周期！
生命周期鉤子：就是生命周期事件的別名而已；
生命周期鉤子 = 生命周期函數 = 生命周期事件
主要的生命周期函數分類：

創建期間的生命周期函數：

beforeCreate：實例剛在記憶體中被創建出來，此時，還沒有初始化好 data 和 methods 屬性
created：實例已經在記憶體中創建OK，此時 data 和 methods 已經創建OK，此時還沒有開始編譯模板
beforeMount：此時已經完成了模板的編譯，但是還沒有掛載到頁面中
mounted：此時，已經將編譯好的模板，掛載到了頁面指定的容器中顯示

運行期間的生命周期函數：

beforeUpdate：狀態更新之前執行此函數，此時 data 中的狀態值是最新的，但是界面上顯示的數據還是舊的，因為此時還沒有開始重新渲染DOM節點
updated：實例更新完畢之後調用此函數，此時 data 中的狀態值和界面上顯示的數據，都已經完成了更新，界面已經被重新渲染好了！

銷毀期間的生命周期函數：

beforeDestroy：實例銷毀之前調用。在這一步，實例仍然完全可用。
destroyed：Vue 實例銷毀後調用。調用後，Vue 實例指示的所有東西都會解綁定，所有的事件監聽器會被移除，所有的子實例也會被銷毀。

vue-resource 實現 get, post, jsonp請求

除了 vue-resource 之外，還可以使用 axios 的第三方包實現實現數據的請求

之前的學習中，如何發起數據請求？
常見的數據請求類型？ get post jsonp
測試的URL請求資源地址：

get請求地址： http://vue.studyit.io/api/getlunbo
post請求地址：http://vue.studyit.io/api/post
jsonp請求地址：http://vue.studyit.io/api/jsonp

JSONP的實現原理

由於瀏覽器的安全性限制，不允許AJAX訪問協議不同、功能變數名稱不同、埠號不同的數據介面，瀏覽器認為這種訪問不安全；
可以通過動態創建script標簽的形式，把script標簽的src屬性，指向數據介面的地址，因為script標簽不存在跨域限制，這種數據獲取方式，稱作JSONP（註意：根據JSONP的實現原理，知曉，JSONP只支持Get請求）；
具體實現過程：

先在客戶端定義一個回調方法，預定義對數據的操作；
再把這個回調方法的名稱，通過URL傳參的形式，提交到伺服器的數據介面；
伺服器數據介面組織好要發送給客戶端的數據，再拿著客戶端傳遞過來的回調方法名稱，拼接出一個調用這個方法的字元串，發送給客戶端去解析執行；
客戶端拿到伺服器返回的字元串之後，當作Script腳本去解析執行，這樣就能夠拿到JSONP的數據了；

vue.js

Vue指令之v-bind的三種用法

Vue指令之v-on的縮寫和事件修飾符