Vuejs2.0学习之一(新生命周期,新模板语法,计算缓存,自定义watcher)
来源:互联网 发布:linux 上一条命令结果 编辑:程序博客网 时间:2024/06/06 01:18
经过一段时间的学习,对vuejs1.0有了一定的了解,虽然没有完全看完,但是可以开始2.0的学习了,毕竟有些改动,旧的终归是要淘汰的。
无意中发现了2.0中文版链接http://vuefe.cn/guide/,作为接下来的学习手册。同样的东西将跳过
2.0基础部分差不多,开始有不一样的是生命周期,一张图表达
具体怎么用后面慢慢接触模板语法与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 事件
- 计算属性
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() } } ... });
一目了然
- Vuejs2.0学习之一(新生命周期,新模板语法,计算缓存,自定义watcher)
- java8新语法学习
- vueJs2.0学习笔记(三)
- vueJs2.0学习笔记(五)
- vueJs2.0学习笔记(六)
- ECMAScript 6新特性印象之一:新语法
- Objc的新语法学习
- TREAP 模板(新)
- vuejs2.0 vue实例的生命周期
- Vuejs2.0学习之二(Render函数,createElement,vm.$slots,函数化组件,模板编译,JSX)
- VueJs2.0建议学习路线
- VueJs2.0建议学习路线
- VueJs2.0建议学习路线
- VueJs2.0建议学习路线
- VueJs2.0建议学习路线
- VueJs2.0建议学习路线
- html5学习笔记之一(新的页面组织标记)
- Vuejs2.0 cnpm 安装脚手架项目模板
- 大文件切割上传带进度条
- python小练习4:去掉列表中重复的元素
- 【字符串系列】最长上升子序列(LIS)
- 面向对象封装、继承、多态的简述
- 加载网络图片的常用框架
- Vuejs2.0学习之一(新生命周期,新模板语法,计算缓存,自定义watcher)
- 夜间模式实践(一)
- 部分个人收藏文章(hbase)
- eclipse常用快捷键
- PXC(Percona XtraDB Cluster)单机多实例与多集群安装配置
- 该写点东西了
- C语言求最小公倍数
- Longest substring without repeating characters
- SharedPreferences保存List