前端达人 - 设计每日一贴---北京兰亭妙微/UI设计公司

172020-1

VeeValidator

语言设置

校验消息默认是英文的，定义中文或其他语言的错误提示消息




    

        

            

            

        

        

            
                import VeeValidate from 'vee-validate';
            

        

    

    

        

            

            

        

        

            
                import Vue from 'vue'
            

        

    

    

        

            

            

        

        

            
                Vue.use(VeeValidate)
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                var dict = {
            

        

    

    

        

            

            

        

        

            
                zh_CN: {
            

        

    

    

        

            

            

        

        

            
                messages: {
            

        

    

    

        

            

            

        

        

            
                required: function(field){
            

        

    

    

        

            

            

        

        

            
                return field + '不能为空！';
            

        

    

    

        

            

            

        

        

            
                },
            

        

    

    

        

            

            

        

        

            
                between: function(field){
            

        

    

    

        

            

            

        

        

            
                return field + '输入不符合设定规则！';
            

        

    

    

        

            

            

        

        

            
                },
            

        

    

    

        

            

            

        

        

            
                min : function (field,leng) {
            

        

    

    

        

            

            

        

        

            
                return field + '长度不能小于'+leng+'位';
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                };
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                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而不是请求服务器




    

        

            

            

        

        

            
                const handler = req => {
            

        

    

    

        

            

            

        

        

            
                return {mock数据};
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                Mock.mock('url拦截规则,正则表达式',handler)

配置延迟时间

模拟服务器请求的异步特性




    

        

            

            

        

        

            
                Mock.setup({
            

        

    

    

        

            

            

        

        

            
                timeout:1000
            

        

    

    

        

            

            

        

        

            
                })

Vuex

模块化

多人协作，或者中大型的项目需要把store分为模块




    

        

            

            

        

        

            
                const a = {
            

        

    

    

        

            

            

        

        

            
                 state : {foo:1},
            

        

    

    

        

            

            

        

        

            
                mutations : {hello(state)=> {}}，
            

        

    

    

        

            

            

        

        

            
                modules : {
            

        

    

    

        

            

            

        

        

            
                 ...嵌套
            

        

    

    

        

            

            

        

        

            
                 }
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                const b = {}
            

        

    

    

        

            

            

        

        

            
                const store = {
            

        

    

    

        

            

            

        

        

            
                 state : {},
            

        

    

    

        

            

            

        

        

            
                mutations : {},
            

        

    

    

        

            

            

        

        

            
                actions : {},
            

        

    

    

        

            

            

        

        

            
                modules : {
            

        

    

    

        

            

            

        

        

            
                 module_name_a:a,
            

        

    

    

        

            

            

        

        

            
                 module_name_b:b
            

        

    

    

        

            

            

        

        

            
                 }
            

        

    

    

        

            

            

        

        

            
                }

在调用的时候，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




    

        

            

            

        

        

            
                const store = {
            

        

    

    

        

            

            

        

        

            
                modules : {
            

        

    

    

        

            

            

        

        

            
                namespace : true,
            

        

    

    

        

            

            

        

        

            
                a: {
            

        

    

    

        

            

            

        

        

            
                muations : {
            

        

    

    

        

            

            

        

        

            
                test(state) => {...}
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                }

这时候调模块内的mutation

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

vuejs-datepicker

日期选择控件

设置默认值

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

日期格式化

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

语言选择（默认是英文）

导入语言资源文件，然后再设置:language

设置成中文

评论(0) 浏览(2571)

022020-1

一、建立一个库

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的三个区

1、工作区：本地编写代码的地方叫工作区

2、暂存区：工作区改好的代码先提交到暂存区，然后由暂存区将代码提交到版本库

- 作为过渡层

- 避免误操作

- 保护工作区和版本区

- 分支处理

评论(0) 浏览(3007)

022020-1

TypeScript

前端达人

TypeScript是什么

Type+EcmaScript6

TypeScript是JavaScript的强类型版本。然后在编译期去掉类型和特有语法，生成纯粹的JavaScript代码。由于最终

在浏览器中运行的仍然是JavaScript, 所以TypeScript并不依赖于浏览器的支持，也并不会带来兼容性问题。

TypeScript是JavaScript的超集，这意味着他支持所有的JavaScript语法。并在此之上对JavaScript添加了- -些扩

展，如class / interface / module等。这样会大大提升代码的可阅读性。

和JavaScript若类型不同，TypeScript这种强类型语言最大的优势在于静态类型检查,可以在代码开发阶段就预知一

些低级错误的发生。

●-种类似于JavaScript的语言，在JavaScript的基础之上增加了类型，同时增强了JavaScript部分语法功能

●遵循EcmaScript 6标准规范

●由微软开发

●Angular2框架采用TypeScript编写

●背后有微软和谷歌两大公司支持

●TypeScript可以编译成Javascript从而在支持Javascript的环境中运行

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

javascript 是动态的

可以在执行阶段重新赋值不同的类型数据

.ts 后缀表示一个TypeScript文件

Typescript兼容es6

TypeScript为javascript增加了类型的概念

Typescript是强类型一旦定义数据的类型不能动态修改这样帮我们在开发阶段避免很多低级错误

评论(0) 浏览(2536)

022020-1

echarts数据动态更新和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);

评论(0) 浏览(6070)

112019-12

Vue 数据持久化

前端达人

方法一：使用 localStorage 存储数据

window.localStorage.setItem(key，value)

方法二：使用 vuex-persistedstate插件

vuex 存在一个痛点，就是刷新以后vuex里面存储的state就会被浏览器释放掉（state都是存储在内存中的）。

办法：

通过vuex-persistedstate插件，实现将数据存储到本地。

1.实现

import createPersistedState from 'vuex-persistedstate'
export default new Vuex.Store({
state:{},
getters:{},
actions:{},
mutations:{},
modules:{},
plugins: [createPersistedState()] //加上这个就可以了 //里面设置需要缓存的内容
})

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: {

}
})

评论(0) 浏览(2896)

102019-12

vue使用路由进行页面跳转时传递参数

前端达人

一. 通过router-link进行跳转

<router-link

:to="{

path: 'yourPath',

params: {

name: 'name',

dataObj: data

},

query: {

name: 'name',

dataObj: data

}

}">

</router-link>

二. 通过编程导航 $router进行路由跳转

1.路径后拼接参数

通过路径后直接拼接来传递参数

getDescribe(id) {

// 直接调用$router.push 实现携带参数的跳转

this.$router.push({

path: /describe/${id},

})

对应路由配置

注意:此方法需要修改对应路由配置,需要在path中添加/:id来对应 $router.push 中path携带的参数。

{

path: '/describe/:id',

name: 'Describe',

component: Describe

}

获取传递的参数值

this.$route.params.id

通过params来传递参数

传递参数

通过路由属性中的name来确定匹配的路由，通过params来传递参数。

this.$router.push({

name: 'Describe',

params: {

id: id

}

})

对应路由配置

注意这里不能使用:/id来传递参数了，因为已经使用params来携带参数了。

{

path: '/describe',

name: 'Describe',

component: Describe

}

获取参数

this.$route.params.id

1
通过query来传递参数

传递参数

使用path来匹配路由，然后通过query来传递参数

这种情况下 query传递的参数会显示在url后面?id=？

this.$router.push({

path: '/describe',

query: {

id: id

}

})

对应路由配置

{

path: '/describe',

name: 'Describe',

component: Describe

}

获取参数

this.$route.query.id

评论(0) 浏览(3487)

首页

vue相关配置

VeeValidator

Mock.js

Vuex

vuejs-datepicker

git学习记录

TypeScript

echarts数据动态更新和dataZoom被重置的解决方案

Vue 数据持久化

vue使用路由进行页面跳转时传递参数

分类

日历

链接

个人资料

存档