第1章 Vue入门电子课件_第1页
第1章 Vue入门电子课件_第2页
第1章 Vue入门电子课件_第3页
第1章 Vue入门电子课件_第4页
第1章 Vue入门电子课件_第5页
已阅读5页，还剩13页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

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

Vue简述3什么是Vue.jsVue.js是一套响应式系统，前端开发库

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

Vue核心库只关注视图层解决网页结构之间存在依赖或依存关系，不需要数据和视图全混合在一起

避免使用jQuery选择器及DOM操作本身存在性能缺失不需要不断地一层层向上寻找父辈元素在产品升级中，解决页面中相似的关联和嵌套DOM元素多的数不清的情况Vue.js的主要特点Vue的特点：轻量级的框架双向数据绑定指令组件化客户端路由状态管理5Vue.js的优势Vue的优势:可进行组件化开发，使代码量减少可对数据进行双向绑定编写出来界面效果本身是响应式的，使网页能显示好看效果实现网络页面之间跳转，与Vue路由相比，超链接不会页面刷新6传统的页面是通过超链接来实现页面的切换和跳转的Vue.js下载及引用下载地址：<script>标签引入

也可使用#CDN来引入Vue.js。

7/v2/guide/installation.html<scriptsrc="文件路径/Vue.js"></script><scriptsrc="/npm/vue/dist/vue.js"></script>这样就可直接使用Vue.js库了<scriptsrc="/npm/vue@2.6.11"></script>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<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>实例化Vue对象</title></head><body><divid="app"><div>{{name}}</div></div><scriptsrc="js/Vue.js"></script><script> newVue({ el:'#app', data:{ name:‘你好邯郸学院!', } })</script></body></html><!--app是根容器-->//实例化vue对象//每个Vue.js应用都通过构造函数Vue创建一个Vue根实例启动的//实例化Vue时，需传入选项对象el:element需要获取的元素，一定是html中的根容器元素data：用于数据的存储运行结果：你好邯郸学院！实例化Vue对象、数据和方法13

Vue数据和方法数据（data）属性方法（methods）newVue({el:'#app',data:{name:'john',age：22，email:'john@163.com'

}，methods:{say:function(){return:"欢迎您："+}}})

演示数据挂载到DOM页面14<body><scriptsrc="/vue/dist/Vue.js"></script><divid="app-2"> <p>{{message}}</p><buttononclick="app.message='乐美欢迎你！未来的工程师。';">更新！</button>

</div><script>varapp=newVue({ el:'#app-2', data:{message:'HelloVue.js!'}, created:function(){console.log('messageis:'+this.message);}, mounted:function(){console.log("已挂载到DOM页面上。");}, updated:function(){console.log("已更新DOM！");}})</script></body>'this'指向vm实例

15

演示数据挂载到DOM页面当用户单击更新按钮时，这时修改app.message的值，updated方法被调用了，数据已经被重新挂载到DOM中MVVM模式MVVM是一种基于前端开发的架构模式Model-View-ViewModel）是对MVC（Model-View-Control）和MVP（Model-View-Presenter）的进一步改进其核心是提供对View和ViewModel的双向数据绑定ViewModel负责连接View和Model，保证视图和数据的一致性16Vue.js是一个提供了MVVM风格的双向数据绑定的Javascript库，专注于View层。它的核心是MVVM中的ViewModel。MVVM模式『View』：视图层（UI用户界面）『ViewModel』：业务逻辑层（一切js可视为业务逻辑）『Model』：数据层（存储数据及对数据的处理如增删改查17演示MVVM模式<!--这是我们的View--><divid="App"> {{property}} <inputtype="text"v-model="property"/></div><scriptsrc="js/Vue.js"></script><script>//这是我们的ModelvarexampleData={ property:'HelloWorld'}newVue({//创建一个Vue实例或"ViewModel",它连接View与Model el:'#App',

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论