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

2024-08-27 12:07:23

一、过滤器

使用例子：

<!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 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

使用例子：

<!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对象

参数类型描述

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、例子

<!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的资料请关注我们其它相关文章！

vue中的过滤器及其时间格式化问题

一.过滤器介绍 Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持).过滤器应该被添加在 JavaScript 表达式的尾部,由管道符号指示:  {{ message | capitalize }}  <div v-bind:id="rawId | formatId">
Vue 2.0中生命周期与钩子函数的一些理解

前言在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mounted这个挂载还不是很清楚的.放大之,对vue的生命周期不甚了解.只知道简单的使用,而不知道为什么,这对后面的踩坑是相当不利的. 因为我们有时候会在几个钩子函数里做一些事情,什么时候做,在哪个函数里做,我们不清楚. 于是我开始先去搜索,发现vue2.0的生命周期没啥文章.大多是1.0的版本介绍.最后还是找到一篇不错的(会放在最后) vue生命周期简介咱们从上图可以很明显的看出现在vue2.0
vue生命周期与钩子函数简单示例

本文实例讲述了vue生命周期与钩子函数.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net vue生命周期与钩子函数</title> <style> </style> <script src="https://
详解Vue串联过滤器的使用场景

平时开发中,需要用到过滤器的地方有很多,比如单位转换.数字打点.文本格式化等,比如: Vue.filter('toThousandFilter', function (value) { if (!value) return '' value = value.toString() return .replace(str.indexOf('.') > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g, '$1,') }) 实现效果: 30000
深入理解Vue父子组件生命周期执行顺序及钩子函数

先附一张官网上的vue实例的生命周期图,每个Vue实例在被创建的时候都需要经过一系列的初始化过程,例如需要设置数据监听,编译模板,将实例挂载到DOM并在数据变化时更新DOM等.同时在这个过程中也会运行一些叫做生命周期钩子的函数(回调函数),这给了用户在不同阶段添加自己代码的机会. 1.vue的生命周期图在vue实例的整个生命周期的各个阶段,会提供不同的钩子函数以供我们进行不同的操作.先列出vue官网上对各个钩子函数的详细解析. 生命周期钩子生命周期钩子详细 beforeCreate 在实例
详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)

前言说到Vue的钩子函数,可能很多人只停留在一些很简单常用的钩子(created,mounted),而且对于里面的区别,什么时候该用什么钩子,并没有仔细的去研究过,且Vue的生命周期在面试中也算是比较高频的考点,那么该如何回答这类问题,让人有眼前一亮的感觉呢... Vue-Router导航守卫: 有的时候,我们需要通过路由来进行一些操作,比如最常见的登录权限验证,当用户满足条件时,才让其进入导航,否则就取消跳转,并跳到登录页面让其登录. 为此我们有很多种方法可以植入路由的导航过程:全局的, 单
Vue封装全局过滤器Filters的步骤

(PS:本文代码在vue-cli3构建的基础vue项目之上进行编写:vue create my-project) 在前后端分离的项目中,经常会有后台返回的数据需要经过处理才能显示到页面上的场景. 使用最多的场景就是日期/时间.数字.字符串的格式化处理,实际业务中可能还有更复杂的数据处理逻辑. 下面就拿封装全局的处理数字和字符串的 filter 来展示 vue 如何封装全局filter 并统一处理. 一.定义/封装过滤器在 src目录下新建 filters目录用来专门存放全局过滤器,如果项
Vue filter 过滤器、以及在table中的使用介绍

使用方法: // 双花括号中 {{ isActive | isActiveFitlter}} // 在v-bind 中 <div v-bind:id=" isActive | isActiveFitlter"></div> 一.组件中定义本地 Filter filters:{ isActiveFitlter : (value)=>{ return value===1?'激活':'冻结' } } 二.创建Vue实例前定义全局过滤器 Vue.filter('i
Vue3不支持Filters过滤器的问题

filters过滤器已从Vue 3.0中删除,不再支持. 2.x 语法在2.x中,开发人员可以使用过滤器来处理常见的文本格式. <template> <h1>Bank Account Balance</h1> <p>{{ accountBalance | currencyUSD }}</p> </template> <script> export default { props: { accountBalance: {
Vue过滤器,生命周期函数和vue-resource简单介绍

一.过滤器使用例子: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> </head> <body> <div id="app&qu
Vue之生命周期函数详解

目录生命周期函数常用的生命周期的钩子关于Vue销毁实例: 总结生命周期函数生命周期函数又叫:生命周期回调函数,生命周期函数. 生命周期钩子是什么:Vue在关键时刻帮我们调用一些特殊名称的函数生命周期函数的名字不可更改,但函数的具体内容是程序员根据需求编写的生命周期函数中的this指向的是vm或者组件实例化对象常用的生命周期的钩子 1.mounted:发送ajax请求,启动定时器,绑定自定义事件订阅消息等功能[初始化操作] 2.beforeDestory:清除定时器,解绑自定义
React 组件的常用生命周期函数汇总

目录 1. 概述 2. 生命周期的三个阶段 2.1. 创建时(挂载阶段) 2.2. 更新时(更新阶段) 2.3. 卸载时(卸载阶段) 1. 概述意义:组件的生命周期有助于理解组件的运行方式.完成更复杂的组件功能.分析组件错误原因等. 组件的生命周期:组件从被创建到挂载到页面中运行,再到组件不用时卸载的过程. 生命周期的每个阶段总是伴随着一些方法调用,这些方法就是生命周期的钩子函数. 钩子函数的作用:为开发人员在不同阶段操作组件提供了时机. 只有类组件才有生命周期. 2. 生命周期的三个阶段每
Vue的实例、生命周期与Vue脚手架（vue-cli）实例详解

一.Vue的实例 1.1.创建一个 Vue 的实例每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({// 选项}) 虽然没有完全遵循 MVVM 模型,Vue 的设计无疑受到了它的启发.因此在文档中经常会使用 vm (ViewModel 的简称) 这个变量名表示 Vue 实例. 1.vue.js就是一个构造器,通过构造器Vue来实例化一个对象:例如:var vm = new Vue({}); 2.实例化Vue时,需要传入一个参数(选项
老生常谈vue的生命周期

目录一.什么是生命周期二.生命周期函数三.生命周期的流程四.简单的生命周期代码总结一.什么是生命周期每一个组件都可能经历从创建,挂载,更新,卸载的过程. 在这个过程中的某一个阶段,用于可能会想要添加一些属于自己的逻辑代码(比如组件创建完后就请求一些服务器数据) 但是我们如何知道目前组件正在哪一个过程中,vue给我们提供了组件的生命周期函数. 二.生命周期函数生命周期函数是一个钩子函数,在某一个时间会被vue内部源码进行回调. 通过对生命周期函数的回调,我们知道目前组件正在经历什么
一起来学习Vue的生命周期

目录生命周期生命周期的简单介绍 beforeCreate与created beforeCreate() created() beforeMount与mounted beforeMount() mounted()(重要) beforeUpdate与updated beforeUpdate() updated() beforeDestroy与destroyed beforeDestroy()(重要) destroyed() 总结生命周期生命周期的简单介绍 1.生命周期又叫做:生命周期回调函数
一文搞懂Vue八大生命周期钩子函数

目录一.速识概念: 二.八大生命周期钩子函数: 三.结合代码了解: 1. beforeCreate: 2.created: 3.beforeMount: 4.mounted: 5.beforeUpdate: 6.updated: 7.beforeDestroy: 8.destroyed: 一.速识概念: 我们把一个对象从生成(new)到被销毁(destory)的过程,称为生命周期.而生命周期函数,就是在某个时刻会自动执行的函数. 按照官方的原话,就是每个 Vue 实例在被创建时都要经过一
基于Vue实例生命周期(全面解析)

前面的话 Vue实例在创建时有一系列的初始化步骤,例如建立数据观察,编译模板,创建数据绑定等.在此过程中,我们可以通过一些定义好的生命周期钩子函数来运行业务逻辑.本文将详细介绍Vue实例的生命周期图示下图是Vue实例生命周期的图示解释接下来,根据提供的生命周期钩子,对Vue实例各个阶段的情况进行详细说明 [beforeCreate] 在实例开始初始化时同步调用.此时数据观测.事件等都尚未初始化 [created] 在实例创建之后调用.此时已完成数据观测.事件方法,但尚未开始DOM编译,即
Vue实现搜索和新闻列表功能简单范例

效果图如下所示: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>无标题页</title> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style&
如何使用vue过滤器filter

概述在 vue2.0 之前,是有内置过滤器的,在2.0中已经没有内置的过滤器了,但我们可以自定义过滤器. 关于 vue 过滤器,在官方文档中是这样说明的: Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持).过滤器应该被添加在 JavaScript 表达式的尾部,由"管道"符号指示. 即过滤器是用来格式化数据的一个函数.过滤器不会修改原始数据,它的作用是过滤数据,就是对数据进