index

--- theme: fancy highlight: atelier-heath-light --- --- > 思考，输出，沉淀。用通俗的语言陈述技术，让自己和他人都有所收获。 > 作者：毅航😜 --- 一份写给后端开发者的`Vue`快速入门指南~ ## 前言 `Vue`是目前流行的一款`前端`框架，总的来看`Vue`具有如下三个特点： 1. **组件化**：`Vue`鼓励开发者将用户界面分解为可重用的组件。这些组件可以使开发的页面更加模块化和可维护。 1. **双向数据绑定**：`Vue`提供了一种轻松绑定数据和`DOM`元素之间的机制。这意味着当数据发生变化时，视图会自动更新，反之亦然。 1. **虚拟DOM**：`Vue`使用虚拟`DOM`来最小化实际`DOM`更新的次数，从而提高性能。简单了解`Vue`的特点后，接下来开始学习如何上手使用`Vue`。 ## `Vue`启动！就如同后端使用`SpringBoot`框架需要在`Maven`中配置如下依赖一样 ```xml org.springframework.boot spring-boot-starter-parent 2.5.3 ``` 在`前端`开发中，如果你要使用`Vue`框架你也需要进行框架的引入相关`Vue依赖`。在`前端`用于管理依赖的工具并没有像后端一样采用`Maven`来进行管理，而是引入了一个新的工具——`脚手架`。 (注：你也可以将脚手架直观地理解为`maven`~) 因此，为了快速构建`Vue`项目，我们可以选择脚手架工具`Vue CLI`来创建`vue`项目。如果不想这么麻烦，还可以采用如下的方式来快速使用`Vue`： 1. **使用CDN引入**。在`HTML`文件中添加以下配置： ```html ``` 2. **本地加载引入。** 将`vue.js`下载到本地，然后通过` ``` 运行上述代码，你就能在页面中看出打印出`Hello Vue`的相关内容。接下来，让我们来看看上述代码究竟做了哪些工作： 1. 通过`new`关键字构建一个`vue`实例对象。这点就像`Java`中`new`构建一个实例没太大区别。 2. 在构建`vue`实例对象时，可以传入一个`对象信息`。具体来看，其为`el`字段指定一个名为`#app`的属性。同时为`data`字段又配置的了一个对象信息。事实上，在`Vue`中`el`和`data`是两个重要的选项，其主要用于定义`Vue`实例的`根元素`和数据。其中， 1. **`el`选项**：用于指定`Vue`实例关联的`DOM`元素。它定义了`Vue`实例在哪个`DOM`元素上渲染和控制。值通常为一个`CSS`选择器（例如，`ID`选择器，`类选择器`等。如果对这部分不熟悉可参考之前文章的相关介绍：[开发者入门CSS指南：掌握样式与布局](https://juejin.cn/post/7281574972207677474)）。 1. **`data`选项**：主要用于定义`Vue`实例的数据。而数据属性可以是任何`JavaScript`数据类型，例如`字符串、数字、对象、数组`等。不难发现，通过构建一个`vue`实例对象，然后对该实例配置`el,data`两个字段指定`vue`实例作用对象，以及存储的数据信息，然后再页面中使用`{{}}`语法即可获取到`data`字段中配置的内容。 ## 数据操作接下来，我们再来看看`Vue`中与数据操纵相关的内容。 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d4e71e5eac4341b49c3e6e9352a33151~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=749&h=332&s=19366&e=png&b=ffffff) 在`Vue`中与数据操纵的操作息息相关的大致有`计算属性、侦听器、方法`等三种常见手段，接下来我们逐一来进行分析。 1. **计算属性**。`Vue`允许开发者定义计算属性，这些属性根据其他数据属性的值进行计算。**而计算属性会缓存计算结果，只有在依赖的数据属性发生变化时才会重新计算。** 具体来看如下代码： ```html index

圆的面积：{{ circleArea }}

``` 如上所示我们在`data`中定义了一个名称为`radius`属性，该属性内容通过`input`输入框会不断变化，当`radius`发生变化时，页面会自动渲染圆在该半径下对应的面积。具体如下所示： ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e818031fe6e14672b91b8657bb16930e~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=469&h=107&s=4286&e=png&b=fefefe) 2. **监听属性（`watch`）** ：除了计算属性外，也可以使用 `watch` 选项来监听数据属性的变化，然后执行自定义的操作。上述逻辑改为侦听器则逻辑如下： ```html index

圆的面积：{{ circleArea }}

``` 不难发现，`计算属性`和`侦听器`都能实现对数据的监听处理。但两者还是有区别的。具体来看， - 计算属性用于派生新的数据值，适用于处理数据的计算逻辑和格式化。 - 侦听器用于监视数据属性的变化，适用于执行异步、复杂或具有副作用的操作。换言之，**`computed`能完成的任务,`watch`都能完成；而`watch`能完成的任务,`computed`不一定能完成。例如,`watch`可以进行异步操作。** 3. **方法`method`。** 在`Vue`中，方法是指`Vue`实例中`methods`字段所定义的函数，其主要用于执行特定的操作或逻辑。具体来看：方法可以在`Vue`实例的`methods`选项中定义。 ```javascript new Vue({ methods: { sayHello: function() { console.log('Hello, Vue!'); } } }); ``` 进一步，方法调用方式如下： ```html ``` 此处，使用`v-on`指令（通常用`@`缩写）来绑定事件，以调用`sayHello`方法。此外，也可传递参数，具体如下所示： ```html ``` 而`greet`方法定义如下： ```javascript methods: { greet: function(name) { console.log('Hello, ' + name + '!'); } } ``` 此外，也可在`methods`中定义的方法内部访问`Vue`实例中配置的数据信息，具体访问方式如下： ```vue data: { message: 'Hello, Vue!' }, methods: { updateMessage: function() { this.message = 'Updated Message'; } } ``` (注：其中`this`必不可少，其表明访问当前`vue`实例对象中的数据) ## 指令操作 `Vue`中的指令是用于在模板中添加特殊功能和行为的特殊`HTML`属性。指令以`"v-"`前缀开头，它们允许您将数据绑定到`DOM`元素，操作`DOM`，执行条件渲染，迭代渲染，处理事件等。其中常用的指令如下： ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/99d882ece4654446a99537767832dd57~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=666&h=717&s=44448&e=png&b=ffffff) 1. **`v-model`**：用于实现双向数据绑定，通常用于表单元素，使输入框的值与数据属性保持同步。 ```html ``` 1. **`v-for`**：用于循环渲染列表中的元素，通常与`v-bind:key`一起使用。 ```html

{{ item.name }}

``` 1. **`v-if`、`v-else`、`v-else-if`**：用于条件渲染，根据条件决定是否渲染或显示DOM元素。 ```html

This is true

This is false

``` 1. **`v-show`**：用于根据条件切换元素的可见性，与`v-if`不同，它仅使用CSS样式控制显示/隐藏，不会添加/删除元素。 ```html

This may be hidden

``` 1. **`v-bind`（缩写为`:`）** ：用于绑定HTML属性的值到Vue实例的数据属性，以实现动态属性绑定。 ```html Visit Vue.js ``` 1. **`v-on`（缩写为`@`）** ：用于监听DOM事件，当事件触发时执行Vue实例的方法。 ```html ``` 1. **`v-once`**：用于标记元素和其子元素只渲染一次，后续的数据变化不会影响它们。 ```html

``` 这些是一些常见的`Vue`指令，`Vue`还提供了更多的指令和自定义指令的支持，以适应各种应用场景。具体可参考`Vue官网`(https://cn.vuejs.org/)。 ## 总结如果你想检验自己的学习效果，但又苦于不想写前端`CSS`样式,那不妨试试[五款超赞的Vue样式库，助你快速构建前端项目](https://juejin.cn/post/7297526380333236243)中提到的几款样式库，其可以帮助开发者快速构建`Vue`项目！其实关于后端程序员要不要学前端一直是一个很有争议的问题，毕竟人的的精力是有限的，我们似乎更应该将精力集中在后端或者前端上。在此笔者只是分享自己的一个观点，**不妨同时掌握前端和后端或者其他多个领域`80%`的知识。因为掌握某领域`100%`的知识是非常艰巨的一件事，所以退而求次，掌握多个领域`80%`的知识，进而让自己成为多面手，避免将自己思维局限于某一领域。** 当然，如上只是`笔者`的一些拙见，本文的重点还是帮助后端开发者快速熟悉`Vue`框架。如果觉得文章对你有所帮助，不妨点个关注或赞，不错过之后的每一次更新。