vue過(guò)濾器的使用——日期格式化

首先，先看下官網(wǎng)對(duì)vue過(guò)濾器的介紹
vue過(guò)濾器可以用作常見(jiàn)的文本格式化（自己項(xiàng)目中的這個(gè)也是一個(gè)很好的例子）?？梢杂迷趦蓚€(gè)地方——mustache和v-bind表達(dá)式。

<!-- in mustaches -->
{{message|capitalize}}

<!-- in v-bind -->
<div v-bind:id="rowId|formatId"></div>

過(guò)濾器總接受表達(dá)式的值（之前的操作鏈的結(jié)果）作為第一個(gè)參數(shù)。

new Vue({
  // ...
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})

自己在項(xiàng)目中的運(yùn)用

<div class='mui-col-xs-8 mui-col-sm-8' id="nowDate">{{nowDate|dateFilt}}</div>

var comData = new Vue({
    el:'.appapp',
    data:{
        nowDate:''
    },
    filters:{
        //格式化時(shí)間
        dateFilt:function(value){
            var nowDate = new Date();
            value = nowDate.getFullYear() + '-' + (nowDate.getMonth() + 1) + '-' + nowDate.getDate();
            return value;
        }
    }
})

注意：過(guò)濾器只適用于一些簡(jiǎn)單的文本格式化，其他的最好還是使用計(jì)算屬性。

evalJS

主要是今天在學(xué)習(xí)的時(shí)候，用webview創(chuàng)建新的窗口后，要執(zhí)行一段js代碼，所以了解了一下。
API的解釋：在Webview窗口中執(zhí)行JS腳本。

void wobj.evalJS(js);

說(shuō)明：將js腳本發(fā)送到webview窗口中執(zhí)行，可用于實(shí)現(xiàn)webview窗口間的數(shù)據(jù)通訊。

scan.onmarked = function(type, result){
    if(result) {
        alert(result);
        scan.close();
        plus.storage.setItem('result',result);//這里使用storage來(lái)保存數(shù)據(jù)
        var wn = plus.webview.getLaunchWebview();//傳遞消息返回的webview
        wn && wn.evalJS("var result = plus.storage.getItem('result');document.querySelector('#a').innerText = result;");//引號(hào)里為指定窗口要執(zhí)行的代碼
        plus.webview.currentWebview().close();//掃碼成功，關(guān)閉當(dāng)前webview
    }
};

以上的代碼是今天實(shí)現(xiàn)二維碼的時(shí)候，網(wǎng)上的一段代碼，涉及到storage、evalJS、webview。詳細(xì)

webview的API

webview模塊管理應(yīng)用窗口界面，實(shí)現(xiàn)多窗口的邏輯控制管理操作。通過(guò)plus.webview可以獲得應(yīng)用界面管理對(duì)象。
常用

• create
  創(chuàng)建新的Webview窗口

WebviewObject plus.webview.create(url,id,styles,extras);

創(chuàng)建結(jié)束后通過(guò)show方法才能將webview窗口顯示出來(lái)。

w.show();

• 獲取當(dāng)前窗口的webviewObject對(duì)象

plus.webview.currentWebview();

storage

之前一直都聽(tīng)過(guò)這個(gè)神奇的存貯方式，沒(méi)有真正的實(shí)踐過(guò)，今天實(shí)踐了一下。感覺(jué)很神奇。

Api 的介紹：storage模塊管理應(yīng)用本地?cái)?shù)據(jù)存儲(chǔ)區(qū)，用于應(yīng)用數(shù)據(jù)的保存和讀取。應(yīng)用本地?cái)?shù)據(jù)與localStorage、sessionStorage的區(qū)別在于數(shù)據(jù)有效域不同，前者可在應(yīng)用內(nèi)跨域操作，數(shù)據(jù)存儲(chǔ)期是持久化的，并且沒(méi)有容量限制。通過(guò)plus.storage可以獲得本地?cái)?shù)據(jù)管理對(duì)象。

• getLength:獲得應(yīng)用存儲(chǔ)區(qū)中保存的鍵值對(duì)的個(gè)數(shù)
• getItem: 通過(guò)key值獲得應(yīng)用存貯的值
• setItem: 修改或添加鍵值(key-value)對(duì)數(shù)據(jù)到應(yīng)用數(shù)據(jù)存儲(chǔ)中
• removeItem: 通過(guò)key值刪除鍵值對(duì)存儲(chǔ)的數(shù)據(jù)
• clear: 清除應(yīng)用所有的鍵值對(duì)存儲(chǔ)數(shù)據(jù)

自己寫的demo
頁(yè)面1

var result1 = "Gping123";
var result2 = "hello Storage";
plus.storage.setItem('result1',result1);
plus.storage.setItem('result2',result2);

頁(yè)面2

//獲取應(yīng)用存儲(chǔ)區(qū)中保存的鍵值對(duì)的個(gè)數(shù)
var stoLen = plus.storage.getLength();
console.log(stoLen);//2

//通過(guò)key值刪除鍵值查找相關(guān)的值
var backResult = plus.storage.getItem('result1');
var backResult1 = plus.storage.getItem('result2');
console.log(backResult);//Gping123
console.log(backResult1);//hello Storage

//通過(guò)key值刪除鍵值對(duì)存儲(chǔ)的數(shù)據(jù)
plus.storage.removeItem('result1');
var backResult3 = plus.storage.getItem('result1');
var backResult4 = plus.storage.getItem('result2');
console.log(backResult3);//null
console.log(backResult4);//hello Storage
//獲取應(yīng)用存儲(chǔ)區(qū)中保存的鍵值對(duì)的個(gè)數(shù)
var stoLen = plus.storage.getLength();
console.log(stoLen);//1

//清除 應(yīng)用中所有的鍵值對(duì)應(yīng)的數(shù)據(jù)
plus.storage.clear();
var backResult3 = plus.storage.getItem('result1');
var backResult4 = plus.storage.getItem('result2');
console.log(backResult3);//null
console.log(backResult4);//null

//獲取應(yīng)用存儲(chǔ)區(qū)中保存的鍵值對(duì)的個(gè)數(shù)
var stoLen = plus.storage.getLength();
console.log(stoLen);//0

通過(guò)storage來(lái)保存數(shù)據(jù)從而進(jìn)行傳參數(shù)

plus和mui

plus 是 app 的底層運(yùn)行環(huán)境，讓 js 能夠訪問(wèn)硬件設(shè)備提供的某些功能。
MUI 是一套輕量級(jí)的前端框架，從某種意義上說(shuō)，你可以把 MUI 分為兩部分：
(1) 與 plus 無(wú)關(guān)的部分，純粹用 H5 實(shí)現(xiàn)的功能，比如大部分的 UI 組件。
(2) 對(duì) plus 進(jìn)行包裝得到的一些應(yīng)用功能，比如窗口管理、下拉刷新等。
但這兩部分并不是截然分開(kāi)的，有些功能接口在有 plus 的環(huán)境下就使用 plus，沒(méi)有 plus 就退化為用純 H5 來(lái)實(shí)現(xiàn)。

svn的一些操作

項(xiàng)目的合作只要是通過(guò)svn進(jìn)行，所以這個(gè)過(guò)程中也會(huì)慢慢總結(jié)歸納SVN的操作

SVN的commit和update

其他

要備戰(zhàn)秋招，一些知識(shí)點(diǎn)肯定不能落下
vuex
組件
vue路由

原生js的ajax請(qǐng)求

裝車流程：
搶修需求渲染——裝車物資信息渲染——取得改變后的數(shù)據(jù)放在一個(gè)數(shù)組——點(diǎn)擊確認(rèn)裝車（跳轉(zhuǎn)加將數(shù)組傳到第二個(gè)頁(yè)面）——輸入相關(guān)信息——提交——驗(yàn)證——提交表單給后臺(tái)（前面的數(shù)組還有表單內(nèi)容——放到一個(gè)對(duì)象中）

頁(yè)面寫好，等待數(shù)據(jù)過(guò)來(lái)！

驗(yàn)收流程：
搶修需求清單渲染——實(shí)際到貨設(shè)備渲染（數(shù)量可以改變）——司機(jī)信息渲染——部分驗(yàn)收（暫時(shí)存儲(chǔ)數(shù)據(jù)【存貯哪些數(shù)據(jù)？】）——全部驗(yàn)收（生成二維碼）——已生成的二維碼（一開(kāi)始這個(gè)按鈕不可點(diǎn)，這個(gè)按鈕可點(diǎn)的時(shí)候全部驗(yàn)收不可點(diǎn)）

二維碼實(shí)現(xiàn)：
A頁(yè)面到B頁(yè)面，B頁(yè)面掃描跳轉(zhuǎn)到C頁(yè)面（B頁(yè)面的掃描結(jié)果在C中處理），C返回到A頁(yè)面