Vue学习之三(过滤器,ES6模板字符串,箭头函数,let&const,网络请求,路由)

过滤器(用于文本格式化)

• 局部过滤器
  
  • filters 与data同级,是一个对象; 里面是一个过滤函数dateFmt:function(){...}
  • 插值表达式 {{date | dateFrm('/')}} 必须传一个原始数据,当做函数的第一个实参;后面传的默认为第二个以后的实参;
  • |管道符
• 全局过滤器
  
  • Vue.filter('名称',function(input,operator){}) 不同的组件都可以使用该过滤器

* 局部过滤器优先级高于全局过滤器 *

ES6中模板字符串&箭头函数&const和let

• 模板字符串`` 占位替换,格式化;
  *平常可加 “\r\n”; es6中直接换行
  *平常+”“+, es6中${}拼接参数

    //传统换行
    var poetry="白日依山尽,\r\n"+"黄河入海流."
    console.log(poetry);
    //ES6 换行
    var poetry2=`床前明月光,
疑是地上霜.`
    console.log(poetry2);


    //传统拼接参数
    var name="zhangsan";

    var str = "我是"+name;
    console.log(str);

    //ES6拼接字符串 ${}
    var str2=`我是${name}`;
    console.log(str2);

• 箭头函数 const add=(x1,x2)=>{...方法体}
  
  • 调用时和es3一样 add(x1,x2)
  • 参数只有唯一一个的时候()可省略 const add = x1=>{...}
  • 方法体只有一句话,省略{}和return, 即const add x1 => x1+2
  • 箭头函数中得this 是指外部的this,不是指调用它的this; 不明确指向谁,直接打印;

const person={
        age:'zhangsan',
        age:'18',
        say:()=>console.log(this),//指向window
        // say(){
        //     console.log(this);//person调用指向person对象
        // }
    }
    person.say();

• const:定义常量不能更改,会报错; 必须初始化给值; 块级作用 const myName=xx;myName='..';//报错
• let:可改变的块级作用域;

• const&let 不能变量提升,块级作用域; 区别var 预解析

• 对象中,属性名和值相等,写一个即可{x:x,y:y}相等于{{x,y}}

Vue如何发送网络请求

• vue-resource基于vue;get,post,jsonp,response.body获取返回结果
  *this.$http.get(url).then(response=>{console.log(respose.body);},err=>{console.log(err)}) 只能用在vue中
• axios 中response.data获取返回结果
  
  • 不是基于vue中,其它框架都可以使用
  • axios.get(url).then(response=>{console.log(response.data)})

品牌管理

• 计算属性computed 依赖的模型改变时会重新计算,返回结果=>做搜索功能
• 缓存机制

路由 (实现单页面应用,网易云音乐)

• 不刷新页面,会更新内容
• bug出现地方:

//创建路由
const router = new VueRouter({
        routes: [
            {
                path: '/goodsList',
                component: goodsComponent
            },
            {
                path: '/newsList',
                component: newsComponent
            },
            {
                path:'/newsdetail/:newsId', //少一个'/'
                component:newsDetailComponent
            }
        ]
    })