概述

本章会介绍如何在vue中自定义过滤器，自定义指令，以及vue实例的整个生命周期，最后会说到vue中数据交互axios的用法

一、过滤器

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式

<!-- 在双花括号中 -->
{{ prize | RMB }}

<!-- 在v-bind中 -->
<div v-bind:id="prize | Yuan"></div>

过滤器实际上是一个函数，可以在一个组件的选项中定义组件内部过滤器：

filters:{
  RMB:function(value){
    if(value=='')
    {
      return;
    }
    return '¥ '+value;
  }
}

或者在创建 Vue 实例之前全局定义过滤器：

Vue.filter('Yuan',function(value){
  if(value=='')
  {
    return;
  }
  return value+'元';
});

此时过滤器’RMB’只能在定义它的对象接管标签内使用，而’Yuan’可以全局使用

案例:

<head>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        {{ msg | upper() }}
        {{ title | lower() }}
       <div type="text" v-bind:id="flag | rever()">这是个div标签</div>
    </div>

    <script>
        Vue.filter('rever', function (value) {
            return value.split('').reverse().join('')
        })
        var vm = new Vue({
            el:'#app',
            data:{
                msg: 'abcdefg',
                title: 'ABDEEDJSOIFDOS',
                flag: 'hello world'
            },
            filters: {
                 upper :function(value){

                     return value.toUpperCase()
                 },
                 lower : function (value){
                     return value.toLowerCase()
                 }
            }
        })
    </script>
</body>

总结:

filter 是 vue 中的过滤器, 过滤器顾名思义就是把数据进行过滤, 得到过滤的数据的作用.
在 vue 中, 过滤器有两种写法, 一种是写在 vue 对象内部的过滤器, 另一种是写对象外部的过滤器
- 其中写在内部的过滤器: 以 filters 开头, 且内部都是方法
- 写在外部的过滤器, 以 filter 开头, 且过滤器名称和方法分开
过滤器在vue中也是一个非常重要的部分, 但是具体的使用还是需要结合公司的情况.
从 vue 2.x 开始, 过滤器推出了与 v-bind 结合使用的情况, 所以这个地方需要大家注意

二. 自定义指令

指令是用来做dom操作的，如果vue现有的指令不能满足开发要求，我们需要对普通DOM元素进行底层操作，这时候就会用到自定义指令。

定义一个全局指令，让input框自动获取焦点

Vue.directive('focus',{
  inserted:function(el){
    el.focus();
    el.style.background = 'gold';
  }     
})


<div id="app">    
  <input type="text" v-focus>
</div>

如果定义成 vue 对象局部的，可以用vue对象的directives属性：

directives: {
  focus: {
    inserted: function(el) {
      el.focus();
      el.style.background = 'gold';
    }
  }
}

案例:

<head>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-fodc>
        <div v-fodd> sss</div>
    </div>
    <script>
        Vue.directive('fodd',{
            inserted:function(el){
                el.style.width = '100px'
                el.style.height = '100px'
                el.style.border = '1px solid gold'
            }
        })
        var vm = new Vue({
            el:'#app',
            directives:{
                fodc:{
                    inserted:function(el){
                        el.focus()
                        el.style.background = 'gold'
                    }
                }
            }
        })

    </script>
</body>

总结:

自定义指令指的就是我们自己制作自己想要的指令效果
每个插件都会给予用户一些自主权限, 让使用者自由发挥, 以满足公司不同的业务需要
directive(自定义指令) 和上面的过滤器一样,也有两种, 分别为内部和外部, 这两个不同点就是名字和书写格式上, 希望下去后多多练习.

三. 实例生命周期

每个Vue实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新 DOM 等。同时在这个过程中会自动运行一些叫做生命周期钩子的函数，我们可以使用这些函数，在实例的不同阶段加上我们需要的代码，实现特定的功能。

beforeCreate

在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

created

在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始

beforeMount

在挂载开始之前被调用：相关的 render 函数首次被调用。

mounted

实例挂载到dom之后被调用，可以当成是vue对象的ready方法来使用，一般用它来做dom的初始化操作。

beforeUpdate

数据发生变化前调用

updated

数据发生变化后调用

四. 数据交互

vue.js没有集成 ajax 功能，要使用 ajax 功能，可以使用vue官方推荐的 axios.js 库来做ajax的交互。 axios库的下载地址：https://github.com/axios/axios/releases

axios完整写法：

axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flint2stone',
    start:0,
    count:10
  }
});

axios的请求也分为get请求和post请求。

执行get请求

// 为给定 ID 的 user 创建请求
// then是请求成功时的响应，catch是请求失败时的响应

axios.get('/user?ID=12345&start=0&count=10')
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});


// 可选地，上面的请求可以这样做
axios.get('/user', {
  params: {
    ID: 12345,
    start:0,
    count:10
  }
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

执行post请求

axios.post('/user', {
  firstName: 'Fred',
  lastName: 'Flintstone'
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

案例:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./vue.js"></script>
    <script src="./axios.min.js"></script>
    <script>
        window.onload = function () {
            var vm = new Vue({
                el: '#app',
                methods: {
                    getFunc: function () {
                        axios.get(
                                'http://localhost:3008/getMovieListData?message={"movieType":"in_theaters","pageIndex":2,"start":0,"count":10}'
                            ).then(function (data) {
                                // document.write(data)
                                var div = document.getElementById('box')
                                // div.innerHTML = data
                                console.log(data.data.subjects)
                                div.innerHTML = data.data.subjects[0].title 
                            })
                            .catch(function (error) {
                                alert(error)
                            })
                    }
                }
            })
        }
    </script>
</head>

<body>
    <div id="app">
        <button @click="getFunc">按钮</button>
        <div id="box"></div>
    </div>
</body>

总结:

axios 不是vue作者写的框架, 而是 github 上面开源的第三方框架, vue作者自己写的框架是vue-resource. 但是因为不如axios好用, 所以最终作者推荐大家使用这个框架来获取数据.
axios 只有get 和 post 方法, 不支持jsonp. 也就是说axios框架不能够跨域请求数据,希望大家注意这一点.
请求分为两种 get 和 post

不忘初心

vue入门（二）

概述