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

淡淡的烟草味﹌ 2022-04-12 12:07 221阅读 0赞

**目录**

一、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][https_github.com_masterzz_vue-learn]

# 一、vue操作讲解 #

## 1，vue develtools安装 ##

有个chrome扩展程序较vue develtools，安装默认的一个包放在：D:\\work\\工具\\chrome扩展

chrome扩展。博主上传了该工具，进行解压后得到这个文件夹：

![20181203124425861.png][]

在chome浏览器中选择扩展程序， 选择加载已解压的扩展程序，再选中这个文件夹。

![20181203124445568.png][]

重启chrome后开启该插件按F12，多了这个一个选项：

![20181203124502931.png][]

## 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,'邪恶');

\});

无过滤器的结果：

![2018120312452895.png][]

采用过滤器后，替换了单纯二字：

![20181203124545382.png][]

从过滤器的语法可以看出，过滤器类似于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\}\`

\});

这样就可以正常显示了：

![20181204173235531.png][]

注意，以上定义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：

![20181204173309634.png][]

修改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了：

![2018120417332663.png][]

## 5，键盘修饰符 ##

这里的@keyup就是键盘抬起的时间，.enter就是回车键的修饰符

还有一种根据键盘值来写键盘事件，回车的键盘值是13：

键盘值，参考：[https://blog.csdn.net/qq\_22059611/article/details/84787928][https_blog.csdn.net_qq_22059611_article_details_84787928]

定义全局按键修饰符

Vue.config.keyCodes.en = 13;

这样就可以这么调回车按钮：

## 6，自定义指令获取焦点 ##

在vue中，所有的指令，在调用的时候，都以v- 开头，

这里面，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，自定义指令改变样式 ##

其中v-color是定义样式为红色的指令，然后在script中定义设置颜色的指令

// 自定义一个 设置字体颜色的指令

Vue.directive('color', \{

// 样式，只要通过指令绑定给了元素，不管这个元素有没有被插入到页面中去，这个元素肯定有了一个内联样式

// 将来元素肯定会显示到页面中去，这时候，浏览器的渲染引擎必然会解析样式，应用给这个元素

// 而和js行为有关的操作，最好在inserted中去执行，防止JS行为不生效

bind: function(el, binding) \{

el.style.color = 'red';

\})

这时候，修改v-color:

对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进行调用：

有一种简写的方式：

'fontsize': function(el,binding) \{

这种方式相当于同时包含了bind和update两个钩子函数

## 8，Vue的生命周期 ##

*  什么是生命周期：从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！
 *  [生命周期钩子][Link 1]：就是生命周期事件的别名而已；
 *  生命周期钩子 = 生命周期函数 = 生命周期事件
 *  主要的生命周期函数分类：

*  创建期间的生命周期函数：

*  beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性
 *  created：实例已经在内存中创建OK，此时 data 和 methods 已经创建OK，此时还没有开始 编译模板
 *  beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中
 *  mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示

*  运行期间的生命周期函数：

*  beforeUpdate：状态更新之前执行此函数， 此时 data 中的状态值是最新的，但是界面上显示的 数据还是旧的，因为此时还没有开始重新渲染DOM节点
 *  updated：实例更新完毕之后调用此函数，此时 data 中的状态值 和 界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了！

*  销毁期间的生命周期函数：

*  beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
 *  destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

Vue生命周期图示：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyMDU5NjEx_size_16_color_FFFFFF_t_70][]

在代码中定义data、methods，演示创建过程汇总的4个生命周期函数（可参照我的github：[https://github.com/masterzz/vue-learn][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请求][vue-resource _ get_ post_ jsonp] ##

github：[https://github.com/pagekit/vue-resource][vue-resource _ get_ post_ jsonp]

除了 vue-resource 之外，还可以使用 axios 的第三方包实现实现数据的请求

1.  之前的学习中，如何发起数据请求？
2.  常见的数据请求类型？ get post jsonp
3.  测试的URL请求资源地址：

*  get请求地址： [http://vue.studyit.io/api/getlunbo][http_vue.studyit.io_api_getlunbo]
 *  post请求地址：[http://vue.studyit.io/api/post][http_vue.studyit.io_api_post]
 *  jsonp请求地址：[http://vue.studyit.io/api/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);

\});

[https_github.com_masterzz_vue-learn]: https://github.com/masterzz/vue-learn
[20181203124425861.png]: /images/20220412/3cd7e259f5c24e7f892e091125141c5b.png
[20181203124445568.png]: /images/20220412/db0558773c4c42b4b369dd7df0eec826.png
[20181203124502931.png]: /images/20220412/b54cba148a774c8b980768211102301d.png
[2018120312452895.png]: /images/20220412/9657189015f4416aa836f64c121609ef.png
[20181203124545382.png]: /images/20220412/f795c2bfd32d4eeeaeeaca6d1f53e449.png
[20181204173235531.png]: /images/20220412/9b5204f2b4db4aa88ebb5d476cf05c8b.png
[20181204173309634.png]: /images/20220412/b6fdc91f5fec464ab547410e93b98245.png
[2018120417332663.png]: /images/20220412/f60f2897c96d4be88f9fa14d403503f6.png
[https_blog.csdn.net_qq_22059611_article_details_84787928]: https://blog.csdn.net/qq_22059611/article/details/84787928
[Link 1]: https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyMDU5NjEx_size_16_color_FFFFFF_t_70]: /images/20220412/4a16e3e825864759ab0308e73e21d8d1.png
[vue-resource _ get_ post_ jsonp]: https://github.com/pagekit/vue-resource
[http_vue.studyit.io_api_getlunbo]: http://vue.studyit.io/api/getlunbo
[http_vue.studyit.io_api_post]: http://vue.studyit.io/api/post
[http_vue.studyit.io_api_jsonp]: http://vue.studyit.io/api/jsonp