前端学习笔记 2：Vue

Vue 是一个目前最流行的前端响应式框架，关于它的简单介绍可以观看。

魔芋红茶

1262人浏览 · 2023-12-31 14:21:19

魔芋红茶 · 2023-12-31 14:21:19 发布

前端学习笔记 2：Vue

Vue 是一个目前最流行的前端响应式框架，关于它的简单介绍可以观看这里。

1.快速入门

Vue 的官网提供一个快速上手指南，有多种方式可以安装和使用 Vue，这里展示一个最简单的方式——直接导入官方提供的在线的核心 JS 文件进行使用。

这里展示的内容相当于官方快速上手指南中的使用 ES 模块构建版本。

需要先像在之前文章中介绍的那样，在 JS 模块中导入 Vue 的createApp函数：

<script type="module">
    import { createApp } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js";
</script>

要想让 Html 页面元素被 Vue 控制和渲染，需要使用createApp函数对其装载（mount）：

<body>
    <div id="app"></div>
    <script type="module">
        import { createApp } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js";
        createApp().mount("#app");
    </script>
</body>

在上边这个示例中，id 为app 的div元素（包括其子元素）被 Vue 控制和渲染，具体是通过createApp().mount("#app")实现的。

要想向被 Vue 控制的 Html 标签中写入（渲染）内容，需要先准备数据，具体是通过createApp的参数提供：

<script type="module">
    import { createApp } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js";
    createApp({
        data: function(){
            return {
                msg: "Hello World!"
            };
        }
    }).mount("#app");
</script>

这里createApp函数接收一个 JS 对象作为参数，该对象的data属性同样是一个函数，其返回值是一个 JS 对象，该对象的属性可以在 Vue 渲染的 Html 元素中使用。

当然，当 JS 对象的属性是函数时，也可以使用简写方式进行定义：

createApp({
    data(){
        return {
            msg: "Hello World!"
        };
    }
}).mount("#app");

准备好 Vue 数据后，在 Html 元素中使用插值表达式（{{...}}）插入数据：

<div id="app">
    <h1>{{msg}}</h1>
</div>

这样页面加载后就可以被 Vue 正常渲染和显示内容。

2.vue 指令

类似于一些模版语言，vue 提供一些程序控制指令，用于更灵活地对页面元素进行控制和渲染。

2.1.v-for

通常使用v-for指令将 JS 数组中的内容渲染到 Html 表格或列表中。

这里提供一个简单的示例代码：

<body>
    <div id="app">
        <table>
            <tr>
                <td>序号</td>
                <td>姓名</td>
                <td>年龄</td>
            </tr>
            <tr>
                <td>序号</td>
                <td>姓名</td>
                <td>年龄</td>
            </tr>
        </table>
    </div>
    <script type="module">
        import {createApp} from "https://unpkg.com/vue@3/dist/vue.esm-browser.js";
        createApp({
            data(){
                return {
                    students: [
                        {
                            name: "JackChen",
                            age: 19
                        },
                        {
                            name: "BrusLee",
                            age: 28
                        }
                    ]
                }
            }
        }).mount("#app");
    </script>
</body>

在上面的示例中，提供了一个表格，表格所在的 div 由 Vue 渲染，并且通过createApp函数的参数提供了一个可以用于填充表格的 JS 数组students。

现在使用v-for指令填充表格：

<table>
    <tr>
        <td>序号</td>
        <td>姓名</td>
        <td>年龄</td>
    </tr>
    <tr v-for="(student,index) in students">
        <td>{{index}}</td>
        <td>{{student.name}}</td>
        <td>{{student.age}}</td>
    </tr>
</table>

像上面展示的，只需要在需要循环填充的元素（这里是tr标签）中添加属性v-for，并在其值中使用(...) in ...的方式遍历 JS 数组读取元素和索引下标即可。

(...) in ...循环读取的写法与 Python 颇为类似。

如果不需要使用索引下标，可以简写：

v-for="student in students"

2.2.v-bind

我们已经知道，要在 Html 标签体中使用 Vue 提供的数据，需要使用插值表达式，但如果要在标签的属性值中使用 Vue 提供的数据，就要使用 v-bind 命令：

<body>
    <div id="app">
        <a v-bind:href="url">百度</a>
    </div>
    <script type="module">
        import {createApp} from "https://unpkg.com/vue@3/dist/vue.esm-browser.js";
        createApp({
            data(){
                return {
                    url: "https://www.baidu.com/"
                }
            }
        }).mount("#app");
    </script>
</body>

在上面的示例中，通过v-bind命令，将 Vue 中提供的url变量的值设置为a标签的href属性值。

特别的，使用v-bind:xxx设置属性值时，可以简写为:xxx，比如上面示例中可以简写为：

<a :href="url">百度</a>

2.3.v-if && v-show

可以使用v-if命令控制是否显示某个 Html 标签：

<body>
    <div id="app">
        商品价格：
        <span v-if="customer.level>=1 && customer.level<=2">9.9</span>
        <span v-else-if="customer.level>2 && customer.level<=3">19.9</span>
        <span v-else>29.9</span>
    </div>
    <script type="module">
        import { createApp } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
        createApp({
            data() {
                return {
                    customer: {
                        level: 2,
                        name: "JackChen"
                    }
                }
            }
        }).mount("#app");
    </script>
</body>

如同其他的模版语言一样，v-if可以结合v-else-if和v-else命令一起使用，起到通过条件表达式来控制是否显示 Html 元素的作用。

使用v-show同样可以控制 Html 元素是否在页面显示：

<div id="app">
    商品价格：
    <span v-show="customer.level>=1 && customer.level<=2">9.9</span>
    <span v-show="customer.level>2 && customer.level<=3">19.9</span>
    <span v-show="customer.level>3">29.9</span>
</div>

注意，v-show后的条件表达式不能为空。

页面展示效果是相同的，它们的区别在于作用机制不同：

v-if是通过将 Html 元素对应的 DOM 节点从页面文档的 DOM 树中删除/添加的方式控制是否显示。
v-show是通过设置元素的 CSS 样式（style="display:none"）来控制是否显示。

作用机制的不同决定了它们在生效时的性能差异，前者会触发 DOM 树的修改以及页面的重新渲染，而后者仅涉及页面重新渲染。

因此，如果有 Html 元素需要频繁的显示或隐藏，应当使用v-show，v-if应当用于仅在页面加载时需要判断是否显示的元素。

2.4.v-on

可以用v-on命令监听 HTML DOM 事件，并在相应的事件发生时执行指定的 JS 函数：

<body>
    <div id="app">
        <button v-on:click="redirect">跳转到百度</button>
    </div>
    <script type="module">
        import {createApp} from "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
        createApp({
            methods:{
                redirect(){
                    window.location.href="https://baidu.com"
                }
            }
        }).mount("#app");
    </script>
</body>

注意，这里绑定的是 DOM 元素的事件，而非 Html 事件，所以是click而不是onclick，两者的写法略有不同。

要绑定的 JS 方法需要定义在 Vue 函数createApp入参的methods属性中。

特别的，使用v-on绑定事件时可以简写为@event_name：

<button @click="redirect">跳转到百度</button>

2.5.v-model

v-model可以作用于 Html 表单元素，将其的视图与 Vue 中的数据模型进行双向绑定。这样就可以很容易地获取用户在表单元素中填写的值，或者通过 Vue 的数据模型修改表单元素的值。

下面是一个简单示例：

<body>
    <div id="app">
        <input v-model="num" />
        <button @click="increase">自增</button>
    </div>
    <script type="module">
        import { createApp } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
        createApp({
            data() {
                return {
                    num: 0
                }
            },
            methods: {
                increase() {
                    this.num++;
                }
            }
        }).mount("#app");
    </script>
</body>

在上面这个示例中，使用v-model将文本输入框与数据模型num进行了双向绑定，输入框的初始值是数据模型的初始值0，按钮的点击事件会触发increase函数，在该函数中对num自增，自增后同样会改变输入框中显示的值，这就是双向绑定。

increase方法中的this关键字在这里代表的并不是methods属性，而是 Vue 实例。因此可以通过this.num获取到需要的数据模型。

3.生命周期

类似于其它框架，Vue 实例有生命周期，包括从创建到销毁的一系列过程。这些过程有对应的生命周期钩子（方法）可以供我们调用，以在 Vue 实例的特定阶段执行某些代码。

比较常用的有mounted，这个方法对应 Vue 实例已经加载成功，类似于以前前端开发经常会使用的 document.ready 事件，可以将一些页面加载完毕后执行的内容放在该函数中。

下面是一个简单示例：

<body>
    <div id="app"></div>
    <script type="module">
        import { createApp } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
        createApp({
            mounted() {
                console.log("vue 实例加载完毕")
            }
        }).mount("#app");
    </script>
</body>

4.Axios

Axios 是一个前端框架，用它可以更方便地发送 Ajax 请求。

用于调试的后端示例代码可以从这里获取。

首先需要引用 Axios 的 JS 文件：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

具体的 JS 文件地址可以在官方指南中安装部分的 使用 unpkg CDN 找到。

看一个简单示例，使用 Axios 从服务端读取所有文章列表：

<body onload="getAllArticles()">
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        function getAllArticles() {
            axios({
                url: '/article/getAll',
                method: 'get',
                baseURL: 'http://localhost:8080'
            }).then(function (result) {
                console.log(result.data)
            }).catch(function (error) {
                console.log(error)
            });
        }
    </script>
</body>

这里使用的是axios的标准调用，可以在参数中设定各种调用所需的配置内容，包括 URL、调用方法等，具体可以参考官方文档中的请求配置。

接收到的响应信息可以使用级联调用的then方法的参数（这里是result）获取，该参数包含响应报文头、HTTP 状态码等信息，最常用的是响应报文体（result.data）。完整的响应内容结构可以参考官方文档的响应结构。

实际上then方法接收的是一个匿名函数，该匿名函数负责处理成功时的响应。所以也可以使用匿名函数的特殊写法作为 then 方法的参数：

axios({
    url: '/article/getAll',
    method: 'get',
    baseURL: 'http://localhost:8080'
}).then(result => {
    console.log(result.data)
}).catch(error => {
    console.log(error)
});

JS 中匿名函数的简写方式类似于 Java。

与then类似，用于处理调用失败时的响应函数在catch方法中设置。

除了上边这种最基本的调用方式，Axios 还提供一些更简单的调用方式，比如：

axios.get('http://localhost:8080/article/getAll').then(result => {
    console.log(result.data)
}).catch(error => {
    console.log(error)
});

类似的，对于 POST 请求，也有响应的简写方式：

axios.post('http://localhost:8080/article/add',{
    title: '哈利波特',
    category: '小说',
    time: '2001-10-01',
    state: '已发布'
})

更多的 POST 调用示例可以查看官方文档。

5.案例

可以用上面介绍的内容完成一个简单案例——一个带搜索功能的文章列表页面：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        文章分类：<input type="text" v-model="category" />
        发布状态：<input type="text" v-model="state" />
        <button @click="search">搜索</button>
        <table>
            <tr>
                <td>文章标题</td>
                <td>分类</td>
                <td>发表时间</td>
                <td>状态</td>
                <td>操作</td>
            </tr>
            <tr v-for="article in articles">
                <td>{{article.title}}</td>
                <td>{{article.category}}</td>
                <td>{{article.time}}</td>
                <td>{{article.state}}</td>
                <td>
                    <a>编辑</a>
                    <a>删除</a>
                </td>
            </tr>
        </table>
    </div>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script type="module">
        import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
        createApp({
            data() {
                return {
                    articles: [],
                    category: '',
                    state: ''
                }
            },
            methods: {
                loadArticles() {
                    axios.get("http://localhost:8080/article/getAll").then(result => {
                        this.articles = result.data
                    }).catch(error => {
                        console.log(error)
                    })
                },
                search() {
                    axios.get("http://localhost:8080/article/search", {
                        params: {
                            category: this.category,
                            state: this.state
                        }
                    }).then(result => {
                        this.articles = result.data
                    }).then(error => {
                        console.log(error)
                    })
                }
            },
            mounted() {
                this.loadArticles();
            }
        }).mount("#app");
    </script>
</body>

</html>

后台的搜索接口实际上有bug，如果某个搜索条件为空，就不会返回任何内容。

谢谢阅读，本文的完整示例代码可以从这里获取。

6.参考资料

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^