JavaEE（17）Vue（上）

最新推荐文章于 2024-01-30 20:23:53 发布
最新推荐文章于 2024-01-30 20:23:53 发布
阅读量353 收藏 1
点赞数
文章标签： java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nswzr/article/details/113360148
版权

1. Vue

1. 第一个Vue程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

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

</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>

    var vm = new Vue({
        el:"#app",
        data:{
            msg:"hello,vue!"
        }
    });

</script>

2. v-bind绑定

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <span v-bind:title="msg">
        鼠标悬停几秒可以查看动态绑定的信息
    </span>
</div>

</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            msg: "hello,vue!"
        }
    })
</script>

【说明】v-bind绑定：将元素节点的title特性和Vue实例的msg属性保持一致

3. v-if，v-else，v-else-if

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">

    <h1 v-if="ok">Yes</h1>
    <h1 v-else>No</h1>
    
</div>

</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>

    var vm = new Vue({
        el: "#app",
        data: {
            ok: true
        }
    });

</script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <h1 v-if="score >= 85 && score <= 100">优秀</h1>
    <h1 v-else-if="score >= 60 && score < 85">中等</h1>
    <h1 v-else-if="score >= 30 && score < 60">不及格</h1>
    <h1 v-else="score >= 0 && score < 30">差</h1>
</div>

</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>

    var vm = new Vue({
       el: "#app",
       data: {
           score: 77
       }
    });

</script>

4. v-for

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">

    <li v-for="(item,index) in items">
        {{item.msg}}=={{index}}
    </li>
    
    <!--
        华为==0
        苹果==1
        诺基亚==2     
    -->

</div>

</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            items: [
                {msg: "华为"},
                {msg: "苹果"},
                {msg: "诺基亚"}
            ]
        }
    });
</script>

5. v-on:绑定事件

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <button v-on:click="sayHello">Click me</button>
</div>

</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            msg: "hello vue~"
        },
        methods: {  //方法必须定义在vue的methods对象中
            sayHello: function () {
                alert(this.msg);
            }
        }
    })
</script>

6. v-model：双向数据绑定
【解释】双向数据绑定：数据发生变化时，视图也发生变化；视图发生变化时，数据也发生变化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    输入的文本：<input type="text" v-model="msg">
    <br>
    {{msg}}
</div>

</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            msg: ""
        }
    });
</script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">

    性别
    <input type="radio" value="男" v-model="sex">男
    <input type="radio" value="女" v-model="sex">女

    <p>
        选中了==>{{sex}}
    </p>

</div>

</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            sex: ""
        }
    });
</script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    下拉框
    <select v-model="phone">
        <option value="" disabled>--请选择--</option>
        <option>苹果</option>
        <option>华为</option>
        <option>诺基亚</option>
    </select>

    <p>
        手机品牌：{{phone}}
    </p>

</div>

</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            phone: ""
        }
    });
</script>

2. Vue组件

1. 使用Vue.component()方法注册组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">

    <nelws></nelws>

</div>

</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>

    /*
        注意：
            1.Vue.component必须写在var vm = new Vue前面
            2.第一个"nelws"代表组件的名称
     */
    Vue.component("nelws",{
        template: '<h1>Hello</h1>'
    });

    var vm = new Vue({
        el: "#app"
    });

</script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">

    <!--组件：传递给组件中的值：props-->
    <nelws v-for="item in items" v-bind:nel="item"></nelws>
    <!--
	    Java
		C++
		Python
		Go
	-->
</div>

</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>

    Vue.component("nelws",{
        props: ['nel'],
        template:'<li>{{nel}}</li>'
    });

    var vm = new Vue({
        el: "#app",
        data: {
            items: ["Java","C++","Python","Go"]
        }
    });

</script>

3. axios

1. 简单的axios

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">

</div>

</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        mounted(){  //钩子函数
            axios.get("data.json").then(response=>(console.log(response.data)));
        }
    })
</script>

2. 复杂一点的axios

{
  "name":"nelws",
  "url": "http://baidu.com",
  "page": "1",
  "isNonProfit":"true",
  "address": {
    "street": "长安区",
    "city":"陕西西安",
    "country": "中国"
  },
  "links": [
    {
      "name": "B站",
      "url": "https://www.bilibili.com/"
    },
    {
      "name": "4399",
      "url": "https://www.4399.com/"
    },
    {
      "name": "百度",
      "url": "https://www.baidu.com/"
    }
  ]
}

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <div>{{info.name}}</div>
    <div>{{info.address.street}}</div>
    <div v-for="link in info.links">
        {{link.name}}=={{link.url}}
    </div>
    <a v-bind:href="info.url">Click me!</a>
</div>

</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script>
<script>
    var vm = new Vue({
        el: "#app",

        //data:属性
        data(){
          return{
              //请求的返回参数格式，必须和json字符串的一样
              info:{
                  name: null,
                  address: {
                      street: null,
                      city: null,
                      country: null
                  },
                  url: null,
                  links: {
                      name: null,
                      url: null
                  }
              }
          }
        },
        mounted(){  //钩子函数
            axios.get("data.json").then(response=>(console.log(this.info=response.data)));
        }
    })
</script>

4. 计算属性

1. 概念：计算属性重点突出属性，首先他是个属性，其次有计算能力（计算是动词），这里的计算就是个函数，在调用方法时，每次都需要计算，产生系统开销。不经常变化的可以使用计算属性，计算属性主要就是将不经常发生变化的结果进行缓存，节省系统开销

2. 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">

    <!--currentTime1()：方法！-->
    <p>Time1 {{currentTime1()}}</p>

    <!--currentTime2：属性！-->
    <p>Time2 {{currentTime2}}</p>

</div>

</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>

    var vm = new Vue({
       el: "#app",
       data: {
           msg: "hello,vue~"
       },
       methods: {
           currentTime1: function () {
               return Date.now();
           }
       },
       computed: {
           currentTime2: function () {
               return Date.now();
           }
       }
    });

</script>

5. 插槽slot

1. 简单使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">

    <todo>
        <todo-title slot="todo-title" v-bind:title="title"></todo-title>
        <todo-items slot="todo-items" v-for="item in items" v-bind:item="item"></todo-items>
    </todo>

</div>

</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>

    Vue.component("todo",{
       template: '<div>\
                        <slot name="todo-title"></slot>\
                        <ul>\
                            <slot name="todo-items"></slot>\
                        </ul>\
                  </div>'
    });

    Vue.component("todo-title",{
       props: ['title'],
       template: '<div>{{title}}</div>>'
    });

    Vue.component("todo-items",{
        props: ['item'],
        template: '<li>{{item}}</li>'
    });

    var vm = new Vue({
        el: "#app",
        data: {
            title: "编程语言",
            items: ['Java','C++','Python','Go']
        }
    });

</script>

2. 自定义事件分发

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">

    <todo>
        <todo-title slot="todo-title" v-bind:title="title"></todo-title>
        <todo-items slot="todo-items" v-for="(item,index) in items" v-bind:item="item" v-bind:index="index" v-on:remove="removeItem(index)" v-bind:key="index"></todo-items>
    </todo>

</div>

</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>

    Vue.component("todo",{
       template: '<div>\
                        <slot name="todo-title"></slot>\
                        <ul>\
                            <slot name="todo-items"></slot>\
                        </ul>\
                  </div>'
    });

    Vue.component("todo-title",{
       props: ['title'],
       template: '<div>{{title}}</div>>'
    });

    Vue.component("todo-items",{
        props: ['item','index'],
        template: '<li>{{index}}--{{item}} <button v-on:click="remove">删除</button></li>',
        methods: {
            remove: function (index) {
                //this.$emit 自定义事件分发
                this.$emit('remove',index);
            }
        }
    });

    var vm = new Vue({
        el: "#app",
        data: {
            title: "编程语言",
            items: ['Java','C++','Python','Go']
        },
        methods: {
            removeItem: function (index) {
                console.log("删除了" + this.items[index] + "OK");
                this.items.splice(index,1);  //一次删除一个元素
            }
        }
    });

</script>
wzr-xupt
关注
基于Vue的JavaEE大作业设计源码共享仓库
10-02
该项目是一个基于Vue的JavaEE大作业设计源码共享仓库，包含254个文件，涵盖103个PNG图片、60个Java源文件、22个JavaScript文件、9个Vue文件、5个CSS文件、3个Markdown文件、3个JSON文件、2个HTML文件、2个Word文档。...
javaee之vue
Pxx520Tangtian的博客
02-28 438
子组件要改变父组件的data数据，不能直接改变，也就是prop引入了之后，你直接载入这个属性是改变不了的。那么在子类组件里面，我们要去触发父类的两个函数，直接return this.$emit("plus"),也就是通过属性名就可以去调用父类的方法。通过v-bind绑定到了当前的父组件当中，引入了一个父类属性也就是items这个属性。子类组件想要直接修改父类的data数据是不可以的，我们可以为两者建立一个联系。上面引入的是一个3.0版本的包，我们重新换一个2.0版本的。如果采用小驼峰的方式命名一个组件。
JAVAEE细细看 框架16 - Vue 小结
ZMW_IOS的博客
04-07 446
1. Vue概述 概述：Vue是一款前端渐进式框架，可以提高前端开发效率。 特点： ​ Vue通过MVVM模式,能够实现视图与模型的双向绑定。 ​ 简单来说，就是数据变化的时候, 页面会自动刷新, 页面变化的时候，数据也会自动变化. 2. Vue导入 概述：Vue是一个类似于Jquery的一个JS框架，所以，如果想使用Vue，则在当前页面导入Vue.js文件即可。 语法： <!-- 在线...
JavaEE学习笔记 2024-1-25 --VUE的入门使用
CHiN_951的博客
01-30 1965
/ 将vue绑定在指定的盒子上。// 将vue绑定在指定的盒子上。// 将vue绑定在指定的盒子上。// 使用vue绑定的数据。// 使用vue绑定的数据。// 使用vue绑定的数据。// 以键值对的形式存在。// 以键值对的形式存在。// 创建vue对象。// 创建vue对象。// 创建vue对象。"大佐和大佑123"
JavaEE 笔记03：基于Vue，SpringBoot的前后端分离的简单作业管理系统
m
06-19 3777
基于Vue，SpringBoot的前后端分离的简单作业管理系统
（简述vue语法和原理）day40javaEE基础查漏补缺
休哥哥的博客
01-16 958
简述vue语法和原理1.MVVM概念：2.vm绑定是咋实现的？？？3.vue特性4.在浏览器（F12）consle中输入，vue对象名.username获取username的值5.双向绑定：v-model6.属性绑定：bind:src=“data中的变量名”7.复习一下相对路径:8.一个js标签中，可以new好几个Vue嘛9.列表循环：v-for10.条件判断:v-if11.除了{{}}，其他语法都写在标签上,而且都是用=号来使用的。12.vue中要使用自己定义的变量或方法，要使用this关键字。13.一个
springboot +vue+javaee+mysql
05-26
此项目主要涉及Spring Boot、Vue.js、Java EE以及MySQL等技术栈的结合使用，旨在构建一个前后端分离的博客平台。接下来，我们将围绕这些方面进行详细的知识点梳理。 ### 1. Spring Boot #### 1.1 项目初始化与依赖...
Vue_ElectronicBusinessSystem：大三上学期JavaEE大作业
02-26
Vue_ElectronicBusinessSystem是一个基于JavaEE技术栈的电子商务系统项目，由学生在大三上学期完成。这个项目展示了Web开发中的多个关键知识点，主要使用了Vue.js前端框架和后端的Java技术。让我们深入探讨一下这个...
基于JavaEE框架的Vue前端与Java后端水果销售系统设计源码
最新发布
10-06
该系统是一套基于JavaEE框架的完整水果销售平台源码，采用Vue前端与Java后端技术构建。项目文件总计88个，涵盖43个Java源文件、10个JavaScript文件、10个Vue组件文件、9个XML配置文件、3个JSON数据文件，以及少量...
ssm+vue的校园拼车系统 Javaee项目，ssm vue前后端分离项目
04-21
【标题】"ssm+vue的校园拼车系统"是一个基于JavaEE技术栈与Vue.js前端框架实现的项目，旨在为校园内的师生提供便捷的拼车服务。该项目采用了经典的SSM（Spring、SpringMVC、MyBatis）后端架构，结合Vue.js的现代前端...
电子书------《Java EE互联网轻量级框架整合开发 SSM框架》4
詹煜彪9527
07-15 2187
4
第一课：前端项目vue搭建
诸葛小猿
03-22 1414
本项目是前后端分离的架构，前后端分离在实际的开发和部署中有很多好处，比如前后端定义好接口文档后，就可以同时进行开发了，这样可以大大提高开发的效率；同时，部署时可以实现动静分离，提高网站的性能等。 在操作前，希望大家先了解一下什么是前后端分离，什么是单页面应用（single page web application，SPA），什么是restuful风格。 这一节主要是说明前端项目如何搭建，后面我...
跟我学制作javaEE网上书店销售管理系统(沙箱支付)springboot+vue
豆包程序员
06-25 1041
本系统在实现过程中，通过采用支付宝沙箱技术模拟网上支付，解决了支付问题。利用LayUI技术完成响应式界面，以适应不同云端屏幕。采用Echarts技术实现了数据统计，形成了可视化图表，能够更直观地查看销售情况。 基于Java EE的网上书店系统的要求如下 系统前端vue，后端springboot，用到技术Echarst，LayUI什么的 要有沙箱支付,沙箱支付开通网址：https://openhome.alipay.com/platform/appDaily.htm?tab=info 本javaweb+mav
20210220-javaee-CURD案例-vue+springboot前后端分离开发过程
fhzheng for c java javascript sql html css
02-20 618
文章目录vue+springboot前后端分离开发过程1 技术方案2 创建前端项目2.1 项目中的文件2.2 注意事项3 后端开发3.1 开发过程3.2 分层开发入口类实体类DAO接口类使用mybatis配置实现DAO接口业务接口与实现类控制器类3.3 注意事项4 前端开发完成后的发布5 后记4 前端开发完成后的发布5 后记 vue+springboot前后端分离开发过程 1 技术方案 前后端分离开发 前端使用vue+axios+rap2工具 vuecli，用脚手架创建项目 Home组件 User组件
Vue制作一个登录界面（javaEE大作业实战)
LYR 的博客
06-05 1498
项目基本目录结构： global.css ,设置 html,body,以及 #app区域所有的高度占比都是 100% /* 全局样式表 */ html, body, #app { height: 100%; margin: 0; padding: 0; } router 的配置 import Vue from 'vue' import Router from 'vue-router' import LoginView from "@/views/login/LoginView"
element+vue+java文件上传
JavaeeGad的博客
11-16 4654
初学element,开始做文件上传看element的官方文档发觉东西太少了,看不懂,去看了几篇帖子发现贴过来的代码也没办法用. 经过自己学习,终于写出来了,可以留一个记录,也方便初学者使用. 里面的方法请求路径与参数已经删除,自己修改. 这是上传的前端代码,这是一个弹出框.如果不需要,可以去除最外层的dialog 这主要是一个树形菜单加载,然后节点上有对应的上传按钮或者下载,删除,预览,重...
【javaEE】（6）Vue.js入门
hanhandehanpi的博客
10-26 295
JavaEE学习——Vue.js入门 一：Vue的基本用法 可以参考官方文档（非常详细） https://v3.cn.vuejs.org/guide/introduction.html 二：Vue入门案例 用HBuilder X 建立一个新项目 查看官方给的Hello 示例 根据示例修改本地html文件 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title><
vue前端+java后端
热门推荐
zeron_oo的专栏
03-05 6万+
方案一:  在jsp里写vue 也就是所把jquery换成vue就行 (不知道这样能做spa吗? 好像也能做, 感觉会很乱, 适合微型项目) 方案二: 既然使用vue，那就不要使用jsp了，jsp是后端渲染，生成页面发给浏览器，使用vue用浏览器渲染； 使用vue和java做单页面网站，浏览器第一次访问该网站，java把静态html页面和js等发给浏览器，浏览器点击跳转时前
java web and vue.js 配合使用---servlet的配置
guxiansheng1991的博客
01-19 1万+
这篇文章主要记录java中使用servlet做服务器端编程,为vue.js等前端构建接口.能够在一个servlet中根据请求参数处理多个请求.(并不需要写jsp页面) 步骤如下 基类servlet,使用反射,用来被其他servlet继承,这样子类servlet就能具备根据请求参数处理处理请求的功能. 子类,继承自基类servlet. web.xml设置 1.基类baseServlet.java, 重
JAVAEE+vue
08-20
JAVAEE是指Java Platform, Enterprise Edition的缩写，是Java平台中的一个扩展，用于开发企业级应用程序。它提供了一系列的API和工具，以简化企业级应用程序的开发和部署。 Vue是一种流行的JavaScript框架，用于构建用户界面。它允许开发者使用组件化的方式来构建复杂的交互式应用程序。Vue具有简单易用的语法和灵活的生态系统，可以与其他工具和库无缝集成。 在JavaEE中结合使用Vue，可以使用Vue作为前端框架，JavaEE作为后端框架来开发企业级应用程序。前端使用Vue来实现用户界面的交互和展示，后端使用JavaEE来处理业务逻辑和数据存储。 通过使用JavaEE和Vue，可以实现前后端分离的架构，提高开发效率和代码可维护性。前后端可以通过RESTful风格的API进行数据传输，使用统一格式的JSON来表示数据。 同时，JavaEE提供了丰富的库和工具，如Spring家族、Spring Boot、MyBatis等，可以帮助开发者快速搭建和开发企业级应用程序。而Vue则提供了丰富的组件和工具，如Element UI，可以帮助开发者构建美观且易用的用户界面。 综上所述，JAVAEE和Vue可以结合使用，实现前后端分离的企业级应用程序开发。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [跟我学制作javaEE网上书店销售管理系统(沙箱支付)springboot+vue](https://blog.csdn.net/zhgl322/article/details/125456716)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [JavaEE 笔记03：基于Vue，SpringBoot的前后端分离的简单作业管理系统](https://blog.csdn.net/Yiang0/article/details/106863440)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值