事件处理
事件
1. vue中事件对象是原生事件对象
2.当一个事件的参数中既有事件对象，又有普通参数，那么我们在调用这个方法时，需要传入一个$event和对象对应
vm.$on
事件发布（声明一个事件）
语法：vm.
emit触发。回调函数会接收所有传入事件触发函数的额外参数
示例：
vm.$on('test', function (msg) {
console.log(msg)
})
vm.$emit('test', 'hi')
// => "hi"
vm.$emit
事件订阅（触发一个事件）
语法：vm.$emit( eventName, […args] )
参数：
eventName:事件名称
…args:事件参数
指令
v-on
缩写：@
参数：event
修饰符：
- .stop - 调用 event.stopPropagation()。
- .prevent - 调用 event.preventDefault()。
- .capture - 添加事件侦听器时使用 capture 模式。
- .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
- .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
- .native - 监听组件根元素的原生事件。
- .once - 只触发一次回调。
- .left - (2.2.0) 只当点击鼠标左键时触发。
- .right - (2.2.0) 只当点击鼠标右键时触发。
- .middle - (2.2.0) 只当点击鼠标中键时触发。
- .passive - (2.3.0) 以 { passive: true } 模式添加侦听器
用法 ：
绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。
用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。
在监听原生 DOM 事件时，方法以事件为唯一的参数。如果使用内联语句，语句可以访问一个 $event 属性：v-on:click=“handle(‘ok’, $event)”。
从 2.4.0 开始，v-on 同样支持不带参数绑定一个事件/监听器键值对的对象。注意当使用对象语法时，是不支持任何修饰器的。
示例：
<!-- 方法处理器 -->
<button v-on:click="doThis"></button>
<!-- 动态事件 (2.6.0+) -->
<button v-on:[event]="doThis"></button>
<!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button>
<!-- 缩写 -->
<button @click="doThis"></button>
<!-- 动态事件缩写 (2.6.0+) -->
<button @[event]="doThis"></button>
<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>
<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>
<!-- 阻止默认行为，没有表达式 -->
<form @submit.prevent></form>
<!-- 串联修饰符 -->
<button @click.stop.prevent="doThis"></button>
<!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter">
<!-- 键修饰符，键代码 -->
<input @keyup.13="onEnter">
<!-- 点击回调只会触发一次 -->
<button v-on:click.once="doThis"></button>
<!-- 对象语法 (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>
在子组件上监听自定义事件 (当子组件触发“my-event”时将调用事件处理器)：
<my-component @my-event="handleThis"></my-component>
<!-- 内联语句 -->
<my-component @my-event="handleThis(123, $event)"></my-component>
<!-- 组件中的原生事件 -->
<my-component @click.native="onClick"></my-component>
v-pre
用法：跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译
示例：
<span v-pre>{{ this will not be compiled }}</span>
v-cloak
用法：这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none }一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕
示例：
[v-cloak] {
display: none;
}<div v-cloak>
{{ message }}
</div>
不会显示，直到编译结束
v-once
用法：只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
示例：
<!-- 单个元素 -->
<span v-once>This will never change: {{msg}}</span> <!-- 有子元素 -->
<div v-once>
<h1>comment</h1>
<p>{{msg}}</p>
</div>
<!-- 组件 -->
<my-component v-once :comment="msg"></my-component>
<!-- `v-for` 指令-->
<ul>
<li v-for="i in list" v-once>{{i}}</li>
</ul>
自定义指令
自定义指令有两种定义模式：
1.全局定义
2.局部定义
// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
如果想注册局部指令，组件中也接受一个 directives 的选项:
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
}
一个指令定义对象可以提供如下几个钩子函数 (均为可选)：
- bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
- inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
axios
- 第三方封装库
- https://www.npmjs.com/package/axios
- 特点
-
- 它在浏览器中创建的是浏览器对象
-
- 它底层是用Node.js中的http模块实现的
-
- 支持Promise
-
- 可以拦截请求和响应 —功能： loading加载效果、登录拦截
-
- 转换请求和响应数据
-
- 自动转换为JSON数据
-
- 客户端支持防止XSRF
-
- axios会自动封装数据
- 使用
- Mock模拟数据的请求
- 要求: 必须和后端沟通好返回数据的字段
- mock.js生成
mock 目录 - jsonplaceholder
线上的 http://jsonplaceholder.typicode.com/ - 拷贝线上相似数据
copy response
- 后端接口的请求
https://www.showdoc.cc/ 这是一个后端渲染模板
post请求必须先设置请求头
- Mock模拟数据的请求
Axios总结
1.get方法
A: 无参数 axios.get(url).then(res=>console.log(res).catch(error=>conosle.log(error))
B: 有参数
axios({
url: ‘http://xxx’,
method: ‘get’ //默认就是get,这个可以省略，
params: {
key: value
}
})
2.post方法
注意： axios中post请求如果你直接使用npmjs.com官网文档， 会有坑
解决步骤：
- 先设置请求头
- 实例化 URLSearchParams的构造器函数得到params对象
- 使用params对象身上的append方法进行数据的传参
// 统一设置请求头
axios.defaults.headers.post[‘Content-Type’] = ‘application/x-www-form-urlencoded’;
let params = new URLSearchParams()
// params.append(key,value)
params.append(‘a’,1)
params.append(‘b’,2)
axios({
url: ‘http://localhost/post.php’,
method: ‘post’,
data: params，
headers: { //单个请求设置请求头
‘Content-Type’: “application/x-www-form-urlencoded”
}
})
.then(res => {
console.log( res )
})
.catch( error => {
if( error ){
throw error
}
})
Fetch
1.get
fetch(‘http://localhost/get.php?a=1&b=2’)
.then(res=> res.text()) // 数据格式化 res.json() res.blob()
.then(data => {
console.log( data )
})
.catch(error => {
if( error ){
throw error
}
})
注意事项：
A: fetch 的 get 请求的参数是直接连接在url上的， 我们可以使用Node.js提供的url或是qureystring模块来将
Object --> String
B: fetch 的请求返回的是Promise对象，所以我们可以使用.then().catch(),但是要记住.then()至少要写两个， 第一个then是用来格式化数据的，第二个then是可以拿到格式化后的数据
格式化处理方式有
fetch(’./data.json’)
.then(res=>{
res.json() //res.text() res.blob()
})
.then( data => console.log(data))
.catch( error => console.log( error ))
2.post
fetch 文档
https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch#%E8%BF%9B%E8%A1%8C_fetch_%E8%AF%B7%E6%B1%82
fetch项目使用的博客
https://blog.csdn.net/hefeng6500/article/details/81456975