VUE的使用

一、简介

VUE是一个前端框架。是一个典型的MVVM模式的框架。

MVVM:模型、视图、视图模型。通过修改视图模型对象,就可以达到修改视图的目的,同样的,如果用户操作了视图,视图模型中也就自动的收集了操作结果。

注意:此框架中Ajax操作部分相对功能较复杂,一般会使用独立的第三方的Ajax框架,例如axios。

中文网站:

https://cn.vuejs.org/

二、使用方式

有两种方案:

一、将VUE当作js使用,只需要在页面上引入js即可。比较简单。

二、使用脚手架,需要下载node.js等工具或框架的支持,比较复杂,功能更强大。

三、基础案例

1、导入vue.js

2、在页面上定义vue的使用区间和变量。(通过vue中使用el对应id)一般来说,页面上所有的需要vue来修改的变量必须全部包含在该id对应的元素中。下面的案例中的id即为app的一个div。

3、在js代码中使用vue的格式来定义Vue对象,并设置相应参数和变量的值。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <p>{{ message }}</p>
    <p>{{ message }}</p>
    <button>{{ message }}</button>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/vue.js" ></script>
	</head>
	<body>
		<div id="app">
			<p>{{msg}}</p>
			<p>{{msg}}</p>
			<button>{{btn1}}</button>
			<p>{{m1()()}}</p>
		</div>
	</body>
</html>
<script>
	var v = new Vue({
		el:"#app",
		data: {
			msg: "hello, world",
			btn1: "按钮1"
		},
		methods:{
			m1: function(){
                // 在此方法中,this与外面的data对应的对象一致,所以可以用this.msg,而在里面的函数中,this的指向已经发生变化,所以不能在里面使用this来获取msg,此时应该在外面定义that变量来记住this的指向。
				var that = this;
				return function(){
					return "显示消息:" + that.msg;
				}
			}
		}
	});
</script>

data 用于定义属性,实例中有两个属性分别为:msg、btn1。

methods 用于定义的函数,可以通过 return 来返回函数值。

{{ }} 用于输出对象属性和函数返回值。

四、常用语法
4.1 基础内容

v-html:输出html内容。例如:<div v-html="html1"></div>

v-bind:属性名称:动态修改属性的值。例如:v-bind:href。可以简写为::href

注意:html标签只带的属性,需要动态修改时,一般在前面加上v-bind:如果是vue自定义的标签才会直接写,例如v-if。

v-if:根据里面的变量的值,确定是否显示该标签。

v-else-if:v-else,条件结构

v-show:根据里面的变量的值,确定是否显示该标签。

template:本身没有任何作用,仅作为一个标签来包含其他标签进行集中控制。

v-on:事件名称:绑定一个事件,例如:v-on:click点击事件,简写为:@click

v-model:一般用来绑定变量的值到一个表单元素上,表单元素和变量的值会相互影响。

v-for:循环

<div id="app">
  <ol>
    <li v-for="site in sites">
      {{ site.name }}
    </li>
  </ol>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    sites: [
      { name: 'Runoob' },
      { name: 'Google' },
      { name: 'Taobao' }
    ]
  }
})
</script>
4.2 计算属性

计算属性是指当作属性使用,但是是通过函数运算得到的结果,相当于Java中的getter和setter。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<h2>{{msg1}}</h2>
			<textarea v-model="msg1" cols="100" rows="5"></textarea><br />
			姓名:<input type="text" v-model="name"/><br />
			地址:<input type="text" v-model="address"/><br />
			电话:<input type="text" v-model="tel"/><br />
		</div>
	</body>
</html>
<script type="text/javascript" src="js/vue.js" ></script>
<script>
	var v = new Vue({
		el:"#app",
		data:{
			name: "",
			address: "",
			tel: ""
		},
		computed:{
            // 只写getter
            msg2: function(){
                return "hello," + this.name;
            },
            // getter和setter
			msg1: {
				get: function(){
					return this.name + "," + this.address + "," + this.tel;
				},
				set: function(newValue){
					var arr = newValue.split(",");
					this.name = arr[0];
					this.address = arr[1];
					this.tel = arr[2];
				}
			}
		}
	})
</script>
4.3 样式绑定

是对样式属性特定的绑定方式。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.s1{
				background-color: #ccc;
			}
			.s2{
				background-color: lightseagreen;
			}
			.s3{
				color: white;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<table width="500px">
				<tr>
					<th>姓名</th>
					<th>年龄</th>
					<th>性别</th>
				</tr>
				<tr v-for="(p, index) in list" :class="{'s1':index%2==0, 's2':index%2==1, 's3':c1}">
					<td>{{p.name}}</td>
					<td>{{p.age}}</td>
					<td>{{p.sex}}</td>
				</tr>
			</table>
		</div>
	</body>
</html>
<script type="text/javascript" src="js/vue.js" ></script>
<script>
	var v = new Vue({
		el:"#app",
		data:{
			c1: true,
			list:[
					{name:"张三",age:20, sex:"男"},
					{name:"李四",age:18, sex:"男"},
					{name:"王五",age:22, sex:"女"},
					{name:"张三",age:20, sex:"男"},
					{name:"李四",age:18, sex:"男"},
					{name:"王五",age:22, sex:"女"}
				]
		}
	});
</script>
5.3 组件

vue中的自定义标签。

基本使用:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<qf></qf>
			<stu></stu>
		</div>
	</body>
</html>
<script type="text/javascript" src="js/vue.js" ></script>
<script>
	// 全局组件注册
	Vue.component("qf", {
		template: "<h1>千锋最强Java班---武汉Java2206</h1>"
	});
	

	var v = new Vue({
		el:"#app",
		data:{
			
		},
		// 局部组件注册
		components: {
			"stu": {
				template: "<h2>武汉Java2206最强学生张三</h2>"
			}
		}
	});
</script>

给组件添加属性:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<stu :name="stuName"></stu>
		</div>
	</body>
</html>
<script type="text/javascript" src="js/vue.js" ></script>
<script>
	var v = new Vue({
		el:"#app",
		data:{
			stuName: "王五"
		},
		// 局部组件注册
		components: {
			"stu": {
				props:['name'],
				template: "<h2>武汉Java2206最强学生----{{name}}</h2>"
			}
		}
	});
</script>
5.4 路由

实现单页面应用(one page application),使用内部的跳转方式,而不需要多个页面跳转。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<p>
				<!--路由的链接,实际上会生成a链接-->
				<router-link to="/a1">跳转到A1</router-link>
				<router-link to="/a2">跳转到A2</router-link>
			</p>
			<!--内容切换的位置,相当于iframe,实际上会替换为template中的内容-->
			<router-view></router-view>
		</div>
	</body>
</html>
<script type="text/javascript" src="js/vue.js" ></script>
<script type="text/javascript" src="js/vue-router.js" ></script>
<script>
	// 1、定义模板内容
	const a1 = { template: '<div>welcome to A1!!!</div>' }
	const a2 = { template: '<div>welcome to A2!!!</div>' }
	
	// 2. 定义路由,路径与组件模板相对应
	const routes = [
	  { path: '/a1', component: a1 },
	  { path: '/a2', component: a2 }
	]
	
	// 3. 创建 router 实例,然后传 `routes` 配置
	const router = new VueRouter({
	  routes // (缩写)相当于 routes: routes
	})
	
	// 4. 创建和挂载根实例。
	const app = new Vue({
	  router
	}).$mount('#app')

</script>
五、axios的基本用法

axios是一个ajax框架,简化了各种ajax操作,有强大的ajax操作功能。

5.1 get请求

语法:

axios.get(‘url’, [params]) // url和参数

. then(function(res){}) // 回调

.catch(function(ex){}); // 异常捕获

// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// 此处then方法也可以写为:
axios.get('/user?ID=12345')
  .then(res => {
    console.log('数据是:', res);
  })
  .catch(function (error) {
    console.log(error);
  });
 

// 上面的请求也可以这样做
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
5.2 post请求

语法:

axios.post(‘url’, paramobj) // url和参数

. then(function(res){}) // 回调

.catch(function(ex){}); // 异常捕获

注意:此处请求与jQuery完全不同。

jQuery如果按照此处直接传json对象的参数的话,后台应该使用request.getParameter方式接收,也就是说默认为表单提交类型,即application/x-www-form-urlencoded,如果是对象,后台springmvc中直接使用对象接收即可。

axios如果直接传json对象,默认认为是json格式传参,即application/json,也就是以流的形式提交,后台必须使用@RequestBody方式接收参数。

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

如果想使用普通的post传参,有两种方式:

// 1、使用?号
axios.post("http://localhost:8080/add?id=3&name=mary&sex=n").then(function(resp){
			if(resp.data.code == "10000"){
				alert(JSON.stringify(resp.data.data));
			}else{
				alert(resp.data.desc);
			}
			
		});

// 使用params
// 如果使用普通的post传参,需要使用第三个参数才能用params的方式
		axios.post("http://localhost:8080/add", null, {
			params:{
				id:2,
				name:"张三",
				sex:"男"
			}
		}).then(function(resp){
			if(resp.data.code == "10000"){
				alert(JSON.stringify(resp.data.data));
			}else{
				alert(resp.data.desc);
			}
		});
5.3 并发请求
// 执行多个并发请求
function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // 两个请求现在都执行完成
  }));
六、前端传递数据的几种方式

1、url直接拼接。接收的时候使用location.search.substr()。

2、使用cookie。需要开启cookie的支持。需要掌握js操作cookie。

3、使用LocaleStorage。H5支持。

4、使用SessionStorage。H5支持。

基本概念

cookie:是网景公司的前雇员在1993年发明。它的主要用于保存登陆信息,比如登陆某个网站市场可以看到’记住密码’,这就是通过在cookie中存入一段辨别用户身份的数据来实现的。

sessionStorage:会话,是可以将一部分数据在当前会话中保存下来,刷新页面数据依旧存在。但是页面关闭后,sessionStorage中的数据就会被清空。

localStorage:是HTML5标准中新加入的技术,当然早在IE6时代就有一个userData的东西用于本地存储,而当时考虑到浏览器的兼容性,更通用的方案是使用flash。如今localStorage被大多数浏览器所支持。

三者区别
1)存储大小

cookie:一般不超过4K(因为每次http请求都会携带cookie、所以cookie只适合保存很小的数据,如会话标识)

sessionStorage:5M或者更大

localStorage:5M或者更大

2)数据有效期

cookie:一般由服务器生成,可以设置失效时间;若没有设置时间,关闭浏览器cookie失效,若设置了时间,cookie就会存放在硬盘里,过期才失效

sessionStorage:仅在当前浏览器窗口关闭之前有效,关闭页面或者浏览器会被清除

localStorage:永久有效,窗口或者浏览器关闭也会一直保存,除非手动永久清除,因此用作持久数据

3)作用域

cookie:在所有同源窗口中都是共享的

sessionStorage:在同一个浏览器窗口是共享的(不同浏览器、同一个页面也是不共享的)

localStorage:在所有同源窗口中都是共享的

4)通信

ccokie:十种携带在同源的http请求中,即使不需要,故cookie在浏览器和服务器之间来回传递;如果使用cookie保存过多数据会造成性能问题

sessionStorage:仅在客户端(即浏览器)中保存,不参与和服务器的通信;不会自动把数据发送给服务器,仅在本地保存

localStorage:仅在客户端(即浏览器)中保存,不参与和服务器的通信;不会自动把数据发送给服务器,仅在本地保存

5)易用性

cookie:需要自己进行封装,原生的cookie接口不够友好

sessionStorage:原生接口可以接受,可以封装来对Object和Array有更好的支持

localStorage:原生接口可以接受,可以封装来对Object和Array有更好的支持

应用场景

cookie:判断用户是否登录过网站,以便实现下次自动登录或记住密码;保存事件信息等

sessionStorage:敏感账号一次性登录;单页面用的较多(sessionStorage 可以保证打开页面时 sessionStorage 的数据为空)

localStorage:常用于长期登录(判断用户是否已登录),适合长期保存在本地的数据

七、跨域请求的处理

前后端分离是指:前端页面和后台代码分别在不同的服务器上,称为前后端分离。

同源策略(同域策略):是指服务器只需要当前服务器中的ajax访问。同源:ip地址和端口号相同。

如果出现了不同域的ajax访问,称为跨域访问。要解决跨域访问问题,一般有两种方案:

1、在服务端设置允许跨域访问。

在response中设置header:‘Access-Control-Allow-Origin’

在springmvc框架中,直接在返回json数据的方法上添加注解@CrossOrigin

特点:操作比较简单,但是不支持老版本的浏览器,例如:ie6

2、jsonp。

借助<srcipt>标签可以引用其他服务器的js的原理,要求服务器端改代码,将原本返回的数据改成返回一个函数,函数中return数据,然后在页面使用<script>标记去引用,然后获取返回值,也就达到了跨域的目的。此方式本来就不属于正常的方式,所以使用起来比较麻烦,适用于所有的浏览器,例如ie6。

当然,springmvc也有对jsonp的封装,前端json框架一般也会封装。

特点:操作比较麻烦,服务器端可能需要改代码,支持ie6.

跨域问题拦截器:

@Component
public class CrossOriginInterceptor implements HandlerInterceptor {
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, PUT, DELETE");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With, token");
        response.setHeader("Access-Control-Allow-Credentials", "true");
        return true;
    }
}
@Configuration
public class MyMvcConfig implements WebMvcConfigurer {
    @Resource
    private CrossOriginInterceptor crossOriginInterceptor;

    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        //注册自己的拦截器,并设置拦截的请求路径
        //addPathPatterns为拦截此请求路径的请求
        //excludePathPatterns为不拦截此路径的请求
        registry.addInterceptor(crossOriginInterceptor)
                .addPathPatterns("/**");
    }
}
Logo

前往低代码交流专区

更多推荐