vue.js - 1

時間 2019-12-05

標籤 vue.js vue 欄目 JavaScript 简体版

原文原文鏈接

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

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

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

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

事件修飾符：

.stop 阻止冒泡git
.prevent 阻止默認事件github
.capture 添加事件偵聽器時使用事件捕獲模式json
.self 只當事件在該元素自己（好比不是子元素）觸發時觸發回調axios
.once 事件只觸發一次api

在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組件

什麼是組件：組件的出現，就是爲了拆分Vue實例的代碼量的，可以讓咱們以不一樣的組件，來劃分不一樣的功能模塊，未來咱們須要什麼樣的功能，就能夠去調用對應的組件便可；組件化和模塊化的不一樣：

模塊化：是從代碼邏輯的角度進行劃分的；方便代碼分層開發，保證每一個功能模塊的職能單一；
組件化：是從UI界面的角度進行劃分的；前端的組件化，方便UI組件的重用；

全局組件定義的三種方式

使用 Vue.extend 配合 Vue.component 方法：

　　var login = Vue.extend({
     　　 template: '<h1>登陸</h1>'
   });
   Vue.component('login', login);

直接使用 Vue.component 方法：

　　Vue.component('register', {
     　　 template: '<h1>註冊</h1>'
   });

將模板字符串，定義到script標籤種：

　　<script id="tmpl" type="x-template">
     　　 <div><a href="#">登陸</a> | <a href="#">註冊</a></div>
   </script>

同時，須要使用 Vue.component 來定義組件：

　　Vue.component('account', {
     template: '#tmpl'
   });

注意：組件中的DOM結構，有且只能有惟一的根元素（Root Element）來進行包裹！

組件中展現數據和響應事件

在組件中，data須要被定義爲一個方法，例如：

　　Vue.component('account', {
     　　template: '#tmpl',
     　　data() {
       　　 return {
       　　  msg: '你們好！'
       　　 }
     　　},
     　　methods:{
       　　 login(){
      　　   alert('點擊了登陸按鈕');
     　　  }
    　　 }
   });

在子組件中，若是將模板字符串，定義到了script標籤中，那麼，要訪問子組件身上的屬性中的值，須要使用來訪問；datathis

使用`components`屬性定義局部子組件

組件實例定義方式：

　　<script>
   // 建立 Vue 實例，獲得 ViewModel
   var vm = new Vue({
     el: '#app',
     data: {},
     methods: {},
     components: { // 定義子組件
       account: { // account 組件
         template: '<div><h1>這是Account組件{{name}}</h1><login></login></div>', // 在這裏使用定義的子組件
         components: { // 定義子組件的子組件
           login: { // login 組件
             template: "<h3>這是登陸組件</h3>"
           }
         }
       }
     }
   });
 </script>