文档章节

Vuejs2.0学习之一(新生命周期,新模板语法,计算缓存,自定义watcher)

originDu
 originDu
发布于 2017/05/03 19:24
字数 877
阅读 15
收藏 0
点赞 0
评论 0

经过一段时间的学习,对vuejs1.0有了一定的了解,虽然没有完全看完,但是可以开始2.0的学习了,毕竟有些改动,旧的终归是要淘汰的。

无意中发现了2.0中文版链接http://vuefe.cn/guide/,作为接下来的学习手册。同样的东西将跳过

  1. 2.0基础部分差不多,开始有不一样的是生命周期,一张图表达 
    生命周期
    具体怎么用后面慢慢接触

  2. 模板语法与1.0也有所区别

2.1 首先增加了模板语法的灵活性,如果你熟悉虚拟 DOM 并且偏爱 JavaScript 的原始力量,你也可以不用模板,直接写渲染(render)函数,使用可选的 JSX 语法。具体如何使用进阶篇会有介绍

2.2 插值的方式也有所改变。 
a.{{}}依然用来做模板插值 
b.禁止刷新模板以前用的是{{*}},现在用v-once,<span v-once>This will never change: {{ msg }}</span> 
c.插入纯html代码以前用{{{}}},现在用v-html,<div v-html="rawHtml"></div>

2.3 Vue 2.x 中,过滤器只能在{{}} 绑定中使用。为了在指令绑定中实现同样的行为,你应该使用计算属性 
如{{msg | filter}}

2.4 眼泪杠杠,作为官方教程,它终于解释了一下v-指令的作用分别是什么 
指令的职责就是当其表达式的值改变时相应地将某些行为应用到 DOM 上。 
v-bind 指令被用来响应地更新 HTML 属性 
v-on 指令,它用于监听 DOM 事件

  1. 计算属性 
    3.1 计算缓存。这个概念我在前面的学习中并木有发现哇,原来计算属性computed是对方法返回值做了缓存的
computed: {
    // a computed getter
    reversedMessage: function () {
      // `this` points to the vm instance
      return this.message.split('').reverse().join('')
    }
  }
  •  

比如这个栗子,reversedMessage方法的返回值是依赖message的,根据前面的原理,当message发生了变化,会通知vm调用其getter方法拿到当前值,所以reversedMessage会更新。 
同样的,将reversedMessage定义在methods里面是一样的。区别在于,当采用计算属性时,如果message没有发生变化,无论调用多少次reversedMessage,其返回值不会再次计算,永远是缓存的上一次的值;而使用methods没有缓存,每次都会再次计算。虽然这个栗子的结果是一样的,但是过程是不一样的,计算属性省去了计算的步骤,时间上至少占优势。而且另外的一些栗子中结果就不同了,原文中的:

computed: {
  now: function () {
    return Date.now()
  }
}
  •  

此时now方法没有依赖任何属性,所以返回值永远不变。如果采用methods就会得到正确的值。

3.2 watch没有什么变化,只是又指出了一种写法,以前我们是这么写:

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  }
})

vm.$watch('firstName', function (val) {
  this.fullName = val + ' ' + this.lastName
})
  •  

原来还可以这么写

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})
  •  

3.4 最后介绍了如何自定义watcher的方法 
一扫过去发现其实是用组件的方式

var watchExampleVM = new Vue({
  el: '#watch-example',
  data: {
    question: '',
    answer: 'I cannot give you an answer until you ask a question!'
  },
  watch: {
    // 如果 question 发生改变,这个函数就会运行
    question: function (newQuestion) {
      this.answer = 'Waiting for you to stop typing...'
      this.getAnswer()
    }
  }
  ...
  });
  •  

一目了然

本文转载自:http://blog.csdn.net/kkae8643150/article/details/52815007#comments

共有 人打赏支持
originDu
粉丝 1
博文 49
码字总数 16782
作品 0
海淀
Vue 2.0源码学习

Vue2.0介绍 从去年9月份了解到Vue后,就被他简洁的API所吸引。1.0版本正式发布后,就在业务中开始使用,将原先jQuery的功能逐步的进行迁移。 今年的10月1日,Vue的2.0版本正式发布了,其中核...

chenhao_ch ⋅ 2017/11/29 ⋅ 0

vue开发看这篇文章就够了(上)

摘要:作者整理的内容非常全面了,学习Vue的同学值得收藏下这篇文章。 Vue -渐进式JavaScript框架 介绍 vue 中文网 vue github Vue.js 是一套构建用户界面(UI)的渐进式JavaScript框架 库和框...

segmentfault ⋅ 01/11 ⋅ 0

耗时近一个月,终于录完了VUE.JS2.0前端视频教程!

这次课录制的比较辛苦,圣诞节时原本已经快录制完成了,偶然的一次,播放了一下,感觉不满意,好几篇推倒重来,所以今天才结束。 vue.js2.0是Vue.JS的最新版本,视频教程还不多,如果你看到了...

pkutao ⋅ 2017/01/05 ⋅ 0

学习vue源码之第三篇——数据的双向绑定

数据的双向绑定(数据观测) 上一篇我们在学习的时候发现初始化的时候,和都涉及到文件夹中的一些方法(和),以及和也涉及到对象和方法等等,这些都有是和数据的双向绑定(也叫数据观察)有关...

Eason_Wong ⋅ 2017/12/08 ⋅ 0

VUE 与其他常见前端框架对比

对比其他框架 这个页面无疑是最难编写的,但我们认为它也是非常重要的。或许你曾遇到了一些问题并且已经用其他的框架解决了。你来这里的目的是看看 Vue 是否有更好的解决方案。这也是我们在此...

⋅ 2017/12/09 ⋅ 0

【前端技术】头条PC站基于RIOT的组件化开发实践

一、背景 1、头条PC站业务前端重构 2、为什么选择Riot? Riotjs是一种小而美的js框架,2.2.4稳定版本兼容IE8。采用该框架在头条pc站进行了组件化开发方式的实践,有效地提高了开发效率和扩展...

今日头条技术团队 ⋅ 05/24 ⋅ 0

vue中需要注意的问题总结(上)

文章首发于个人博客 前言 使用vue的时候经常会遇到一些问题,其实仔细阅读查阅官方文档,就会发现文档中已提到一些格外需要注意的点; 为了深入的理解官方文档中对这些问题的解释,查阅了一些资料...

funnycoderstar ⋅ 04/17 ⋅ 0

Vue.js笔记,从入门到精通

Vue.js笔记,从入门到精通 这是我总结的笔记,对今天的学习总结了一半,笔记后面再补上,因为之前会angular,所以学起来很简单。 Vue.js 是一种mvvm模式,与angular的区别是完全没有control...

皇上洗碗 ⋅ 2016/10/18 ⋅ 0

看完这篇关于MVVM的文章,面试通过率提升了80%

来看看目前最火的MVVM 今天面试又被问到什么是MVVM? 光靠说理论已经糊弄不过去了? 什么!MVVM的实现不止一种啊? 往下看~ 亲手带你剖析MVVM原理! 先来总结下MVVM的实现方式 传统的MVC中通过发布...

凌晨夏沫 ⋅ 05/14 ⋅ 0

vue面试题总汇

vue的底层原理? vue组件之间的通信? JS中判断数据类型的方法有几种? 最常见的判断方法:typeof 判断已知对象类型的方法: instanceof 根据对象的constructor判断: constructor 无敌万能的方...

xuhaoxin123 ⋅ 2017/11/06 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

一篇文章学懂Shell脚本

Shell脚本,就是利用Shell的命令解释的功能,对一个纯文本的文件进行解析,然后执行这些功能,也可以说Shell脚本就是一系列命令的集合。 Shell可以直接使用在win/Unix/Linux上面,并且可以调用...

Jake_xun ⋅ 21分钟前 ⋅ 0

大数据工程师需要精通算法吗,要达到一个什么程度呢?

机器学习是人工智能的一个重要分支,而机器学习下最重要的就是算法,本文讲述归纳了入门级的几个机器学习算法,加大数据学习群:716581014一起加入AI技术大本营。 1、监督学习算法 这个算法由...

董黎明 ⋅ 54分钟前 ⋅ 0

Kylin 对维度表的的要求

1.要具有数据一致性,主键值必须是唯一的;Kylin 会进行检查,如果有两行的主键值相同则会报错。 2.维度表越小越好,因为 Kylin 会将维度表加载到内存中供查询;过大的表不适合作为维度表,默...

无精疯 ⋅ 57分钟前 ⋅ 0

58到家数据库30条军规解读

军规适用场景:并发量大、数据量大的互联网业务 军规:介绍内容 解读:讲解原因,解读比军规更重要 一、基础规范 (1)必须使用InnoDB存储引擎 解读:支持事务、行级锁、并发性能更好、CPU及...

kim_o ⋅ 今天 ⋅ 0

代码注释中顺序更改 文件读写换行

`package ssh; import com.xxx.common.log.LogFactory; import com.xxx.common.log.LoggerUtil; import org.apache.commons.lang3.StringUtils; import java.io.*; public class DirErgodic ......

林伟琨 ⋅ 今天 ⋅ 0

linux实用操作命令

参考 http://blog.csdn.net/qwe6112071/article/details/50806734 ls [选项] [目录名 | 列出相关目录下的所有目录和文件 -a 列出包括.a开头的隐藏文件的所有文件-A 同-a,但不列出"."和"...

简心 ⋅ 今天 ⋅ 0

preg_match处理中文符号 url编码方法

之前想过直接用符号来替换,但失败了,或者用其他方式,但有有些复杂,这个是一个新的思路,亲测可用 <?php$str='637朗逸·超速新风王(300)(白光)'; $str=iconv("UTF-8","GBK",$s...

大灰狼wow ⋅ 今天 ⋅ 0

DevOps 资讯 | PostgreSQL 的时代到来了吗 ?

PostgreSQL是对象-关系型数据库,BSD 许可证。拼读为"post-gress-Q-L"。 作者: Tony Baer 原文: Has the time finally come for PostgreSQL?(有删节) 近30年来 PostgreSQL 无疑是您从未听...

RiboseYim ⋅ 今天 ⋅ 0

github太慢

1:用浏览器访问 IPAddress.com or http://tool.chinaz.com 使用 IP Lookup 工具获得github.com和github.global.ssl.fastly.net域名的ip地址 2:/etc/hosts文件中添加如下格式(IP最好自己查一...

whoisliang ⋅ 今天 ⋅ 0

非阻塞同步之 CAS

为解决线程安全问题,互斥同步相当于以时间换空间。多线程情况下,只有一个线程可以访问同步代码。这种同步也叫阻塞同步(Blocking Synchronization). 这种同步属于一种悲观并发策略。认为只...

长安一梦 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部