Vue——进阶(过滤器、数据交互、生命周期、ES6语法)

---

过滤器

1.定义过滤器：
(1)局部过滤器：

 new Vue({
            el:"#app",
            filters:{
                // 写在vue对象里面的过滤器,是一个局部过滤器
                getOuShu:function(array){
                    var newArray = []
                    for(var i = 0; i<array.length; i++){
                        if(array[i] %2 == 0){
                            newArray.push(array[i]);
                        }
                    }
                    return newArray;
                }
            }
    });

(2)全局过滤器：

 // 参数1: 过滤器名称,    参数2: 过滤器方法体
        Vue.filter("quChong",function(array){
            var newArray  =[]
            for(var i =0; i<array.length; i++){
                // 判断数组中是否有该元素,如果返回-1证明没有
                if(newArray.indexOf(array[i]) == -1){
                    newArray.push(array[i]);
                }
            }
            return newArray;
        })

2.使用过滤器：

<div>数组偶数: {{[1,2,3,4,5] | getOuShu}} </div>
<div>数组去重: {{[1,2,3,4,5,1,1,1,1,1,2,2,2,2,3,3,3] | quChong}} </div>

数据交互

写法一：
axios({
method: 请求方式,
url: 请求路径,
data: {
发送的数据
}
})
.then(请求成功执行的方法)
.catch(请求失败执行的方法);
写法二：
axios.get(‘/user?ID=12345’)
.then(请求成功执行的方法)
.catch(请求失败执行的方法);
写法三：
axios.post(‘/user’,{
params:{
ID:12345
}
})
.then(请求成功执行的方法)
.catch(请求失败执行的方法);

生命周期函数

1.beforeCreate：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
2.created：在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始。
3.beforeMount：在挂载开始之前被调用：相关的 render 函数首次被调用。
4.mounted：实例挂载到dom之后被调用，可以当成是vue对象的ready方法来使用，一般用它来做dom的初始化操作。
5.beforeUpdate：数据发生变化前调用
6.updated：数据发生变化后调用

ES6语法

1.变量声明：
let：一般变量
const：常量
都没有预解析功能

2.箭头函数：
function(a,b){}可写为(a,b)=>{}

3.模块导入与导出：
// model.js文件中导出
var person = {name:‘tom’,age:18}
export default {person}

// index.js文件夹中导入
import person from ‘js/model.js’

// index.js中使用模块
person.name
person.age

4.对象简写
var person = {
name,
age,
showname(){
alert(this.name);
},
showage(){
alert(this.age);
}
}