一, 遇见 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
.components:commonTagRe,reservedTagRe,checkComponentAttr
.options:mergeOptions,resolveAsset
.debug:warn
二十, 源码篇 -- 深入响应式原理
二十一, 源码篇 -- 父子类合并策略
二十二, 源码篇 -- 缓存
Cache 类: put,shift,get
二十三, 源码篇 --props
二十四, 源码篇 --events
二十五, Webpack
二十六, Rollup
二十七, Browserify
二十八, vue-loader
二十九, PostCSS
三十, 扩展篇
来源: http://www.jianshu.com/p/a9647fc53521