在成为真正的“全栈工程师的”的路上，前端必不可少，在学习完前端三件套（HTML、CSS、JavaScript）、jQuery之后，我们正式步入 前端框架Vue 的学习，Vue是时下流行的前端三大框架（Vue、React、Angular）之一，是前端框架优势的集大成者，这篇笔记作于跟随 bilibili 《【狂神说Java】Vue最新快速上手教程通俗易懂》的学习过程中。

1. SSM回顾

image-20200510173738152

2. Vue简介

Angular

Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架（逐步实现新特性）。

Vue 只关注视图层， 采用自底向上增量开发的设计。

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

3. 快速入门

1. IDEA安装插件

image-20200510183529604

2. 导入Vue.js

CDN网址：https://www.bootcdn.cn/vue/

源代码：cdn.jsdelivr.net/npm/vue

1
2
3
4
5
<!-- 学习过程中使用 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境中使用 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.common.js"></script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    {{message}}
</div>

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue.js!'
        }
    })
</script>
</body>
</html>

运行结果：

image-20200510185442139

4. MVVM

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

<div id="app">
    <h1 v-if="ok">Yes</h1>
    <h1 v-else>No</h1>
</div>

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            ok: false
        }
    })
</script>

</body>
</html>

结果：

image-20200511112428427

循环

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

    <ul>
        
<!--   index 为数组下标，是自带的值         -->        
<!--   <li v-for="(item,index) in items">-->
       <li v-for="item in items">
           {{item.message}}
       </li>
</ul>
</div>

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            items: [
                {message: 'wxshhh'},
                {message: '前端'},
                {message: 'vue'}
            ]
        }
    })
</script>
</body>
</html>

结果：

image-20200511113035433

事件

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

<div id="app">
    <button v-on: onclick="greet">Click Me</button>
</div>

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            message: "Hello"
        },
        methods: {
            greet: function (event) {
                // `this` 在方法里指向当前 Vue 实例
                alert('Hello ' + this.message + '!')
                // `event` 是原生 DOM 事件
                if (event) {
                    alert(event.target.tagName)
                }
            }
        }
    })
</script>
</body>
</html>

参考

狂神说Java：https://www.bilibili.com/video/BV18E411a7mC

Vue官网：https://cn.vuejs.org/v2/guide/

菜鸟教程：https://www.runoob.com/vue2/vue-tutorial.html