Vue.js 3.x前端开发技术与实战 课件 第2章Vue.js基础.pptx

教学目标第2章Vue.js基础（5课时）1.理解MVVM模式的工作机制2.掌握多种类型数据绑定的方法3.掌握计算属性与方法在使用上的区别（重点）4.学会使用侦听属性处理数据变化的相关事务5.理解生命周期钩子函数在使用上的差异性6.学会定义及使用数据对象7.掌握数据中数组对象的变异与非变异方法(难点)

2.1MVVM模式MVVM是Model-View-ViewModel的简写，它是一种基于前端开发的架构模式，其核心是提供对View和ViewModel的双向数据绑定，这使得ViewModel的状态改变可以自动传递给View，即所谓的数据双向绑定。Angular、React、Vue.js三大主流MVVM框架在MVVM架构下，View和Model之间并没有直接的联系，而是通过ViewModel进行交互，Model和ViewModel之间的交互是双向的，因此View数据的变化会同步到Model中，而Model数据的变化也会立即反映到View上。ViewModel通过双向数据绑定把View层和Model层连接了起来，而View和Model之间的同步工作完全是自动的，无需人为干涉。因此开发者只需关注业务逻辑，不需要手动操作DOM，不需要关注数据状态的同步问题，复杂的数据状态维护完全由MVVM来统一管理。

2.1.2MVVM模式的前端框架发展趋势从/@angular/core-vs-angular-vs-react-vs-vue网站上可以查看下载量和使用状态等数据，其下载量和状态对比结果如下图所示。

2.1.3MVVM模式的应用(1)?<!--定义View?-->??????<div?id="app">????????<h3>教材列表</h3>????????<ol>??????????<li?v-for="book?in?books">{{book.bookName}}</li>????????</ol>??????</div>???????案例演示：【例2-1】MVVM模式的应用????<script>????????//定义JS数组对象Model,并作为组件内data选项中的books的引用值????????var?myModel?=?[??????????{?bookName:?"Web前端开发技术"?},??????????{?bookName:?"JSP程序设计"?},??????????{?bookName:?"计算机网络"?},????????];????????//?创建Vue实例app,也称为ViewModel,用来连接View与Model????????const?app?=?Vue.createApp({??????????//?定义data选项??????????data()?{????????????return?{??????????????books:?myModel,?//?引用JS数组对象????????????};??????????},????????});????????app.mount("#app");?//?挂载到DOM上??????</script>??

2.1.3MVVM模式的应用(2)案例演示：【例2-2】数据双向绑定与MVVM模式解析<div?id="app">??????????????<fieldset>??????????????????<legend>图书信息</legend>??????????????????图书名称：<input?type="text"?v-model="bookName"?placeholder="输入图书名称"><br?/>??????????????????出版社：<input?type="text"?v-model="press"?placeholder="输入出版社"><br?/>??????????????????定价：<input?type="number"?v-model="price"?placeholder="输入定价"><br?/><br?/>??????????????????<input?type="submit"?value="提交">??????????????????<input?type="reset"?value="重置">??????????????????<p>图书名称：{{bookName}}、出版社：{{press}}、定价：{{price}}</p>??????????</div>??<script?type="text/javascript">??????????????const?app