目录
9,vue-resource 实现 get, post, jsonp请求
代码请参考我的github:
https://github.com/masterzz/vue-learn
一、vue操作讲解
1,vue develtools安装
有个chrome扩展程序较vue develtools,安装默认的一个包放在:D:\work\工具\chrome扩展
chrome扩展。博主上传了该工具,进行解压后得到这个文件夹:
在chome浏览器中选择扩展程序, 选择加载已解压的扩展程序,再选中这个文件夹。
重启chrome后开启该插件按F12,多了这个一个选项:
2,vue的过滤器
概念:Vue.js 允许你自定义过滤器,可被用作一些常见的文本格式化。过滤器可以用在两个地方:mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符指示;
过滤器的格式:
{{ name | 过滤器的名称}}
然后在script中定义:
Vue.filter('过滤器的名称',function(){})
示例:
在Vue中定义msg
msg:'曾经我也是一个单纯的男人,傻傻地问,谁是世界上最单纯的男人'
html中:
{{msg | msgFormat}}
那么msgFormat定义在script中:
// 定义一个vue全局的过滤器,名字叫做msgFormat
Vue.filter('msgFormat',function(msg) {
// 字符串的replace除了可以写字符,也可以写正则表达式
return msg.replace(/单纯/g,'邪恶');
});
无过滤器的结果:
采用过滤器后,替换了单纯二字:
从过滤器的语法可以看出,过滤器类似于linux的管道命令,当然也是可以多次调用的,其次它的参数除了第一个参数为固定的输入参数外,第二个及以后都是可以自定义参数的。
3,时间过滤器
比如有一个字段,为ctime: new Date()
我要进行处理:
<td>{{item.ctime | dateFormat}}</td>
在过滤器dateFormat:
Vue.filter('dateFormat',function(dateStr) {
var dt = new Date(dateStr);
// yyyy-mm-dd
var y = dt.getFullYear();
var m = dt.getMonth();
var d = dt.getDate() ;
return `${y}-${m}-${d}`
});
这样就可以正常显示了:
注意,以上定义filter的方式,叫做全局过滤器,各个vue对象均可以使用
4,定义私有过滤器
私有过滤器则是定义在同methods同一个层次,同时存在全局和私有过滤器,优先调用私有过滤器;使用私有过滤器和全局过滤器一样:
filters:{
// 定义私有过滤器,过滤器有两个条件, 【过滤器名称 和 处理函数】
dateFormat(dateStr) {
var dt = new Date(dateStr);
// yyyy-mm-dd
var y = dt.getFullYear();
var m = dt.getMonth();
var d = dt.getDate() ;
var hh = dt.getHours();
var mm = dt.getMinutes();
var ss = dt.getSeconds();
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
}
}
但是这种日期,存在一位的情况下,没有补齐0:
修改dateFormat:
dateFormat(dateStr) {
var dt = new Date(dateStr);
// yyyy-mm-dd
var y = dt.getFullYear();
var m = dt.getMonth().toString().padStart(2,'0');
var d = dt.getDate().toString().padStart(2,'0');
var hh = dt.getHours().toString().padStart(2,'0');
var mm = dt.getMinutes().toString().padStart(2,'0');
var ss = dt.getSeconds().toString().padStart(2,'0');
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
}
这样就可以自动补0了:
5,键盘修饰符
<input type="text" class="form-control" v-model="name" @keyup.enter="add">
这里的@keyup就是键盘抬起的时间,.enter就是回车键的修饰符
还有一种根据键盘值来写键盘事件,回车的键盘值是13:
<input type="text" class="form-control" v-model="name" @keyup.13="add">
键盘值,参考:https://blog.csdn.net/qq_22059611/article/details/84787928
定义全局按键修饰符
Vue.config.keyCodes.en = 13;
这样就可以这么调回车按钮:
<input type="text" class="form-control" v-model="name" @keyup.en="add">
6,自定义指令获取焦点
在vue中,所有的指令,在调用的时候,都以v- 开头,
<input type="text" class="form-control" v-model="keywords" v-focus>
这里面,v-focus为自定义的获取焦点事件
在script中,定义指令:
// 使用Vue.directive() 定义全局的指令
// 其中参数1,是我们指令的名称,注意,在定义的时候,指令的前面,不需要加v- 前缀,但是在调用的时候必须在指令名前加上v-前缀
// 参数2是一个对象,这个对象身上有指令相关的函数,这些函数可以在特定的阶段,执行相关的操作
Vue.directive('focus', {
bind:function(el) {
// 每当指令绑定到元素上的时候,会立即执行这个 bind函数,只执行一次
// 注意: 在每个函数中,第一个参数,永远是el,表示 被绑定了指令的那个元素,这个el参数,是一个原生的JS对象
// 在元素 刚绑定了指令的时候,还没有 插入到DOM当中去,这时候,调用focus方法没有作用
// 因为,一个元素只有插入DOM元素之后,才能获取焦点
// el.focus();
},
inserted:function(el) {
// inserted 表示元素插入到dom中的时候会执行inserted函数,触发1次
el.focus();
},
updated:function() {
// 当VNode更新的时候,会执行updated,可能会触发多次
},
})
这样在重启界面时,焦点就会聚焦在该input
7,自定义指令改变样式
<input type="text" class="form-control" v-model="keywords" v-focus v-color>
其中v-color是定义样式为红色的指令,然后在script中定义设置颜色的指令
// 自定义一个 设置字体颜色的指令
Vue.directive('color', {
// 样式,只要通过指令绑定给了元素,不管这个元素有没有被插入到页面中去,这个元素肯定有了一个内联样式
// 将来元素肯定会显示到页面中去,这时候,浏览器的渲染引擎必然会解析样式,应用给这个元素
// 而和js行为有关的操作,最好在inserted中去执行,防止JS行为不生效
bind: function(el, binding) {
el.style.color = 'red';
}
})
这时候,修改v-color:
<input type="text" class="form-control" v-model="keywords" v-focus v-color="'blue'">
对bind指令进行修改:
bind: function(el, binding) {
el.style.color = 'red';
console.log(binding.name);
console.log(binding.value);
console.log(binding.expression);
}
这时候会分别打印出:
color 、blue和'blue';说明binding可以获取相关的参数,这时候就可以通过binding来动态设置其颜色值:
bind: function(el, binding) {
el.style.color = binding.value;
}
定义私有指令,和filters一样,放在和methods同一层级:
directives: {
// 自定义私有指令
'fontweight': {
bind: function(el,binding) {
console.log(binding.value);
el.style.fontWeight = binding.value;
}
}
}
这时再用 v-fontweight进行调用:
<input type="text" class="form-control" v-model="keywords" v-focus v-color="'black'" v-fontweight="1000">
有一种简写的方式:
'fontsize': function(el,binding) {
}
这种方式相当于同时包含了bind和update两个钩子函数
8,Vue的生命周期
- 什么是生命周期:从Vue实例创建、运行、到销毁期间,总是伴随着各种各样的事件,这些事件,统称为生命周期!
- 生命周期钩子:就是生命周期事件的别名而已;
- 生命周期钩子 = 生命周期函数 = 生命周期事件
- 主要的生命周期函数分类:
- 创建期间的生命周期函数:
- beforeCreate:实例刚在内存中被创建出来,此时,还没有初始化好 data 和 methods 属性
- created:实例已经在内存中创建OK,此时 data 和 methods 已经创建OK,此时还没有开始 编译模板
- beforeMount:此时已经完成了模板的编译,但是还没有挂载到页面中
- mounted:此时,已经将编译好的模板,挂载到了页面指定的容器中显示
- 运行期间的生命周期函数:
- beforeUpdate:状态更新之前执行此函数, 此时 data 中的状态值是最新的,但是界面上显示的 数据还是旧的,因为此时还没有开始重新渲染DOM节点
- updated:实例更新完毕之后调用此函数,此时 data 中的状态值 和 界面上显示的数据,都已经完成了更新,界面已经被重新渲染好了!
- 销毁期间的生命周期函数:
- beforeDestroy:实例销毁之前调用。在这一步,实例仍然完全可用。
- destroyed:Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
Vue生命周期图示:
在代码中定义data、methods,演示创建过程汇总的4个生命周期函数(可参照我的github:https://github.com/masterzz/vue-learn):
message:'ok'
show() {
console.log(this.message);
}
然后定义生命周期函数
beforeCreate() {
// 这是我们遇到的第一个生命周期函数,表示实例被完全创建出来之前,会执行它
console.log(this.message); //打印undefined
// this.show(); //显示还没有show()方法
// 注意在beforeCreate生命周期函数执行的时候,data和methods中的数据都没有初始化
},
created() {
},
beforeMount() {
// 表示模板已经在内存中编辑完成了,但是尚未渲染到页面中
// console.log(document.getElementById('app'));
// 在beforeMount 执行的时候,页面中的元素,还没有被真正替换过来,只是之前写的一些模板字符串
},
mounted() {
// 这个函数表示内存中的模板,真实地挂载到了页面中,用户已经可以看到渲染好的页面了
console.log(document.getElementById('app'));
// 注意,mounted 是实例创建期间的最后一个生命周期函数,mounted执行完就表示实例正式地全部创建好了,如果不做修改它就静静地躺在内存里
},
beforeUpdate() {
// 数据被更新后就会触发这个事件
console.log('数据更新:' );
// 但是页面中的数据还是旧的,此时,data中的数据是最新的,页面尚未和最新数据保持一致
},
updated() {
// 这个事件执行的时候,页面和data数据已经同步了,都是最新的
},
9,vue-resource 实现 get, post, jsonp请求
github:https://github.com/pagekit/vue-resource
除了 vue-resource 之外,还可以使用 axios 的第三方包实现实现数据的请求
- 之前的学习中,如何发起数据请求?
- 常见的数据请求类型? get post jsonp
- 测试的URL请求资源地址:
- get请求地址: http://vue.studyit.io/api/getlunbo
- post请求地址:http://vue.studyit.io/api/post
- jsonp请求地址:http://vue.studyit.io/api/jsonp
4,JSONP的实现原理
- 由于浏览器的安全性限制,不允许AJAX访问 协议不同、域名不同、端口号不同的 数据接口,浏览器认为这种访问不安全;
- 可以通过动态创建script标签的形式,把script标签的src属性,指向数据接口的地址,因为script标签不存在跨域限制,这种数据获取方式,称作JSONP(注意:根据JSONP的实现原理,知晓,JSONP只支持Get请求);
- 具体实现过程:
- 先在客户端定义一个回调方法,预定义对数据的操作;
- 再把这个回调方法的名称,通过URL传参的形式,提交到服务器的数据接口;
- 服务器数据接口组织好要发送给客户端的数据,再拿着客户端传递过来的回调方法名称,拼接出一个调用这个方法的字符串,发送给客户端去解析执行;
- 客户端拿到服务器返回的字符串之后,当作Script脚本去解析执行,这样就能够拿到JSONP的数据了;
- 带大家通过 Node.js ,来手动实现一个JSONP的请求例子;
const http = require('http');
// 导入解析 URL 地址的核心模块
const urlModule = require('url');
const server = http.createServer();
// 监听 服务器的 request 请求事件,处理每个请求
server.on('request', (req, res) => {
const url = req.url;
// 解析客户端请求的URL地址
var info = urlModule.parse(url, true);
// 如果请求的 URL 地址是 /getjsonp ,则表示要获取JSONP类型的数据
if (info.pathname === '/getjsonp') {
// 获取客户端指定的回调函数的名称
var cbName = info.query.callback;
// 手动拼接要返回给客户端的数据对象
var data = {
name: 'zs',
age: 22,
gender: '男',
hobby: ['吃饭', '睡觉', '运动']
}
// 拼接出一个方法的调用,在调用这个方法的时候,把要发送给客户端的数据,序列化为字符串,作为参数传递给这个调用的方法:
var result = `${cbName}(${JSON.stringify(data)})`;
// 将拼接好的方法的调用,返回给客户端去解析执行
res.end(result);
} else {
res.end('404');
}
});
server.listen(3000, () => {
console.log('server running at http://127.0.0.1:3000');
});
5,vue-resource 的配置步骤:
- 直接在页面中,通过script标签,引入 vue-resource 的脚本文件;
- 注意:引用的先后顺序是:先引用 Vue 的脚本文件,再引用 vue-resource 的脚本文件;
6,发送get请求:
getInfo() { // get 方式获取数据
this.$http.get('http://127.0.0.1:8899/api/getlunbo').then(res => {
console.log(res.body);
})
}
7,发送post请求:
postInfo() {
var url = 'http://127.0.0.1:8899/api/post';
// post 方法接收三个参数:
// 参数1: 要请求的URL地址
// 参数2: 要发送的数据对象
// 参数3: 指定post提交的编码类型为 application/x-www-form-urlencoded
this.$http.post(url, { name: 'zs' }, { emulateJSON: true }).then(res => {
console.log(res.body);
});
}
8,发送JSONP请求获取数据:
jsonpInfo() { // JSONP形式从服务器获取数据
var url = 'http://127.0.0.1:8899/api/jsonp';
this.$http.jsonp(url).then(res => {
console.log(res.body);
});
}