vue学习笔记2——vue develtools安装、vue的过滤器、键盘修饰符、自定义指令获取焦点、Vue的生命周期、vue-resource 实现 get, post, jsonp请求

目录

一、vue操作讲解

1，vue develtools安装

2，vue的过滤器

3，时间过滤器

4，定义私有过滤器

5，键盘修饰符

6，自定义指令获取焦点

7，自定义指令改变样式

8，Vue的生命周期

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 的第三方包实现实现数据的请求

1. 之前的学习中，如何发起数据请求？
2. 常见的数据请求类型？ get post jsonp
3. 测试的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);

});

}