文档章节

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

originDu
 originDu
发布于 2017/05/03 19:24
字数 877
阅读 15
收藏 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
博文 72
码字总数 22157
作品 0
海淀
Vue2.0学习(二)----自定义指令与实例的属性和方法

如果有需要源代码,请猛戳源代码 希望文章给大家些许帮助和启发,麻烦大家在GitHub上面点个赞!!!十分感谢 一、自定义指令 Vue自定义指令和组件一样存在着全局注册和局部注册两种方式。先来...

浪里行舟
07/08
0
0
Vue 2.0源码学习

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

chenhao_ch
2017/11/29
0
0
Vue源码阅读 - 依赖收集原理

vue已是目前国内前端web端三分天下之一,同时也作为本人主要技术栈之一,在日常使用中知其然也好奇着所以然,另外最近的社区涌现了一大票vue源码阅读类的文章,在下借这个机会从大家的文章和...

SHERlocked93
07/09
0
0
vue中需要注意的问题总结(上)

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

funnycoderstar
04/17
0
0
Vue 实战 (一) -- Vue 基础总结

Vue作为一个前端轻量级的MVVM框架有其独到之处,本文主要针对Vue1.0版本的官方文档进行梳理总结,主要包括以下几个方面: 1.数据绑定 2.指令 3.组件 4.事件 5.过滤器 Vue基础 Vue实例 构造器 通...

小和子茶
07/17
0
0

没有更多内容

加载失败,请刷新页面

加载更多

虚拟机学习之二:垃圾收集器和内存分配策略

1.对象是否可回收 1.1引用计数算法 引用计数算法:给对象中添加一个引用计数器,每当有一个地方引用它时,计数器值就加1;当引用失效时,计数器值就减1;任何时候计数器值为0的对象就是不可能...

贾峰uk
17分钟前
0
0
smart-doc特殊功能使用介绍

smart-doc从8月份底开始开源发布到目前为止已经迭代了几个版本。在这里非常感谢那些敢于用smart-doc去做尝试并积极提出建议的社区用户。因此决定在本博客中重要说明下smart-doc的功能,包括使...

上官胡闹
昨天
1
0
JavaEE——Junit

声明:本栏目所使用的素材都是凯哥学堂VIP学员所写,学员有权匿名,对文章有最终解释权;凯哥学堂旨在促进VIP学员互相学习的基础上公开笔记。 Junit Junit又名单元测试,Junit是用来测试Jav...

凯哥学堂
昨天
1
0
读《美丽新世界》

一、背景 十一国庆节从重庆回深圳的时候,做得绿皮车,路上看了两本书:李笑来的《韭菜的自我修养》和禁书《美丽新世界》。 上篇文章已经分享了 读《韭菜的自我修养》,这篇文章来记录一下《...

tiankonguse
昨天
1
0
archlinux下基于Jenkins,docker实现自动化部署(持续交互)

本文永久更新地址:https://my.oschina.net/bysu/blog/2250954 【若要到岸,请摇船:开源中国 不最醉不龟归】 -----------------------------------第一部分Jenkins的安装与使用-----------...

不最醉不龟归
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部