Vue2 基本知识

Vue是什么

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

引入

使用 CDN：

1
2
3
4
5
开发版本：
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

生产版本：
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>

下载并自行引入：

1
2
https://cdn.jsdelivr.net/npm/vue@next/dist/
https://unpkg.com/browse/vue@3.2.31/dist/

第一个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
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Hello Vue</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
    
   <div id="app">
      <h1>{{message}}</h1>
   </div>

   <script>
      const vm = new Vue({
         el: "#app",
         data: {
            message: "Hello"
         }
      });
   
   </script>

</body>
</html>

常用指令

插值表达式

1
2
{{name}}
{{school.name}}

通过插值表达式可以直接在页面中使用变量的值

v-html

向标签中插入一段html代码

1
2
3
4
5
6
7
8
9
10
11
12
<div id="app">
    <div v-html="strong"></div>
</div>

<script>
    const vm = new Vue({
        el: '#app',
        data: {
            strong: '<b>strong</b>'
        }
    })
</script>

v-text

向标签中插入一段纯文本

1
2
3
<span v-text="message"></span>

<span>{{message}}</span>

v-for

循环指令，用于遍历数组等，在遍历数组时还可以加上index获取下标

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id="app">
    <h1 v-for="(item, index) in items">
        {{item.name}} ===> {{index}}
    </h1>
</div>

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            items: [
                {name: "Pillage"},
                {name: "Daisy"},
                {name: "Steven"}
            ]
        }
    });
</script>

v-if

条件语句，可以结合使用 v-else v-else-if，值为布尔类型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div id="app">
   <h1 v-if="flag">Yes</h1>
   <h1 v-else>No</h1>
   
   ===================================
   
   <h1 v-if="tag == 'A'">A</h1>
   <h1 v-else-if="tag == 'B'">B</h1>
   <h1 v-else-if="tag == 'C'">C</h1>
   <h1 v-else>D</h1>
   
</div>

<script>
   var vm = new Vue({
      el: "#app",
      data: {
         flag: true,
         
         tag: "A"
      }
   });

</script>

v-show

根据判断条件来决定是否展示该标签

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="app">
    <div v-show="show"><h1>展示</h1></div>
    <div v-show="notShow">未展示</div>
</div>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            show: true,
            notShow: false
        }
    })
</script>

v-bind

为属性绑定一个值或变量

1
2
3
4
5
6
7
8
9
10
11
<div id="app">
    <a v-bind:href="hao123">hao123</a>
</div>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            hao123: 'https://www.hao123.com/'
        }
    })
</script>

此指令具有简写形式（v-bind: 可以简写为 :）

1
<a v-bind:href="hao123">hao123</a>      =>      <a :href="hao123">hao123</a>

v-on

为标签绑定事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id="app">
   <button v-on:click="click">Click Me</button>
</div>

<script>
   var vm = new Vue({
      el: "#app",
      data: {
         message: "pillage"
      },
      methods: {
         click: function() {
            alert(this.message)
         }
      }
   });

</script>

修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

1
<form v-on:submit.prevent="onSubmit">...</form>

此指令也具有简写形式（v-on: 可以简写为 @）

1
2
<button v-on:click="click">Click Me</button>   =>   
<button @click="click">Click Me</button>

v-model

v-model可以实现对数据的双向绑定

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="app">
   输入一段文字：
   <input type="text" v-model="message">
   <br><br><br>
   您输入的文字为：{{message}}
</div>

<script>
   const vm = new Vue({
      el: "#app",
      data: {
         message: ""
      }
   });

</script>

v-once

仅加载一次数据，以后数据即使改变也不会影响

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="app">
    <p>姓名为：<span v-once>{{name}}</span></p>
    <button @click="changeName">修改姓名</button>
</div>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            name: 'pillage'
        },
        methods: {
            changeName() {
                this.name = '小白'
            }
        }
    })
</script>

v-cloak

当 Vue 实例编译结束，页面渲染后，此属性会立刻消失

作用：可以用来解决网速慢时页面出现一堆 的情况

基本使用：

1
2
3
4
5
6
7
8
9
10
11
<style>
    [v-cloak] {
        display: none;
    }
</style>

<body>
    <div id="app" v-cloak>
    	{{info.name}}
	</div>
</body>

计算属性和侦听器

计算属性

计算属性使用了缓存机制，所以它执行的效率要比 methods 方法要高

计算属性也有两种写法：

  1. 类似于函数的简写形式
1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="app">
    {{date}}
</div>
<script>
    const vm = new Vue({
        el: '#app',
        computed: {
            date() {
                return Date.now()
            }
        }
    })
</script>

这样写默认只有getter方法，没有setter方法

  1. 对象形式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div id="app">
    {{name}}
</div>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            currentName: 'pillage'
        },
        computed: {
            name: {
                get() {
                    return this.currentName
                },
                set(newValue) {
                    this.currentName = newValue
                }
            }
        }
    })
</script>

此时运行 vm.name = '小白' 时，setter 会被自动调用，currentName 的值被更新

侦听器

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

他也有两种写法（简写形式和对象形式）

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
<div id="app">
    <p v-text="university"></p>
    <p>{{person}}</p>
</div>

<script>
    const vm = new Vue({
        el: "#app",
        data: {
            university: "东北林业大学",
            person: {
                name: "pillage",
                age: 19
            }
        },
        
        watch: {
            
            university(newValue, oldValue) {
                console.log("newValue:" + newValue + "  oldValue:" + oldValue)
            },
            
            person: {
                
                deep: true,
                
                handler(obj) {
                    console.log("name:" + obj.name + "  age:" + obj.age)
                }
            }
        },
    });
</script>

基本使用：收集表单数据

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
<div id="app">

    <form action="">
        账号：<input type="text" v-model="account"> <br><br>
        密码：<input type="password" v-model="password"> <br><br>
        性别：
        男<input type="radio" name="sex" value="boy" v-model="sex">
        女<input type="radio" name="sex" value="girl" v-model="sex"> <br><br>
        爱好：
        敲代码<input type="checkbox" value="code" name="hobby" v-model="hobby">
        吃包子<input type="checkbox" value="eat" name="hobby" v-model="hobby">
        刷视频<input type="checkbox" value="video" name="hobby" v-model="hobby"> <br><br>
        所在省份：
        <select name="province" v-model="province">
            <option value="">请选择</option>
            <option value="henan">河南</option>
            <option value="tianjin">天津</option>
            <option value="beijing">北京</option>
            <option value="chongqing">重庆</option>
        </select> <br><br>
        其他信息：
        <textarea v-model="other"></textarea> <br><br>
        <input type="checkbox" v-model="accept">我已阅读并接受<a href="">《隐私声明》</a> <br><br>
        <button>提交</button>

    </form>

</div>

<script>
    const vm = new Vue({
        el: "#app",
        data: {
            account: '',
            password: '',
            sex: '',
            hobby: [],
            province: '',
            other: '',
            accept: false,
        }
    })

</script>

生命周期钩子

如下图：

(图片来源于网络)

其中 mounted 最常用，常用于发送 ajax 请求获取数据