Vue.js分享vuejs的分享介绍入门开启vuejs之旅教案.pptx

Vue.js;Vue.js 概况 2013 年底作为个人实验项目开始开发 2014 年 2 月公开发布 2014 年 11 月发布从头重写的 0.11 截止 2015 年 1 月：3100+ Stars on GitHub;Vue.js 不是一个框架;路由 视图管理 数据持久化;路由 视图管理 数据持久化;简单示例 Quick Demo;核心思想： 数据驱动 组件化;数据驱动 Data-Driven;视图 View;视图 View;DOM;View;DOM;var vm = new Vue({ el: #demo, data: { msg: Hello Vue.js! }}) ;var vm = new Vue({ el: #demo, data: { msg: Hello Vue.js! }}) ;View;组件化 Component-Oriented;;;所以可以把界面抽象为 ViewModel Tree;在 Vue.js 中注册组件;在 Vue.js 模板中使用组件;通过 paramAttributes 实现父子组件之间的数据传递;组件之间也可以通过 事件系统进行通信;组件之间也可以通过 事件系统进行通信;一些实现细节;基于 ES5 Object.defineProperty 实现对 POJO (原生JS对象)的观察和依赖收集;;vm.msg = onevm.msg = twovm.msg = three// 只会触发一次 DOM 更新 ;var vm = new Vue({ data: { nested: { a: { b: hi! } } }});var data = { msg: hi} var vm = new Vue({ data: data}) ;var items = [a, b, c]var vm = new Vue({ data: { items: items }})// 下一帧会触发更新items.reverse();对于直接的数组替换， v-repeat 会进行 Array-diffing 确保尽可能地复用 vm 和 DOM 元素;// 如果 data 上不存在 prop 属性， // 则必须要用 $set 或 $add 才会触发更新 data.$set(prop, value)data.$add(prop, value) // 删除属性要用 $deletedata.$delete(prop)// 数组不能用 arr[0] = value, 要用 $setarr.$set(0, value);优势和使用场景;侵入性低;;鼓励模块化;基于 CommonJS 的单文件组件：Vueify;轻量 + 高性能;Thanks