javascript vue系统学习笔记资料（共十卷）
本人5年前学报表学了javascript, 找到工作后就笔记丢了，还整理一下放到网上帮助更多的朋友，比竟这些资是当初花了几大千的学费，最近工作中做图形开发，很少用vue.js 差不多要忘了，所以很有必要做成网上笔记，在整理过程中以前的技术早也更新了，所以本次整理主要是以前的资料做参考，结合最新语法和思想在写一份，
vue主要是数据驱动，非传统的操作dom 这和以前的web开发工具不同，所以之前js 学得不好，可以在web 从新得到灵感
即然上数据驱动，那么需要复习一下javascript es5 es6的数据类型
1 简单数据类型：
number string boolean unll undefined es6还包括symbol
2复杂数据类型
对象{} 数组 []
数组常见操作方法：
pop push unshift shift slice splice reverse sort indexOF lastIndexOF concat
其中能改变数组的方法，数组变异方法有pop push unshift shift splice reverse soft, 但是这些方法都是传统方法，用得都不多了，现在使用最多的es5以后的方法
新方法包括 forEach filter map find some every includes reduce
正式学习前环境需要安装本次编写案例 node.js 版本为16 2021-11-14 参考资料版本node 9
IDE 编辑器 vscode
vscode配置语言略，系统会自动提示
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
正式复习js 语法
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 遍历数组
方法一
let arr = [1,2,3,4,5,6];
for(let i=0; i<arr.length; i++){console.log(arr[ i ]);
} //编程式语法，需要了解整个实现过程，
方法二
2 遍历数组中还有一个方法叫 ( key in )
for(let key in arr) { console.log(typeof key)} //这儿使用typeof 目前的判断数据类型，使用key in 的时候，key 会变成字符串，并且还会遍历到非数组的值比如
arr=[1,2] ,arr.b=7; 而arr.b这个是自定义属性也会被遍历出来，所以这个方法也很少用
方法三
arr = [1,2,3,4]
for(let k of arr){
console.log(k)
}
of的方法还能遍历对象，
let obj = {name: 'k',age: 18 };
以下错误示范
for(let var of obj){
console,log(var) //错误用法，对象不能被叠代
}
for(let val of Object.keys(obj)){
console.log(obj[val])//这儿不能obj.val, 因为obj没有一个属性叫val
}
方法四
新的数组方法：
arr.forEach(function(item){
console.log( item ) ;
})// 申明式语法。不能写return， 而vue也正好是申明式语法，不关心具体实现方法。
二 过滤器 filter 不改变数组，回调函数中条件为true被过滤，示例代码.
let newAry = [1,2,3,4].filter(function(item){
return item>4;
});
console.log(newAry) // filter多用于数组删除
三 map 方法，//map方法通常与es6中的模板字符串一起使用
let arr = [1,2,3].map(function (item){
return `<li>${item}</li>` //模板字符串的使用方法;
});
console.log(arr.join(',')); //map 多用于数组更新
//includes返回值为boolean类型 true false
let arr3 = [1,2,3,4];
console.log(arr3.includes(32));
//找到具体一项为find 成功返回trur undefined
let result = arr3.find(function (item, index) {
return item.toString().indexOf(5)>-1
});
console.log(result);
//除此之外 some 找true 找到后停止，返回true
// every 找false 找到后返回false,返回false
用法示例代码
let result = arr3.some(function (item, index) {
return item.toString().indexOf(5)>-1
});
reduce收敛函数，
//本次的返回值会变成上一次的前一位，如果没有返回值为undefined
示例代码
[1,2,3,4,5].reduce(function(prev,next,index,item){
console.log(arguments);
}）
返回值
PS D:\xsy> node a.js
[Arguments] { '0': 1, '1': 2, '2': 1, '3': [ 1, 2, 3, 4, 5 ] }
[Arguments] { '0': undefined, '1': 3, '2': 2, '3': [ 1, 2, 3, 4, 5 ] }
[Arguments] { '0': undefined, '1': 4, '2': 3, '3': [ 1, 2, 3, 4, 5 ] }
[Arguments] { '0': undefined, '1': 5, '2': 4, '3': [ 1, 2, 3, 4, 5 ] }
PS D:\xsy>
案例一，利用原理可以做一个求和的用法
let sum = [1,2,3,4].reduce(function(prev,next){
return prev+next;
});
console.log(sum);
案例二：
let a = [{price:30,count:2},{price:30,count:3}].reduce(function(prev,next){
return prev.price*prev.count + next.price*next.count
});
console.log(a);
案例三
let a = [[1,1,23,4],[4,5,6]].reduce(function(prev,next){
return prev.concat(next) //数组累加
});
console.log(a)
————————————————————————————————————————————————————————
综合实列，todolist 功能是写一个输入框，回车的时候下面增加一例，每次输完清空输入框
//todolist代码简要，输入框输入一行，新增一行列表的例子
//核心代码
<input type="text" v-model="val" @keyup.vtrl.enter="add">
<ul>
<li v-for='a in arr'>{{a}}<button @click="remove(index)"></li>
<ul>
let vm = new VUE({
el: '#app',
methods:{
add(e){
if(e.keyCode ===13) {
this.Array.unshift(this.val),
//每次清空一下输入框
this.val = ''
},
remove(i){this.arr=this.arr.filter((item,index)=>index!==i)}
}
}
})
++++++++++++++++++++++++++++++++++++++++++++
created(){
axios.get('./carts.json').then(res=>{
//this.products在组件中定义data,示例data:{ products:[]}
this.products = res.data
},err=>{
console.log(err)
});
}