vue后台管理系统
电商后台管理系统技术栈：Vue、Element-ui
项目演示地址：http://175.24.98.69:5000/#/login
Project：git clone https://github.com/nameYULI/vue-shop-project.git
Project setupnpm install
Compiles and hot-reloads for developmentnpm run serve
Compiles and minifies for productionnpm run build
Lints and fixes filesnpm run lint
注：本项目是之前为了学习vue，跟着视频教程写的，后台用的是刘龙宾老师搭建的后台https://www.liulongbin.top/
强大的JS技巧
Replace All我们知道string.Replace()函数只会替换第一个项目
我们还可以在这个正则表达式的末尾添加/g来替换所有内容
var example='potato potato';console.log(example.replace(/pot/,'tom'));//tomato potatoconsole.log(example.replace(/pot/g,'tom'));//tomato tomato
提取唯一值我们可以使用Set对象和扩展运算符，创建一个剔除重复值的新数组
var entries = [1,2,2,3,4,5,6,6,7,7,8,4,2,1];var unique_entries = [...new Set(entries)];console.log(unique_entries);//[1,2,3,4,5,6,7,8]
将数字转换为字符串我们只需要使用带空引号的串联运算符即可
var converted_number=5+'';console.log(conv ...
常用JS简写技巧
声明变量//longhandlet x;let y=20;//shorthandlet x,y=20;
给多个变量赋值我们可以使用数组解构来在一行中给多个变量赋值
//longhandlet a,b,c;a=5;b=9;c=20;//shorthandlet [a,b,c]=[5,9,20]
三元运算符//longhandlet marks=26;let result;if(marks>=30){ result='Pass';}else{ result='Fail';}//shorthandlet result=marks>=30?'Pass':'Fail';
赋默认值我们可以使用OR(||)短路运算来给一个变量赋默认值，如果预期值不正确的情况下
//longhandlet imagePath;let path=getImagePath;if(path!==null&&path!==undefined&&path! ...
学习git的笔记
创建git仓库我们一般是在一个空目录下创建一个git仓库，使用git init命令就可以把目录变成可以管理的仓库
mkdir learngit命令用来创建一个新的空目录；cd learngit命令用于进入这个新建的目录；pwd命令用于显示当前目录
git init命令可以将这个命令变成可以管理的仓库，执行完此命令后当前目录下就多了一个.git的目录(默认是隐藏的，可以使用ls -ah命令查看)，这个目录是git用来跟踪管理版本库的，不要手动修改这个目录里面的文件，以免破坏git仓库
$ mkdir learngit$ cd learngit$ pwd/e/yuli/learngit$ git initInitialized empty Git repository in E:/yuli/learngit/.git/
把文件添加到git仓库完成git仓库的初始化之后我们就可以把文件放到仓库中进行管理了，现在我在learngit目录下创建了一个新的文件学习git的笔记.md并在里面书写了内容
1.现在我们使用git status命令来查看git仓库的状态
$ git statusOn b ...
前端文字超长截断
超出文本用符号(省略号等)代替显示单行截断//只适用于单行文本截断 width: 100%; overflow: hidden; white-space: nowrap; //控制文本不能换行 text-overflow: ellipsis; //超出部分用省略号代替，可以自定义符号
多行截断//支持多行 overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; /* 控制显示的行数 */ line-height: 1em; max-height: 3em; /* 对不支持浏览器的弥补 */ //其中max-height: = line-height: × -webkit-line-clamp:
vue组件通信
父子组件通信
父组件通过import的方式导入子组件，并在components属性中注册，然后子组件就可以用标签的形式嵌进父组件了。
//父组件<template> <div> <h4>这里是父组件的地盘<h4> <Child></Child> //这是自定义的子组件标签 </div></template><script> import Child from '../components/Child.vue' //导入子组件 export default{ components:{Child} //注册子组件 }</script>
//子组件<template> <div> <h4>这里是子组件的地盘</h4> </div></template><scrip ...
vue实战技巧
vue生命周期前言 🙂所有的生命周期钩子自动绑定this 上下文到实例中，因此你可以访问数据，对属性和方法进行运算。这意味着不能使用箭头函数来定义一个生命周期方法(eg:created:()=>this.fetchTools() //会报错this.fetchTools 行为未定义)，因为箭头函数绑定了父上下文，因此箭头函数里的this 不指向我们的vue实例
钩子函数
#beforeCreate
初始化界面前
组件实例被创建之前，组件的属性生效之前，组件实例中还没有提升任何的成员
data、methods、computed以及watch上的数据和方法都不能被访问
#created
初始化界面后(异步请求、ssr放这里)
组件初始化完成props、methods、data、computed等 有值，还未编译模板，此时可以做一些初始数据的获取，可以通过vm.$nextTick 来访问DOM
挂载阶段还没有开始，无法操作DOM节点，在这里修改数据无法更新视图
#beforMount
渲染DOM前(异步请求)
在挂载开始之前被调用：相关的render 函数首次 ...