Vue.js权威指南

一、遇见Vue.js

1.MVP,从MVC演化而来,Controller/Presenter负责逻辑的处理,完全把View和Model进行了分享,主要的程序逻辑在Presenter里实现,与具体的View是没有直接关联的,而是通过定义好的接口进行交互,从而使得在变更View的时候可以保持Presenter不变

2.MVVM,只是把MVC的Controller和MVP的Presenter改成了ViewModel,View的变化会自动更新到ViewModel,ViewModel的变化也会自动同步到View上显示

二、数据绑定

三、指令

1.指令(Directive)是特殊的带有前缀v-的特性,指令的值限定为绑定表达式,指令的职责就是当其表达式的值改变时把某些特殊的行为应用到DOM上

2.v-if有更高的切换消耗,而v-show有更高的初始渲染消耗。因此,如果需要频繁地切换,使用v-show较好;如果在运行时条件不大可能改变,则用v-if较好

3.v-model指令参数:number,将用户的输入自动转换为Number类型;lazy,将数据改到在change事件中发生;debounce,设置一个最小延迟,在每次敲击之后延时同步输入框的值与数据

4.应该尽量避免直接设置数据绑定的数组元素,因为这些变化 不会被Vue.js检测到,因而也不会更新视图渲染

5.使用v-for,将得到一个特殊的作用域,类似于AngularJS的隔离作用域,需要明确指定props属性传递数据,否则在组件 内将获取不到数据

四、计算属性

计算属性就是当其依赖属性的值发生变化 时,这个属性的值会自动更新,与之相关的DOM部分也会同步自动更新

五、表单控件绑定

1.多个复选框放入一个数组中

2.当被选中的option有value属性时,vm.selected为对应option的value值;否则为对应option的text值

六、过滤器

1.过滤器,本质上都是函数,作用在于用户输入数据后,它能够进行处理,并返回一个数据结果;过滤器函数将始终以表达 式的值作为第一个参数,带引号的参数会被当作字符串处理,而不带引号的参数会被当作 数据属性名来处理

2.内置过滤器:

字母操作:capitalize、uppercase、lowercase

json过滤器:son

限制:limitBy、filterBy、orderBy处理并返回过滤后的数组

currency过滤器:将数字值转换为货币形式输出

debounce过滤器:延迟处理器一定的时间执行

七、Class与Style绑定

1.可以传给v-bind:class一个对象,以动态地切换class,v-bind:class指令可以与普通的class特性共存

2.v-bind:style绑定内联css

八、过滤

1.transition特性可以与这些资源一起搭配使用:v-if、v-show、v-for、动态组件

2.内置Class类名:.xxx-transition、.xxx-enter、.xxx-leave

3.只使用js钩子时,为js过渡显式声明css:false,Vue.js将跳过CSS检测,这样也会防止css规则对过渡的干扰

九、Method

1.所有的Vue.js事件处理方法和表达式都严格绑定在当前视图的ViewModel上

2.需要注意:

methods中定义的方法内的this始终指向创建的Vue实例

与事件绑定的方法支持参数event即原生DOM事件的传入

方法在普通元素上时,只能监听原生DOM事件;用在自定义元素组件上时,也可以监听子组件触发的自定义事件

3.四个事件修饰符:.prevent、.stop、.capture、.self

十、Vue实例方法

1.组件树访问:$parent、$root、$children、$refs

2.DOM访问:$el、$els

3.数据访问:$data、$options

4.实例方法:$appendTo()、$before()、$after()、$remove()、$nextTick()

5.实例event方法:$on()、$once()、$emit()、$dispatch()、$broadcast()、$off()

十一、组件

1.Vue.js的组件可以理解为预先定义好行为的ViewModel类,一个组件可以预定义很多选项,但最核心的:

模板(template)、初始数据(data)、接受的外部参数(props)、方法(methods)、生命周期钩子函数(lifecycle hooks)

2.props是组件数据的一个字段,期望从父组件传下来数据,组件的作用域是孤立的,意味着不能并且不应该在子组件的模板内直接引用父组件的数据,所以子组件需要显式地用props选项来获取父组件的数据

3.组件通信:this.$parent、this.$children、this.$root,不过子组件应当避免直接依赖父组件的数据,尽量显式地使用props传递数据,在子组件中修改父组件的状态是非常糟糕的做法,会导致父子紧密地耦合,很难理解父组件的状态

4.solt作为原始内容的插槽,父组件的内容将被抛弃,除非子组件模板包含,标签的内容视为回退内容,回退内容在子组件的作用域内编译,当宿主元素为空并且没有内容插入时显示这个回退内容

5.混合以一种灵活的方式为组件提供分布利用的功能,混合对象可以包含做任意的组件选项,当组件使用了混合对象时,混合对象的所有选项将被“混入”组件自己的选项中

6.生命周期:init、created、beforeCompile、compiled、ready、attached、detached、beforeDestory、destroyed

十二、表单校验

1.vue-validator

2.v-validate指令语法:v-validate[:field]=“array literal | object literal | binding”

3.内置验证规则:required、pattern、minlength、maxlength、min、max

4.v-validate所在元素,可以监听的事件:valid、invalid、touched、dirty、modified

十三、与服务端通信

1.vue-resource

2.vue-async-data,是一个异步加载数据状态指示的插件,本身并不支持异步获取服务端数据的功能,仅仅指示数据目前是处于加载 状态还是已经加载完毕

十四、路由与视图

1.vue-router

2.vue-router钩子函数:canReuse、canActivate、activate、data、canDeactivate、deactivate

十五、vue-cli

1.快速生成一个基于Webpack构建的项目:vue init webpack my-project

2.支持的命令:vue init ;vue list;

十六、测试开发与调试

1.ESLint

2.工具包:eslint-loader、eslint-friendly-formatter、eslint-config-standard、eslint-plugin-html

3.开发工具:Vue Syntax Highlight、Snippets(sublime)、VUe.js(WebStorm)、Vue(Visual Studio Code)

4.调试工具:Chrome——Vue.js devtools

十七、Scrat+Vue.js的化学反应

1.前端工程化:开发规范、模块化、组件化、组件库、性能优化、项目部署、开发流程、工程工具

2.Scrat是UC团队在百度的FIS基础上二次开发的webapp模块化开发框架,最大的特色是模块化开发和模块生态,理念是像搭积木一样开发和维护系统,通过组装模块得到一个完整的系统

十八、Vue.js2.0

1.Virtual DOM:通过JS对象表示的树结构来构建一棵真正的DOM树,当数据状态发生变化时可以直接修改这个JS对象,接着对比修改后的JS对象,记录下需要对页面做的DOM操作,然后将其应用到真正的DOM树,实现视图的更新,这个过程就是Virtual DOM的核心思想

2.服务端渲染优势:首屏渲染速度更快、SEO、减少HTTP请求

十九、源码篇——util

1.env:

系统判断:inBrowser、isIE9、isAndroid、isIos、isWechat

属性支持:hasProto

过滤属性:transitionPrep、transitionEndEvent、animationProp、animationEndEvent

2.dom:

dom操作:query、inDoc、before、after、prepend、extractContent、remove、replace、trimNode、isTemplate、isFragment、getOuterHTML

属性操作:getAttr、getBindAttr、hasBindAttr

class操作:setClass、addClass、removeClass

事件操作:on、off

其他:cateAnchor、findRef、mapNodeRange、removeNodeRange

3.lang:

对象操作:set、del、hasOwn、extend、isObject、isPlainObject、def

名称转换:classify、hyphenate、camelize

数组操作:indexOf

类型转换:_toString、toNumber、toBoolean、toArray

方法绑定:bind

其他:debounce、stripQuotes、cancellable、looseEqual、isLiteral、isReserved

4.components:commonTagRe、reservedTagRe、checkComponentAttr

5.options:mergeOptions、resolveAsset

6.debug:warn

二十、源码篇——深入响应式原理

二十一、源码篇——父子类合并策略

二十二、源码篇——缓存

Cache类:put、shift、get

二十三、源码篇——props

二十四、源码篇——events

二十五、Webpack

二十六、Rollup

二十七、Browserify

二十八、vue-loader

二十九、PostCSS

三十、扩展篇

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,186评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,858评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,620评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,888评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,009评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,149评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,204评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,956评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,385评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,698评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,863评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,544评论 4 335
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,185评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,899评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,141评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,684评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,750评论 2 351

推荐阅读更多精彩内容

  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 5,047评论 0 29
  • Vue 实例 属性和方法 每个 Vue 实例都会代理其 data 对象里所有的属性:var data = { a:...
    云之外阅读 2,204评论 0 6
  • 1.安装 可以简单地在页面引入Vue.js作为独立版本,Vue即被注册为全局变量,可以在页面使用了。 如果希望搭建...
    Awey阅读 11,006评论 4 129
  • 爷爷,我很怕你变老。老到你认不出我的模样。 爷爷,我很怕你变老。老到我再也看不到你的模样。 总觉得你的几个大...
    梅夕夕阅读 246评论 2 3
  • 上周四听了陆向谦老师的授课,老师讲的是新媒体的发展。随着科学技术的发展,特别是计算机技术的推广和普及,多媒体技术在...
    石庆峰阅读 165评论 0 0