文档章节

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
博文 75
码字总数 22987
作品 0
海淀
私信 提问
Vue2.0学习(二)----自定义指令与实例的属性和方法

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

浪里行舟
07/08
0
0
vue 源码学习 - 实例挂载

前言 在学习vue源码之前需要先了解源码目录设计(了解各个模块的功能)丶Flow语法。 flow语法可以参照 v-model源码学习中提到的,以及到官网了解更多。 vue 实例化 vue 本质上就是一个用 Func...

三只萌新
11/12
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
10/30
0
0

没有更多内容

加载失败,请刷新页面

加载更多

领哥,项目管理

领哥 https://www.leangoo.com/kanban/board_list

miaojiangmin
18分钟前
1
0
2018阿里云双12年终大促主会场全攻略

摘要: 双12官方攻略出炉! 2018阿里云双12年终大促活动已经于12月7日正式开启,从已开放的活动页面来看,活动分为两个阶段: 12月7日-12月23日的拉新返现阶段和12月24日-12月28日的TOP100英...

阿里云云栖社区
18分钟前
1
0
努力使失败保持原子性(64)

失败的原子调用应该使得对象保持在被调用之前的状态,所谓:失败原子性 几种途径实现: 设计一个不可变对象,其失败原子性是显然的 对于可变参数,执行前检查参数有效性 避免执行一半报错,后...

Java搬砖工程师
19分钟前
1
0
slot分发内容

slot元素作为组件模板之中的内容分发插槽。这个元素自身将被替换。 有 name 特性的 slot 称为具名 slot。 有 slot 特性的内容将分发到名字相匹配的具名 slot。 内容分发就是指混合父组件的内...

Carbenson
30分钟前
1
0
python开发入门

1.执行python文件 # python ./demo.py 2.Python ImportError: No module named 'requests'异常 解决方法: # pip install requests;...

硅谷课堂
32分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部