个人中心
gpt4 book ai didi

Vue过滤器,生命周期函数和vue-resource简单介绍

转载 作者：qq735679552 更新时间：2022-09-27 22:32:09 30 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章Vue过滤器,生命周期函数和vue-resource简单介绍由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

1、过滤器

使用例子:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html lang= "en" >
<head>
   <meta charset= "UTF-8" >
   <title>Title</title>
   <script src= "vue.js" ></script>
</head>
<body>
  <div id= "app" >
    //把msg的内容的abc替换成'你好123'，最后添加上'========'
   <p>{{ msg | msgFormat( '你好' , '123' ) | test }}</p>
  </div>
 
  <script>
   // 定义一个 Vue 全局的过滤器，名字叫做 msgFormat
   Vue.filter( 'msgFormat' , function (msg, arg, arg2) {
    // 字符串的 replace 方法，第一个参数，除了可写一个 字符串之外，还可以定义一个正则
    return msg.replace(/abc/g, arg + arg2)
   })
 
   Vue.filter( 'test' , function (msg) {
    return msg + '========'
   })
 
 
   // 创建 Vue 实例，得到 ViewModel
   var vm = new Vue({
    el: '#app' ,
    data: {
     msg: 'abc,abcdefg,哈哈哈'
    },
    methods: {}
   });
  </script>
</body>
</html>

2、vue的生命周期函数

1、什么是生命周期

从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期 。

2、主要的生命周期函数分类

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

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

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

使用例子：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html lang= "en" >
<head>
   <meta charset= "UTF-8" >
   <title>Title</title>
   <script src= "vue.js" ></script>
</head>
<body>
<div id= "app" >
   <input type= "button" value= "修改msg" @click= "msg='No'" >
   <h3 id= "h3" >{{ msg }}</h3>
</div>
 
<script>
   var vm = new Vue({
     el: '#app' ,
     data: {
       msg: 'ok'
     },
     methods: {
       show() {
         console.log( '执行了show方法' )
       }
     },
     beforeCreate() {
       alert( 'beforeCreate1' )
     //this.show()
     // 注意： 在 beforeCreate 生命周期函数执行的时候，data 和 methods 中的 数据都还没有没初始化
    },
      created() { // 这是遇到的第二个生命周期函数
     alert( 'created2' )
     // this.show()
     // 在 created 中，data 和 methods 都已经被初始化好了！
     // 如果要调用 methods 中的方法，或者操作 data 中的数据，最早，只能在 created 中操作
    },
    beforeMount() { // 这是遇到的第3个生命周期函数，表示 模板已经在内存中编辑完成了，但是尚未把 模板渲染到 页面中
     alert( 'beforeMount3' )
     // 在 beforeMount 执行的时候，页面中的元素，还没有被真正替换过来，只是之前写的一些模板字符串
    },
    mounted() { // 这是遇到的第4个生命周期函数，表示，内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了
     alert( 'mounted4' )
     // 注意： mounted 是 实例创建期间的最后一个生命周期函数，当执行完 mounted 就表示，实例已经被完全创建好了，此时，如果没有其它操作的话，这个实例，就静静的 躺在我们的内存中，一动不动
    },
 
    // 接下来的是运行中的两个事件
    beforeUpdate() { // 这时候，表示 我们的界面还没有被更新【数据被更新了吗？ 数据肯定被更新了】
 
     alert( 'beforeUpdate修改' )
 
     // 得出结论： 当执行 beforeUpdate 的时候，页面中的显示的数据，还是旧的，此时 data 数据是最新的，页面尚未和 最新的数据保持同步
    },
    updated() {
     console.log( '界面上元素的内容：' + document.getElementById( 'h3' ).innerText)
     console.log( 'data 中的 msg 数据是：' + this .msg)
     // updated 事件执行的时候，页面和 data 数据已经保持同步了，都是最新的
    }
   })
</script>
</body>
</html>

3、vue-resource

github地址：https://github.com/pagekit/vue-resource 。

1、vue-resource 的请求api是按照rest风格设计的，它提供了7种请求api

  • get(url, [data], [options]); ****
  • head(url,[data],[options]);
  • post(url, [data], [options]); ****
  • put(url, [data], [options]);
  • patch(url, [data], [options]);
  • delete(url, [data], [options]);
  • jsonp(url, [data], [options]); ****

2、参数介绍

都是接受三个参数： url（字符串），请求地址。可被options对象中url属性覆盖.

data（可选，字符串或对象），要发送的数据，可被options对象中的data属性覆盖.

options对象 。

参数 类型 描述 。

?
1
2
3
4
5
6
7
8
9
10
11
url      string            请求的URL
method     string            请求的HTTP方法，例如：'GET', 'POST'或其他HTTP方法
body      Object, FormData string    request body
params     Object            请求的URL参数对象 ，get
headers    Object            request header 第三方请求数据需要用到
timeout    number            单位为毫秒的请求超时时间 (0 表示无超时时间)
before     function(request)       请求发送前的处理函数，类似于jQuery的beforeSend函数
progress    function(event)        ProgressEvent回调处理函数
credentials  boolean            表示跨域请求时是否需要使用凭证
emulateHTTP  boolean            发送PUT, PATCH, DELETE请求时以HTTP POST的方式发送，并设置请求头的X-HTTP-Method-Override
emulateJSON  boolean            将request body以application/x-www-form-urlencoded content type发送

3、例子

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
< html lang = "en" >
< head >
   < meta charset = "UTF-8" >
   < title >Title</ title >
   < script src = "vue.js" ></ script >
   < script src = "https://cdn.jsdelivr.net/npm/vue-resource" ></ script >
 
</ head >
< body >
< div id = "app" >
   < input type = "button" value = "get请求" @ click = "getInfo" >
   < input type = "button" value = "post请求" @ click = "postInfo" >
   < input type = "button" value = "jsonp请求" @ click = "jsonpInfo" >
  </ div >
 
  < script >
   // 创建 Vue 实例，得到 ViewModel
   var vm = new Vue({
    el: '#app',
    data: {},
    methods: {
     getInfo() { // 发起get请求
      // 当发起get请求之后， 通过 .then 来设置成功的回调函数
      this.$http.get('http://vue.studyit.io/api/getlunbo').then(function (result) {
       // 通过 result.body 拿到服务器返回的成功的数据
       // console.log(result.body)
      })
     },
     postInfo() { // 发起 post 请求  application/x-wwww-form-urlencoded
      // 手动发起的 Post 请求，默认没有表单格式，所以，有的服务器处理不了
      // 通过 post 方法的第三个参数， { emulateJSON: true } 设置 提交的内容类型 为 普通表单数据格式
      this.$http.post('http://vue.studyit.io/api/post', {}, { emulateJSON: true }).then(result => {
       console.log(result.body)
      })
     },
     jsonpInfo() { // 发起JSONP 请求
      this.$http.jsonp('http://vue.studyit.io/api/jsonp').then(result => {
       console.log(result.body)
      })
     }
    }
   });
  </ script >
</ body >
</ html >

以上就是Vue过滤器,生命周期函数和vue-resource简单介绍的详细内容，更多关于Vue过滤器,生命周期函数和vue-resource的资料请关注我其它相关文章！ 。

原文链接：https://www.cnblogs.com/zhangb8042/p/11127773.html 。

最后此篇关于Vue过滤器,生命周期函数和vue-resource简单介绍的文章就讲到这里了,如果你想了解更多关于Vue过滤器,生命周期函数和vue-resource简单介绍的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

30 4 0
文章推荐： 如何通过Python收集MySQL MHA 部署及运行状态信息的功能
文章推荐： 在telnet下操作memcache详解（操作命令详解）
文章推荐： 8种主流NoSQL数据库系统特性对比和最佳应用场景
文章推荐： sql学习之CASE WHEN THEN ELSE END的用法
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com