1天搞定SpringBoot+Vue全栈开发 (5)Vue框架快速上手

简介: 1天搞定SpringBoot+Vue全栈开发 (5)Vue框架快速上手

1.前端环境准备


VScode(WebStorm也可以)


2.Vue框架介绍


e063249c9ad141f3b94d41a55325f583.jpg

603be63792e04502bde3ec3f62731228.jpg


3.Vue快速入门


3.1导入vue.js的scrip的脚本文件

<script src="https://unpkg.com/vue@next">< script>


3.2在页面中声明一个将要被vue所控制的DOM区域,即MVVM中的View

<div id="app">
    {{message}}
</div>


3.3创建vm实例对象

const hello = {
// 指定数据源,既MVVM中的Model
    data: function() {    
        return {
            message: 'Hello Vue!'
        }
    }     
}   
const app = Vue.createApp(hello)
app.mount('#app') // 指定当前vue实例要控制页面的哪个区域


4.Vue的几个用法


1.基本用法

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--1.导入vue的脚本文件-->
    <script src="https://unpkg.com/vue@3"></script>
</head>
 
<body>
    <!--2.声明要被vue所控制的DOM区域-->
    <div id="app">
        {{message}}
    </div>
    <!--3.创建vue的实例对象-->
    <script>
        const hello = {
            //指定数据源,即MVVM中的Model
            data: function () {
                return {
                    message: 'Hello Vue!'
                }
            }
        }
        const app = Vue.createApp(hello)
        app.mount('#app')
    </script>
</body>
 
</html>


测试:

b94dd1a73442499bae1c6cff72b9a1a5.jpg

2.内容渲染指令

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
 
<body>
    <div id="app">
        <p>姓名:{{username}} </p>
        <p>性别:{{gender}}</p>
 
        <!-- 渲染百度的链接-->
        <p>{{desc}}</p>
        <p v-html="desc"></p>
    </div>
 
    <script>
        const vm = {
            data: function () {
                return {
                    username: 'zhangsan',
                    gender: '男',
                    desc: '<a href="https//www.baidu.com">百度</a>'
                }
            }
        }
 
        const app = Vue.createApp(vm)
        app.mount('#app')
    </script>
 
</body>
 
</html>


测试:

0b6cc9478e9f41538c2ae202ccde4160.jpg

3.属性绑定指令

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
 
<body>
    <div id="app">
        <a :href="link">百度</a>
        <!-- <a v-bind:href ="link">vue</a> 绑定指令,一般省略v-bind -->
        <input type="text" :placeholder="inputValue"><!--inputValue:默认显示文本-->
        <img :src="imgSrc" :style="{ width : w }" alt="">
    </div>
 
    <script>
        const vm = {
            data: function () {
                return {
                    link: "http://www.baidu.com",
                    //文本框的占位符内容
                    inputValue: '请输入内容',
                    //图片的src地址
                    imgSrc: './images/demo.png',
                    w: '100px'
                }
            }
        }
 
        const app = Vue.createApp(vm)
        app.mount('#app')
    </script>
</body>
 
</body>
 
</html>


测试:

f62615df8f63449792f51f137dbbc35b.jpg

4.使用JavaScript表达式

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
 
<body>
    <!-- vue 实例要控制的 DOM 区域 -->
    <div id="app">
        <p>{{number + 1}}</p>
        <p>{{ok ?'True' :'False'}}</p>
        <!-- 拆分 倒序 拼接 -->
        <p>{{message.split('').reverse().join('')}}</p>
        <p :id="'list-' + id">xxx</p>
        <!-- 绑定了user对象 -->
        <p>{{user.name}}</p>
    </div>
    <script>
        const vm = {
            data: function () {
                return {
                    number: 9,
                    ok: false,
                    message: 'ABC',
                    id: 3,
                    user: {
                        name: 'zs',
                    }
                }
            }
        }
        const app = Vue.createApp(vm)
        app.mount('#app')
    </script>
</body>
 
</html>


测试:

83dba52b7c7a4986a9565470d72df1ca.jpg

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>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
 
<body>
    <div id="app">
        <h3>count 的值为: {{count}}</h3>
        <!-- v-on或@ 用于件监听 -->
        <button v-on:click="addCount">+1</button>
        <button @click="count+=1">+1</button>
    </div>
 
    <script>
        const vm = {
            data: function () {
                return {
                    count: 0,
                }
            },
            methods: {
                // 点击按钮,让 count 自增 +1
                addCount() {
                    this.count += 1
                },
            },
        }
 
        const app = Vue.createApp(vm)
        app.mount('#app')
    </script>
 
</body>
 
</html>


测试:

点击“+1“按钮,count的值可以+1

b5d7e099d2344b7f973cd5e4eec052b2.jpg

6.条件渲染指令                    

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
 
<body>
    <div id="app">
        <button @click="flag = !flag">Toggle Flag</button>
        <p v-if="flag">请求成功 --- 被 v-if 控制</p>
        <p v-show="flag">请求成功 --- 被 v-show 控制</p>
    </div>
 
    <script>
        const vm = {
            data: function () {
                return {
                    flag: false,
                }
            }
        }
 
        const app = Vue.createApp(vm)
        app.mount('#app')
    </script>
 
</body>
 
</html>


测试:

不断点击“Toggle Flag“按钮,下面两行可以消失又出现

fe3feae9ceff4eb583583049a355616d.jpg

7.v-else和v-else-if指令

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
 
<body>
    <div id="app">
        <p v-if="num>0.5">随机数 > 0.5</p><!--num>5此标签才会显示-->
        <p v-else>随机数 ≤ 0.5"</p>
        <hr />
        <p v-if="type==='A'">优秀</p>
        <p v-else-if="type==='B'">良好</p>
        <p v-else-if="type==='C'">一般</p>
        <p v-else>差</p>
        <div v-show="a">
            测试
        </div>
        <button @click="a=!a">点击</button>
    </div>
 
    <script>
        const vm = {
            data: function () {
                return {
                    //生成1以内的随机数
                    num: Math.random(),
                    type: 'A',
                    a: true
 
                }
            },
        }
 
        const app = Vue.createApp(vm)
        app.mount('#app')
    </script>
 
</body>
 
</html>


测试:

不断点击“点击“按钮,”测试“可以消失又出现

cc441fed5a9c4ff2941b0477942aab4f.jpg

8.列表渲染指令

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
 
<body>
    <div id="app">
        <ul>
            <!--自动创建多个标签-->
            <li v-for="(user,i) in userList">索引是: {{i}},姓名是: {{user.name}}</li>
        </ul>
    </div>
 
    <script>
        const vm = {
            data: function () {
                return {
                    userList: [//准备数据
                        { id: 1, name: '111' },
                        { id: 2, name: '222' },
                        { id: 3, name: '333' },
                    ],
                }
            },
        }
 
        const app = Vue.createApp(vm)
        app.mount('#app')
    </script>
 
</body>
 
</html>


测试:

546c5c8be3f14b61a5e0e69b54649275.jpg

9.v-for中的key

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
 
<body>
    <div id="app">
        <!-- 添加用户的区域 -->
        <div>
            <!-- v-model="something" 双向绑定 页面数据发生变化也会影响name值-->
            <input type="text" v-model="name">
            <button v-on:click=" addNewUser">添加</button>
        </div>
 
        <!-- 用户列表区域 -->
        <ul>
            <li v-for="(user, index) in userlist" :key="user.id">
                <input type="checkbox" />
                姓名: {{user.name}}
            </li>
        </ul>
    </div>
 
    <script>
        const vm = {
            data: function () {
                return {
                    //用户列表
                    userlist: [
                        { id: 1, name: '111' },
                        { id: 2, name: '222' }
                    ],
                    //输入的用户名
                    name: ' ',
                    //下一个可用的 id 值
                    nextId: 3
                }
            },
            methods: {
                //点击添加按钮
                addNewUser() {
                    this.userlist.unshift({ id: this.nextId, name: this.name })
                    this.name = ' '
                    this.nextId++
                }
            }
        }
 
        const app = Vue.createApp(vm)
        app.mount('#app')
    </script>
 
</body>
 
</html>


测试:

点击“添加“按钮后可以在前端添加姓名

509353c4e4004f359bd739b9686966d1.jpg

相关文章
|
2月前
|
Java Spring
聊聊你对SpringBoot框架的理解 ?
SpringBoot是Spring家族中流行的子项目,旨在简化Spring框架开发的繁琐配置。它主要提供三大功能:starter起步依赖简化依赖管理,自动配置根据条件创建Bean,以及内嵌Web服务器支持Jar包运行,极大提升了开发效率。
130 0
|
12天前
|
前端开发 安全 Java
基于springboot+vue开发的会议预约管理系统
一个完整的会议预约管理系统,包含前端用户界面、管理后台和后端API服务。 ### 后端 - **框架**: Spring Boot 2.7.18 - **数据库**: MySQL 5.6+ - **ORM**: MyBatis Plus 3.5.3.1 - **安全**: Spring Security + JWT - **Java版本**: Java 11 ### 前端 - **框架**: Vue 3.3.4 - **UI组件**: Element Plus 2.3.8 - **构建工具**: Vite 4.4.5 - **状态管理**: Pinia 2.1.6 - **HTTP客户端
109 4
基于springboot+vue开发的会议预约管理系统
|
1月前
|
前端开发 JavaScript Java
基于springboot+vue开发的校园食堂评价系统【源码+sql+可运行】【50809】
本系统基于SpringBoot与Vue3开发,实现校园食堂评价功能。前台支持用户注册登录、食堂浏览、菜品查看及评价发布;后台提供食堂、菜品与评价管理模块,支持权限控制与数据维护。技术栈涵盖SpringBoot、MyBatisPlus、Vue3、ElementUI等,适配响应式布局,提供完整源码与数据库脚本,可直接运行部署。
86 0
基于springboot+vue开发的校园食堂评价系统【源码+sql+可运行】【50809】
|
2月前
|
NoSQL Java 数据库连接
SpringBoot框架
Spring Boot 是 Spring 家族中最流行的框架,旨在简化 Spring 应用的初始搭建与开发。它通过自动配置、起步依赖和内嵌服务器三大核心功能,大幅减少配置复杂度,提升开发效率。开发者可快速构建独立运行的 Web 应用,并支持多种数据访问技术和第三方集成。
|
3月前
|
Java API 网络架构
基于 Spring Boot 框架开发 REST API 接口实践指南
本文详解基于Spring Boot 3.x构建REST API的完整开发流程,涵盖环境搭建、领域建模、响应式编程、安全控制、容器化部署及性能优化等关键环节,助力开发者打造高效稳定的后端服务。
493 1
|
2月前
|
缓存 安全 Java
Spring 框架核心原理与实践解析
本文详解 Spring 框架核心知识,包括 IOC(容器管理对象)与 DI(容器注入依赖),以及通过注解(如 @Service、@Autowired)声明 Bean 和注入依赖的方式。阐述了 Bean 的线程安全(默认单例可能有安全问题,需业务避免共享状态或设为 prototype)、作用域(@Scope 注解,常用 singleton、prototype 等)及完整生命周期(实例化、依赖注入、初始化、销毁等步骤)。 解析了循环依赖的解决机制(三级缓存)、AOP 的概念(公共逻辑抽为切面)、底层动态代理(JDK 与 Cglib 的区别)及项目应用(如日志记录)。介绍了事务的实现(基于 AOP
116 0
|
2月前
|
存储 缓存 NoSQL
Spring Cache缓存框架
Spring Cache是Spring体系下的标准化缓存框架,支持多种缓存(如Redis、EhCache、Caffeine),可独立或组合使用。其优势包括平滑迁移、注解与编程两种使用方式,以及高度解耦和灵活管理。通过动态代理实现缓存操作,适用于不同业务场景。
311 0
|
2月前
|
消息中间件 NoSQL Java
SpringBoot框架常见的starter你都用过哪些 ?
本节介绍常见的Spring Boot Starter,分为官方(如Web、AOP、Redis等)与第三方(如MyBatis、MyBatis Plus)两类,用于快速集成Web开发、数据库、消息队列等功能。
215 0
|
2月前
|
缓存 安全 Java
第五章 Spring框架
第五章 Spring框架
|
2月前
|
缓存 Java 数据库
第五章 Spring框架
第五章 Spring框架