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实现购物小球抛物线的方法实例
Nov 22 Vue.js
详解如何在vue+element-ui的项目中封装dialog组件
Dec 11 Vue.js
vue实现简易的双向数据绑定
Dec 29 Vue.js
Vue实现随机验证码功能
Dec 29 Vue.js
如何在vue-cli中使用css-loader实现css module
Jan 07 Vue.js
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
Jan 08 Vue.js
浅谈Vue开发人员的7个最好的VSCode扩展
Jan 20 Vue.js
聊聊vue 中的v-on参数问题
Jan 29 Vue.js
用vite搭建vue3应用的实现方法
Feb 22 Vue.js
Vue中使用import进行路由懒加载的原理分析
Apr 01 Vue.js
Axios代理配置及封装响应拦截处理方式
Apr 07 Vue.js
Vue2项目中对百度地图的封装使用详解
Jun 16 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下实现农历日历的代码
2007/03/07 PHP
几款免费开源的不用数据库的php的cms
2010/12/19 PHP
php中通过curl模拟登陆discuz论坛的实现代码
2012/02/16 PHP
joomla jce editor 解决上传中文名文件失败问题
2013/06/09 PHP
php生成图片验证码
2015/06/09 PHP
利用Fix Rss Feeds插件修复WordPress的Feed显示错误
2015/12/19 PHP
PHP实现的大文件切割与合并功能示例
2018/04/10 PHP
php提高脚本性能的4个技巧
2020/08/18 PHP
JQuery 前台切换网站的样式实现
2009/06/22 Javascript
使用AngularJS来实现HTML页面嵌套的方法
2015/06/17 Javascript
JavaScript判断对象是否为数组
2015/12/22 Javascript
AngularJs基本特性解析(一)
2016/07/21 Javascript
微信js-sdk分享功能接口常用逻辑封装示例
2016/10/13 Javascript
判断横屏竖屏(三种)
2017/02/13 Javascript
深入nodejs中流(stream)的理解
2017/03/27 NodeJs
JavaScript中使用webuploader实现上传视频功能(demo)
2017/04/10 Javascript
layui文件上传实现代码
2017/05/20 Javascript
vue2.0+vue-dplayer实现hls播放的示例
2018/03/02 Javascript
fetch 如何实现请求数据
2018/12/20 Javascript
VUE异步更新DOM - 用$nextTick解决DOM视图的问题
2020/11/06 Javascript
[44:40]Serenity vs Pain 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python易忽视知识点小结
2015/05/25 Python
python解析基于xml格式的日志文件
2017/02/25 Python
Pandas中把dataframe转成array的方法
2018/04/13 Python
Python使用re模块实现信息筛选的方法
2018/04/29 Python
Python如何处理大数据?3个技巧效率提升攻略(推荐)
2019/04/15 Python
基于python实现模拟数据结构模型
2020/06/12 Python
pytho matplotlib工具栏源码探析一之禁用工具栏、默认工具栏和工具栏管理器三种模式的差异
2021/02/25 Python
内部类的定义、种类以及优点
2013/10/16 面试题
个人自我鉴定
2013/11/07 职场文书
歌唱比赛主持词
2014/03/18 职场文书
比赛口号大全
2014/06/10 职场文书
安全先进个人材料
2014/12/29 职场文书
2016年5月份红领巾广播稿
2015/12/21 职场文书
MySQL数据库事务的四大特性
2022/04/20 MySQL
spring boot实现文件上传
2022/08/14 Java/Android