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中
  • axiosresponse.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
            }
        ]
    })
阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页