前言

實習一週，學到很多東西，技術上的，心態方面的，還有時間管理方面等等。我想，我會很懷念這一週的。

技術上總結

公司前端主要的技術棧是vue和mui，vue自己之前不熟悉，也是慢慢在學習之中（這對自己來講，是一個鍛鍊的機會，也是一個很大的挑戰）。mui之前也沒有接觸，所以還是很大的難度的。

mui手機端除錯

ctrl+r快捷鍵為執行和停止，可以直接使用資料線連線手機進行除錯，一開始自己的手機不行，後來又一次重啟後發現可用了（這不得不說是一個坑，我的猜想可能是重啟刪除了一些不必要的檔案）

webview實現頁面之間的互動

先放程式碼
主頁面：

var repertoryHtml = plus.webview.create("repertory_matter_gp.html", "repertoryId", {
    width: '100%',
    height: '100%',
    margin: "auto",
    scalable: false
}, {
    reqDetailId: reqDetailId,
    warehouseList: warehouseList
});

repertoryHtml.addEventListener("loaded", function () {
    repertoryHtml.show('fade-in', 300);
    repertoryHtml = null;
}, false);

解析：可以通過plus.webview.create建立一個新的頁面，其中第一個引數是頁面的路徑，第二個引數是id，第三個引數是樣式，第四個就是傳給下個頁面的引數。
第二段程式碼中，使用addEventListener監聽loaded事件，實現它的一個過渡效果。
次頁面：

//使用webview取得上一個頁面中返回的值
var currentWebview = plus.webview.currentWebview();
console.log(currentWebview.reqDetailId);
var reqDetailId = currentWebview.reqDetailId;
var warehouseList = currentWebview.warehouseList;
console.log(warehouseList);

通過webview取得上個頁面傳過來的引數，這樣的方法實現很巧妙。（實踐證明，可以穿物件還有變數，還有陣列）

//取得父頁面
var parentWebview = plus.webview.currentWebview().opener(); // 獲取父視窗webview
//通過mui.fire()方法可觸發目標視窗的自定義事件
mui.fire(parentWebview, "finishSelect", {
    responseObj: responseObj
});
mui.back();

再次通過webview將引數傳回去，注意這裡取得父頁面的方式：plus.webview.currentWebview().opener()

window.addEventListener('finishSelect', function (e) {　 //獲取引數值
            var responseObj = e.detail.responseObj;
            console.log(JSON.stringify(responseObj));
        }

通過監聽finishSelect這個事件，從而取得上個頁面傳回來的值。
關於webview，自己還是剛剛接觸，覺得是頁面傳引數的一個不錯的選擇。

vue的小知識歸納總結

建立vue例項

var vm = new Vue({
  // 選項
})

每個 Vue 例項都會代理其 data 物件裡所有的屬性
這一點很重要，也就是可以通過vue例項取得檢視中資料的重要的一步（我覺得vue這樣設計就是為了更好的實現這個效果）

Vue.nextTick(callback)

先看例子(來源是官網)

<div id="example">{{message}}</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: '123'
  }
})
vm.message = 'new message' // 更改資料
vm.$el.textContent === 'new message' // false
Vue.nextTick(function () {//DOM操作結束後執行下面的邏輯
  vm.$el.textContent === 'new message' // true
})

個人的簡單理解就是之前修改的檢視上面的資料已經執行之後，再去執行nextTick裡面的業務邏輯

vue——$set

this.$set(this.items[j], 'send', temp);
this.$set(this.items[j],'checked',true);

設定物件的屬性。如果物件是響應式的，確保屬性被建立後也是響應式的，同時觸發檢視更新。這個方法主要用於避開 Vue 不能檢測屬性被新增的限制。
注意物件不能是 Vue 例項，或者 Vue 例項的根資料物件.

個人理解：當data裡面的 物件新建立了一個屬性的時候，應該確保將這個這個屬效能夠反映到檢視上，所以要用到$set。

關於v-bind和v-model

v-bind的縮寫就是：
v-model的一個主要用法在於表單控制元件上面的建立雙向資料繫結，這個在專案總自己也猜到了大坑。

<input v-model="something">

<input
   v-bind:value="something"
   v-on:input="something = $event.target.value">

v-on

• v-on的縮寫是@
• 常用方法總結

//方法處理器
<button v-on:click="doThis"></button>
//dothis為一個方法 
//縮寫 
<button @click="doThis"></button>

• 在監聽原生 DOM 事件時，方法以事件為唯一的引數。如果使用內聯語句，語句可以訪問一個 $event 屬性： v-on:click="handle('ok', $event)"

//內聯語句
<button v-on:click="doThat('hello', $event)"></button>

零散知識

• 跳轉方法之一

window.location.href = "index.html"

• 怎樣通過url傳引數
• success ： 當請求成功時呼叫的函式。這個函式會得到一個引數：從伺服器返回的資料。當請求成功時呼叫函式，即status==200。
• complete ：當請求完成時呼叫的函式。這個函式會得到兩個引數：XMLHttpRequest物件和一個描述請求成功的型別的字串。當請求完成時呼叫函式，即status==404、403、302...。
• stringify()用於從一個物件解析出字串，parse用於從一個字串中解析出json物件

• meta標籤

  
  
  

  meta標籤

心態

• 遇到問題不可怕，不畏失敗，將重心放到解決問題上
• 不懂的虛心請教他人