持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第21天，点击查看活动详情

Vue入门教程

写在前面😘

大一电子信息工程新生，请多多关照，希望能在掘金记录自己的学习历程！

一、Vue框架概述

Vue 是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。

Vue基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上。

1️⃣MVC思想

MVC 思想是没法进行双向绑定的。双向绑定是指当数据模型数据发生变化时，页面展示的会随之发生变化，而如果表单数据发生变化，绑定的模型数据也随之发生变化。

C 就是咱们 js 代码，M 就是数据，而 V 是页面上展示的内容，如下图是我们之前写的代码

2️⃣MVVM思想

图中的 Model 就是我们的数据，View 是视图，也就是页面标签，用户可以通过浏览器看到的内容；Model 和 View 是通过 ViewModel 对象进行双向绑定的，而 ViewModel 对象是 Vue 提供的。接下来让大家看一下双向绑定的效果，下图是提前准备的代码，输入框绑定了 username 模型数据，而在页面上也使用 {{}} 绑定了 username 模型数据

二、Vue快速入门

Vue官方文档

Vue菜鸟教程

1️⃣引入 Vue.js文件

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>

2️⃣创建Vue核心对象

<script >
var vm = new Vue({
  // 选项
})
</script>

3️⃣进行数据绑定

创建 Vue 对象时，需要传递一个 js 对象，而该对象中需要如下属性
- el ：用来指定哪儿些标签受 Vue 管理。该属性取值 #vue_det 中的 vue_det 需要是受管理的标签的id属性值
- data ：用来定义数据模型
- methods ：用来定义函数。

<script >
    var vm = new Vue({
        el: '#vue_det',
        data: {
            a: "hello,",
            b: "Vue",
            description: "字符串拼接",
        },
        methods: {
            add: function() {
                return  this.a+this.b;
            }
        }
    })
</script>

4️⃣编写视图

{{}} 是 Vue 中定义的 插值表达式 ，在里面写数据模型，到时候会将该模型的数据值展示在这个位置。

<div id="vue_det">
    <h1>{{description}}</h1>
    <input name="a" v-model="a" >
    <br>
    <input name="b" v-model="b" >
    <br>
    {{add()}}
</div>

5️⃣演示结果

整体代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Vue 测试实例</title>
        <!--    引入vue.js文件-->
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
    </head>
    <body>
        <div id="vue_det">
            <h1>{{description}}</h1>
            <input name="a" v-model="a">
            <br>
            <input name="b" v-model="b">
            <br>
            {{add()}}
        </div>
        <script type="text/javascript">
            var vm = new Vue({
                el: '#vue_det',
                data: {
                    a: "hello,",
                    b: "Vue",
                    description: "字符串拼接",
                },
                methods: {
                    add: function () {
                        return this.a + this.b;
                    }
                }
            })
        </script>
    </body>
</html>

三、Vue常用指令

1️⃣ v-bind & v-model 指令

v-bind

该指令可以给标签属性绑定模型数据。这样模型数据发生变化，标签属性值也随之发生变化

<a v-bind:href="url">点击一下</a>
<!--
	v-bind 可以省略
-->
<a :href="url">点击一下</a>

v-model

该指令可以给表单项标签绑定模型数据。这样就能实现双向绑定效果

<input name="username" v-model="username">

代码演示

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!--    引入vue.js文件-->
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
    </head>
    <body>
        <div id="app">
            <a v-bind:href="url">点击一下</a>
            <a :href="url">点击一下</a>
            <input v-model="url">
        </div>


        <script src="js/vue.js"></script>
        <script>
            //1. 创建Vue核心对象
            new Vue({
                el:"#app",
                data(){
                    return {
                        username:"",
                        url:"https://www.baidu.com"
                    }
                }
            });
        </script>
    </body>
</html>

2️⃣ v-on 指令

例如给按钮使用 v-on 指令绑定单击事件

<input type="button" value="一个按钮" v-on:click="show()">
<!-- `v-on:` 可以替换成 `@` -->
<input type="button" value="一个按钮" @click="show()">

上面代码绑定的 show() 需要在 Vue 对象中的 methods 属性中定义出来

new Vue({
    el: "#app",
    methods: {
        show(){
            alert("我被点了");
        }
    }
});

==注意：==v-on: 后面的事件名称是之前原生事件属性名去掉on。

例如：

单击事件：事件属性名是 onclick，而在vue中使用是 v-on:click

失去焦点事件：事件属性名是 onblur，而在vue中使用时 v-on:blur

3️⃣条件判断指令

if&else&if-else

现在要实现，当 count 模型的数据是1时，在页面上展示 div1 内容；当 count 模型的数据是2时，在页面上展示 div2 内容；count 模型数据是其他值时，在页面上展示 div-else。这里为了动态改变模型数据 count 的值，再定义一个输入框绑定 count 模型数据。html 代码如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!--    引入vue.js文件-->
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
    </head>
    <body>
        <div id="app">
            <div v-if="count == 1">div1</div>
            <div v-else-if="count == 2">div2</div>
            <div v-else>div-else</div>
            <hr>
            <input v-model="count">
        </div>


        <script>
            //1. 创建Vue核心对象
            new Vue({
                el:"#app",
                data(){
                    return {
                        count:1
                    }
                }
            });
        </script>
    </body>
</html>

演示结果如下👇

show

在看看 v-show 指令的效果，如果模型数据 count 的值是4时，展示 div v-show 内容，否则不展示，html页面代码如下

<div v-show="count == 4">div v-show</div>
<br>
<input v-model="count">

if和show的区别

v-show 和 v-if 实现的效果一样，但原理不同

通过上图可以看出 v-show 不展示的原理是给对应的标签添加 display css属性，并将该属性值设置为 none ，这样就达到了隐藏的效果。而 v-if 指令是条件不满足时根本就不会渲染。

4️⃣v-for 指令

==注意：==需要循环那个标签，v-for 指令就写在那个标签上。

语法格式

    <!--遍历格式-->
<标签 v-for="变量名 in 集合模型数据">
    {{变量名}}
</标签>
    <!--索引变量是从0开始，所以要表示序号的话，需要手动的加1-->
<标签 v-for="(变量名,索引变量) in 集合模型数据">
   {{索引变量 + 1}} {{变量名}}
</标签>

代码演示

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!--    引入vue.js文件-->
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
    </head>
    <body>
        <div id="app">
            <div v-for="addr in addrs">
                {{addr}} <br>
            </div>

            <hr>
            <div v-for="(addr,i) in addrs">
                {{i+1}}--{{addr}} <br>
            </div>
        </div>

        <script>

            //1. 创建Vue核心对象
            new Vue({
                el:"#app",
                data(){
                    return {
                        addrs:["北京","上海","西安"]
                    }
                }
            });
        </script>
    </body>
</html>

四、Vue生命周期

生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法，这些生命周期方法也被称为钩子方法。

下图是 Vue 官网提供的从创建 Vue 到效果 Vue 对象的整个过程及各个阶段对应的钩子函数

这些钩子方法我们只关注 mounted 就行了
mounted：挂载完成，Vue初始化成功，HTML页面渲染成功。而以后我们会在该方法中==发送异步请求，加载数据。==

五、案例

==需求：==品牌列表数据查询和添加功能

1️⃣查询所有功能

a.引入axios和vue的js文件

<!--    引入axios文件-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!--    引入vue.js文件-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>

b.创建 Vue 对象

在 Vue 对象中定义模型数据
在钩子函数**mounted()**中发送异步请求，并将响应的数据赋值给数据模型

<script>

    var vue1 = new Vue({
        el: '#app',
        data(){
            return {
                brands: []
            }
        },
        mounted() {
            // 页面加载完成后，发送异步请求，查询数据
            var _this = this;
            axios({
                method: "get",
                url: "http://localhost:8080/VueDemo/select"
            }).then(function (resp) {
                _this.brands = resp.data;
            })
        }
    })


</script>

c.修改视图

定义 <div id="app"></div> ，指定该 div 标签受 Vue 管理
在表格中的数据行上使用 v-for 指令遍历

d.整体页面代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>品牌列表</title>
    <!--    引入axios文件-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!--    引入vue.js文件-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
</head>
<body>
<div id="app">
    <a href="addBrand.html"><input type="button" value="新增"></a><br>
    <hr>
    <table id="brandTable" border="1" cellspacing="0" width="100%">
        <tr>
            <th>序号</th>
            <th>品牌名称</th>
            <th>企业名称</th>
            <th>排序</th>
            <th>品牌介绍</th>
            <th>状态</th>
            <th>操作</th>
        </tr>
        <!--
            使用v-for遍历tr
        -->
        <tr v-for="(brand,i) in brands" align="center">
            <td>{{i + 1}}</td>
            <td>{{brand.brandName}}</td>
            <td>{{brand.companyName}}</td>
            <td>{{brand.ordered}}</td>
            <td>{{brand.description}}</td>
            <td>{{brand.statusStr}}</td>
            <td><a href="#">修改</a> <a href="#">删除</a></td>
        </tr>
    </table>
</div>


<script>

    var vue1 = new Vue({
        el: '#app',
        data(){
            return {
                brands: []
            }
        },
        mounted() {
            // 页面加载完成后，发送异步请求，查询数据
            var _this = this;
            axios({
                method: "get",
                url: "http://localhost:8080/VueDemo/select"
            }).then(function (resp) {
                _this.brands = resp.data;
            })
        }
    })


</script>
</body>
</html>

2️⃣添加品牌数据

==注意：==前端代码的关键点在于使用 v-model 指令给标签项绑定模型数据，利用双向绑定特性，在发送异步请求时提交数据。

a.引入axios和vue的js文件

<!--    引入axios文件-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!--    引入vue.js文件-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>

b.创建 Vue 对象

在 Vue 对象中定义模型数据 brand
定义一个 submitForm() 函数，用于给 提交 按钮提供绑定的函数
在 submitForm() 函数中发送 ajax 请求，并将模型数据 brand 作为参数进行传递

<script>
    new Vue({
        el: "#app",
        data() {
            return {
                brand: {}
            }
        },
        methods: {
            submitForm() {
                // 发送ajax请求，添加
                var _this = this;
                axios({
                    method: "post",
                    url: "http://localhost:8080/VueDemo/add",
                    data: _this.brand
                }).then(function (resp) {
                    // 判断响应数据是否为 success
                    if (resp.data == "success") {
                        location.href = "http://localhost:8080/VueDemo/brand.html";
                    }
                })

            }
        }
    })
</script>

c.修改视图

定义 <div id="app"></div> ，指定该 div 标签受 Vue 管理
给每一个表单项标签绑定模型数据。最后这些数据要被封装到 brand 对象中

d.整体页面代码

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>添加品牌</title>
        <!--    引入axios文件-->
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <!--    引入vue.js文件-->
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
    </head>
    <body>
        <div id="app">
            <h3>添加品牌</h3>
            <form action="" method="post">
                品牌名称：<input id="brandName" v-model="brand.brandName" name="brandName"><br>
                企业名称：<input id="companyName" v-model="brand.companyName" name="companyName"><br>
                排序：<input id="ordered" v-model="brand.ordered" name="ordered"><br>
                描述信息：<textarea rows="5" cols="20" id="description" v-model="brand.description"
                               name="description"></textarea><br>
                状态：
                <input type="radio" name="status" v-model="brand.status" value="0">禁用
                <input type="radio" name="status" v-model="brand.status" value="1">启用<br>

                <input type="button" id="btn" @click="submitForm" value="提交">
            </form>
        </div>


        <script>
            new Vue({
                el: "#app",
                data() {
                    return {
                        brand: {}
                    }
                },
                methods: {
                    submitForm() {
                        // 发送ajax请求，添加
                        var _this = this;
                        axios({
                            method: "post",
                            url: "http://localhost:8080/VueDemo/add",
                            data: _this.brand
                        }).then(function (resp) {
                            // 判断响应数据是否为 success
                            if (resp.data == "success") {
                                location.href = "http://localhost:8080/VueDemo/brand.html";
                            }
                        })

                    }
                }
            })
        </script>
    </body>
</html>

写在后面🍻

感谢观看啦✨
有什么不足，欢迎指出哦💖
掘金的运营同学审核辛苦了💗

Vue.js入门教程

Vue入门教程

写在前面😘

一、Vue框架概述

1️⃣MVC思想

2️⃣MVVM思想

二、Vue快速入门

1️⃣引入 Vue.js文件

2️⃣创建Vue核心对象

3️⃣进行数据绑定

4️⃣编写视图

5️⃣演示结果

三、Vue常用指令

1️⃣ v-bind & v-model 指令

v-bind

v-model

代码演示

2️⃣ v-on 指令

3️⃣条件判断指令

if&else&if-else

show

if和show的区别

4️⃣v-for 指令

语法格式

代码演示

四、Vue生命周期

五、案例

1️⃣查询所有功能

a.引入axios和vue的js文件

b.创建 Vue 对象

c.修改视图

d.整体页面代码

2️⃣添加品牌数据

a.引入axios和vue的js文件

b.创建 Vue 对象

c.修改视图

d.整体页面代码

写在后面🍻