首頁

vue相關配置

前端達人

VeeValidator

語言設置

校驗消息默認是英文的,定義中文或其他語言的錯誤提示消息


  1. import VeeValidate from 'vee-validate';
  2. import Vue from 'vue'
  3. Vue.use(VeeValidate)
  4. var dict = {
  5. zh_CN: {
  6. messages: {
  7. required: function(field){
  8. return field + '不能為空!';
  9. },
  10. between: function(field){
  11. return field + '輸入不符合設定規(guī)則!';
  12. },
  13. min : function (field,leng) {
  14. return field + '長度不能小于'+leng+'位';
  15. }
  16. }
  17. }
  18. };
  19. VeeValidate.Validator.localize('zh_CN', dict.zh_CN);

校驗的時候需要設置語言

this.$validator.localize('zh_CN');

錯誤消息顯示

顯示指定字段的第一個錯誤

this.$validator.first('fieldname')

顯示所有字段的第一個錯誤消息

this.$validator.errors.all()

Mock.js

配置

路由攔截配置不需要修改之前的代碼,匹配的url請求會直接通過mock而不是請求服務器


  1. const handler = req => {
  2. return {mock數(shù)據(jù)};
  3. }
  4. Mock.mock('url攔截規(guī)則,正則表達式',handler)

配置延遲時間

模擬服務器請求的異步特性


  1. Mock.setup({
  2. timeout:1000
  3. })

Vuex

模塊化

多人協(xié)作,或者中大型的項目需要把store分為模塊


  1. const a = {
  2. state : {foo:1},
  3. mutations : {hello(state)=> {}},
  4. modules : {
  5. ...嵌套
  6. }
  7. }
  8. const b = {}
  9. const store = {
  10. state : {},
  11. mutations : {},
  12. actions : {},
  13. modules : {
  14. module_name_a:a,
  15. module_name_b:b
  16. }
  17. }

在調用的時候,state 有命名空間的,而mutation和actions都與父模塊共用同樣的命名空間所以不能定義與父模塊同名的mutation 或 action

獲取模塊的state

 this.$store.state.module_name_a.foo

調用模塊的mutation

this.$store.commit('hello')

namespace

定義了namespace ,mutations 和 action 會帶上模塊的命名: module_name/muation


  1. const store = {
  2. modules : {
  3. namespace : true,
  4. a: {
  5. muations : {
  6. test(state) => {...}
  7. }
  8. }
  9. }
  10. }

這時候調模塊內(nèi)的mutation

this.$store.commit('a/test')

vuejs-datepicker

日期選擇控件

設置默認值

 <datepicker v-model="mydate" </datepicker> 

日期格式化

<datepicker :format="'yyyy-MM-dd'"> </datepicker> 

語言選擇(默認是英文)

導入語言資源文件,然后再設置:language

設置成中文


git學習記錄

前端達人

一、建立一個庫



1、git clone [url]    // 克隆代碼



2、設置貢獻者



      git config --global user.name ""   // 設置當前本地庫username



      git config --global user.email "
"   // 設置當前本地庫useremail



      git config --global user.email   // 查看當前本地庫useremail



      git config --list   // 查看所以配置項

二、git的三個區(qū)

1、工作區(qū):本地編寫代碼的地方叫工作區(qū)

2、暫存區(qū):工作區(qū)改好的代碼先提交到暫存區(qū),然后由暫存區(qū)將代碼提交到版本庫

     - 作為過渡層

     - 避免誤操作

     - 保護工作區(qū)和版本區(qū)

     - 分支處理


TypeScript

前端達人

TypeScript是什么

Type+EcmaScript6

TypeScript是JavaScript的強類型版本。然后在編譯期去掉類型和特有語法,生成純粹的JavaScript代碼。由于最終

在瀏覽器中運行的仍然是JavaScript, 所以TypeScript并不依賴于瀏覽器的支持,也并不會帶來兼容性問題。

TypeScript是JavaScript的超集,這意味著他支持所有的JavaScript語法。并在此之上對JavaScript添加了- -些擴

展,如class / interface / module等。這樣會大大提升代碼的可閱讀性。

和JavaScript若類型不同,TypeScript這種強類型語言最大的優(yōu)勢在于靜態(tài)類型檢查,可以在代碼開發(fā)階段就預知一

些低級錯誤的發(fā)生。

●-種類似于JavaScript的語言,在JavaScript的基礎之上增加了類型,同時增強了JavaScript部分語法功能

●遵循EcmaScript 6標準規(guī)范

●由微軟開發(fā)

●Angular2框架采用TypeScript編寫

●背后有微軟和谷歌兩大公司支持

●TypeScript可以編譯成Javascript從而在支持Javascript的環(huán)境中運行

●TypeScript和javascript的關心就好比less和css的關系



javascript 是動態(tài)的

可以在執(zhí)行階段重新賦值不同的類型數(shù)據(jù)

.ts 后綴表示一個TypeScript文件

Typescript兼容es6

TypeScript為javascript增加了類型的概念

Typescript是強類型 一旦定義數(shù)據(jù)的類型 不能動態(tài)修改這 樣幫我們在開發(fā)階段避免很多低級錯誤

echarts數(shù)據(jù)動態(tài)更新和dataZoom被重置的解決方案

前端達人

1.全局綁定滾輪事件,獲得dataZoom的位置:



myChart.on('dataZoom',function(event){

    if(event.batch){

    start=event.batch[0].start;

    end=event.batch[0].end;

    }else{

    start=event.start;

    end=event.end;

    };

});

2.把的start和end賦值給要更新的option



window.setInterval(function () {

    num=Math.random()*num+100;

data0.splice(0,1);

data0.push(num);

 

option.dataZoom[0].start=start;

option.dataZoom[0].end=end;

myChart.setOption(option);    

},3000);

Vue 數(shù)據(jù)持久化

前端達人

方法一:使用 localStorage 存儲數(shù)據(jù)

window.localStorage.setItem(key,value)

 

方法二:使用 vuex-persistedstate插件

vuex 存在一個痛點,就是刷新以后vuex里面存儲的state就會被瀏覽器釋放掉(state都是存儲在內(nèi)存中的)。

辦法:

通過vuex-persistedstate插件,實現(xiàn)將數(shù)據(jù)存儲到本地。

1.實現(xiàn)

import createPersistedState from 'vuex-persistedstate'
export default new Vuex.Store({
    state:{},
    getters:{},
    actions:{},
    mutations:{},
    modules:{},
    plugins: [createPersistedState()]  //加上這個就可以了 //里面設置需要緩存的內(nèi)容
})

API:  https://www.npmjs.com/package/vuex-persistedstate

方法三: 使用vue-cookie插件

cookie 可以設置過期時間

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex)
var VueCookie = require('vue-cookie');

export default new Vuex.Store({
  state: {
    token: VueCookie.get('token')
  },
  mutations: {
    saveToken(state, token) {
      state.token = token;
      // 設置存儲
      VueCookie.set('token', token, { expires: '30s' });
    }
  },
  actions: {

  }
})

vue使用路由進行頁面跳轉時傳遞參數(shù)

前端達人

一. 通過router-link進行跳轉

<router-link

:to="{

path: 'yourPath',

    params: {

    name: 'name',

        dataObj: data

},

query: {

    name: 'name',

        dataObj: data

}

}">

</router-link>

二. 通過編程導航 $router進行路由跳轉

1.路徑后拼接參數(shù)

通過路徑后直接拼接來傳遞參數(shù)



getDescribe(id) {

// 直接調用$router.push 實現(xiàn)攜帶參數(shù)的跳轉

        this.$router.push({

          path: /describe/${id},

        })



對應路由配置

注意:此方法需要修改對應路由配置,需要在path中添加/:id來對應 $router.push 中path攜帶的參數(shù)。



 {

     path: '/describe/:id',

     name: 'Describe',

     component: Describe

   }



獲取傳遞的參數(shù)值



this.$route.params.id

  1. 通過params來傳遞參數(shù)

    傳遞參數(shù)

    通過路由屬性中的name來確定匹配的路由,通過params來傳遞參數(shù)。



     this.$router.push({

              name: 'Describe',

              params: {

                id: id

              }

            })



    對應路由配置

    注意這里不能使用:/id來傳遞參數(shù)了,因為已經(jīng)使用params來攜帶參數(shù)了。



    {

         path: '/describe',

         name: 'Describe',

         component: Describe

       }



    獲取參數(shù)



    this.$route.params.id

    1
  2. 通過query來傳遞參數(shù)

    傳遞參數(shù)

    使用path來匹配路由,然后通過query來傳遞參數(shù)

    這種情況下 query傳遞的參數(shù)會顯示在url后面?id=?



    this.$router.push({

              path: '/describe',

              query: {

                id: id

              }

            })



    對應路由配置



     {

         path: '/describe',

         name: 'Describe',

         component: Describe

       }



    獲取參數(shù)



    this.$route.query.id




日歷

鏈接

個人資料

藍藍設計的小編 http://m.sillybuy.com

存檔