【javaEE】(6)Vue.js入门

JavaEE学习(6)——Vue.js入门

一:Vue的基本用法

可以参考官方文档(非常详细)

https://v3.cn.vuejs.org/guide/introduction.html

二:Vue入门案例

用HBuilder X 建立一个新项目

【javaEE】(6)Vue.js入门_第1张图片

查看官方给的Hello 示例

【javaEE】(6)Vue.js入门_第2张图片

根据示例修改本地html文件

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>title>
		
		<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 变量使用赋值函数调用

【javaEE】(6)Vue.js入门_第3张图片

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

Vue 自写函数 以及 触发

【javaEE】(6)Vue.js入门_第4张图片

Vue 双向绑定

【javaEE】(6)Vue.js入门_第5张图片

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

Vue 条件渲染

【javaEE】(6)Vue.js入门_第6张图片

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

Vue 列表渲染

【javaEE】(6)Vue.js入门_第7张图片

三: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添加以下语句即可

	

后台代码

    @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数据

前端代码

​ 不带参数的网络请求

【javaEE】(6)Vue.js入门_第8张图片

​ 带参数的网络请求

【javaEE】(6)Vue.js入门_第9张图片

你可能感兴趣的:(java-ee,vue.js,javascript)