Vue 语法-Vue 中的需要掌握的 ES6 语法？

🎉 什么是 const？

使用 const 修饰的标识符为常量, 不可以再次赋值。

在 ES6 开发中,优先使用 const, 只有需要改变某一个标识符的时候才使用 let.

注意：

①const 修饰的标识符被赋值后，不能修改

② 使用 const 定义标识符，必须赋值

③ 常量的含义是对象不能修改，但可以改变对象的属性

🎉 什么是对象增强写法？

属性的增强写法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const name = "why"
const age = 25
const name = 1.88
//es5写法
const obj = {
  name:name,
  age:age,
  height:height
}
//es6写法
const obj = {
  name,
  age,
  height
}

函数的增强写法：

1
2
3
4
5
6
7
8
9
10
//es5写法
const obj = {
  run:function(){},
  eat:function(){},
}
//es6写法
const obj = {
  run(){},
  eat(){},
}

Vue 语法-Vue 中的事件监听？

🎉 什么是 v-on？

作用：绑定事件监听器

缩写：@

预期：Function | Inline Statement | Object

参数：event

🎉 什么是 v-on 参数传递？

当通过 methods 中定义方法，以供@click 调用时，需要注意参数问题：

情况一：如果该方法不需要额外参数，那么方法后的()可以不添加。

但是注意：如果方法本身中有一个参数，那么会默认将原生事件 event 参数传递进去

情况二：如果需要同时传入某个参数，同时需要 event 时，可以通过$event 传入事件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<button @click="btn1click">1</button>
//函数·有传参的情况，返回事件event
<button @click="btn1click()">1</button>
//函数·有传参的情况,返回undefind
<button @click="btn1click('aaa')">1</button>
//函数·有传参的情况,返回字符串aaa
<button @click="btn2click('aaa'，$event)">1</button>
//函数·有传参的情况,返回字符串, 用$event传入事件event
methods:{
  btn1click(abc){
    console.log(abc)
  }，
  btn2click(abc,event){
  console.log(abc,event)
}
}

🎉 什么是 v-on 修饰符？

在某些情况下，我们拿到 event 的目的可能是进行一些事件处理。

Vue 提供了修饰符来帮助我们方便的处理一些事件：

.stop - 调用 event.stopPropagation()。

.prevent - 调用 event.preventDefault()。

.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。

.native - 监听组件根元素的原生事件。

.once - 只触发一次回调。

stop-停止冒泡：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="app">
  <div @click="click1">
 <h1>我是div</h1>
    <button @click.stop="click2">button1</button>
  </div>
</div>
methods:{
  click1(){
  console.log("click1")
  },
  click2(){
    console.log("click2")
  }
}

prevent-阻止默认行为：

1
2
<input type="submit" @click.prevent="click2"></input>
//阻止了默认提交事件

{keyCode | keyAlias} -监听某个键帽：

1
2
<input  @keyup="click2"></input> //监听所有按键
<input @keyup.enter="click2"></input> //监听enter按键

once -只触发一次

1
2
<input type="submit" @click.once="click2"></input>
//只触发一次事件

Vue 语法-Vue 中的条件判断？

🎉 什么是 v-if？

v-if 后面的条件为 false 时，对应的元素以及其子元素不会渲染。

v-if 后面的条件为 true 时，对应的元素以及其子元素渲染。

1
2
<h1 v-if="true">渲染{{message}}</h1>
<h1 v-if="false">不渲染{{message}}</h1>

🎉 什么是 v-if,v-else,v-else-if？

Vue 的条件指令可以根据表达式的值在 DOM 中渲染或销毁元素或组件

与 JavaScript 的条件语句 if、else、else if 类似。

1
2
3
4
5
6
7
<div id="app">
    <h2 v-if="score>=90">优秀</h2>
    <h2 v-else-if="score>=80">良好</h2>
    <h2 v-else-if="score>=70">一般</h2>
    <h2 v-else-if="score>=60">及格</h2>
    <h2 v-else>不及格</h2>
</div>

🎉 怎么实现按键切换登录方式？

我的写法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <label for="login">{{title}}</label>
  <input :placeholder="placeholder" id="login">
  <button @click="changeType">切换类型</button>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      title:'用户账号：',
      placeholder:"用户账号",
    },
    methods:{
      changeType(){
        if(this.placeholder == '用户账号'){
          this.title = '用户邮箱：';
          this.placeholder = "用户邮箱"
        }
        else if (this.placeholder == '用户邮箱'){
          this.title = '用户账号：';
          this.placeholder = "用户账号"
        }
      }
    }
  })
</script>
</body>
</html>

案例写法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <span v-if="isUser">
    <label for="loginaccount">用户账号</label>
  <input placeholder="用户账号" id="loginaccount">
  </span>
  <span v-else>
    <label for="loginmail">用户邮箱</label>
  <input placeholder="用户邮箱" id="loginmail">
  </span>
  <button @click="isUser = !isUser">切换类型</button>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      isUser:true
    }
  })
</script>
</body>
</html>

🎉 什么是虚拟 DOM？

virtual DOM 虚拟 DOM，用普通 js 对象来描述 DOM 结构，因为不是真实 DOM，所以称之为虚拟 DOM。

虚拟 dom 是相对于浏览器所渲染出来的真实 dom 而言的，在 react，vue 等技术出现之前，我们要改变页面展示的内容只能通过遍历查询 dom 树的方式找到需要修改的 dom 然后修改样式行为或者结构，来达到更新 ui 的目的。

这种方式相当消耗计算资源，因为每次查询 dom 几乎都需要遍历整颗 dom 树，如果建立一个与 dom 树对应的虚拟 dom 对象（ js 对象），以对象嵌套的方式来表示 dom 树及其层级结构，那么每次 dom 的更改就变成了对 js 对象的属性的增删改查，这样一来查找 js 对象的属性变化要比查询 dom 树的性能开销小。

参考资料：详解 Vue 中的虚拟 DOM

🎉v-if 和 v-show 对比？

v-if 和 v-show 都可以决定一个元素是否渲染，那么开发中我们如何选择呢？

v-if 当条件为 false 时，压根不会有对应的元素在 DOM 中。

v-show 当条件为 false 时，仅仅是将元素的 display 属性设置为 none 而已。

开发中如何选择呢？

当需要在显示与隐藏之间切片很频繁时，使用 v-show

当只有一次切换时，通过使用 v-if

作业：实现 vue 点击当前元素添加 class 去掉兄弟的 class？

我的实现方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .active{
      color: red;
    }
  </style>
</head>
<body>
<div id="app">
<ul>
  <li v-for="(movie,index) in movies" :id=index @click="clickfun($event)" class="" >
    {{index}}-{{movie}}
  </li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      message:'你好！',
      movies:["火影忍者","海贼王","一拳超人","宝可梦日月"],
      isactive: false,
      listchange:document.getElementsByTagName("li")
    },
    methods:{
      clickfun(e){
        for(let i=0; i< this.listchange.length;i++){
          if(this.listchange[i].id == e.target.id){
            this.listchange[i].classList.add("active")
          }
          else {
            this.listchange[i].classList.remove("active")
          }
        }
        // e.target 是你当前点击的元素
        // e.currentTarget 是你绑定事件的元素
    }}
  })
</script>
</body>
</html>

vue 的标准方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>vue 点击当前元素添加class 去掉兄弟的class</title>
  <script src="../js/vue.js"></script>
</head>
<style type="text/css">
  ul li {cursor: pointer;}
  .blue {color: #2175bc;}
</style>
<body>
<div id="app">
  <ul>
    <li v-for="(movie, index) in movies" v-on:click="addClass(index)" v-bind:class="{ blue:index==current}">
      {{index}}-{{movie}}
    </li>
  </ul>
</div>
<script>
  new Vue({
    el: '#app',
    data: {
      current:undefined,
      movies: ["火影忍者","海贼王","一拳超人","宝可梦日月"]
    },
    methods:{
      addClass:function(index){
        this.current=index;
      }
    }
  })
</script>
</body>
</html>