服务器之家：专注于服务器技术及软件下载分享
分类导航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服务器之家 - 编程语言 - JavaScript - vue.js - Vue过滤器,生命周期函数和vue-resource简单介绍

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

2021-12-30 16:17巽逸 vue.js

这篇文章主要介绍了Vue过滤器,生命周期函数和vue-resource简单介绍，帮助大家更好的理解和使用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
<!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>

二、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>

三、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.js详解vue 表单绑定与组件

      详解vue 表单绑定与组件

      这篇文章主要介绍了vue 表单绑定与组件的相关资料，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下...

      Latteitcjz6432022-02-12
    • vue.jsVue项目中实现带参跳转功能

      Vue项目中实现带参跳转功能

      最近做了一个手机端系统，其中遇到了父页面需要携带参数跳转至子页面的问题，现已解决，下面分享一下实现过程，感兴趣的朋友一起看看吧...

      YiluRen丶4302022-03-03
    • vue.jsVue2.x-使用防抖以及节流的示例

      Vue2.x-使用防抖以及节流的示例

      这篇文章主要介绍了Vue2.x-使用防抖以及节流的示例，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下...

      Kyara6372022-01-25
    • vue.js梳理一下vue中的生命周期

      梳理一下vue中的生命周期

      看过很多人讲vue的生命周期，但总是被绕的云里雾里，尤其是自学的同学，可能js的基础也不是太牢固，听起来更是吃力，那我就已个人之浅见，以大白话...

      CRMEB技术团队7992021-12-22
    • vue.jsVue中引入svg图标的两种方式

      Vue中引入svg图标的两种方式

      这篇文章主要给大家介绍了关于Vue中引入svg图标的两种方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的...

      十里不故梦10222021-12-31
    • vue.js用vite搭建vue3应用的实现方法

      用vite搭建vue3应用的实现方法

      这篇文章主要介绍了用vite搭建vue3应用的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下...

      Asiter7912022-01-22
    • vue.jsVue多选列表组件深入详解

      Vue多选列表组件深入详解

      这篇文章主要介绍了Vue多选列表组件深入详解，这个是vue的基本组件，有需要的同学可以研究下...

      yukiwu6752022-01-25
    • vue.jsVue2.x 项目性能优化之代码优化的实现

      Vue2.x 项目性能优化之代码优化的实现

      这篇文章主要介绍了Vue2.x 项目性能优化之代码优化的实现,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋...

      优小U9632022-02-21
    最近更新
    编辑推荐
    阅读排行
    热门标签
    路由守卫 　 sessionStorage 　 V3Popup 　 自动构建 　 Vue+scss 　 白天 　 夜间 　 antdv 　 区间选择 　 css-loader 　 消息提示弹框 　 文字抖动 　 vue-quill-editor 　 路径太长 　 数据劫持 　 activated 　 图片懒加载 　 二级套嵌 　 滚动事件 　 双盒子定位 　 状态管理工具 　 边界线 　 vue-count-to 　 注册路由 　 drectives 　 Vue.extend 　 树状表格 　 element ui 　 树形表格 　 合并表格 　
    © 2019-2023 服务器之家(www.zzvips.com) 版权所有关于我们联系我们版权申明网站地图