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

标签: 过滤器 ES6语法 网络请求 计算属性 路由
29人阅读 评论(0) 收藏 举报
分类:

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

  • 局部过滤器
    • 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
            }
        ]
    })
查看评论

王志东说嘴打嘴

几天来,王志东离开新浪几乎成了IT界最大的热门事件。想不到王志东的口碑是这样好,看来,这位遭受不幸的创业者拥有着最广泛的同情和怜惜。确实,曾被人根据体形戏称为“肥而不腻”的王志东,正是一位凭自己的不懈...
  • stanely
  • stanely
  • 2001-06-07 15:12:00
  • 712

ES6 箭头函数 柯里化

先来看下高阶函数定义: 接受1个或多个函数作为参数返回函数类型 常规ES6箭头函数用法:(返回值类型)const square = x => x * x;高阶写法: const has ...
  • h416756139
  • h416756139
  • 2016-06-28 19:27:45
  • 2056

ES6中const的使用

const声明一个只读的常量。一旦声明,常量的值就不能改变。且const一旦声明变量,就必须立即初始化,不能留到以后赋值。 const的作用域与let命令相同:只在声明所在的块级作用域内有效。 con...
  • zuiziyoudexiao
  • zuiziyoudexiao
  • 2017-08-08 12:56:20
  • 252

用vue.js学习es6(二):let和const使用

关住 公 纵 号 “  阿蒙课程分享    ”  获得学习资料及趣味分享 一.运行及关闭运行:  在上一节中我们用shift+右击在C:\vue\es6文件夹中打开命令行使用:npm run dev,...
  • countofdane
  • countofdane
  • 2017-10-31 16:26:59
  • 765

ES6中的箭头函数的定义和调用方式

基本用法:ES6中允许使用“箭头”(=>)定义函数var f = v => v; 上面代码相当于:var f = function( v ) { return v; }根据箭头函数有参数和无参...
  • itpinpai
  • itpinpai
  • 2016-08-11 14:43:35
  • 18168

ES6折腾记- 箭头函数【Arrow function】要点及脱坑点

ES6的箭头函数的特点:永远是匿名函数,This指向于obj内部;
  • bomess
  • bomess
  • 2016-09-06 00:28:06
  • 6458

ES6折腾记-模板字符串

模板字符串[template string]是ES6引进来的,他有点类似我们平时使用的模板引擎【jade,handlebar这些】,但是又不是【功能相对鸡肋些,无法条件循环遍历什么的】...
  • bomess
  • bomess
  • 2016-10-27 01:17:59
  • 3086

ES6中的箭头函数

今天我来总结一下ES6 对函数做的一些处理。结合我ES5的函数特征,能够让我们根据实际情况,来很好的完成我们的项目需求。一、ES6的箭头函数1. 带参数的箭头函数let fun = (x) => x ...
  • webxiaoma
  • webxiaoma
  • 2017-06-13 11:44:31
  • 412

vue2.0使用ES6语法的箭头函数对this作用域的理解

在做vue项目时用到了axios,但是发现axios请求之后的回调函数里this并不指向当前vue实例,导致浏览器报错。 部分代码: test:function(){                 ...
  • wojiaomaxiaoqi
  • wojiaomaxiaoqi
  • 2017-09-19 15:27:28
  • 2450

ES6学习之路6----箭头函数

什么是箭头函数 ES6允许使用“箭头”(=>)定义函数。 ES5: var add = function(param){console.log(param);} add(9);//9 ES6: l...
  • m0_38082783
  • m0_38082783
  • 2017-12-07 13:45:55
  • 164
    个人资料
    等级:
    访问量: 0
    积分: 100
    排名: 0
    文章分类
    文章存档