VUE的使用

最新推荐文章于 2023-12-12 15:34:21 发布

尊者我悟了

最新推荐文章于 2023-12-12 15:34:21 发布

阅读量786

点赞数

分类专栏： Java程序设计文章标签： vue vue.js

本文链接：https://blog.csdn.net/weixin_45427945/article/details/131145343

版权

Java程序设计专栏收录该内容

43 篇文章 0 订阅

订阅专栏

VUE的使用

- - VUE的使用

VUE的使用

一、简介

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

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

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

二、使用方式

有两种方案：

一、将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 来返回函数值。

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

四、基本语法

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>

五、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);
  });

六、前端传递数据的几种方式

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.