vue技术分享专题讲座.pptx

Vue技术分享jq项目 PK vue项目Jq项目1、路由概念不清晰，跳转可能还会出现闪屏现象（0/ 0 ）；2、代码复用率低；3、模块耦合度较高，一个页面通常包括html、css和js三个文件，每个页面要加载很多个文件，加载速度就会变慢；4、代码分层不清晰，数据复杂，牵一发而动全身；Vue项目：1、Vue是一个很轻量简洁的框架，现版本，17kb min+gzip；2、数据驱动机制，支持双向绑定，DOM更新快速有效；3、组件化，可以提高到代码的复用率；4、将页面的不同部分拆分成子模块，降低耦合度；jQuery和Vue的区别jquery是使用选择器（$）选取DOM对象，对其进行赋值、取值、事件绑定等操作，数据和界面是在一起的。比如需要获取label标签的内容：$(lable).val();,它还是依赖DOM元素的值。?Vue则是通过Vue对象将数据和View完全分离开来了，对数据进行操作而不再需要引用相应的DOM对象，可以说数据和View是分离的，他们通过Vue对象这个vm实现相互的绑定，这就是大家所说的MVVM（Model-View-ViewModel）。 MVVMMVVM 由 Model,View,ViewModel 三部分构成，Model 层代表数据模型，可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来，ViewModel 是一个同步View 和 Model的对象。在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此我们只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。Vue的双向数据绑定vue是通过数据劫持结合发布者-订阅者模式的方式来做数据绑定的，其中最核心的方法便是通过Object.defineProperty()来实现对属性的劫持，达到监听数据变动的目的。1、实现一个数据监听器Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者；2、实现一个指令解析器Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数；3、实现一个Watcher，作为连接Observer和Compile的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图；详情可参考查看：/a/1190000006599500/a/1190000006599500webpack的一点介绍Webpack 把任何一个文件都看成一个模块，模块间可以互相依赖（require or import），webpack 的功能是把相互依赖的文件打包在一起。webpack 本身只能处理原生的 JavaScript 模块，但是 loader 转换器可以将各种类型的资源转换成 JavaScript 模块。这样，任何资源都可以成为 Webpack 可以处理的模块。同时，webpack还有丰富的插件 plugin，可以完成如js、css的压缩，img图片的处理，公共依赖模块的提取和注入，甚至利用模板对 html 进行动态拼接等功能。 同时，webpack 使用commonJs规范（require），支持es6语法(import)编译，可以方便的抽离vue组件，这成为vue选择它的重要理由。 webpack的一点介绍entry：编译的入口js文件，即需要处理的js文件（所有的其他模块包括image， css，vue组件，html模板等都是通过js依赖引入进来的）；Output：编译的出口js文件，即经过打包其他资源、合并、压缩等处理之后生成 的js文件；Loaders： webpack会将JavaScript项目里的文件全部视为模块（module），但 是webpack自身只能识别js，因此不同的文件(.css, .html, .style, .jpeg, etc.)需要不同的解析器。Loaders在webpack中的作用就是将JavaScript项 目中的不同文件解析成模块，以便于不同文件能够在项目中统一处理；?Plugins：它可以满足很多个性化需求。例如，压缩、独立打包css插件等等；项目今天跟大家介绍的是基本的配置和环境： 1、基于vue2.02、使用vue-cli脚手架搭建项目（vue ini