第1章 初识Vue《Vue应用程序开发》教学课件.pptx

《Vue应用程序开发》?精品课件合集?精品课件合集 Vue应用程序开发（第一章 初识Vue框架） 目 录1、Vue简介2、Vue安装3、Vue入门案例 1Vue简介1.1 什么是Vue?1.2 Vue对象模型1.3 学习Vue的条件 1. Vue简介Vue.js是一个提供了MVVM风格的双向数据绑定的JavaScript库，专注于View层。它的核心是MVVM中的VM，也就是ViewModel。ViewModel负责连接View和Model，保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷。MVVM（Model-View-ViewModel)是一种基于前端开发的架构模式，是在MVC(Model-View-Control)模式之后引出的新的开发模式，他与MVC模式一样主要是把视图（界面）和数据进行解耦，不同的是，Vue采用ViewModel来完成数据与视图的双向绑定，通过自动化的方式承担大部分数据工作，来解决由于界面复杂化和快速迭代带来的问题。1.1 什么是Vue? 1. Vue简介Vue的优势：轻量级：Vue简单、直接，所以Vue使用起来更加友好数据绑定：数据驱动视图，视图也可以驱动数据指令：指令绑定在元素上时，指令会给绑定的元素添加一些特殊的行为插件：插件用于对Vue框架功能进行扩展Vue、Angular和React的区别：React和Vue的中心思想是一切都是组件，组件之间可以实现嵌套React采用了特殊的JSX语法，Vue中推崇编写以*.vue后缀命名的文件格式1.1 什么是Vue? 1. Vue简介1.2 Vue对象的模型 1. Vue简介1.2 Vue对象的模型View层:视图层在我们前端开发中, 通常就是DOM层.主要的作用是给用户展示各种信息.Model层:数据层数据可能是我们固定的死数据, 更多的是来自我们服务器, 从网络上请求下来的数据.在我们计数器的案例中, 就是后面抽取出来的obj, 当然, 里面的数据可能没有这么简单。VueModel层:视图模型层视图模型层是View和Model沟通的桥梁.一方面它实现了Data Binding, 也就是数据绑定, 将Model的改变实时的反应到View中另一方面它实现了DOM Listener, 也就是DOM监听, 当DOM发生一些事件(点击, 滚动, touch等)时, 可以监听到, 并在需要的情况下改变对应的Data. 1. Vue简介学习Vue，您需要了解的知识：HTMLCSSJavaScript本课程主要介绍了 Vue2.x 版本的使用1.3 学习Vue的条件 2Vue入门案例2.1 Vue安装2.2 入门案例2.3 体验双向数据绑定 2. Vue入门案例2.1 Vue安装Vue的安装方式有很多种，如下：独立版本 在 Vue.js 的官网直接下载 vue.min.js，并用 script 标签引入。使用CDN方式 /vue/2.2.2/vue.min.js /vue/2.5.2/vue.min.jsNPM方式 npm install vue命令行工具 vue init vue_project 2. Vue入门案例目录解析：build 项目构建(webpack)相关代码config 配置目录，包括端口号等。我们初学可以使用默认的。node_modules npm 加载的项目依赖模块src 这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：assets: 放置一些图片，如logo等。components: 目录里面放了一个组件文件，可以不用。App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。main.js: 项目的核心文件。 2. Vue入门案例目录解析：static 静态资源目录，如图片、字体等。test 初始测试目录，可删除.xxxx文件 这些是一些配置文件，包括语法配置，git配置等。index.html 首页入口文件，你可以添加一些 meta 信息或统计代码啥的。package.json 项目配置文件。README.md 项目的说明文档，markdown 格式 2. Vue入门案例2.2 Vue入门案例每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的，当一个 Vue 实例被创建时，它将 data 对象中的所有的属性加入到 Vue 的响应式系统中。当这些属性的值发生改变时，视图将会产生响应，即匹配更新为新的值。div id=app p{{ message }}/p/divscript var vm = new Vue({ el: #app, dat