后端扫盲系列 - vue入门指南

vue特点

  1. 组件化:用户界面分解为可重用的组件,这些组件可以使开发的页面更加模块化和可维护=
  2. 双向数据绑定:vue提供了一种轻松绑定数据和DOM元素之间的机制,意味着数据发送变化时,视图会自动更新,反之亦然
  3. 虚拟DOM:vue使用虚拟DOM来最小化实际DOM更新的次数,从而提高性能

认知

在前端开发中,如果你要使用Vue框架你也需要进行框架的引入相关Vue依赖,在前端用于管理依赖的工具并没有像后端一样采用Maven来进行管理,而是引入了一个新的工具 --- 脚手架(也可以将脚手架直观地理解为maven)

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

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

复制代码
//使用CDN引入   在HTML文件中添加以下配置
<!-- 开发版本,包含带有警告的调试模式 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

本地加载引入

复制代码
//本地加载引入
将vue.js下载到本地,然后通过<script>引入

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
//上述代码做的工作

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

事实上,在Vue中el和data是两个重要的选项,其主要用于定义Vue实例的根元素和数据。其中,
1.el选项:用于指定Vue实例关联的DOM元素。它定义了Vue实例在哪个DOM元素上渲染和控制。值通常为一个CSS选择器
2.data选项:主要用于定义Vue实例的数据。而数据属性可以是任何JavaScript数据类型,例如字符串、数字、对象、数组等。
不难发现,通过构建一个vue实例对象,然后对该实例配置el,data两个字段指定vue实例作用对象,以及存储的数据信息,然后再页面中使用{{}}语法即可获取到data字段中配置的内容。

数据操作

在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>

​​​​​​​监听属性(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>

指定操作

v-model

用于实现双向数据绑定,通常用于表单元素,使输入框的值与数据属性保持同步

复制代码
<input v-model="message">

v-for

用于循环渲染列表中的元素,通常与v-bind:key一起使用

复制代码
<ul>
  <li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>

v-if、v-else、v-else-if

用于条件渲染,根据条件决定是否渲染或显示DOM元素

复制代码
<p v-if="isTrue">This is true</p>
<p v-else>This is false</p>

v-show

用于根据条件切换元素的可见性,与v-if不同,仅使用CSS样式控制显示/隐藏,不会添加/删除元素

复制代码
<p v-show="isVisible">This may be hidden</p>

v-bind(缩写为:)

用于绑定HTML属性的值到Vue实例的数据属性,以实现动态属性绑定

复制代码
<a :href="url">Visit Vue.js</a>

v-on(缩写为@)

用于监听DOM事件,当事件触发时执行Vue实例的方法

复制代码
<button @click="doSomething">Click me</button>

v-once

用于标记元素和其子元素只渲染一次,后续的数据变化不会影响它们

复制代码
<p v-once>{{ message }}</p>
相关推荐
Rockson3 分钟前
使用Ruby接入实时行情API教程
javascript·python
booooooty7 分钟前
基于Spring AI Alibaba的多智能体RAG应用
java·人工智能·spring·多智能体·rag·spring ai·ai alibaba
极光雨雨13 分钟前
Spring Bean 控制销毁顺序的方法总结
java·spring
祝余呀15 分钟前
HTML初学者第三天
前端·html
就爱瞎逛31 分钟前
TailWind CSS Intellisense 插件在VSCode 上不生效
前端·css·vscode·tailwind
柚子81634 分钟前
sibling-index:我用这个画时钟表盘
前端·css
Spirit_NKlaus43 分钟前
解决HttpServletRequest无法获取@RequestBody修饰的参数
java·spring boot·spring
UI设计和前端开发从业者1 小时前
UI前端大数据处理策略优化:基于云计算的数据存储与计算
前端·ui·云计算
前端小巷子1 小时前
Web开发中的文件上传
前端·javascript·面试
lwb_01182 小时前
SpringCloud——Gateway新一代网关
spring·spring cloud·gateway