版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
ES6
三个定义变量命令
var:在过去Js定义变量只有一个关键字:var,var有一个问题，就是定义的变量有时会莫名奇妙的成为全局变量
let:定义局部变量，只有在let命令所在的代码块内有效。
const：定义常量，不能被修改。
ES6解构表达式
定义的一个person对象：
const person = {
name:"jack",
age:21,
language: ['java','js','css']
}
使用解构表达式：
const {name,age,language} = person;
//打印
console.log(name);
console.log(age);
console.log(language);
ES6箭头函数
//无参箭头函数
var print = function () {
console.log(1);
}
var print = () => console.log(1);
------------------------------------
//带参箭头函数
var print = function (a) {
console.log(a);
}
var print = a => console.log(a);
Vue
MVVN
Vue框架特点：MVVM模式
•M：即Model，模型，包括数据和一些基本操作
•V：即View，视图，页面渲染结果
•VM：即View-Model，模型与视图间的双向操作（无需开发人员干涉）
vue实例
var vm = new Vue({
el:’#父容器id’, //element的简写
data:{ //data专门用来存放数据
属性名：“属性值”，
属性名：“属性值”，
属性名：“属性值”
......
},
methods:{ //自定义函数
函数名(){
方法体
},
......
},
beforeCreate(){ //初始化前调用的函数
方法体
},
created(){ //初始化完成调用的函数
方法体
},
beforeMount(){ //双向数据绑定前调用的函数
方法体
},
Mounted(){ //双向数据绑定完成调用的函数
方法体
},
beforeUpdate(){ //更新前调用的函数
方法体
},
updated(){ //更新完成调用的函数
方法体
},
beforeDestroy(){ //销毁前调用的函数
方法体
},
destroyed(){ //销毁完成调用的函数
方法体
}，
computed:{ //计算属性，本质是方法，用的时候是属性，必须有返回值
函数名(){
Return 返回值
}
}
})
指令
三个指令
双向数据绑定指令:v-model
v-bind:属性名(可以使用:省略v-bind)
v-on:事件名(可以使用@省略v-on)
Checkbox案例
<div id="app">
<input type="checkbox" v-model="language" value="Java" />Java<br/>
<input type="checkbox" v-model="language" value="PHP" />PHP<br/>
<input type="checkbox" v-model="language" value="Swift" />Swift<br/>
<h1>
你选择了：{{language.join(',')}}
</h1>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
language: []
}
})
</script>
•多个CheckBox对应一个model时，model的类型是一个数组，单个checkbox值是boolean类型
•radio对应的值是input的value值
•input 和textarea 默认对应的model是字符串
•select单选对应字符串，多选对应也是数组
修饰符
事件修饰符:
.stop 阻止冒泡事件
.prevent 阻止默认事件 主要用在a标签中
.capture 捕获
.self 只点自己身上才运行
.once 只执行一次
按键修饰符:
.enter // 表示键盘的enter键
.tab
.delete (捕获 "删除" 和 "退格" 键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta
阻止默认行为函数:event.preventDefault()
阻止冒泡行为函数:event.stopPropagation()
v-if和v-show区别
v-if:移除元素
v-show:只是简单的加display:none
v-for
语法1：
v-for="item in items"
–items：要遍历的数组，需要在vue的data中定义好。
–item：迭代得到的数组元素的别名
语法2：
v-for="(item,index) in items"
–items：要迭代的数组
–item：迭代得到的数组元素别名
–index：迭代到的当前元素索引，从0开始。
Axios
axios.get(url).then(res(响应的对象) =>{
axios请求成功后，处理逻辑
} ).catch(error => {
接口或处理逻辑出错
})
组件
定义全局组件，组件也是一个Vue实例,全局组件意味着无论是否使用这个组件,依然会随着Vue的加载而加载
Vue.component(组件名称，{
//vue对象
template:`定义html`， //必须有根元素 例:div、table...
data(){ //子组件data必须定义为方法
Return{
属性名:属性值
}
}，
......
其余基本一样
})
定义局部组件/局部注册
const counter = {
template:'<button v-on:click="count++">点击 {{ count }} </button>',
data(){
return {
count:0
}
}
};
然后在Vue中使用它–注册局部组件：
var app = new Vue({
el:"#app",
components:{
// counter:counter // 将定义的对象注册为组件
counter
}
})
•components就是当前vue对象子组件集合。
–其key就是子组件名称
–其值就是组件对象的属性
•效果与刚才的全局注册是类似的，不同的是，这个counter组件只能在当前的Vue实例中使用
•子组件的在html中直接使用<组件名>即可使用
组件通信
父向子传递props
父组件使用子组件，同时传递title属性：
<script src="../vue-2.6.10.js"></script>
<div id="app">
<h1>打个招呼：</h1>
<!--使用子组件，同时传递title属性-->
<introduce title="大家好，我是奥特曼"/>
</div>
<script type="text/javascript">
//子组件
Vue.component("introduce",{
// 直接使用props接收到的属性来渲染页面
template:'<h3>{{title}}</h3>',
props:['title'] // 通过props来接收一个父组件传递的属性
})
//父组件
var app = new Vue({
el:"#app"
})
</script>
props:[‘属性1’,’属性2’,...] //可以定义多个属性接收父组件数据
传值过程
子向父的通信
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../vue-2.6.10.js"></script>
</head>
<body>
<div id="app">
outNum:{{outNum}}<br>
<counter @outshow1="mainshow1"></counter>
<counter @outshow2="mainshow2"></counter>
</div>
<script>
Vue.component("counter",{
template:`<div>
<button @click="show1()">show</button>//无参
<button @click="show2(10)">show</button>, //有参
</div>`,
methods:{
//无参
show1(){
this.$emit("outshow1")
},
//有参
show2(num){
this.$emit("outshow2",num)
}
}
})
var vm = new Vue({
el:"#app",
data:{
outNum:''
},
methods:{
//无参
mainshow1(){
this.outNum = 10
},
//有参
mainshow2(myoutnum){
this.outNum = myoutnum
}
}
});
</script>
</body>
</html>
流程分析
跨域
跨域是指跨域名的访问，以下情况都属于跨域：
扫描二维码关注公众号，回复：
7608066 查看本文章
跨域原因说明 示例
域名不同 www.jd.com 与 www.taobao.com
域名相同，端口不同 www.jd.com:8080 与 www.jd.com:8081
二级域名不同/子域名不同 item.jd.com 与 miaosha.jd.com
协议不同 http://jd.com与https://jd.com
域名和ip地址 http://jd.com与192.168.23.12
为什么会有跨域问题?
浏览器的同源策略引起跨域问题,因为跨域问题是浏览器对于ajax请求的一种安全限制
一个页面发起的ajax请求，只能是于当前页同域名的路径/**，这能有效的阻止跨站攻击。
如何解决跨域问题
•Jsonp
最早的解决方案，利用script标签（不受限）可以跨域的原理实现。
限制：
–需要服务的支持
–只能发起GET请求
•nginx反向代理
思路是：利用nginx反向代理把跨域为不跨域，支持各种请求方式
•CORS
规范化的跨域请求解决方案，安全可靠。是w3c组织的标准
优势：
–在服务端进行控制是否允许跨域，可自定义规则
–支持各种请求方式：get、post、put、delete
–限制访问的电脑的IP地址
缺点：
–会产生额外的请求（可能发一次/二次请求）
什么是CORS
CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。
它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。
CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。
•浏览器端：
目前，所有浏览器都支持该功能（IE10以下不行）。整个CORS通信过程，都是浏览器自动完成，不需要用户参与。
•服务端：
一般通过过滤器完成功能。
服务端解决跨域问题
//方式一
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
@Configuration
public class GlobalCorsConfig {
@Bean
public CorsFilter corsFilter() {
//1.添加CORS配置信息
CorsConfiguration config = new CorsConfiguration();
//1) 允许的域,不要写*，否则cookie就无法使用了
config.addAllowedOrigin("http://localhost:8094");
//2) 是否发送Cookie信息
config.setAllowCredentials(true);
//3) 允许的请求方式
config.addAllowedMethod("OPTIONS");
config.addAllowedMethod("HEAD");
config.addAllowedMethod("GET");
config.addAllowedMethod("PUT");
config.addAllowedMethod("POST");
config.addAllowedMethod("DELETE");
config.addAllowedMethod("PATCH");
// 4）允许的头信息
config.addAllowedHeader("*");
//2.添加映射路径，我们拦截一切请求
UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();
configSource.registerCorsConfiguration("/**", config);
//3.返回新的CorsFilter.
return new CorsFilter(configSource);
}
}
方式二
在controller类上加@CrossOrigin注解