李码王-CSDN博客

原创 vue写项目三

vuex 持久化原理：利用本地缓存（localStorage sessionStorage）备份 vuex 在刷新时，去缓存中的备存来初始化 vuex中的state的数据在mutations修改 vuex的数据时，同时更新一下备份插件：vuex-persistedstatenpm i vuex-persistedstate -Simport createPersistedState from "vuex-persistedstate"// 基础用法默认使用localSt

2020-12-02 15:41:43 178

原创 vue写项目二

移动端边框倒角最好不适用百分比请求接口npm i axios -S// axios如何在vue工程化中使用// 1，直接引入直接使用import axios from 'axios'axios.get()axios.post()// main.jsimport axios from 'axios'Vue.prototype.$http = axios// 在组件中this.$http.get/post// 3单独管理// utils// 单独封装axiosconst

2020-11-25 23:54:15 121

原创 vue写项目一

前后端分离api工厂https://www.it120.cc/地址https://api.it120.cc/域名移动端布局方案flex+remflex做布局rem做单位盒子容器 flex-direction 定义主轴方向 row column row-reverse flex-wrap wrap no-wrap justify-content 定义项目在主轴的对齐方式 align-items stretch 拉伸 align-content项目 order

2020-11-24 20:10:53 149

原创 vue懒加载及vuex基础

路由懒加载好处：提升首屏打开速度原理：只有切换到对于路由的时候，路由组件的js才引入{ path:"/news", component: () => import('@/views/xxxx')}vuexvuex 是专门为vue程序设计的（vue的插件），一个集中式的应用状态管理工具，可以让状态的变化是可预测的npm i vuex -Ssrc新建store目录 store index.js import Vue from 'vue'

2020-11-23 19:07:14 381

原创 vue脚手架基础

vuecli 脚手架利用webpack 搭建了 vue 自动化开发环境官网：https://cli.vuejs.org/zh/guide/installation.html//安装cnpm i @vue/cli -g//测试vue --version分析脚手架生成项目目录结构<link rel="shortcut icon" href="xxx.ico"/>vue-demo node_modules // 项目依赖存放目录 public // 存放静态资源的目

2020-11-21 16:47:56 173

原创 vue导航守卫、导航钩子函数及滚动

导航守卫、导航钩子函数监听甚至拦截路由变化全局守卫（拦截所有的路由）// 全局前置守卫router.beforeEach((to,from,next)=>{ // to 目标路由 // from 从哪来路由 // next 拦截器不调用next()路由无法进入,next参数同router-link to属性的值，重定向地址 next()})// 全局后置守卫router.afterEach((to,from)=>{})路由独享的（定

2020-11-21 16:45:50 153

原创 vue动态路由及路由组件传参

vue动态路由及路由组件传参动态路由解决404嵌套路由命名路由命名视图（不重要）看文档编程式导航别名路由组件传参路由模式导航守卫、导航钩子函数动态路由当vue-router引入时，如果是直接script src引入的话，自动往构造函数以及原型中添加一个属性 route保存了当前路由的基础信息所有组件就可以直接通过this.route 保存了当前路由的基础信息所有组件就可以直接通过 this.route保存了当前路由的基础信息所有组件就可以直接通过this.route获取当前路由基础信息

2020-11-20 20:26:56 889

原创 vue中的axios与路由

axios// get请求// 写法1axios.get('xxxx?a=10&b=20',{ headers:{}, // params:{} // get请求传的参数，如果在url后面已经传了就不写params})// 写法2 axios.get(url,{ params:{ a:10, b:20 }, headers:{ }})// post请求axios.post(url,{a:10,b:20})// axios 综

2020-11-19 20:21:46 638

原创 vue动画过渡与过滤器

vue动画过渡与过滤器transition组件控制单组件（标签）状态切换transition结合动画混入 mixins过滤器自定义指令transition组件控制单组件（标签）状态切换注意：有一种情况可以同时写多个元素，就是使用v-if v-else-if v-else等控制前提：永远不可能同时出现两个如果想要控制列表动画（同时控制多个元素）使用 transition-group组件用法相同<transition name="ani"> <组件 v-i

2020-11-17 19:21:20 176 2

原创 vue组件的生命周期

组件的生命周期组件在初始化（new Vue（VueComponent））到最后销毁不同阶段（人–出生—死亡）hooks 生命周期钩子函数（在组件不同生命周期阶段中，自动运行的函数、方法）实例初始化beforeCreate 刚刚调用new Vue 还没有去劫持data中的数据(不能操作数据)created 实例创建完成、数据已经灌入、已经劫持data,data中的数据已经是响应式的（可以操作数据了）页面默认ajax请求函数调用最好在created中调用（在mounted也行推荐c

2020-11-16 19:51:18 203

原创 vue插槽

插槽功能：子组件在不同父组件中使用时，内部结构可以实现不一样 // 子组件中定义一个插槽（占位符） <slot/> const Child = { template:` <div> <h3>我是子组件头</h3> <slot/> <h3>我是子组件尾</h3> </div> `

2020-11-16 19:47:18 70

原创 vue组件基础

vue组件基础组件组件关系组件通信父--子 props通信子向父通信自定义事件兄弟组件通信自定义事件事件中心总线（event bus）ref组件通信（记住）$parent $childrenprovide inject组件mvvm 数据驱动组件化组件：网页上组成部分（预定义组件、自定义组件）组件语法:组件也是Vue的实例（new Vue 他有的属性组件都有） // 全局组件（挂载到Vue上，可以在任意组件以及实例的模板中使用） Vue.component(组件名,

2020-11-13 15:42:53 100

原创 vue获取dom与侦听器

vue中获取dom<div ref="a">aaa</div><span ref="b">span</span><script> const vm = new Vue({ el:"#app", mounted(){ console.log(this.$refs) /* { a:div(dom对象) b:span(dom对象)

2020-11-12 19:03:42 746 1

原创解决 vue页面刷新刚打开时闪烁问题及vue表单修饰符

解决页面刷新刚打开时闪烁问题问题原因：代码执行顺序从上往下，在 vue实例还未创建，vue还没有作用html上，此时我们模板只是单纯字符串实例作用到html，模板开始解析style [v-cloak]{ display:none; }<div v-cloak> {{ msg }} </div>在 vue 实例还未作用到html上，此时v-cloak只是一个普通的自定义属性[v-cloak]属性选择器可以选中这个元素，此时隐藏，当vue实例作用

2020-11-12 10:34:23 1117

原创 MVVM原理及虚拟dom

MVVM原理es5 Object.defineProperty(obj,‘属性’,{value:1,set:function(){},get:function(){}})注意：Object.defineProperty不兼容IE8及以下浏览器所有vue不兼容IE8及以下浏览器当我们创建一个实例（new Vue、组件），vue就会去遍历，new Vue传入的对象中的data属性（也是对象），将data这个对象中的所有的属性通过 Object.defineProperty()转换成gett

2020-11-12 10:30:01 449

原创 vue常用指令及循环

vue常用指令及循环其他常用指令条件渲染 v-if v-else-if v-elseelsev-else-if 使用场景不多列表渲染循环:class回顾：mvvmconst vm = new Vue({ el: '#app', //挂载vue data: { // 放数据 data属性会直接挂载到实例上 msg: 'xxx' }, methods: { // 用于放置实例方法直接挂载到实例上 changeMsg (){ } }}){

2020-11-10 19:20:44 130

原创初识vue

vue基础什么是vuevue雏形模板 {{ }}外部挂载vue指令什么是vue官网：https://cn.vuejs.org/是 MVVM js 渐进式视图层框架mvvm m model 数据 v view 视图 mv vm 数据改变视图会自动刷新（vm Vue实例驱动刷新）命令式将程序每一个运行步骤写出来程序运行声明式告诉计算机我要干什么（中间怎么做不管）一切以数据为核心、尽量不要操作dom(由数据驱动视图)渐进式

2020-11-09 15:30:43 91

原创 layui的用法

layui的用法layui简介layui的用法layui简介layui是经典模块化前端框架的一个网站网址：https://www.layui.com/layui的用法首先进入官网下载压缩包将压缩包解压到需要使用的文件夹内代码实例 <script> //引入layui 格式：layui.use(['需要引入的模块','需要引入的模块'],function(){ }) layui.use(['jquery','rate'],function(){

2020-11-06 19:44:17 127

原创 mongo的用法

mongo模板（模板引擎）robot 3t 可视化操作mongodbmongodbmongodb 原生sql 语句robot 3T mongodb可视化查看文档1.固值寻找2.范值寻找3.AND和OR寻找ANDORAND和OR等结合插入文档更新文档1.update()方法2.save()方法删除文档Limit与Skip方法 (结合find方法使用)LimitSkip排序上传图片功能模板（模板引擎）结构（html）结构可以直接渲染数据（jsp）node模板引擎jadepugejs 没有破坏ht

2020-11-05 20:23:00 234

原创 nodejs express知识点

express如何使用nodemon 解决服务器热加载问题设置路由请求路由携带参数（参数解析）后端路由解析参数解析get请求传参解析post请求post 请求 body 请求参数 express库默认没有这个功能中间件渐进式框架（核心包只有基础功能核心包体积特别小）body-parser后端返回给前端格式规范 restfulApiMVC路由中间件静态资源中间件express是一个nodejs的框架如何使用npm init npm install express

2020-11-03 19:47:26 240 1

原创 node模块写爬虫

node模块写爬虫爬虫获取网站图片//导入需要的模块const https = require('https')const cheerio = require('cheerio')const fs = require('fs')//定义获取图片的网站 const targetUrl = "https://www.duitang.com/category/?cat=avatar"//获取网站内容https.get(targetUrl,(res) => { res.setEnco

2020-11-02 21:23:39 183 1

原创 git的使用

git的使用git简介git的本地用法git的远程仓库用法git简介git是一个版本控制工具网站：gitee.com github.comgit的本地用法将一个本地文件夹变成仓库git init查看仓库状态git status（正在开发的源码处于工作区）将工作区的文件夹放进仓库git add 文件名（刚刚放进仓库的文件在暂存区）将暂存区的文件放进仓库中合适的位置git commit -m "形成的版本描述"查看版本记录git log回退到指定的版本g

2020-11-02 19:10:49 63

原创 node模块

node模块node模块node 常用内置模块path模块nodejs 内置的全局变量url模块http/https模块node模块nodejs 全局模块引入 const fs = require('fs') // 直接写模块名即可使用 fs.readFile(xx,xx)独立安装第三方模块（npm下载）在 node_modules下载npm i body-parser -S引入const bodyParser = require('body-parser') //

2020-11-02 16:32:48 183 2

原创 node，nvm，npm，yarn

node，nvm，npm，yarnnode 对于前端意义nvm安装以及使用复习npmyarn 包管理器node模块node 对于前端意义node：基于 chrome v8引擎 js 运行环境（独立安装的js运行环境）浏览器解析网页内核内容排版引擎解析 html/cssjs解释引擎解析jsnvm安装以及使用nvm ls 列举当前可用的node列表nvm install 6.14.4nvm use 版本复习npmnode是js 运行环境（独立安装安装到服务器上）nod

2020-11-02 11:38:09 126

qq_50220069的博客