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">

     //把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-resource