1.块级作用域
在ES5中,if和for没有块级作用域
var a=1;
console.log(a);
if(true){
var a = 10
console.log(a);
}
console.log(a);
运行结果:
<button class="es5">按钮一</button>
<button class="es5">按钮二</button>
<button class="es5">按钮三</button>
<button class="es5">按钮四</button>
<button class="es5">按钮五</button>
<script>
var btns = document.getElementsByClassName('es5')
for(var i=0; i<btns.length;i++){
btns[i].addEventListener('click',function(){
console.log('第'+i+'个按钮被点击');
})
}
</script>
运行结果:
与实际想要结果不同
解决方法1:
使用闭包
var btns = document.getElementsByClassName('es5')
for(var i=0; i<btns.length;i++){
// 匿名函数
(function(i){
btns[i].addEventListener('click',function(){
console.log('闭包:第'+i+'个按钮被点击');
})
})(i)
}
运行结果:
解决方法2:
使用ES6 let const声明
var btns = document.getElementsByClassName('es6')
for(let i=0; i<btns.length;i++){
btns[i].addEventListener('click',function(){
console.log('第'+i+'个按钮被点击');
})
}
运行结果:
2. const和let的使用
-
const 修饰的是常量,不能被改变
const name = 'mine'; name = 'hello'; console.log(name);
-
必须初始化
const age; console.log(age);
-
常量指向的对象不能修改 但是可以修改对象内部属性
const person = { name: 'mine', age: '24', sex: '男' } person = null console.log(person);
person.name='Hello'
person.height=1.70
console.log(person);
let 可以先声明,不初始化,可以修改
let a = 100
a = 1000
console.log(a);
let b
b = 200
console.log(b);
let stu = {
name: '明明',
sex: '就',
grade: '100'
}
console.log(stu);
let teacher = {
name: '小苍',
sex: '20',
salary: 20000
}
stu = teacher
console.log(stu);
3. ES6对象增强写法、解构
- 对象增强写法:
<script>
const obj = {
name: 'mine',
age: 24,
sex: '男',
say: function () {
console.log("睡觉了!");
}
}
console.log(obj);
// ES6对象增强写法
const name = '老王'
const age = 31
const sex = '未知'
function say() {
console.log("起床了!");
}
const person = {
name,
age,
sex,
say
}
console.log(person);
</script>
-
解构赋值
数组解构赋值
let [a, b] = [0, 1]
console.log(a, b);
let [c, ...d] = [0, 1, 2, 3, 4]
console.log(c, d);
对象解构赋值
let p = {name: 'mine', age: 24, sex: '男',};
let {name, age, sex} = p;
console.log(name, age, sex);
- 解构声明
- 解构设置默认值
- 解构对象属性赋值给不同命变量
- 嵌套对象的解构
4. v-on参数和修饰符
-
事件调用方法没有参数可以不写小括号
<button @click="clickBtn2">按钮二</button>
clickBtn2(){ console.log("可以不写小括号"); },
-
方法有一个入参的 调用时没有写小括号和形参 默认传入event事件对象
<button @click="clickBtn3">按钮三</button>
clickBtn3(event){ console.log(event); },
-
方法有多个入参的 调用时手动获取event事件对象($event)
<button @click="clickBtn4('123',$event)">按钮四</button>
clickBtn4(abc,event){ console.log(abc,event); }
-
修饰符
.stop 阻止事件冒泡
.prevent 阻止默认行为 例如submit
.keyCode 监听键盘事件
.native 监听组价原生事件
.once 只触发一次回调
5. v-if v-if-else v-else
<div id="app">
<input type="number" v-model="score">
<h2 v-if="90 <= score">优秀</h2>
<h2 v-else-if="score >= 80">良好</h2>
<h2 v-else-if="score >= 60">及格</h2>
<h2 v-else>不及格</h2>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
score: 90
},
})
</script>
6. v-if 和 v-show
<div id="app">
<!-- v-if直接创建和删除元素,适用于只操作一次的情况-->
<h1 v-if="isShow">V-if</h1>
<!-- v-show是修改元素的显示方式display:none 适用于反复修改元素的情况 -->
<h1 v-show="isShow">V-show</h1>
</div>
<script>
const app =new Vue({
el: '#app',
data: {
isShow: true
}
})
</script>
7. v-for 获取数组和对象
遍历数组
<ul>
<li v-for="(i,index) in list">{{index+1}} {{i}}</li>
</ul>
list: ['周一','周二','周三','周四','周五','周六','周天'],
遍历对象
<ul>
<li v-for="(value,key,index) in person">{{index+1}}. {{key}}: {{value}}</li>
</ul>
person: {
name: 'mine',
age: 24,
salary: 5000
}