佘小傲、-CSDN博客

原创 grid网格布局的一些方法和属性

最近发现了一种比较好用的css布局grid网格布局，下面就是使用的方法以及一些属性display:grid;开启网格布局 grid-template-columns：100px 100px; 属性定义网格布局中的列数，并可定义每列的宽度。可以使用 1fr 这是 grid 独有的 grid-template-columns: repeat(2,1fr) 第一个参数重复的次数第二个参数宽 grid-template-rows 属性定义每列的高度。 grid-column-gap

2021-06-28 20:47:52 254

原创 vue3的vuex使用的步骤

在vue3中使用vue2中的写法也可以但是这里我们使用组合api来使用vuex的数据和各种方法打开store中的index.js 代码如下// 可以看出与vue2的写法有些区别，但是用法一样// 但是需要注意的是如果在创建项目时没有安装vuex 则需要自己安装安装命令是 npm install vuex@next --save 这里需要注意命令的不同安装的版本就不同import { createStore } from 'vuex'export default createStore({

2021-06-28 20:40:11 852

原创 vue3的命令打包问题

有些情况下我们需要定义全局方法然而在vue3.0中我们定义全局方法需要在globalProperties上面定义大部分情况下还是可以定义在main.js中的我们这里就以定义在main.js中为例// 这里我们就简单的随便添加一个属性 import { createApp } from 'vue' import App from './App.vue' import router from './router' import store from './store' let app = cre

2021-06-28 20:33:13 337

原创 vue3中的model的改动

本来想着在vue3.X版本的项目中封装一个input组件，由于2.0中封装的收到擒来也就没有仔细去看文档最后导致效果怎么也实现不了，这就是不仔细看文档的代价吧，这里来说一下这个问题在vue3.0版本中对v-model的改动个人认为还是挺大的这里就以封装一个input组件为例第一步在components文件夹中创建一个myInput.vue文件代码如下 <template> <div> <input type="text" :value="mo

2021-06-04 15:09:00 390

原创 vue3使用vant组件库所用到的降级命令

创建项目vue create yxsc_project安装vant 组件库第一步安装命令 npm install vant@next --save (因为使用的是vue3.x 所以要安装vant的针对vue3的版本 vant@next)第二部vant的进阶使用通过 npm install postcss postcss-pxtorem --save-dev (用来将px尺寸转化为rem尺寸)配置rem的根元素字体大小安装lib-flexiable 安装命令 npm i amfe-flexi

2021-05-31 14:35:44 1034

原创 vue中的双向数据绑定

vue的双向数据绑定是通过劫持订阅者开发者来实现的，主要使用的是vuex里面的v-model，给属性添加上getter，和setter来监听数据变化，如果数据的getter发生改变的话，那么视图就会跟随着数据的改变而改变，或者就是视图发生改变，数据跟随着视图的改变而改变我们常见的双向数据绑定分为4步第一步：*就是对observer的数据进行递归遍历，给每一个属性都添加上getter和setter属性，用来监听数据的变化***第二步：***就是对compile进行解析，将compile模板...

2021-05-28 16:15:59 107

原创 react路由的嵌套传参

因为react的嵌套路由跟vue比就像屎一样不好写所以在使用的时候建议使用react-router-config来配置路由会相对轻松第一步先安装路由依赖yarn add react-router-dom --saveyarn add react-router-config --save12第二部配置路由文件新建一个routes.js文件新建pages文件夹和home组件about组件及page2组件 import React from 'react'; impor...

2021-05-28 15:55:39 151 1

原创 vue的命令打包

在开发过程中vue项目打包是需要做一些性能优化的，这里写了关于我知道的要做的优化的部分，废话不多说直接上代码了，仅供参考欢迎提出意见const UglifyJsPlugin = require('uglifyjs-webpack-plugin')const path = require('path')// 开启Gzip需要的依赖 yarn add compression-webpack-plugin -Dconst CompressionWebpackPlugin = require('compr

2021-05-28 15:51:51 1069

原创 vue中的深浅拷贝

话不多说直接上代码了<script> var obj = { // 定义要进行深复制的对象 name: "张三", age: 14, tel: 110, info: { isSingle: true } } // 定义深复制的函数 function deepClone(param...

2021-05-28 15:46:17 374

weixin_51997912的博客