Vue.js前端开发技术-全套PPT课件.pptx

第1章Vue入门第1章Vue入门.pptx第2章Vue数据绑定.pptx第3章Vue指令.pptx第4章Vue事件处理.pptx第5章Vue组件.pptx第6章自定义指令.pptx第7章过渡与动画.pptx第8章渲染函数.pptx第9章Vue路由vue-router.pptx第10章使用webpack.pptx第11章综合案例开发.pptx第12章Vue工程项目实战.pptx

课程内容Vue是什么及Vue的特点Vue在前端开发中的优势Vue的下载以及如何引入并应用实例化Vue对象、数据和方法数据挂载到DOM页面Vue中的MVVM模式2

Vue简述3什么是Vue.jsVue.js是一套响应式系统，前端开发库Vue.js是一套构建用户界面的渐进式框架。采用自底向上增量开发的设计Vue的核心库只关注视图层Vue采用单文件组件和生态系统支持的库开发的复杂单页应用提供了MVVM数据绑定和一个可组合的组件系统

为什么使用Vue.js4Vue核心库只关注视图层解决网页结构之间存在依赖或依存关系，不需要数据和视图全混合在一起避免使用jQuery选择器及DOM操作本身存在性能缺失不需要不断地一层层向上寻找父辈元素在产品升级中，解决页面中相似的关联和嵌套DOM元素多的数不清的情况

Vue.js的主要特点Vue的特点：轻量级的框架双向数据绑定指令组件化客户端路由状态管理5

Vue.js的优势Vue的优势:可进行组件化开发，使代码量减少可对数据进行双向绑定编写出来界面效果本身是响应式的，使网页能显示好看效果实现网络页面之间跳转，与Vue路由相比，超链接不会页面刷新6传统的页面是通过超链接来实现页面的切换和跳转的

Vue.js下载及引用下载地址：script标签引入也可使用#CDN来引入Vue.js。7/v2/guide/installation.html。scriptsrc=文件路径/Vue.js/scriptscriptsrc=/npm/vue@2.5.13/dist/Vue.js/script这样就可直接使用Vue.js库了

npm安装Npm安装方式如下：用Vue.js构建大型应用时推荐使用npm安装Vue.js提供配套工具来开发单文件组件。由于npm安装速度慢，可使用cnpm来安装Vue。8如果电脑中npm命令不是内部命令，需要先安装node.js。

安装过程安装步骤：查看npm的版本号并安装Vue安装脚手架vue-cli创建一个基于webpack模板的新项目使用cd命令进入项目my-project中，并安装项目依赖项使用cnpmrundev运行项目成功执行以上命令后访问：9http://localhost:8080/

Vue项目目录结钩10src目录是我们要开发的目录

实例化Vue对象、数据和方法11实例化Vue对象通过构造函数Vue（）创建一个Vue的根实例，每一个newVue（）都是一个Vue构造函数实例varvm=newVue({//（选项）这里编写我的代码。})Vue构造器要求实例化时需传入选项对象选项对象包括挂载元素（el）、数据（data）、方法（methods）、模板（tamplate）、生命周期钩子函数等选项。

演示创建Vue实例的过程12!DOCTYPEhtmlhtmllang=enheadmetacharset=UTF-8title实例化Vue对象/title/headbodydivid=appdiv{{name}}/div/divscriptsrc=js/Vue.js/scriptscript newVue({ el:#app, data:{ name:乐美课堂!, } })/script/body/html!--app是根容器--//实例化vue对象//每个Vue.js应用都通过构造函数Vue创建一个Vue根实例启动的//实例化Vue时，需传入选项对象el:element需要获取的元素，一定是html中的根容器元素data：用于数据的存储运行结果：乐美课堂！

实例化Vue对象、数据和方法13Vue数据和方法数据（data）属性方法（methods）newVue({el:#app,data:{name:john,age：22，email:john@163.com}，methods:{say:function(){return:欢迎您：+}}})

演示数据挂载到