1.var let const
2.箭头函数
<style>
#box {
background: red;
height: 40px;
width: 80px;
}
#box.bgcolor {
background: yellow;
}
</style>
<div id="box"></div>
<script>
const box = document.getElementById("box")
box.onclick = function () {
const obj = this;
setTimeout(function () {
console.log(obj)
obj.className = 'bgcolor'
}, 3000);
}
</script>
<script>
const box = document.getElementById("box");
box.onclick = function () {
setTimeout(() => {
console.log(this);
this.className = 'bgcolor';
}, 3000);
}
</script>
3.闭包
4.this
5.高阶函数
<script>
let goods = [30, 80, 50, 3, 5, 1, 60, 9];
// 取出大于10 元的商品
let goods1 = [];
// for (let i = 0; i < goods.length; i++) {
// if (goods[i] > 10) {
// good1.push(goods[i]);
// }
// }
for (let n of goods) {
if (n >= 10) {
goods1.push(n);
}
}
console.log(goods1);
let goods2 = [];
for (let n of goods1) {
goods2.push(n*0.5);
}
console.log(goods2);
let sum = 0;
for (let n of goods2) {
sum += n;
}
console.log(sum);
</script>
// 高阶方法 filter map redu ce
<script>
let goods = [30, 80, 50, 3, 5, 1, 60, 9];
let goods1 = goods.filter(function (n) {
return n >= 10;
})
console.log(goods1);
let goods2 = goods1.map(function (n) {
return n*0.5;
})
console.log(goods2);
let sum = goods2.reduce(function (s, n) {
return s+n;
}, 0);
console.log(sum)
/*
* 第一次，s参数是0， n是数组中的第一个元素
* 第二次，s参数是第一次的回调函数返回值，n是数组的第二个元素
* 以此类推
* */
</script>
/*
箭头函数结合高阶函数
*/
<script>
let goods = [30, 80, 50, 3, 5, 1, 60, 9];
let sum = goods.filter(n => n>=10).map(n => n*0.5).reduce((s, n) => s+n); // 箭头函数， n>=10 返回n ()=> {}
console.log(sum)
</script>
6.数据结构
<script>
// const obj = new Set();
// // 添加数据
// obj.add(1);
// console.log(obj)
const obj = new Map();
// 是用set方法添加, 添加键值对
obj.set("one", "abc");
console.log(obj)
</script>
7.模板字符串
<script>
let name = "学习";
let str = "这个是"+name+"一个字符串";
let str2 = '这个是一个字符串';
console.log(str)
let title = "rubbon";
let slogon = "成绩自己";
// 模版字符串
let jsx = `
<title>${title}</title>
<b>monkey</b>
<div><i>${slogon}</i></div>
`;
console.log(jsx);
</script>
8.解构赋值 & 扩展运算符
<script>
let arr = [1, 2, 3];
let [a, b, c] = arr;
console.log(a);
console.log(b);
console.log(c);
let obj = {name: "zangsan", age: 23, sex:"female"}
let {name, age, sex} = obj;
console.log(name);
console.log(age);
console.log(sex);
// 扩展运算符
let arr1 = [1, 2, 3]
let arr2 = [4, 5, 6]
let arr3 = [...arr1, 7, 8, 9, ...arr2]
console.log(arr3);
</script>
axios异步网络请求
10.ss
11.ff
12.vv
vue 语法
- 计算属性
methods和computed
computed: {
totalPrice: {
get() {
return this.books.reduce((s, n)=>s+n.price, 0);
}
}
},
methods: {
totalPrice1() {
let sum = 0;
for (let i = 0; i < this.books.length; i++) {
sum+=this.books[i].price;
}
return sum;
}
}
totalPrice: {{totalPrice}}
<br>
totalPrice: {{totalPrice1()}}
-
事件监听
事件对象$event
事件监听 - key唯一标识
<div>
<input type="text" v-model="name">
<button @click="add()">添加</button>
</div>
<ul>
<li @mouseenter="over(index)"
:key="item.id" v-for="(item, index) in books"> # key唯一标识
<input type="checkbox">
{{index+1}}-{{item.name}}-¥{{item.price}}</li>
</ul>
add() {
this.books.unshift({name:this.name, price: 102, active:false});
this.name='';
}
- 双向绑定和单向绑定
<input type="text" v-model="msg">
<br>
{{msg}}
export default {
name: "App.vue",
data() {
return {
msg: "this is test..."
}
}
}
<input type="text" :value="msg">
<br>
{{msg}}
<input type="text" :value="msg" @input="change"> #这里使用了：value单向绑定，但是用@input绑定数据
<br>
<input type="text" :value="msg" @input="msg=$event.target.value">
<br>
{{msg}}
methods: {
change(event){
this.msg = event.target.value; // event是一个事件。取input里面的数据，实现双向绑定
console.log(event)
}
}
v-model
-
练习
购物车 -
Vue父子组件之间的通信
image.png
<div class="left">
{{num}}
<!-- 父组间在使用子组间的方法@绑定的关系，mycountevent子组件的方法-->
<my-bar @mycountevent="demo"></my-bar>
<!-- demo是一个方法，并且有传参，但是在调用的使用不需要写成函数的形式-->
<MyBar></MyBar>
</div>
methods: {
// 父组件创建的方法
demo(data) {
this.num += data;
}
}
<div class="mybar">
{{msg}}
<button @click="changenum(2)">+</button>
<!-- 子组间创建了一个方法changenum()-->
</div>
methods: {
changenum(index) {
// 子组间创建一个方法，使用this.$emit获取父组间的数据，第一个参数是父组间使用时的函数名字
return this.$emit('mycountevent', index);
}
}
<!-- 注意这里的父组件中是怎么使用子组建的-->
<my-main :books="books"></my-main>
data() {
return {
num: 2,
books: [
{id:1, name:"戏说PHP", price:78},
{id:2, name:"戏说JavaScript", price:78},
{id:3, name:"戏说CSS", price:78},
{id:4, name:"戏说Python", price:78},
{id:5, name:"戏说GoLang", price:78}
]
}
} // 数据在父组件
props: ['books'], // 子组件
7.父子组件之间的访问方式
image.png
