Java Web基础（三）Vue-简化开发的前端框架

最新推荐文章于 2024-06-06 13:54:53 发布
最新推荐文章于 2024-06-06 13:54:53 发布
阅读量965 收藏 22
点赞数 21
分类专栏： SpringBoot项目开发笔记 文章标签： 前端 前端框架 java vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46866349/article/details/136610863
版权

Vue 是一套前端框架，免除原生JavaScript中的DOM操作，简化书写. 基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上。

  • 官网: https://v2.cn.vueis.org/
  • 框架: 是一个半成品软件，是一套可重用的、通用的、软件基础代码模型。基于框架进行开发，更加快捷、更加高效。

Vue快速入门

  1. 新建HTML页面，引入Vue.js文件，注意，该文件网上到处都有下载，也可以直接下载文末附上的资源，免积分（我选的是0积分，要是下不了可以私信私发）
    <script src="js/vue.js"></script>
  2. 在JS代码区域，创建Vue核心对象，定义数据模型
     <script>
     new Vue({
         el:"#app",
         data:{
             message: "Hello Vue!"
         }
     );
 </script>
  3. 编写视图
     <div id="app">
 <input type="text” V-model="message">
 {{message}}
 </div>

注意插值表达式: {{表达式}}
内容可以是: 变量, 三元运算符, 函数调用, 算术运算

常用指令

指令: HTML标签上带有 v-前缀 的特殊属性，不同指令具有不同含义。例如: v-if，v-for…常用指令

指令作用
v-bind为HTML标签绑定属性值，如设置href，css样式等
v-model在表单元素上创建双向数据绑定
V-on为HTML标签绑定事件
v-if条件性的渲染某元素, 判定为true时渲染,否则不渲染
V-else-if
V-else
V-show根据条件展示某元素，区别在于切换的是display属性的值
v-for列表渲染，遍历容器的元素或者对象的属性

v-bind / v-model

  • v-bind:
    <a v-bind:href="url">传智教育</a>
    or 只保留冒号
    <a :href="url">传智教育</a>

  • v-model
    <input type="text" v-model="url">

  • 对应Vue对象

<script>
new Vue(){
    el: "#app",
    data: {
        url: "https://www.github.com"
    }
};
</script>
  • view 片段
<div id="app">
    <a v-bind:href="ur1">链接1</a>
    <a :href="ur1">链接2</a>
    <input type="text" v-model="url">
</div>

v-on

v-on 为HTML标签绑定事件
<input type="button" value="按钮" v-on:click="handle()">
or
<input type="button" value="按钮" @click="handle()">

  • js 代码片段
<script>
    new Vue(){
        el:"#app",
        data: {
            //...
        }
        methods: {
            handle:function(){
                alert("我被点击了");
            }
        }
    }
<script>

v-if / V-else-if / v-else / v-show

分别使用 if-else-if 和 show 完成以下逻辑:
在输入框输入一个代表年龄的正整数, 判断并显示年龄阶段, 例如 <=35: 青年人, <60: 中年人, 老年人;

  • view snippet
<input type="text" v-model: "age">
年龄{{age}},经判定为:
<span v-if: "age <= 35">年轻人</span>
<span v-else-if: "age < 60">中年人</span>
<span V-else>老年人</span>

v-for

案例

通过Vue完成表格数据的渲染展示

var users = [
    {name:"Tom", age: 20, gender: 1, score: 78},
    {name:"Rose", age: 18, gender: 2, score: 86},
    {name: "Jerry", age: 26, gender: 1, score: 90},
    {name: "Tony", age: 30, gender: 1, score: 52}
]

性别:
gender == 1: 男gender == 2:女
评价:
score >= 85: 优秀; score >= 60:及格; 否则: 不及格
不及格用红色渲染

编号姓名年龄性别成绩评价
1Tom20男78及格
2Rose18女86优秀
3Jerry26男90优秀
4Tony30男52不及格

a html table snippet example

<!-- border="1" cellspacing="0" width="60%" -->
<table>
<tr>
<th>编号</th><th>姓名</th><th>年龄</th><th>性别</th><th>成绩</th><th>评价</th>
</tr>
<tr align="center">
<td>1</td>
<td>Itcast</td>
<td>18</td>
<td><span>男</span><span>女</span></td>
<td>90</td>
<td><span>优秀</span><span>及格</span><span style="color:red">不及格</span></td>
</tr>
</table>

生命周期

生命周期:指一个对象从创建到销毁的整个过程
生命周期的八个阶段:每触发一个生命周期事件，会自动执行一个生命周期方法(钩子)。

状态阶段周期
beforeCreate创建前
created创建后
beforeMount挂载前
mounted挂载完成
beforeUpdate更新前
updated更新后
beforeDestroy销毁前
destroyed销毁后
<script>
new Vue(){
    el:"#app"
    data: {
        // ...
    }
    mounted(): function(){
        console.log("Vue挂载完毕,发送请求获取数据");
    }
    // methods: 
}
</script>
  • 回顾
    1. Vue是什么?
      Vue是一个基于MVVM模型的前端is框架
    2. Vue常用指令?
      v-bind、V-model、V-on、v-if、v-show、v-for
    3. Vue生命周期?
      mounted

附录–代码形式的入门教程

主文件 vue快速入门.html

<!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>Day2-chapter01-Vue快速入门</title>
    <!-- 引入 vue.js 文件 -->
    <script src="../static/js/vue.js"></script>
    <style>
        div{
            font-size: 16px;
            line-height: 32px;
        }
        body{
            width: 80%;
            margin: 10%;
        }
    </style>
</head>
<body>
    <div id="vmodel">
        <h2>1. v-model</h2>
        v-model 在表单元素上创建双向数据绑定双向数据绑定, 在视图页面修改输入框文本等价于修改了 message 对象, 因而后面的插值语句也跟着改变
        <br>
        <input type="text" name="hello" V-model="message"> {{message}}
    </div>
    <br><br>
    <div id="vbind">
        <h2>2. v-bind</h2>
            v-bind: 为HTML标签绑定属性值, 如设置href, css样式等
            修改输入框的url可以改变链接指向的url
        <br>
        <a :href="url" target="_blank">bilibili 无限矿业公司</a>
        <br>
        <input type="text" V-model="url">
    </div>
    <br><br>
    <div id="von">
        <h2>3. v-on</h2>
        v-on 为HTML标签绑定事件
        例如为按钮绑定点击事件: v-on:click="handle()"
        <br>
        <input type="button" value="click me!" @click="handle()">
    </div>
    <br><br>
    <div id="vif">
        <h2>4. v-if / V-else-if / v-else / v-show</h2>
        分别使用 if-else-if 和 show 完成以下逻辑:在输入框输入一个代表年龄的正整数, 判断并显示年龄阶段, 例如 不超过35: 青年人, 小于60: 中年人, 其他老年人;
        <br>a. 使用 v-if, v-else-if, v-else: 只渲染一个元素<br>
        <input type="text" V-model="age">
        经判定，属于<span v-if="age <= 35">青年</span>
        <span v-else-if="age<60">中年</span>
        <span v-else>老年</span>

        <br>b. 使用 v-show: 都渲染, 但通过 hidden 将指定元素隐藏<br>
        <input type="text" V-model="age2">
        经判定，属于<span v-show="age2 <= 35">青年</span>
        <span v-show="35<age2 && age2<60">中年</span>
        <span v-show="age2>=60">老年</span>
        <br>v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

        相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
        
        一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
    </div>

    <div id="vexample">
        <h2>3. 案例 v-for</h2>
        通过Vue完成表格数据的渲染展示, 基于源数据多次渲染元素或模板块。v-for指令之值，必须使用特定语法 alias in expression，为当前遍历的元素提供别名.
        <br>
        <code>
            var users = [
                {name:"Tom", age: 20, gender: 1, score: 78},
                {name:"Rose", age: 18, gender: 2, score: 86},
                {name: "Jerry", age: 26, gender: 1, score: 90},
                {name: "Tony", age: 30, gender: 1, score: 52}
            ]
        </code>
        <br>
        <table border="1" cellspacing="0" width="60%">
            <tr>
                <th>姓名</th><th>性别</th><th>年龄</th><th>成绩</th><th>评级</th>
            </tr>
            <tr v-for="u in users" align="center">
                <td>{{u.name}}</td>
                <td><span v-if="u.gender == 1">男</span><span v-else>女</span></td>
                <td><span>{{u.age}}</span></td>
                <td><span>{{u.score}}</span></td>
                <td>
                    <span v-if="u.score>=85">优秀</span>
                    <span v-else-if="u.score>60">及格</span>
                    <span style="color:red" v-else>不及格</span>
                </td>
            </tr>
        </table>
    </div>

    <div>
        <h2>生命周期</h2>
        生命周期:指一个对象从创建到销毁的整个过程. 生命周期的八个阶段:每触发一个生命周期事件，会自动执行一个生命周期方法(钩子)。
        <br>
        <code>
            mounted(): function(){<br>
                console.log("Vue挂载完毕,发送请求获取数据");<br>
            }<br>
        </code>
        
    </div>
</body>
<script>
    // 在JS代码区域，创建Vue核心对象，定义数据模型
    new Vue({
        el: "#vmodel",     // 绑定视图
        data: {
            message: "Hello Vue!"   // 数据模型
        }
    });

    new Vue({
        el: "#vbind",
        data: {
            url: "https://bilibili.com"
        }
    });

    new Vue({
        el: "#von",
        data: {
            // ...
        },
        methods:{
            handle(){
                alert("点击事件！")
            }
        }
    });
    
    new Vue({
        el: "#vif",
        data: {
            age: "20",
            age2: "45"
        }
    });

    new Vue({
        el: "#vexample",
        data: {
            users: [
                {name:"Tom", age: 20, gender: 1, score: 78},
                {name:"Rose", age: 18, gender: 2, score: 86},
                {name: "Jerry", age: 26, gender: 1, score: 90},
                {name: "Tony", age: 30, gender: 1, score: 52}
            ],
        }
    });
    var user = {name:"Rose", age: 18, gender: 2, score: 86};
    console.log(JSON.stringify(user))
</script>
</html>

附带其它静态资源的示例包:

https://download.csdn.net/download/weixin_46866349/88941604

苏雨流丰
关注
  • 21
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue脚手架First
shortcutsuccess的博客
08-24 386
Vue脚手架是一个开发基于Vue框架的前端项目的软件。Vue脚手架的项目是“单页面”的，也就是在这样的项目，只有1个HTML页面，它认为页面是由多个模块组成的，各个模块都是可以随时替换的，从而显示出不同的页面效果。
vue-springBoot：简单框架----前端：vue，后端：spring boot
02-20
Vue.js 是一个轻量级、高性能的前端 JavaScript 框架，而 Spring Boot 是基于 Java 的后端开发框架，简化了 Spring 框架的配置，提供了快速开发 RESTful API 的能力。 ### Vue.js 知识点 1. **响应式数据绑定**：...
JavaWeb开发 —— Vue框架
hdakj22的博客
04-12 557
Vue框架的概述、Vue的简单入门、Vue的常见指令以及Vue的生命周期
javaweb—Vue
最新发布
m0_70851493的博客
06-06 509
框架：是一个半成品软件，是一套可重用的、通用的、软件基础代码模型，基于框架进行开发，更加快捷，更加高效。
VUE的使用—JavaWeb
wwl193206126的博客
03-28 624
VUE的使用
Vue前端框架
qq_64064246的博客
04-05 1611
Vuex 的概念和功能在某些方面确实与全局变量相似，但它们之间也存在一些关键的区别。目的和用途全局变量：通常用于在应用程序的任何地方存储和访问数据。它们没有明确的组织结构，也不提供数据变化追踪或响应式更新。Vuex：是 Vue.js 的状态管理库，旨在提供一个可预测的状态容器，用于组织和管理组件之间的共享状态。它提供了结构化的存储、状态变更追踪、响应式更新以及与组件的集成。作用域全局变量：通常在整个应用程序中都是可见的，可以在任何地方被访问和修改。Vuex。
JavaWeb之Vue
qq_41911251的博客
12-23 1229
Vue 1. Vue简介 渐进式js框架------> 简化页面中的js开发 官网：cn.vuejs.org 了解：jQuery是js框架 渐进式： 易用 灵活 高效 通俗定义：vue的出现可以让我们在页面中完成特别复杂的操作，可以简化dom编程甚至可以不写任何dom编程代码 2. Vue第一个入门案例 2021/12/19-------【编程不良人】2021最新Vue全家桶系列教程 <!DOCTYPE html> <html lang="en"> <head
4.0 Java全栈开发前端+后端（全栈工程师进阶之路）-前端框架VUE3框架企业案例- 项目案例-头条新闻
05-07
在本课程中，"4.0 Java全栈开发前端+后端（全栈工程师进阶之路）"，我们将深入探讨如何结合Java技术和Vue.js前端框架，构建完整的全栈应用程序，特别是针对企业级项目的实践应用。这是一条全栈工程师的成长路径，...
毕业设计项目-个人博客。前端基于Vue，Element-UI和Vue-Element-Admin实现，后台采用SpringBoot+MybatisPlus+Rd
07-09
Vue-Element-Admin则是一个基于Vue.js和Element-UI的后台管理系统模板，它包含了一套完整的管理端页面结构和基础功能，如登录、权限控制、多语言支持等，大大简化了前端开发的工作量。在本项目中，Vue-Element-Admin...
vue+element-ui的web前端开发脚手架项目
08-01
5. **SpringBoot**：后端可能采用了SpringBoot框架，它基于Spring框架，简化了Spring的初始化配置，提供了自动配置、内嵌Tomcat服务器等功能，使Java Web应用开发更加便捷。 6. **数据库初始化**：描述中提到需要...
java Javaweb Vue mysql宿舍管理系统
11-09
本项目是在学校期间，和同学一起做的宿舍信息管理系统，用了java，Javaweb，mysql 和js框架Vue写成的。里面涵盖了学生信息的增删改查的基本操作和一些有特色的的功能
悟空CRM-11.0 JAVA版Spring前端源码，采用vue+elementUI 技术框架.zip
06-17
悟空CRM是一款基于JAVA开发的客户关系管理软件，其11.0版本的前端源码采用了现代化的技术栈，包括Spring框架、Vue.js以及Element UI。这个压缩包包含的"悟空CRM-11.0 JAVA版Spring前端源码，采用vue+elementUI 技术...
vue搭建前端框架
id_name的博客
07-13 7012
【代码】vue搭建前端框架。
(vue)适合后台管理系统开发的前端框架
nyf_unknow的博客
03-05 2383
文档地址：https://demos.creative-tim.com/material-dashboard/docs/2.1/getting-started/introduction.html。文档地址：https://panjiachen.github.io/vue-element-admin-site/zh/文档地址：https://panjiachen.github.io/vue-element-admin-site/zh/
【JavaWeb】Vue上篇
一以贯之的努力 不得懈怠的人生
02-02 969
什么是Vue？Vue 是一套前端框架，免除原生 JavaScript 中的 DOM 操作，简化书写框架：是一个半成品软件，是一套可重用的、通用的、软件基础代码模型。
JavaWeb中的VUE快速入门
昊月光华的博客
11-30 1129
Vue是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。Vue为当前的国内前端主流框架，基于MVVM（Model-View-ViewModel）思想，实现数据的双向绑定，将编程关注点放在数据上。
14_JavaWeb——Vue
子平的博客
05-10 457
Vue前端框架的使用以及Element-ui的使用，内含详细案例
Vue框架
m0_56017821的博客
09-03 368
Vue前端框架 前后端分离 搭建Vue框架开发环境
Vue-Router入门：前端路由与SPA开发
总结来说，前端路由在Vue项目中扮演着至关重要的角色，它提升了用户体验，简化了前后端协作，使得SPA能够更好地适应现代Web开发需求。理解并熟练掌握vue-router的使用，能有效提升前端开发的效率和项目的可维护性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值