引入

​ 在 初识Vue 中，我们以及对 Vue 进行了了解和实践了第一个 Vue 程序展示，接下来我们继续进行学习，对 Vue 的相关知识进行一个入门。

Vue指令

v-bind

绑定数据和元素属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
    <div id="test">
        <span v-bind:title="message">
        悬停几秒查看隐藏内容</span>
    </div>
</body>
<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#test",
        data: {
            message: "hello, vue!"
        }
    });
</script>
</html>

v-bind展示

判断指令

  • v-if
  • v-else
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
    <div id="test">
        <h1 v-if="ok">Yes</h1>
        <h1 v-else>No</h1>
    </div>
</body>
<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#test",
        data: {
            ok: true
        }
    });
</script>
</html>

v-if展示

还有v-else-if用法类似，这里就不再赘述

v-for

等同于 for ，用以循环

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" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
    <div id="test">
        <!--index类似于for循环当中的i-->
        <li v-for="(item, index) in items">
            {{item.message}}是第{{index + 1}}个
        </li>
    </div>
</body>
<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#test",
        data: {
            items: [
                {message: 'test1'},
                {message: 'test2'}
            ]
        }
    });
</script>
</html>

image-20210724163545160

v-on

事件处理绑定

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="test">
        <!--绑定按键点击事件-->
        <button v-on:click="sayHi">click me</button>
    </div>
</body>
<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#test",
        data: {
            message: "Hi"
        },
        methods: { //方法必须定义在Vue的method对象中
            sayHi: function () {
                console.log(this.message);
            }
        }
    });
</script>
</html>

v-on展示

v-model

在表单中进行双向数据绑定

  1. 输入框
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
    <div id="test">
        input:<input type="text" v-model="message">{{message}}
    </div>
</body>
<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#test",
        data: {
            /*将输入框默认数据设置为test1*/
            message: "test1"
        }
    });
</script>
</html>

v-model展示1

  1. 单选框
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
    <div id="test">
        性别：
        <input type="radio" name="sex" value="男" v-model="checked">男
        <input type="radio" name="sex" value="女" v-model="checked">女

        <p>
            选中了：{{checked}}
        </p>
    </div>
</body>
<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#test",
        data: {
            /*默认不选中*/
            checked: ''
        }
    });
</script>
</html>

v-model展示2

  1. 下拉框
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
    <div id="test">
        下拉框：
        <select v-model="checked">
            <!--提供初识提示，选择其他选项后不可选择-->
            <option value="" disabled>---请选择---</option>
            <option>A</option>
            <option>B</option>
            <option>C</option>
            <option>D</option>
        </select>

        选中了：{{checked}}
    </div>
</body>
<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#test",
        data: {
            checked: ''
        }
    });
</script>
</html>

v-model展示3

其他类似于多行文本，多选框等都殊途同归，这里就不再赘述。

Vue组件

​ Vue 组件是可复用的 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 lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
    <div id="test">
        <!--创建了一个新定义的组件my-component，并用v-bind指令将v-for遍历出来的值绑定给子组件-->
        <!--v-bind:XXX可以简写为:XXX-->
        <my-component v-for="(item, index) in items" :val="item" :index="index">
        </my-component>

    </div>
</body>
<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    /*创建了一个自定义组件叫myComponent*/
    Vue.component("myComponent", {
        /*prop 是子组件用来接受父组件传递过来的数据的一个自定义属性，默认prop里面的属性名不能大写*/
        props: ['val', 'index'],
        /*组建的模板*/
        template: '<li>第{{index + 1}}个是：{{val}}</li>'
    });

    var vm = new Vue({
        el: "#test",
        data: {
            items: ["A", "B", "C"]
        }
    });
</script>
</html>

image-20210725181836357

Axios异步通信

​ Axios 是一个开源的可以用在浏览器端和NodeJS(不仅限)的异步通信框架，它的主要作用就是用来实现 AJAX 异步通信。在实际使用时，还是可以使用 jQuery 的 AJAX ，但是不推荐使用，因为 jQuery 操作 DOM 太频繁。

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
47
48
49
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--v-clock:解决闪烁问题，用空白来代替{{}}等显示-->
    <style>
        [v-clock]{
            display: none;
        }
    </style>
</head>
<body>
    <div id="test" v-clock>
        <div>{{info.name}}</div>
        <!--v-bind绑定href，让a标签能获取vue实例中的数据-->
        <a :href="info.url">跳转</a>
    </div>
</body>
<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<!--导入axios.js-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    var vm = new Vue({
        el: "#test",
        /*此处使用的是data方法，需要注意*/
        data() {
            return {
                /*请求的返回参数格式必须和json字符串一样，可以少。但是不能错*/
                info: {
                    name: null,
                    address: {
                        street: null,
                        city: null,
                        country: null
                    },
                    url: null
                }
            }
        },
        /*钩子函数 链式编程*/
        mounted () {
            axios.get('data.json').then(response => (this.info=response.data))
        }
    });
</script>
</html>

data.json:

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
{
  "name": "百度",
  "url": "http://baidu.com",
  "page": 1,
  "isNonProfit":true,
  "address": {
    "street": "含光门",
    "city": "陕西西安",
    "country": "中国"
  },
  "links": [
    {
      "name": "B站",
      "url": "https://www.bilibili.com/"
    },
    {
      "name": "4399",
      "url": "https://www.4399.com/"
    },
    {
      "name": "搜狗",
      "url": "https://www.sogou.com/"
    }
  ]
}

axios展示

计算属性

​ 计算属性：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
36
37
38
39
40
41
42
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
    <div id="test" >
        <p>getNowTime(): {{getNowTime()}}</p>
        <p>getNowTime1: {{getNowTime1}}</p>
    </div>
</body>
<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<!--导入axios.js-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    var vm = new Vue({
        el: "#test",
        data: {
            message: "hello"
        },
        methods: {
            getNowTime: function () {
                /*返回一个时间戳*/
                return Date.now();
            }
        },
        /*计算属性：methods，computed 方法名不能重名，重名之后，只会调用methods的方法*/
        /*实际上是一个属性，除非方法内部改变，否则属性不轻易变动*/
        computed: {
            getNowTime1: function () {
                /*测试计算属性的变化*/
                this.message;
                /*返回一个时间戳*/
                return Date.now();
            }
        }
    });
</script>
</html>

image-20210725194653123

slot 插槽

​ 在 Vue 中我们可以使用 <slot> 元素作为承载分发内容的出口，在原文档中称其为插槽，它可以应用在组合组件的场景中。

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
47
48
49
50
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<div id="test">
    <my-component>
        <!--两个自定义组件，指明插槽的名字-->
        <c-title slot="c-title" :title="title"></c-title>
        <c-items slot="c-items" v-for="item in testItems" :item="item"></c-items>
    </my-component>
</div>
</body>
<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    /* '\'自动会换行 */
    Vue.component("myComponent", {
        /*在模板中预留两个插槽，方便后继填入和组合*/
        template:
        '<div>\
            <slot name="c-title"></slot>\
            <ul>\
                <slot name="c-items"></slot>\
            </ul>\
        </div>'
    });

    Vue.component("c-title", {
        props: ['title'],
        template: '<div>{{title}}</div>'
    });

    Vue.component("c-items", {
        props:['item'],
        template: '<li>{{item}}</li>'
    });

    var vm = new Vue({
        el: "#test",
        data: {
            title: '编程语言：',
            testItems: ['java', 'c++', 'python']
        }
    });
</script>
</html>

image-20210726204731696

自定义事件

​ 在上一个实验的基础上，假如我要删除某个组件怎么办？此时就设计到参数传递和事件分发了， Vue 为我们提供了自定义事件的功能；使用 this.$emit('自定义事件名', 参数) ，演示如下：

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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<div id="test">
    <my-component>
        <!--两个自定义组件，指明插槽的名字-->
        <c-title slot="c-title" :title="title"></c-title>
        <!-- 点击delete按钮后：组件c-items内的remove方法 -> 前端html@remove绑定的removeItem(index)方法 -> Vue对象中的removeItem方法-->
        <c-items slot="c-items" v-for="(item, index) in testItems"
                 :item="item" :index="index" @remove="removeItem(index)" :key="index"></c-items>
    </my-component>
</div>
</body>
<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    /* '\'自动会换行 */
    Vue.component("myComponent", {
        /*在模板中预留两个插槽，方便后继填入和组合*/
        template:
        '<div>\
            <slot name="c-title"></slot>\
            <ul>\
                <slot name="c-items"></slot>\
            </ul>\
        </div>'
    });

    Vue.component("c-title", {
        props: ['title'],
        template: '<div>{{title}}</div>'
    });

    Vue.component("c-items", {
        props:['item', 'index'],
        template: '<li>{{item}}&nbsp;<button @click="remove">delete</button></li>',
        methods: {
            remove: function (index) {
                /* $emit('自定义事件名(也就是上面v-on或者@绑定的事件名)', XXX(要传递的参数) ) */
                /* 此处我们通过自定义事件间接将请求传递给了前端html */
                this.$emit('remove', index);
            }
        }
    });

    var vm = new Vue({
        el: "#test",
        data: {
            title: '编程语言：',
            testItems: ['java', 'c++', 'python']
        },
        methods: {
            removeItem: function (index) {
                /*从第index位置开始，删除一个元素*/
                this.testItems.splice(index, 1);
            }
        }
    });
</script>
</html>

$emit展示