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


Posted in Vue.js onJanuary 12, 2021

一、过滤器

使用例子:

<!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.js 相关文章推荐
Vue项目利用axios请求接口下载excel
Nov 17 Vue.js
vue+element实现动态加载表单
Dec 13 Vue.js
Vue实现小购物车功能
Dec 21 Vue.js
vue实现购物车的小练习
Dec 21 Vue.js
利用Vue实现简易播放器的完整代码
Dec 30 Vue.js
VUE实现吸底按钮
Mar 04 Vue.js
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
May 25 Vue.js
springboot+VUE实现登录注册
May 27 Vue.js
vue使用refs获取嵌套组件中的值过程
Mar 31 Vue.js
使用vue判断当前环境是安卓还是IOS
Apr 12 Vue.js
vue router 动态路由清除方式
May 25 Vue.js
vue ant design 封装弹窗表单的使用
Jun 01 Vue.js
详解template标签用法(含vue中的用法总结)
Jan 12 #Vue.js
Vue中ref和$refs的介绍以及使用方法示例
Jan 11 #Vue.js
vue实现防抖的实例代码
Jan 11 #Vue.js
Vuex实现简单购物车
Jan 10 #Vue.js
Vue实现一种简单的无限循环滚动动画的示例
Jan 10 #Vue.js
基于vuex实现购物车功能
Jan 10 #Vue.js
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
Jan 08 #Vue.js
You might like
php多个文件及图片上传实例详解
2014/11/10 PHP
php+xml编程之xpath的应用实例
2015/01/24 PHP
PHP使用pear实现mail发送功能 windows环境下配置pear
2016/04/15 PHP
PHP类相关知识点实例总结
2016/09/28 PHP
tp5修改(实现即点即改)
2019/10/18 PHP
脚本吧 - 幻宇工作室用到js,超强推荐base.js
2006/12/23 Javascript
同一个表单 根据要求递交到不同页面的实现方法小结
2009/08/05 Javascript
跨浏览器的 mouseenter mouseleave 以及 compareDocumentPosition的使用说明
2010/05/04 Javascript
jqPlot 基于jquery的画图插件
2011/04/26 Javascript
Js sort排序使用方法
2011/10/17 Javascript
Jquery实现侧边栏跟随滚动条固定(兼容IE6)
2014/04/02 Javascript
NodeJS使用jQuery选择器操作DOM
2015/02/13 NodeJs
JavaScript检查弹出窗口是否被阻拦的方法技巧
2015/03/13 Javascript
jquery控制显示服务器生成的图片流
2015/08/04 Javascript
jQuery+HTML5实现图片上传前预览效果
2015/08/20 Javascript
创建简单的node服务器实例(分享)
2017/06/23 Javascript
JS获取子、父、兄节点方法小结
2017/08/14 Javascript
js实现一个页面多个倒计时的3种方法
2019/02/25 Javascript
微信小程序环境下将文件上传到OSS的方法步骤
2019/05/31 Javascript
jquery实现简易验证插件封装
2020/09/13 jQuery
python实现文件快照加密保护的方法
2015/06/30 Python
python3实现ftp服务功能(客户端)
2017/03/24 Python
python中使用print输出中文的方法
2018/07/16 Python
selenium+python实现自动化登录的方法
2018/09/04 Python
基于python实现把json数据转换成Excel表格
2020/05/07 Python
Python logging模块写入中文出现乱码
2020/05/21 Python
python实现AdaBoost算法的示例
2020/10/03 Python
Python与C/C++的相互调用案例
2021/03/04 Python
美国益智玩具购物网站:Fat Brain Toys
2017/11/03 全球购物
Vinatis德国:法国领先的葡萄酒邮购公司
2020/09/07 全球购物
北京SQL新华信咨询
2016/09/30 面试题
《埃及的金字塔》教学反思
2014/04/07 职场文书
应急处置方案
2014/06/16 职场文书
服务宗旨标语
2014/07/01 职场文书
会计工作总结范文2014
2014/12/23 职场文书
写给老师的保证书
2015/05/09 职场文书