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("/**");
    }
}
# vue.js # 前端 # javascript
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue