Vue 的入门教程
     
  前端知识
21 分钟 读完 (大约 3092 个字)

Vue 的入门教程

初识 Vue

先修知识：

1、熟悉 HTML
2、熟悉 CSS
3、熟悉 JavaScript

Vue 概述

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的 渐进式 JavaScript 框架 （渐进式就是逐步实现新特性的意思） 。与其它大型框架不同的是，Vue 被设计为可以 自底向上 逐层应用。Vue 的核心库只关注视图层 ，方便与第三方库（vue-router ，vue-resource ，vuex）或既有项目整合。【————百度百科】

Vue 的官方教程： https://cn.vuejs.org/v2/guide/ ，建议在官方教程学习。截图如下：

Vue 的官方网站： https://cn.vuejs.org/ ，截图如下：

后面会常用到的 Vue 组件库 ElementUI ， https://element.eleme.cn/#/zh-CN/component/installation ，截图如下：

第一个 Vue 程序

我使用的是 IDEA 编写 Vue 程序，只要在 IDEA 安装 Vue.js 插件即可 。建议使用 VSCode 和 WebStorm 等前端 IDE 。第一个 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
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>vue01</title>
    </head>
    <body>
        <!-- 01-view 层，即视图层 -->
        <div id="app">
            {{message}}
        </div>

        <!-- 02-导入 vue.js -->
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

        <!-- 03-编写 Vue 对象 -->
        <script>
            var vm = new Vue({
                /* 绑定 id 为 app 的元素 */
                el: "#app",
                // Model：数据
                data: {
                    message: "Hello , Vue !!!"
                }
            });
        </script>
    </body>
</html>

第一个 Vue 程序的展示效果如下：

预先了解一下 MVVM 模型 中的 VM ，如下图：

Vue 基本语法

v-bind 指令

前面已经成功创建了第一个 Vue 应用！看起来这跟渲染一个字符模板非常类似，但是 Vue 在背后做了大量的工作。现在数据和 DOM 已经建立了关联，所有的东西都是响应式的。我们在控制台操作对象属性，界面可以实时更新。接下来介绍 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
25
26
27
28
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8">
        <title>vue01</title>
    </head>
    <body>
        <!-- 01-view 层，即视图层 -->
        <div id="app">
            <span v-bind:title="message">鼠标悬停，查看提示信息！</span>
        </div>
        
        <!-- 02-导入 vue.js -->
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
        
        <!-- 03-编写 Vue 对象 -->
        <script>
            var vm = new Vue({
                /* 绑定 id 为 app 的元素 */
                el: '#app',
                // Model：数据
                data: {
                    message: 'Hello , Vue !!!'
                }
            });
        </script>
    </body>
</html>

v-bind 指令展示效果如下：

TIPS：

在上述代码中，你看到的 v-bind 被称为 指令 。在 Vue 中，指令带有前缀 v- ，用于表示它们是 Vue 提供的特殊特性。它们会在渲染的 DOM 上应用特殊的响应式行为。具体效果如上图。

v-if 和 v-else 指令

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true 值的时候被渲染。因为 v-if 是一个指令，所以必须将它添加到一个元素上 。你可以使用 v-else 指令来 表示 v-if 的 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
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8">
        <title>vue01</title>
    </head>
    <body>
        <!-- 01-view 层，即视图层 -->
        <div id="app">
            <h1 v-if="num === 1">1</h1>
            <h1 v-else-if="num === 2">2</h1>
            <h1 v-else>其他数字</h1>
        </div>
        
        <!-- 02-导入 vue.js -->
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
        
        <!-- 03-编写 Vue 对象 -->
        <script>
            var vm = new Vue({
                /* 绑定 id 为 app 的元素 */
                el: '#app',
                // Model：数据
                data: {
                    num: 1
                }
            });
        </script>
    </body>
</html>

v-if 和 v-else 的效果展示如下：

v-for 指令

我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组 ，而 item 则是被迭代的 数组元素的别名 。代码如下：

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
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8">
        <title>vue01</title>
    </head>
    <body>
        <!-- 01-view 层，即视图层 -->
        <div id="app">
            <!-- 不打印索引 -->
            <li v-for="item in items">
              {{item.message}}
            </li>
            
            <hr/>
            
            <!-- 打印索引 -->
            <li v-for="(item,index) in items">
              {{item.message}} --> {{index}}
            </li>
        </div>
        
        <!-- 02-导入 vue.js -->
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
        
        <!-- 03-编写 Vue 对象 -->
        <script>
            var vm = new Vue({
                /* 绑定 id 为 app 的元素 */
                el: '#app',
                // Model：数据
                data: {
                    items: [
                        {message: "从入门到精通"},
                        {message: "从入门到放弃"},
                        {message: "从入门到入狱"},
                        {message: "从删库到跑路"},
                        {message: "从看懂到看开"}
                    ]
                }
            });
        </script>
    </body>
</html>

v-for 指令展示效果如下：

v-on 指令

v-on 指令用于 监听 DOM 事件 ，并在触发时运行一些 JavaScript 代码。代码如下：

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
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8">
        <title>vue01</title>
    </head>
    <body>
        <!-- 01-view 层，即视图层 -->
        <div id="app">
            <button v-on:click="sayHi">点击我，有惊喜！！！</button>
        </div>
        
        <!-- 02-导入 vue.js -->
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
        
        <!-- 03-编写 Vue 对象 -->
        <script>
            var vm = new Vue({
                /* 绑定 id 为 app 的元素 */
                el: '#app',
                // Model：数据
                data: {
                    message: 'Hello , Vue !!! '
                },
                // 方法必须定义在 Vue 的 methods 对象中
                methods: {
                    sayHi: function () {
                        alert(this.message);
                    }
                }
            });
        </script>
    </body>
</html>

v-on 指令展示效果如下：

双向数据绑定

Vue 是一个 MVVM 框架，即 数据双向绑定 。当数据发生变化的时候，视图也就发生变化。当视图发生变化时，数据也会跟着同步变化。数据双向绑定需要使用 v-model 指令，代码如下：

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
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>vue01</title>
    </head>
    <body>
        <!-- 01-view 层，即视图层 -->
        <div id="app">
            
            输入的文本：<input type="text" v-model="message"><br/>
            {{message}}
            
            <hr/>
            
            性别：<input type="radio" name="sex" value="男" v-model="checked"> 男
            <input type="radio" name="sex" value="女" v-model="checked" checked> 女
            <br/>
            选中的性别：{{checked}}
            
            <hr/>
            
            下拉菜单：
            <select v-model="selected">
                <option value="" disabled>---请选择---</option>
                <option>A</option>
                <option>B</option>
                <option>C</option>
            </select>
            <br/>
            <span> value: {{selected}}</span>
        </div>
        
        <!-- 02-导入 vue.js -->
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
        
        <!-- 03-编写 Vue 对象 -->
        <script>
            var vm = new Vue({
                /* 绑定 id 为 app 的元素 */
                el: '#app',
                // Model：数据
                data: {
                    message: "123",
                    checked: "女",
                    selected: ''
                }
            });
        </script>
    </body>
</html>

数据双向绑定展示效果如下：

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
36
37
38
39
40
41
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="">
    <head>
        <meta charset="UTF-8">
        <title>vue01</title>
    </head>
    <body>
    <!-- 01-view 层，即视图层 -->
        <div id="app">
    
            <!-- 使用自定义组件 My-Component -->
            <!-- v-bind 中的 guo 是来自于下面 props 属性的值，v-bind:guo="item" 意思是遍历出来的 item 与 guo 进行绑定 -->
            <guoshizhan v-for="item in items" v-bind:guo="item"></guoshizhan>
    
        </div>
    
        <!-- 02-导入 vue.js -->
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
        
        <!-- 03-编写 Vue 对象 -->
        <script>
        
            // 定义一个组件，名字为 My-Component 。组件可以理解为自定标签
            Vue.component('guoshizhan', {
                // 此处的 guo 已经与上述 item 绑定，所以取出来的 guo 的值就是 遍历出来的 item 的值
                props: ['guo'],
                template: '<li>{{guo}}</li>'
        
            })
        
            var vm = new Vue({
                /* 绑定 id 为 app 的元素 */
                el: '#app',
                data: {
                    items: ['Java', 'Vue', 'HTML']
                }
            })
        
        </script>
    </body>
</html>

演示截图

Axios 异步通信

Axios 官网： http://www.axios-js.com

什么是 Axios

Axios 是一个开源的可以用在浏览器端和 NodeJs 的异步通信框架。它的主要作用就是 实现 AJAX 异步通信 。其特性如下：

  • 从浏览器中创建 XMLHttpRequests
  • 从 node.js 创建 http 请求
  • 支持 Promise API
  • 拦截请求和响应
  • 转换请求数据和响应数据
  • 取消请求
  • 自动转换 JSON 数据
  • 客户端支持防御 XSRF

TIPS：

Axios 是基于 ES6 规范的，所以使用 ES5 会报错，无法使用。
查看 JavaScript 版本 ：settings –> Languages & Frameworks –> JavaScript

第一个 Axios 应用程序

Vue 为什么需要使用 Axios 呢？ 由于 Vue 是一个视图层框架，并不包含 AJAX 的通信功能。所以需要使用 Axios 。

由于开发的接口大部分 采用 JSON 格式 ，所以先在根目录下创建一个名为 data.json 的文件，内容如下：

1
2
3
4
5
6
7
8
9
10
11
{
    "date": "2019.12.27",
    "src": "https://guoshizhan.github.io/avatar.gif",
    "name": "何年の再遇见",
    "desc": "愿你走出半生，归来仍是少年",
    "url": "https://guoshizhan.github.io",
    "address": {
        "street": "学苑路",
        "city": "吉安"
    }
}

在这里提前了解一下 Vue 的生命周期 。以下只提供图片，详情参考 官网教程 。图片如下：

Vue 的生命周期

接下来开始写代码。Axios 通过异步请求读取 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
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
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="">
    <head>
        <meta charset="UTF-8">
        <title>vue01</title>

        <!-- 解决闪烁问题，让其在网速慢的时候显示白屏，而不会显示未解析的表达式 -->
        <style>
            [v-block]{
              display: none;
            }
        </style>
    </head>
    <body>

    <!-- 01-view 层，即视图层 -->
    <div id="app" v-clock>
        <div>{{info.name}}</div>
        <div>{{info.src}}</div>
        <div>{{info.date}}</div>
        <div>{{info.desc}}</div>
        <a v-bind:href="info.url">我的博客</a>
    </div>

    <!-- 02-导入 vue.js 和 axios.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>

    <!-- 03-编写 Vue 对象 -->
    <script type="text/javascript">

        var vm = new Vue({
            el: '#app',
            data(){
                return {
                    // 请求返回的参数必须和 json 字符串一样
                    info: {
                        date: null,
                        src: null,
                        name: null,
                        desc: null,
                        url: null,
                    }
                }
            },
            mounted(){ // 钩子函数 链式编程 ES6新特性 。钩子函数在程序执行的时候可以插入到程序中执行
                axios.get('./data.json').then(response=>(this.info=response.data));
            }
        });

    </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
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
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="">
    <head>
        <meta charset="UTF-8">
        <title>vue01</title>

        <!-- 解决闪烁问题，让其在网速慢的时候显示白屏，而不会显示未解析的表达式 -->
        <style>
            [v-block]{
              display: none;
            }
        </style>
    </head>
    <body>

    <!-- 01-view 层，即视图层 -->
    <div id="app" v-clock>
      
        <!-- curTime 是 methods 里面的方法，所以 curTime 后面要加括号 -->
        <div>curTime : {{curTime()}}</div>

        <!-- curTimeComputed 是 computed 里面的方法，所以 curTime 后面不需要加括号 -->
        <div>curTimeComputed : {{curTimeComputed}}</div>
      
    </div>

    <!-- 02-导入 vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

    <!-- 03-编写 Vue 对象 -->
    <script type="text/javascript">

        var vm = new Vue({
            el: '#app',
            data: {
                message: "Hello , Vue !!!"
            },
            methods: {
                curTime: function () {
                    return Date.now();    // 返回一个时间戳
                }
            },
            // 计算属性：methods 和 computed 里面的方法名不能重名。如果重名，只会调用 methods 里面的方法
            // 计算属性作用就是将不经常变化的计算结果进行缓存，以节约系统开销
            computed: {
                curTimeComputed: function () {
                    this.message;
                    return Date.now();    // 返回一个时间戳
                }
            }
        });

    </script>

    </body>
</html>

计算属性 页面展示如下：

插槽 slot

插槽 这部分有点不好理解，只能举个通俗的例子来解释一下。我们的笔记本有很多接口，有 USB 接口，有 VGA 接口等等。这些* 预留的位置* 就和 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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="">
    <head>
        <meta charset="UTF-8">
        <title>vue01</title>

        <!-- 解决闪烁问题，让其在网速慢的时候显示白屏，而不会显示未解析的表达式 -->
        <style>
            [v-block]{
              display: none;
            }
        </style>
    </head>
    <body>

    <!-- 01-view 层，即视图层 -->
    <div id="app" v-clock>

        <!-- 使用自己定义的插槽 todo todo-title todo-items -->
        <todo>
          <todo-title slot="todo-title" :title="title"></todo-title>
          <todo-items slot="todo-items" v-for="item in Items" :item="item"></todo-items>
        </todo>

    </div>

    <!-- 02-导入 vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

    <!-- 03-编写 Vue 对象 -->
    <script type="text/javascript">

        // 01-定义插槽 todo
        Vue.component("todo", {
            template: '<div>' +
              // 绑定 todo-title 插槽
              '<slot name="todo-title"></slot>' +
              '<ul>' +
              // 绑定 todo-items 插槽
              '<slot name="todo-items"></slot>' +
              '</ul>' +
              '</div>'
        });

        // 02-定义插槽 todo-title
        Vue.component("todo-title",{
            props: ["title"],
            template: '<h1>{{title}}</h1>'
        });

        // 03-定义插槽 todo-items
        Vue.component("todo-items",{
            props: ["item"],
            template: '<li>{{item}}</li>'
        });

        var vm = new Vue({
            el: '#app',
            data: {
                title: "何年の再遇见",
                Items: ["Java", "html", "Linux", "python"]
            }
        });

    </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
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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="" xmlns:v-on="">
    <head>
        <meta charset="UTF-8">
        <title>vue01</title>

        <!-- 解决闪烁问题，让其在网速慢的时候显示白屏，而不会显示未解析的表达式 -->
        <style>
            [v-block]{
              display: none;
            }
        </style>
    </head>
    <body>

    <!-- 01-view 层，即视图层 -->
    <div id="app" v-clock>

        <!-- 使用自己定义的插槽 todo todo-title todo-items -->
        <todo>
          <todo-title slot="todo-title" :title="title"></todo-title>
          <todo-items slot="todo-items" v-for="(item,index) in Items"
                      :item="item" :index="index" v-on:remove="removeItems" :key="index"></todo-items>
        </todo>

    </div>

    <!-- 02-导入 vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

    <!-- 03-编写 Vue 对象 -->
    <script type="text/javascript">

        // 01-定义插槽 todo
        Vue.component('todo', {
            template: '<div>' +
              // 绑定 todo-title 插槽
              '<slot name="todo-title"></slot>' +
              '<ul>' +
              // 绑定 todo-items 插槽
              '<slot name="todo-items"></slot>' +
              '</ul>' +
              '</div>'
        })

        // 02-定义插槽 todo-title
        Vue.component('todo-title',{
            props: ['title'],
            template: '<h1>{{title}}</h1>'

        })

        // 03-定义插槽 todo-items
        Vue.component('todo-items',{
            props: ['item', 'index'],
            template: '<li>{{item}}--{{index}} <button @click="remove">删除</button></li>',
            methods: {
                remove: function (index) {
                    this.$emit('remove', index);
                }
            }
        })

        var vm = new Vue({
            el: '#app',
            data: {
                title: '何年の再遇见',
                Items: ['Java', 'html', 'Linux', 'python']
            },
            methods: {
                removeItems: function (index) {
                    console.log('删除了 ' + this.Items[index] + ' OK!')
                    this.Items.splice(index, 1)
                }
            }
        })

    </script>

    </body>
</html>

自定义事件展示效果如下：

Vue 正式开始

什么是 vue-cli

vue-cli 官方提供的一个脚手架，用于快速构建一个 vue 的项目模板 。vue-cli 和 Maven 是非常相似的，可以类比学习。vue-cli 的主要功能如下 ：

vue-cli 的主要功能：
1、统一目录结构 2、本地调试 3、热部署 4、单元测试 5、集成打包上线
vue-cli 需要的环境：
1、Node.js 2、Git

TIPS：

1、Node.js 必须安装好，Git 可以不安装。
2、安装教程： https://guoshizhan.club/blog-setup.html#more ，到 安装 hexo 验证 那里就可以了。

第一个 vue-cli 程序

附件1

什么是 webpack

npm install webpack -g

npm install webpack-cli -g

webpack 安装

  

📚 本站推荐文章
  👉 从 0 开始搭建 Hexo 博客
  👉 计算机网络入门教程
  👉 数据结构入门
  👉 算法入门
  👉 IDEA 入门教程

喜欢这篇文章？打赏一下作者吧

Mybatis 入门教程
英语体系构建

可在评论区留言哦

一言句子获取中...

分类

我的歌单

标签云

AJAX CMD命令 Docker English Git IDEA教程 IO 流 JSON Java Java基础 Java集合 Jenkins Layui 博客 LeetCode Linux MySQL Oracle数据库 PL/SQL Redis SSM Spring Spring Boot Spring MVC Vue hello world html icarus主题 mybatis svn windows教程 函数式编程 前端 博客搭建 反射注解 常用 API 常用算法 故事 数据库 数据结构 算法 网络编程 英语 计算机网络 面试

订阅更新

立即订阅跳转人机认证后，点击完成按钮！

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×