vue的常用知识

_.findLast([1, 2, 3, 4], function(n) {
return n % 2 == 1;
});
// => 3
// 从右开始找 %2==1的哪一项 并返回 没找到返回 undefined。

数组1.some(item => 数组2.includes(item));
// 条件是 数组1 中有数组2的item
// 满足条件 返回true
// 数组.some(条件 ) 检查。如果满足条件返回 true，否则false。
// 数组.includes(2) 是否包含2，如果是返回 true，否则false。

res.data.forEach(item => {
item.attr_vals =
item.attr_vals.length === 0 ? [] : item.attr_vals.split(’,’)
})
循环res.data的每项
如果其中 项 某个值为空 返回空 值为字符串 使用,隔开并返回
forEach()和map()的区别
一、相同点：
都是循环遍历数组中的每一项
forEach和map方法里每次执行匿名函数都支持3个参数，参数分别是item（当前每一项）、index（索引值）、arr（原数组）
匿名函数中的this都是指向window
只能遍历数组
array.map(function(item,index,arr){},this)
Array.forEach(function(item,index,arr){},this)
二、区别：
1.forEach()
没有返回值。
2.map()
有返回值，可以return 出来。
var arr = [1,23,3];
arr.map(function(value,index,array){
　　//do something
　　return XXX
})

运行依赖
深拷贝 lodash _.co 合并两个对象 _.merge(1,2)
inport co from 'lodash/co’此种方式只打包co
上面方式 整个lodash都会打包 打包优化
也可以在 webpack 配置 按需加载…

富文本vue-quill_editor
树形表格组件 vue-table-with-tree-grid
加载网页读取条 nprogress 与axios配合显示和隐藏进度条

created
methods
mounted dom节点渲染后使用echarts
undate 数据加载后
destroyed 销毁时
activated 离开时
deactinated 进入时

开发依赖
babel-piugin-transfrom-remove-console
babel的一个插件(piugin) 后面才是真正的名字
还有一个插件html 通过args 做到开发/发布模式不同显示不同标题
还一个 syntax-dynamic-import 懒加载插件

pm2 管理工具 查看项目 pm2 ls 启动项目 pm2 start脚本 --name自定义名称 重启项目: pm2 restart自定义名称
停止项目pm2 stop自定义名称 删除项目pm2 delete自定义名称

gzip压缩 安装compression包

‘space-before-function-paren’:0
.prettierrc
{
“semi”:false,
“singleQuote”:true
}

// 根据Id查找对应项的索引
const i = state.list.findIndex(x => x.id === id)
// 根据索引, 删除对应的元素
if (i !== -1) {
state.list.splice(i, 1)
}
// 根据Id查找对应项 找到第一个后会停止
const i = state.list.find(x => x.id === id)
返回的是x 上面返回的是x的下标 没找到就是undefind

//过滤出等于false的 返回一个数组
state.list.filter(x => x.done === false).length
//forEach循环 循环到每一项 并对其进行操作
res.data.forEach(item => {
item.attr_vals =
item.attr_vals.length === 0 ? [] : item.attr_vals.split(’,’)
})

git remote add origin git@github.com:1294945369/testmall.git
git push -u origin main

isActive () {
// home -> itme1(/home) = true
// home -> itme1(/category) = false
// home -> itme1(/cart) = false
// home -> itme1(/profile) = false
return this.$router.path.indexOf(this.path) !== -1
}
如果indexOf==-1说明从这里面没有找到这个字符串 返回的是数组下标

把事件发出去
x () {
console.log(‘回到顶部’)
this.$emit(‘自定义事件名’)
}

// 使用 在p监听到事件 这是父子 隔远了需要用到事件总线 $bus 详见下文
<back-top @自定义事件名=“被调用函数” />

this.KaTeX parse error: Expected '}', got 'EOF' at end of input: … index) { this.emit(‘tab’, {data: item,index: index})}

@tab=‘tab’>

methods: {
tab({data,index}) {},

让移动端滑动不卡顿 better-scroll
npm install better-scroll --save

获取节点的方式
this.$refs.aaaa ref=“aaaa”
document.getElementById(“wrapper”) id=“wrapper”
document.querySelector(’.btn’) class=“btn”
获取节点后事件监听触发
.addEventListener(‘click’, function () {
console.log(1);
})

监听组件的事件 原生
@click.native=“backClick”

事件总线
Vue.prototype.$bus = new Vue()

<img :src=“goodsItem.show.img” alt="" @load=“imageLoad” />

imageLoad () {
this.$bus.$emit(‘itemImageLoad’)
}

this.$bus.$on(‘itemImageLoad’, () => {
console.log(’-------------------------’)
})

防抖 节流
const refresh = this.debounce(
this.KaTeX parse error: Expected 'EOF', got '&' at position 13: refs.scroll &̲& this.refs.scroll.refresh,
200
)
debounce (func, delay) {
let timer = null
return function (…args) {
if (timer) clearTimeout(timer)
timer = setTimeout(() => {
func.apply(this, args)
}, delay)

this.$nextTick(() => {})
下一步 与setTimeout类似

判断对象是否为空 适用于数据未加载v-if为不渲染
v-if=“Object.keys(commentInfo).length !== 0”

返回上一级
backClick () {
this.$router.back()//this.$router.go(-1)
}
获取ref="params"组件距离顶部的高度
this.$refs.params.$el.offsetTop
不是组件不用$elthis.$refs.nav.currentIndex = this.currentIndex
获取子组件中data的值也不需要$el

// 判断, 所有的图片都加载完了, 那么进行一次回调就可以了
watch监听 peops的数据,名 取得this.imgesLength
再让this.counter从零++
goodsInfoImgLoad () {
if (++this.counter === this.imgesLength) {
this.$emit(‘goodsInfoImgLoad’)
}

watch: {
goodsInfo () {
// 获取图片的个数
this.imgesLength = this.goodsInfo.detailImage[0].list.length
}
}
props: {
goodsInfo: {
type: Object,
default () {
return {}
比防抖还好使用

*1 将其转换 数字

• “” 将其转换 字符串

for遍历写法
有+1 没有加商品
addCart (state, payload) {
// payload新添加的商品
let oldProduct = null
for (const item of state.cartList) {
if (item.iid === payload.iid) {
oldProduct = item
}
}

  //  2. 判断oldProduct  有+1 没有加商品
  if (oldProduct) {
    oldProduct.count += 1
  } else {
    payload.count = 1
    state.cartList.push(payload)
  }
}

还能这么接受传参 可以对传过来的参数解构赋值

x({c,g}){

}

scoped 虽然阻止了样式的扩散 但无法阻止类名
理论上 vue是单页应用 意味着 任何组件位置
即使不写也不存在这个类名
都可以在样式中调用这个类名
但是只在当前组件生效

由于效果显示问题 只有当前显示的父组件 调用其子组件类名时
为常用方法

你在其它地方调用 显示了你也看不到 而且当你离开时又销毁了 app.vue除外
不过app.vue属于最大的父组件
依旧属于上述定论

只有app.vue/app.vue当前显示的子级父组件 调用其子组件类名时
为常用方法
有待验证

一般情况下 父组件可以使用子组件的类名

动态绑定按钮class
:class="{ check: isChecked }"

props: {
isChecked: {
type: Boolean,
default () {
return true/false
// 不能直接改这个属性 要改对象模型里的数据
//在状态管理 mutations 中 添加商品时 追加 payload.checked = true
//然后父组件可取到状态管理中的.check
//<CheckButton :isChecked=“itemInfo.check” @click.native=“checkClick” />
//checkClick () {
// this.itemInfo.check = !this.itemInfo.check
// } 此时改变的就是对象模型里的.checked数据
}
}
}

.check-button {
border-radius: 50%;
border: 2px solid #aaa;
}
.check {
border-color: red;
background-color: red;

}

default: false
default: ‘’
// 简写方式
props: {
value: {
type: [String, Number],//接受多类型传值数组
default () {
return ‘’
}},
authority: {
type: Array,
required: true // 必须传递的值
}
},

.reduce((preValue, item) => preValue + item.peice * item.count, 0)

.reduce函数 累计相加 每一项item的 返回值 preValue 前一次的值 数组语法

.toFixed(2)
保留两位小数 对num类型

对象 数组的长度 能取反
数组是不能取反的

// 解决移动端300ms延迟
npm install fasttclick --save 不写-dev两者都是
import FastClick from ‘fastclick’
FastClick.attach(document.body)
开发依赖是开发时依赖 运行时依赖是含扩开发时依赖
–save是已经上线后的项目运行时必须要的东西；–save-dev是开发者在编辑项目时需要的东西；
// 图片懒加载
npm install vue-layload --save-dev // 写dev运行时依赖
i 简写 install
-s 简写 --save
-dev 开发模式下依赖
import VueLazyLoad from ‘vue-lazyload’
Vue.use(VueLazyLoad)
<img v-lazy=“showImage” alt="" @load=“imageLoad” />

//预留图片 分支
Vue.use(VueLazyLoad, {
loading: require(’./assets/img/common/placeholder.png’)//加载中
//error: 加载失败
})

// 在编辑器中端输入vue ui命令，会出来一个网址，
// 你在手机上输入这个网址就行

// 前提是你的电脑和手机都是在同一个无线网下。

TabBar的原理 只需传入路径 和颜色 使用的是TabBar和其item两个组件

首页

// px单位转换vw 开发时依赖 打包的过程中帮我们转化的 rem方法类似
npm install postcss-px-to-viewport --save-dev
// 在项目根目录postcss.config.js文件
module.exports = {
plugins: {
autoprefixer: {},
‘postcss-px-to-viewport’: {
viewportWidth: 375, // 视窗的宽度，对应的是我们设计稿的宽度(750 .
viewportHeight: 667, // 视窗的高度，对应的是我们设计稿的高度. (也可以不配置)
unitPrecision: 5, // 指定 px 转换为视窗单位值的小数位数(很多时候无法整除)
viewportUnit: ‘vw’, // 指定需要转换成的视窗单位，建议使用vw

  selectorBlacklist: ['ignore', 'tab-bar', 'tab-bar-item'], // 指定不需要转换的类，后面再讲.
//   'ignore', 'tab-bar', 'tab-bar-item'其实也是正则  /tab/ 

  minPixelValue: 1, // 小于或等于 1px 不转换为视窗单位.
  mediaQuery: false, // 允许在媒体查询中转换px

  exclude: [/tab/] //无需回退版本 配置忽略 匹配class 中有tab的元素 /^tab/匹配以tab开头
//  /tab$/匹配以tab结尾 g全局匹配
}

}
}
由于selectorBlacklist有略微问题 无法忽略父元素中的子元素
npm uninstall postcss-px-to-viewport // 卸载 postcss-px-to-viewport 打算回退版本

why 项目完成部署 window nginx 服务器: 无显示器的不关机的主机,为用户服务
公司没有 自己的服务主机 租借 阿里云(流媒体)/华为云/腾讯云相对便宜学生优惠

可选操作系统 window(.net微软的)/linux大部分

将dist (js cs img) 文件夹

都可以装tomcat/nginx(反向代理 ,处理并发 , 详细配置复杂) 服务器主机上面提供服务的软件

第一种 : 将自己的电脑作为服务器 - > window -> nginx 官网https://nginx.org/
nginx-ma开发板 st最新稳定版 le遗留稳定版
选择 st最新稳定版

1. 解压 运行exe(点一次一闪而过别重复启动)启动 nginx 将dist内文件覆盖html内文件
2. 亦可 找到配置文件nginx.conf 其中加#注释的 比如ssl为php服务 可配置多个服务
   location / {
   root dist ;// 根目录 html文件夹
   index index.html index.htm; // 中的index的 index.html或 index.htm
   }
   然后 任务管理 关闭 cmd启动 nginx 此方法关闭cmd既关闭nginx

第二种 ; 远程部署(mac)
linux->ubuntu(乌班图linux分支使linux有可视化界面)初学者
linux->centos(linux分支使 linux 有更强的稳定性)使用者 -> nginx => 终端命令安装
不是 yarn 是 yum 是linux 的安装包管理工具 linux 下自带这个工具
通过 ssh 登录到远程服务主机上 mac自带ssh window没有 有winSCp 从window拖动文件到linux

winSCp和secureCRTPortable.exe 文件可视和命令行 功能作用是一样的

secureCRTPortable.exe 通过ssh帮你链接的 Connect界面 新建通话SSH2
主机ip地址(真正的公网ip) 购买时有 用户名 root 密码: ****** 链接成功
ls-l 查看根目录所有文件 中文可能乱码

然后 yum install nginx 安装 在了 cd…上一层(初始在root里面) ls-l 这个位置全是nginx文件
systemctl start nginx.service# 开启nginx服务
systemctl enable nginx.service# 跟随系统启动

cd etc再 ls-l 此处大量有一个nginx目录 再cd nginx进入 就会有我们改过的nginx.conf配置文件
在 winSCp 中可编辑 相当于可视化文件夹系统
或者使用 vim nginx.conf 高级编辑器 弹出界面 敲一下i 即可修改
改完后 需要按 esc 键 再按 :wq 回车 保存并且退出

linux重启

node.nodeType === 1 // 标签节点
node.nodeType === 3 // 文本节点

{{}} 的正则
const reg = /{{ (.*) }}/
\转义符
.通配任意字符
匹配数量 * 零个或多个 + 一个或多个
() 分组 RegExp.$1拿第一个(中的内容) $2拿第二个()//regular(正规的)expression(表达式)简写为:regex正则表达式/.js$/ 匹配后缀为 .js 的文件

Object.assign(this, values);
// 如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性。

this.interval = setInterval(() => {},1000)
定时自调用函数
clearInterval(this.interval);
清除定时调用

var a = {name:‘hehe’,age:10};
qs.stringify(a)
// ‘name=hehe&age=10’
JSON.stringify(a)
// ‘{“name”:“hehe”,“age”:10}’
qs库

if (value && value.number) {
}
//值有新变化会进入到这样的一个逻辑里面

vue inspect > output.js
// 将本地的配置导出到项目根目录的output.js文件
可以直接搜索查看是否安装了 某个插件

{{ today.birthday.substring(0, 10) }}


replace替换字符串 将空格 替换为W3School

trailingComma:‘all’ 末尾多个, 语法 eslintrc

jquery居然能读取本地json文件 而且还会跨域 在vscode中 需要安装 live-server 这东西用了那么久 真没想到还能解决 跨域的问题

图表自适应
// 这样写
// 监听window窗口大小变化的事件
window.onresize = function(){
// console.log(‘window.onresize…’)
// 调用echarts实例对象的resize方法
mCharts.resize()
}
// 或 这样写
// window.onresize = mCharts.resize

JSON.stringify(errorMsg)
// 将errorMsg 对象 转化为 json格式的字符串

// 在vue.config.js 中
module.exports = {
devServer: {
port: 8999, // 端口号的配置
open: true // 自动打开浏览器
}
}

// 数组根据其中某一值的大小进行排序 排行榜
this.allData.sort((a, b) => {
return a.value - b.value // 从小到大的排序
// return b.value - a.value // 从大到小的排序
})

// 数组分页展示 一页5条 start 和 end 都是下标 slice 数组截取方法
const start = (this.currentPage - 1) * 5 // 0
const end = this.currentPage * 5 // 5
const showData = this.allData.slice(start, end) // 分页了 展示数据不同了
数组.slice(0, 5) //第零个到第四个 不包括5 共5个

// 获取某个元素的宽度
this.$refs.seller_ref.offstWidth

// filter的高级想不到的奇妙用法 下拉框排除已选择的项
selectTypes () {
if (!this.allData) return []
return this.allData.type.filter(item => {
return item.key !== this.choiceType
// 循环 过滤出 type中的key 不等于 当前选中的key
// key 是两处 均为 map seller commodity
})

// 左右循环切换代码
toLeft () {
this.currentIndex–
if (this.currentIndex < 0) {
// 回到最后一个索引的位置
this.currentIndex = this.allData.length - 1
}
this.updateChart()
},
toRight () {
this.currentIndex++
if (this.currentIndex > this.allData.length - 1) {
// 回到第一个索引的位置
this.currentIndex = 0
}
this.updateChart()
}

//取整
parseInt(44.3) //不会四舍五入只取整数

//如何拿到调用子组件内部的函数 通过 this.$refs.子组件ref名.函数名()

在static路径的图片 可以 /static 直接获取
在计算属性中 return 相对路径的 static 作为:src 不知为什么是无效的
但是相对路径可以 写在 无冒号的 src 上

循环的 item 可以传入 :item=‘item’ 子组件

// 手动更新 做数据缓存技术的时候需要
// this.listCatchData[currentindex] = data
//listCatchData是个对象 {currentindex:data}
//但是这样做 并不会触发 Vue 的数据更新

this.$set(this.listCatchData,currentindex,data)//this.$set() 手动刷新 三个值
//哪个数组 数组的key 新的内容
此功能似乎与 push 或 展开运算符合并数组效果无异

//向数组最前面插入一个对象
data.unshift({name: ‘全部’})

// 在VUE中路由遇到Error: Avoided redundant navigation to current location:报错显示是路由重复
const originalPush = Router.prototype.push;
Router.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err);
} cody老师项目路由里有

var {
name,
page = 1,
pageSize = 10
} = event
解构赋值时的 默认值写法

input框其本身支持历史记录

函数重载是指在同一作用域内,可以有一组具有相同函数名,不同参数列表的函数,这组函数被称为重载函数。重载函数通常用来命名一组功能相似的函数,这样做减少了函数名的数量,

Google浏览器 6000端口不能用，昨天找了好久才知道

https://tool.lu/timestamp/ 时间戳工具

有子节点的菜单 要使用el-submenu 无子节点菜单才使用 el-menu-item