Vue----生命周期，事件，axios
1、回顾
- 模板语法
1、文本 {{ msg }}
2、纯HTML v-html v-text 防止XSS,CSRF/ 详情页面图文信息（富文本编辑器上传数据并且获取）
3、表达式 三元运算符
4、指令
v-model v-html v-test v-if v-else-if v-else v-show v-bind v-on v-once v-pre v-cloak v-slot
5、v-if v-show
6、v-for
2、事件处理
v-on:click @click v-on:change @change
v-on:click="fn()"
v-on:click="fn($event)"
v-on:click="fn('params')
v-on:click="fn(msg)" msg为变量
02事件处理.html
一般不要轻易使用事件对象 $event
那么如果需要阻止冒泡以及默认事件呢，vue提供了修饰符
2.1事件修饰符
阻止冒泡 v-on:click.stop="fn()"
阻止默认事件 v-on:click.prevent="fn"
阻止冒泡阻止默认事件 v-on:click.stop.prevent="fn"
.capture 添加事件监听器时使用事件捕获模式 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理
.self 只当在 event.target 是当前元素自身时触发处理函数 即事件不是从内部元素触发的
.once 点击事件将只会触发一次
.passive 不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。
2.2 按键修饰符
以前如果有一个表单输入框，当你输入之后敲回车想要打印值
<input onchange="fn(event)" id="name" />
if (event.keyCode === 13) {name.value}
vue
<input @change.enter="fn()" id="name" />
.tab
.delete
.esc
.space
.up
.down
.left
.right
2.3 系统修饰符
.ctrl
.alt
.shift
.meta
3、表单输入绑定 --- 购物车
v-model
唯一特殊的就是 checkbox
如果初始值为 数组，则表示多选框
如果初始值为 boolean，则表示真假 --- 购物车中的选择
04表单输入
<input type="text" v-model="username"> {{ username }} <br />
<input type="password" v-model="password"> {{ password }} <br />
<input type="radio" value="男" v-model="sex"> 男
<input type="radio" value="女" v-model="sex"> 女 {{ sex }}<br />
<input type="checkbox" value="篮球" v-model="hobby"> 篮球
<input type="checkbox" value="足球" v-model="hobby"> 足球
<input type="checkbox" value="排球" v-model="hobby"> 排球 {{ hobby }} <br />
<textarea v-model="note"></textarea>{{ note }}<br />
<select v-model="lesson">
<option value="一阶段">一阶段</option>
<option value="二阶段">二阶段</option>
<option value="三阶段">三阶段</option>
</select> {{ lesson }}<br />
<input type="checkbox" v-model="flag"> 已阅读协议<br />
<button @click="getData">记录信息</button>
表单修饰符
v-model.lazy 失去焦点或者按回车键时才会运算
v-model.trim 得到的值去除两端空格
v-model.number 唤起数字键盘
？？？ 原生js如果要做正则的校验，失去焦点、键盘弹起时
vue 中 可以使用 侦听属性 或者 计算属性 去做
4、计算属性
任何复杂的业务逻辑，我们都应当使用计算属性。
在特定条件下，计算属性要优于方法
计算属性具有依赖性，计算属性依赖 data中的初始值，只有当初始值改变的时候，计算属性才会再次计算
计算属性一般书写为一个函数，返回了一个值，这个值具有依赖性，只有依赖的那个值发生改变，他才会重新计算 app.msg = "hello 1902"
06计算属性.html
原始数据： {{ msg }} <br />
计算属性的值： {{ computedMsg }} - {{ computedMsg }} -{{ computedMsg }} <br />
方法实现： {{ reversemsgfn() }} - {{ reversemsgfn() }}- {{ reversemsgfn() }}
computed: { // 计算属性 ，计算属性可以依据data中的初始数据转换而来，可以像data中的数据一样使用，一般为函数，返回一个值
computedMsg () {
console.log('computed') // 执行一次
return this.msg.split('').reverse().join('')
}
},
methods: {
reversemsgfn () {
console.log('methods') // 执行3次
return this.msg.split('').reverse().join('')
}
}
5、侦听属性(监听属性)
vue提供了检测数据变化的一个属性 watch
在特定条件下，计算属性要优于侦听属性
07侦听属性.html
08侦听属性.html
09计算属性.html
6、vue的生命周期函数
使用方法 --- 4个before，4个ed，创造，装载，更新，销毁
初始化阶段
beforeCreate(){} // 准备怀孕
created(){} // 怀上了 *******************************************
beforeMount(){} // 准备生
mounted(){} // 生下来了 *************************************************
运行时阶段
beforeUpdate(){} // 每天都在长大
updated(){} ************************
销毁阶段
beforeDestroy(){} // 马上 game over
destroyed(){} // game over gg ************
综上所述，会在 created 或者 mounted 中请求数据
如果必须使用dom操作，那么可以在 mounted 和 updated 中
7、vue中数据的请求
ajax --- 数据请求 --- 前后端分离（前后端耦合、不分离开发--- 传统的系统架构）--- 跨域
js 原生
XMLHttpRequest / ActiveXObject
jQuery $.ajax() / $.get() / $.post() / $.load() / $.getScript()
vue/react fetch / axios --- 基于es6的promise
7.1 fetch
fetch API 是基于 Promise 设计,旧浏览器不支持 Promise，需要使用 polyfill es6-promise 。
fetch 不需要额外的安装什么东西，直接就可以使用
fetch(url).then(res => res.json()).then(data => {console.log(data)})
fetch(url).then(res => res.text()).then(data => {console.log(data)})
fetch(url, {
method:'post',
headers: {
"Content‐Type": "application/x-www-form-urlencoded"
},
body: "name=kerwin&age=100"
}).then(res => res.json()).then(data => {console.log(data)})
fetch(url, {
method:'post',
headers: {
"Content‐Type": "application/json"
},
body: JSON.stringify({
name:"kerwin",
age:100
})
}).then(res => res.json()).then(data => {console.log(data)})
11fetch.html
7.2 axios
必须得安装之后才能使用 cnpm i axios
axios.get(url).then(res => {console.log(res.data)})
axios.post(url, {}).then(res => {console.log(res.data)})
12axios.html
