网站首页 > 技术文章正文

写给后端大忙人看的vue入门指南（vue后端管理系统）

nanyue 2024-10-29 14:49:43 技术文章 4 ℃

一份写给后端开发者的Vue快速入门指南~

前言

Vue是目前流行的一款前端框架，总的来看Vue具有如下三个特点：

组件化：Vue鼓励开发者将用户界面分解为可重用的组件。这些组件可以使开发的页面更加模块化和可维护。
双向数据绑定：Vue提供了一种轻松绑定数据和DOM元素之间的机制。这意味着当数据发生变化时，视图会自动更新，反之亦然。
虚拟DOM：Vue使用虚拟DOM来最小化实际DOM更新的次数，从而提高性能。

简单了解Vue的特点后，接下来开始学习如何上手使用Vue。

Vue启动！

就如同后端使用SpringBoot框架需要在Maven中配置如下依赖一样

<parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>2.5.3</version>
</parent>

在前端开发中，如果你要使用Vue框架你也需要进行框架的引入相关Vue依赖。在前端用于管理依赖的工具并没有像后端一样采用Maven来进行管理，而是引入了一个新的工具——脚手架。

(注：你也可以将脚手架直观地理解为maven~)

因此，为了快速构建Vue项目，我们可以选择脚手架工具Vue CLI来创建vue项目。如果不想这么麻烦，还可以采用如下的方式来快速使用Vue：

使用CDN引入。在HTML文件中添加以下配置：

<!-- 开发版本，包含带有警告的调试模式 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

本地加载引入。 将vue.js下载到本地，然后通过<script>引入。

Vue的基础使用

在使用Vue之前，不妨先来思考下我们是如何来构建一个后端SpringBoot项目的。在后端开发中当你使用SpringBoot开发时，构建SpringBoot步骤大致如下：

用@SpringBootApplication声明一个启动类；
在启动类中调用SpringApplication.run()方法来启动应用。

(注：如果对SpringBoot中Run方法感兴趣的话可参考笔者之前的：概览SpringBoot的run方法主干逻辑进行了解！)

与之相类似，前端使用vue大致逻辑也是如此！如下代码展示了开发者该如何快速构建一个vue项目

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index</title>
</head>
 
<body>
   
    <div id="app">
        <!-- 表达式 -->
        <h1>{{message}}</h1>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        // 创建Vue的实例
        new Vue({
            // 绑定id为app的元素
            el: "#app",
            // 数据
            data: {
                message: "hello Vue!"
            }
        })
    </script>
</body>
 
</html>

运行上述代码，你就能在页面中看出打印出Hello Vue的相关内容。接下来，让我们来看看上述代码究竟做了哪些工作：

通过new关键字构建一个vue实例对象。这点就像Java中new构建一个实例没太大区别。
在构建vue实例对象时，可以传入一个对象信息。具体来看，其为el字段指定一个名为#app的属性。同时为data字段又配置的了一个对象信息。

事实上，在Vue中el和data是两个重要的选项，其主要用于定义Vue实例的根元素和数据。其中，

el选项：用于指定Vue实例关联的DOM元素。它定义了Vue实例在哪个DOM元素上渲染和控制。值通常为一个CSS选择器（例如，ID选择器，类选择器等。如果对这部分不熟悉可参考之前文章的相关介绍：开发者入门CSS指南：掌握样式与布局）。
data选项：主要用于定义Vue实例的数据。而数据属性可以是任何JavaScript数据类型，例如字符串、数字、对象、数组等。

不难发现，通过构建一个vue实例对象，然后对该实例配置el,data两个字段指定vue实例作用对象，以及存储的数据信息，然后再页面中使用{{}}语法即可获取到data字段中配置的内容。

数据操作

接下来，我们再来看看Vue中与数据操纵相关的内容。

在Vue中与数据操纵的操作息息相关的大致有计算属性、侦听器、方法等三种常见手段，接下来我们逐一来进行分析。

计算属性。Vue允许开发者定义计算属性，这些属性根据其他数据属性的值进行计算。而计算属性会缓存计算结果，只有在依赖的数据属性发生变化时才会重新计算。 具体来看如下代码：

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index</title>
</head>
 
<body>
    <div id="app"> 
      <input type="text" v-model="radius">
      <p>圆的面积：{{ circleArea }}</p>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        new Vue({
          el:"#app",
          data: {
            radius: 5
          },
          computed: {
            circleArea: function() {
              return Math.PI * Math.pow(this.radius, 2);
            }
          }
        });
    </script>
</body>
 
</html>

如上所示我们在data中定义了一个名称为radius属性，该属性内容通过input输入框会不断变化，当radius发生变化时，页面会自动渲染圆在该半径下对应的面积。具体如下所示：

监听属性（watch） ：除了计算属性外，也可以使用 watch 选项来监听数据属性的变化，然后执行自定义的操作。上述逻辑改为侦听器则逻辑如下：

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index</title>
</head>
 
<body>
    <div id="app"> 
      <input type="text" v-model="radius">
      <p>圆的面积：{{ circleArea }}</p>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        new Vue({
          el:"#app",
          data: {
            radius: 0,
            circleArea:0
        },
          watch: {
           radius:function(newValue,oldVule){
            console.log(newValue)
                this.circleArea = Math.PI * Math.pow(newValue, 2);
           }
          }
        });
    </script>
</body>
 
</html>

不难发现，计算属性和侦听器都能实现对数据的监听处理。但两者还是有区别的。具体来看，

计算属性用于派生新的数据值，适用于处理数据的计算逻辑和格式化。
侦听器用于监视数据属性的变化，适用于执行异步、复杂或具有副作用的操作。

换言之，computed能完成的任务,watch都能完成；而watch能完成的任务,computed不一定能完成。例如,watch可以进行异步操作。

方法method。 在Vue中，方法是指Vue实例中methods字段所定义的函数，其主要用于执行特定的操作或逻辑。具体来看：方法可以在Vue实例的methods选项中定义。

new Vue({
  methods: {
    sayHello: function() {
      console.log('Hello, Vue!');
    }
  }
});

进一步，方法调用方式如下：

<button @click="sayHello">Say Hello</button>

此处，使用v-on指令（通常用@缩写）来绑定事件，以调用sayHello方法。此外，也可传递参数，具体如下所示：

<button @click="greet('John')">Greet John</button>

而greet方法定义如下：

methods: {
  greet: function(name) {
    console.log('Hello, ' + name + '!');
  }
}

此外，也可在methods中定义的方法内部访问Vue实例中配置的数据信息，具体访问方式如下：

data: {
  message: 'Hello, Vue!'
},
methods: {
  updateMessage: function() {
    this.message = 'Updated Message';
  }
}

(注：其中this必不可少，其表明访问当前vue实例对象中的数据)

指令操作

Vue中的指令是用于在模板中添加特殊功能和行为的特殊HTML属性。指令以"v-"前缀开头，它们允许您将数据绑定到DOM元素，操作DOM，执行条件渲染，迭代渲染，处理事件等。其中常用的指令如下：

v-model：用于实现双向数据绑定，通常用于表单元素，使输入框的值与数据属性保持同步。
html
复制代码
<input v-model="message">
v-for：用于循环渲染列表中的元素，通常与v-bind:key一起使用。
html
复制代码
<ul> <li v-for="item in items" :key="item.id">{{ item.name }}</li> </ul>
v-if、v-else、v-else-if：用于条件渲染，根据条件决定是否渲染或显示DOM元素。
html
复制代码
<p v-if="isTrue">This is true</p> <p v-else>This is false</p>
v-show：用于根据条件切换元素的可见性，与v-if不同，它仅使用CSS样式控制显示/隐藏，不会添加/删除元素。
html
复制代码
<p v-show="isVisible">This may be hidden</p>
v-bind（缩写为:） ：用于绑定HTML属性的值到Vue实例的数据属性，以实现动态属性绑定。
html
复制代码
<a :href="url">Visit Vue.js</a>
v-on（缩写为@） ：用于监听DOM事件，当事件触发时执行Vue实例的方法。
html
复制代码
<button @click="doSomething">Click me</button>
v-once：用于标记元素和其子元素只渲染一次，后续的数据变化不会影响它们。
html
复制代码
<p v-once>{{ message }}</p>

这些是一些常见的Vue指令，Vue还提供了更多的指令和自定义指令的支持，以适应各种应用场景。具体可参考Vue官网(cn.vuejs.org/)。

总结

如果你想检验自己的学习效果，但又苦于不想写前端CSS样式,那不妨试试五款超赞的Vue样式库，助你快速构建前端项目中提到的几款样式库，其可以帮助开发者快速构建Vue项目！

其实关于后端程序员要不要学前端一直是一个很有争议的问题，毕竟人的的精力是有限的，我们似乎更应该将精力集中在后端或者前端上。在此笔者只是分享自己的一个观点，不妨同时掌握前端和后端或者其他多个领域80%的知识。因为掌握某领域100%的知识是非常艰巨的一件事，所以退而求次，掌握多个领域80%的知识，进而让自己成为多面手，避免将自己思维局限于某一领域。

当然，如上只是笔者的一些拙见，本文的重点还是帮助后端开发者快速熟悉Vue框架。如果觉得文章对你有所帮助，不妨点个关注或赞，不错过之后的每一次更新。

上一篇： vue3 高阶 API 大汇总，强到离谱（vue3.0api）
下一篇：请你阐述一下对vue虚拟dom的理解（vue的虚拟dom和react的虚拟dom）

网站首页 > 技术文章 正文