【javaEE】（6）Vue.js入门

最新推荐文章于 2023-02-28 08:02:19 发布

拿来吧你小猫咪

最新推荐文章于 2023-02-28 08:02:19 发布

阅读量281

点赞数 1

分类专栏： JAVAEE开发学习文章标签： java-ee vue.js javascript

本文链接：https://blog.csdn.net/hanhandehanpi/article/details/120970035

版权

JAVAEE开发学习专栏收录该内容

16 篇文章 0 订阅

订阅专栏

JavaEE学习（6）——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></title>
		<!-- <script src="https://unpkg.com/vue@next"></script> -->
		<script src="js/v3.2.8/vue.global.prod.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<script>
		.demo {
		  font-family: sans-serif;
		  border: 1px solid #eee;
		  border-radius: 2px;
		  padding: 20px 30px;
		  margin-top: 1em;
		  margin-bottom: 40px;
		  user-select: none;
		  overflow-x: auto;
		}
	</script>
	<body>
		<div id="hello-vue" class="demo">
		  {{ message }}
		</div>
		
		<script>
			const HelloVueApp = {
			  data() {
			    return {
			      message: 'Hello Vue!!'
			    }
			  }
			}
			
			Vue.createApp(HelloVueApp).mount('#hello-vue')
		</script>
	</body>
</html>

Vue 变量使用、赋值、函数调用

在HBuilder X 内置浏览器内直接点击 “百度” 触发时存在bug闪退，可以使用自己电脑浏览器！

Vue 自写函数以及触发

Vue 双向绑定

双向绑定后，即便修改的是输入框内的值，也会影响username这个变量的值

Vue 条件渲染

条件渲染的效果是决定标签是否显示

Vue 列表渲染

三：Vue网络请求

ajax

jquery

vue resource

axios

以上都是比较常用的支持Vue的网络请求

最常用的是axios

以下介绍axios搭配Vue的用法

配置axios的依赖

axios的cdn是https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.js

所以在html添加以下语句即可

	<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.js"></script>

后台代码

    @RequestMapping("getnewsList")
    @ResponseBody
    public List<News> getnewList(){

        List<News> newsList = new ArrayList<>();
        for(int i=0;i<10;i++){
            News news = new News();
            news.setTitle("新闻标题"+i);
            news.setContent("新闻内容"+i);
            newsList.add(news);
        }
        return newsList;
    }

    @RequestMapping("commit")
    @ResponseBody
    public Map<String,Object> commit(@RequestBody Map<String,String> map ){
        String username = map.get("username");
        String password = map.get("password");
        System.out.println("username");
        System.out.println("password");

        Map<String,Object>result = new HashMap<>();
        if(username.equals("admin")&&password.equals("123456")){
            result.put("code",0);
        }else {
            result.put("code",-1);
            result.put("msg","登陆失败");
        }
        return result;
    }

配置一个能返回json数据的后台（之前文章有相应内容）

我是在本机上搞的，理论上其他电脑上也可以，返回json的地址是 http://localhost:8080/getnewsList

！在使用地址前最好测试一下，看显示的是否是正确的json数据

前端代码

不带参数的网络请求

带参数的网络请求

拿来吧你小猫咪

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【javaEE】（6）Vue.js入门

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><
复制链接

扫一扫