vuex中的存储数据
state:存储数据以及数据状态
this.
s
t
o
r
e
.
s
t
a
t
e
.
c
o
u
n
t
获取存储的数据
g
e
t
t
e
r
:计算属性在
g
e
t
t
e
r
里面写数据处理方法
t
h
i
s
.
store.state.count 获取存储的数据 getter:计算属性 在getter里面写数据处理方法 this.
store.state.count获取存储的数据getter:计算属性在getter里面写数据处理方法this.store.getters 获取数据vuex中的数据
mutation:同步触发事件更改vuex中state中存储数据的状态
this.
s
t
o
r
e
.
c
o
m
m
i
t
同步触发
m
u
t
a
t
i
o
n
中的方法存储数据
/
/
t
h
i
s
.
store.commit 同步触发mutation中的方法存储数据 // this.
store.commit同步触发mutation中的方法存储数据//this.store.commit(“handelMenuId”,this.menuId)
Action:异步触发事件更改vuex中state中存储数据的状态
this.
s
t
o
r
e
.
d
i
s
p
a
t
c
h
异步存储更改数据状态
/
/
t
h
i
s
.
store.dispatch 异步存储更改数据状态 // this.
store.dispatch异步存储更改数据状态//this.store.dispatch(“handelMenuId”,this.menuId)
module :模块化
可以设置nameSpace:true使当前store成为可复用的模块
使用store.registerModule方法注册模块:
store.registerModule(“myModule”,{
})
注册嵌套模块
store.registerModule([“fuModule”,“ziModule”],{
})
vue中传数据
Bus.
o
n
接收数据
B
u
s
.
on 接收数据 Bus.
on接收数据Bus.emit 传数据
h5中 localStorage
localStorage.setItem(“menuId”, this.menuId); //存储 (“名字”,值)
localStorage.getItem(“lastname”); //取出 (“名字”)
localStorage.clean() 清空
es6
1.new Promise((resolve, reject) => {} // promise resolve 已定性 reject 已失败 改变状态
父子组件传值
子传父
子传父时父组件写法:
<order_detail
:isOpenDetail=“isOpenDetail”
:orderNo=“orderNo”
@changeIsOpenDetail=“changeIsOpenDetail” //父传子
></order_detail>
:名字=“数据名” :login='loginMsg' 绑定到父组件中的子组件上
data中初始化
data(){
return {
loginMsg;true //声明值
}
}
父传子
@changeIsOpenDetail=“changeIsOpenDetail” //父传子
this.$emit(“changeIsOpenDetail”,value);
2.object.assign 合并对象 浅拷贝
object.assign(target,obj1,obj2) //将obj合并到target
new Set()去重
//合并去重
let arr = [1, 2, 3];
let arr2 = [2, 3, 4];
let set = new Set([…arr, …arr2]);
console.log(set); // {1, 2, 3, 4}
npm包下载错误
1.使用npm cache clean --force 先清除缓存过的npm包
2.再运行npm install 命令重新下载
3.npm run dev/npm run serve 运行脚手架
4.命令
npm start 启动
npm install /cnpm install/npm install --save --lagecy-peer-deps 下载node包
npm run build 打包
git命令行
- git冲突 commit your changes or stash them before you can merge.
解决:
git stash 备份当前工作区内容
git pull 更新本地
git stash pop 回复 - git进入uninx编辑器
解决:
esc
:q!
3、git status ----查看当前本地文件信息
- git add * ----将所有要提交的所有修改文件放入暂存区
5、 git commit -m “更改信息备注” 一次性把暂存区的所有修改提交到分支
6、git push --------提交代码到当前分支
如果先使用 git commit 命令 无法推送,使用命令git push origin master指令分支
-
git branch 查看当前所在分支
-
git remote -v 查看当前远程库地址
JS
数组
shift() 将数组中第一个元素删除 并返回此元素的值 a.shift()
pop() 删除当前数组最后一个元素 并返回此值 a.pop()
a.sort() 正常排序为按照数组内的十进制排序,所以如果使用sort排序需要写回调函数 传两个参数 代表最 大与最小
实例
a 小 b大 a-b 从小到大
arr.sort((a,b)=>{
return a-b
})
console.log(arr)
数组去重返回重复的值
var a = [1,3,31,2,4,5,“胖”,“傻”]
var b = [56,2,4,6,8,10,“傻”]
// 数组去重
var c = a.filter(function(v){ return b.indexOf(v) > -1 })
console.log© //返回重复的值 [2,4,“傻”]
数组去重并返回拼接为新数组
//concat 拼接数组 indexOf() 检索a数组内 v的值出现的位置 返回1或-1
var e = a.concat(b.filter(function (v) { return !(a.indexOf(v) > -1) }));
js中every()与some()的区别
every()判断一个数组内每个元素都要符合,才会返回true,否则返回false
some()判断数组中只要有一个元素符合,就可以返回true
例:
var a = [1,2,3,4] var b = [4,3,2,1,0]
console.log(a.every( (i, v) => i < 3)) // false
console.log(b.every( (i,v) => i<5)) //true
console.log(a.some( (i, v) => i< 3)) //true
console.log(b.some((i,v) => i > 10)) // false
js中…三个点的作用是什么
1.合并数组
console.log([…c,d]) //[1, 2, 3, 45, 5, “6”] //… 合并数组
解构赋值
var [arr, …arr1] = [] // 解
console.log(arr) //undefined
console.log(arr1) //[] // 构
var [arr2, …arr3] = [1,2,3,4,5]
console.log(arr2) // 1 // 赋
console.log(arr3) // [2,3,4,5]
var [arr4, …arr5] = [“foo”] // 值
console.log(arr4) //foo
console.log(arr5) //undefined
3.复制数组
var z =[12,23,34]
console.log([…z]) // [12,23,34] 复制数组
4.拆分字符
console.log([…‘hello’].forEach(function (value) {console.log(value)}))
// h e ll o 获取字符串中的每个字符
js中repeat的作用
复制字符
console.log(‘x’.repeat(‘3’)) // ‘xxx’
js中padStart()和padEnd()的作用
1. padStart 在字符串开头补全字符 第一个参数为个数 第二个参数为要补全的字符串
2. padEnd 在字符串结尾补全字符 第一个参数为个数 第二个参数为要补全的字符串
例:
console.log(‘1’.padStart(10, ‘0’)) // 0000000001
console.log(‘1’.padEnd(10,‘2’)) // 1222222222
Array.of(), 用于将一组值,转换为数组。
console.log(Array.of(2,3,5,6)) // [2, 3, 5, 6]
console.log(Array.of(2).length) // 1
js中reduce()方法的使用
reduce()可以累加数组四舍五入之后的和
例:
求平均数
let aver=[12,69,180,8763];
let result=aver.reduce(function (tmp, item, index){
if(index!=aver.length-1){ //不是最后一次
return tmp+item;
}else{ //最后一次
return (tmp+item)/aver.length;
}
});
console.log(result); // 2256
发送ajax请求调用接口
KaTeX parse error: Expected '}', got '#' at position 596: …?style="color:?#̲409eff;">{keyword}`
);
console.log(res);
return res;
}
},
搜索table数据中的
Vue
1.v-modal
.lazy修饰符
v-modal.lazy 在输入框发生变化且失去焦点后触发
.trim修饰符
v-modal.trim 过滤首尾空格
.number修饰符
v-modal.number 限制只能为数字,其余格式
2.事件修饰符
示例:@click.stop @click.capture.prevent
.stop 阻止事件冒泡,相当于调用event.stopPropagation
.prevent 阻止事件默认行为,相当于调用event.preventDefault方法
.self 只触发事件本身,有阻止冒泡的效果
.once 事件只触发一次,一次后不再执行
.capture 事件的完整机制是捕获-目标-冒泡,目标往外冒泡时触发
.sync 监听prop(子传父组件)传值的数据
.keyCode 监听按键指令,需查看vue对应键码
8 —>退格键
46 —>删除 delete
13 —> 回车
9 —> tab
3,vue基础指令
v-modal v-if v-else v-for v-bind v-on v-show
4. vue双向绑定的含义
vue双向绑定通过数据劫持结合发布订阅者模式来实现,也就是说数据和页面视图同步,数据发生变化,视图也跟着变化,视图变化
apply和call区别
都是js中截取替换用法,区别是apply最多传两个参,且第二个参数必须是数组,call可以传入多个参数,因此call被广泛使用在封装接口中用以传递映射参数。