vue基础（2021年4月30日）

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
}

---