VUE的使用
VUE的使用
-
-
- VUE的使用
-
- 一、简介
- 二、使用方式
- 三、基础案例
- 四、基本语法
- 五、axios的基本用法
-
- 5.1 get请求
- 5.2 post请求
- 六、前端传递数据的几种方式
-
- 基本概念
- 三者区别
-
- **1）存储大小**
- 应用场景
- 七、跨域请求的处理
-
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内容。例如：
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点击事件，简写为：
@clickv-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。
借助
标签可以引用其他服务器的js的原理，要求服务器端改代码，将原本返回的数据改成返回一个函数，函数中return数据，然后在页面使用