前端笔记 - 简书

1. Css

1).使用 text-align-last 对齐两端文本

text-align-last: justify;

2).黑白图像

让你的彩色照片显示黑白照片

img.desaturate {

filter: grayscale(100%);

-webkit-filter: grayscale(100%);

-moz-filter: grayscale(100%);

-ms-filter: grayscale(100%);

-o-filter: grayscale(100%);

}

3).使用rem进行全局大小调整；使用em进行局部大小调整

在设置根目录的基本字体大小后，例如html字体大小：15px；，可以将包含元素的字体大小设置为rem

article {

font-size: 1.25rem;

}

aside {

font-size: .9rem;

}

将文本元素的字体大小设置为em

h2 {

font-size: 2em;

}

p {

font-size: 1em;

}

2.js

1).格式化金钱

const ThousandNum = num => num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");

const money = ThousandNum(20190214);

// money => "20,190,214"

2).取整

代替整数的 Math.floor()，代替负数的 Math.ceil()

const num1 = ~~ 1.69;

const num2 = 1.69 | 0;

const num3 = 1.69 >> 0;

// num1 num2 num3 => 1 1 1

3).转数值

只对 null 、"" 、false 、数值字符串有效

const num1 = +null;

const num2 = +"";

const num3 = +false;

// num1 num2 num3 num4 => 0 0 0

4).去重数组

const arr = [...new Set([0, 1, 1, null, null])];

// arr => [0, 1, null]

5).交换赋值

let a = 0;

let b = 1;

[a, b] = [b, a];

// a b => 1 0

6).创建指定长度且值相等的数组

const arr = new Array(3).fill(0);

// arr => [0, 0, 0]

7).克隆对象

const _obj = { a: 0, b: 1, c: 2 }; // 以下方法任选一种

const obj = { ..._obj };

const obj = JSON.parse(JSON.stringify(_obj));

// obj => { a: 0, b: 1, c: 2 }

3.Vue

1).路由懒加载

import Vue from 'vue'

import Router from 'vue-router'

Vue.use(Router)

const router = new Router({

routes: [

{

path: '/',

name:"home"

component: () => import("xxx")

}, {

path: '*', // 404 页面

component: () => import('./notfind')

]

})

2).页面需要导入多个组件

原来的写法

import titleCom from '@/components/home/titleCom'

import bannerCom from '@/components/home/bannerCom'

import cellCom from '@/components/home/cellCom'

components:{titleCom,bannerCom,cellCom}

利用 require.context 可以写成

const path = require('path')

const files = require.context('@/components/home', false, /\.vue$/)

const modules = {}

files.keys().forEach(key => {

const name = path.basename(key, '.vue')

modules[name] = files(key).default || files(key)

})

components:modules

API 说明

实际上是 webpack 的方法,vue 工程一般基于 webpack,所以可以使用

require.context(directory,useSubdirectories,regExp) >

接收三个参数:

directory：说明需要检索的目录

useSubdirectories：是否检索子目录

regExp: 匹配文件的正则表达式,一般是文件名

3).动态组件

做一个 tab 切换时就会涉及到组件动态加载

但是这样每次组件都会重新加载,会消耗大量性能,所以 <keep-alive> 就起到了作用

<keep-alive>

</keep-alive>

这样切换效果没有动画效果,这个也不用着急,可以利用内置的 <transition>

<keep-alive>

</keep-alive>

</transition>

4.为路径设置别名

在开发过程中，我们经常需要引入各种文件，如图片、CSS、JS 等，为了避免写很长的相对路径（../），我们可以为不同的目录配置一个别名

// vue-cli 2.x 配置

// 在 webpack.base.config.js中的 resolve 配置项，在其 alias 中增加别名

resolve: {

extensions: ['.js', '.vue', '.json'],

alias: {

'vue$': 'vue/dist/vue.esm.js',

'@': resolve('src'),

}

// vue-cli 3.x 配置

// 在根目录下创建vue.config.js

var path = require('path')

function resolve (dir) {

console.log(__dirname)

return path.join(__dirname, dir)

}

module.exports = {

chainWebpack: config => {

config.resolve.alias

.set(key, value) // key,value自行定义，比如.set('@@', resolve('src/components'))

}

自定义目录webpack

在写代码的时候，很多时候都存在这种情况：

import component1 from "../../../../component"

import component2 from "../../../../../component"

这种代码是新手很可能出现的，如果一旦出现一个层级目录出问题了，或者是文件的位置被转移过了就会出问题。看过之前我写的webpack文航的都会知道。

module.exports = {

context: path.resolve(__dirname, '../'),

entry: {

app: ['babel-polyfill', './src/main.js']

output: {},

resolve: {

extensions: ['.js', '.vue', '.json'],

alias: {

'vue$': 'vue/dist/vue.esm.js',

'@': resolve('src'),

'components': resolve('src/components'),

'pages': resolve('src/pages')

}

module: {

node: {

plugins: [],

}

在resolve->alias里面可以配置绝对相对路径，在使用的时候

import component1 from "pages/component"

import component2 from "pages/component"

5).img 加载失败

有些时候后台返回图片地址不一定能打开,所以这个时候应该加一张默认图片

// page 代码

export default{

data(){

return{

imgUrl:''

}

methods:{

handleError(e){

e.target.src=reqiure('图片路径')

}

</script>

6).全局定义

我们在写代码的时候，很有可能会封装很多库。如果存在有很多页面都在使用该库的情况，很可能会出现下面的代码：

// vue 1

import utils from "library"

// vue 2

import utils from "library"

...

// vue n

import utils from "library"

就像我封装的http方法一样，我一般会这样处理

import Vue from 'vue'

import http from "http/http"

Vue.prototype.$okhttp = http

// use

this.$okhttp

这样会节省很多没有必要的代码量

7).代理解决跨域

有些时候，在进行本地开发的时候，可能会遇到跨域的问题。为了解决这个问题呢？主要有两种方法：

1、服务器设置

服务端设置很简单，就是将本地开发的东西加上“Access-Control-Allow-Origin”, “*”,或者是直接将本地开发的ip直接设置成白名单，这样就可以了.

2、本地代理

首先引入

npm install http-proxy-middleware --save

然后在index.js的标签下proxyTable使用

'/lesson': {

target: 'http://xxx/v2/webapi/lesson', // 代理的网址

changeOrigin: true, // 允许跨域

pathRewrite: {

'^/lesson': '/'

}

使用的时候，就直接使用

axios({

method: 'get',

url:'/lesson' ,

params: qs.stringify(data)

}).then(function (res) {

if (res) {

//...

}

});

}).catch(function (error) {

console.error(error);

})

8). 页面统一判断

在开发中经常会遇到权限判断的问题，我们又不可能在每一个页面的生命周期中去判断一下，那样太消耗时间了，我的处理：

router.beforeEach((to, from, next) => {

myAccess.checkhaveAccess(to.path) === true ? next() : next('/forbid')

})

9).事件的传递：

一般来说事件的传递有很多种，比如父子之间传递数据就可以直接用props，和emit来做关联。

父组件给子组件传递

// 父组件

</parent>

data(){

return {

content:'sichaoyun'

};

}

// 子组件

props:["datas"];

// 或者是

props: {

datas: String

}

子组件给父组件传递

// 子组件

</template>

methods: {

open() {

this.$emit('showbox','the msg'); //触发showbox方法，'the msg'为向父组件传递的数据

}

// 父组件

<child @showbox="toshow" :msg="msg"></child> //监听子组件触发的showbox事件,然后调用toshow方法

methods: {

toshow(msg) {

this.msg = msg;

}

兄弟组件之间的传递一般有几种方式：

1、注册全局事件

2、 vuex

3、 localstorage

关于后面两个，我会专门来讲这个的，我主要是讲全局事件吧，代码如下：

let vm = new Vue(); //创建实例

//组件1

methods: {

ge() {

vm.$emit('click',data); //触发事件

}

//组件2

created() {

vm.$on('click', (arg) => {

});

}

10).列表渲染

v-for循环绑定model:

这个是我在一个微信公众号上面看到的写法，很新颖:

// 数据

data() {

return{

obj: {

ob: "OB",

koro1: "Koro1"

model: {

ob: "默认ob",

koro1: "默认koro1"

}

// html模板

</div>

// input就跟数据绑定在一起了，那两个默认数据也会在input中显示

11).深度watch与watch立即触发回调

这个是我偶尔在vuejs官网上面发现的，watch有两个可选参数，但是好像版本有限制，具体请移步官方文档。查看版本信息

选项：deep

在选项参数中指定 deep: true，可以监听对象中属性的变化。

选项：immediate

在选项参数中指定 immediate: true, 将立即以表达式的当前值触发回调，也就是默认触发一次。

素材摘自《前端开发小技巧（Vue、JS、CSS）》