Vue 3前端框架应用项目教程（微课版）课件 项目1、2 Vue快速入门、Vue语法基础

1.1编写”HelloWorld”程序Vue快速入门

onetaskVue简介目录CONTENTS什么是Vue1Vue时间线2Vue的优势31.什么是Vue一套用于构建用户界面的渐进式JavaScript框架Vue？Vue可以自底向上逐级的应用简单应用：只需要一个轻量的核心库复杂应用：可以引入各种各样的Vue插件1.什么是Vue主流的前端框架？2.Vue时间线受Angular框架启发，开发了一款轻量级框架—Seed，同年更名为Vue，版本0.6.0Vue正式对外发布，版本号0.8.0；Taylorotwell在Twitter上发动态，说自己正在学习Vue.js10月27日，正式发布1.0.0Evangelion（新世界福音战士）10月1日，正式发布Vue2.0.0GhostintheShell（攻壳机动队）9月18日，正式发布Vue3.0.0Onepiece（海贼王）201320142015201620203.Vue的优势轻量级框架1双向绑定2Vue生态3组件化4Vue相对于Angular框架，Vue是一个轻量级的框架，核心库才100k左右3.Vue的优势——组件化Blog.vueCategory.vueHot.vue4.总结Vue是一套用于构建用户界面的渐进式框架1Vue从2013年发展到现在，由Vue0发展到Vue32Vue是一个轻量级的前端框架，已经形成了完善的前端开发生态3Vue的两大特点：双向绑定和组件化开发4总结开发环境搭建目录CONTENTSVisualStudioCode编辑器1Vue的引入21.VisualStudioCode编辑器短小精悍，运行速度快，占用系统资源少提供语法高亮显示、智能代码补全等常用功能提供了丰富的插件，比如：Chinese、openinbrowser等——优势1.VisualStudioCode编辑器下载地址：https:///Download——安装1.VisualStudioCode编辑器插件：——安装1、Chinese：汉化工具2、openinbrowser：打开浏览器3、Vetur：Vue的重要插件4、Vue3Snippets：Vue代码补全插件5、ESLint：代码检查插件6、HTMLCSSSupport7、JavaScript（ES6）codesnippets2.Vue的引入方式一：直接CDN引入<scriptsrc="/vue@3/dist/vue.global.js"></script>方式二：下载到本地引入1.将Vue3库文件下载到本地2.引入：

<scriptsrc="vue.js"></script>编辑Vue模板：

1、文件->首选项->配置用户代码片段2、搜索html.json3、添加模板脚本2.Vue的引入总结VisualStudioCode编辑器的安装和使用1掌握vue的下载和引入方法2总结编写“HelloVue！”程序任务实现目录CONTENTS提出任务1分析任务2归纳总结4实施任务3本次课任务在页面中显示“HelloVue！”1.提出任务Vscode工具的使用Vue.js库文件的引入方法创建一个Vue实例data选项插值语法任务要点：案例效果：2.分析任务实践实现“HelloVue！”显示3.实施任务4.归纳总结总结创建Vue实例将Vue实例与DOM关联定义数据逻辑功能4.归纳总结总结HTML结构使用{{}}插值语法把data数据渲染到页面下次课见！Seeyounexttime2.1实现简单的计时器Vue语法基础onetasks目录CONTENTScomputed4

watch5在Vue2中创建实例6Vue实例的创建与挂载1数据的定义与渲染2methods31.Vue实例的创建与挂载每个Vue应用的创建都是从使用createApp方法创建一个Vue实例开始的，然后该实例通过mount方法挂载到页面中的某个DOM元素。Vue实例只有在调用mount方法之后才会被渲染出来。constapp=Vue.createApp({//创建Vue实例

/*根组件选项*/}).mount('#app')//挂载Vue实例1.Vue实例的创建与挂载假设页面中存在如下div元素：<divid="app">…</div>创建及挂载Vue实例的方法如下：2.数据的定义与渲染（1）定义数据在Vue中使用选项式API时，会用data选项来声明组件的响应式状态，也就是通过data选项来定义数据。data选项是一个函数，Vue将在创建实例的时候调用此函数。data函数返回一个数据对象，Vue会将这个对象包装到它的响应式系统中。2.数据的定义与渲染（1）定义数据2.数据的定义与渲染问题：如何将data函数中定义的数据展示在页面中呢？2.数据的定义与渲染（2）插值最基本的数据绑定方式是插值，它使用的是Mustache语法，即双花括号“{{}}”，其基本格式如下：<span>{{msg}}</span>3.methodsmethods是一个对象，它包含Vue中定义的所有方法，这些方法可以作为页面的事件处理方法使用，当事件被触发后，Vue就会执行相应的事件处理方法。methods方法有两种使用方式：在{{}}中使用在事件发生时调用3.methods在{{}}中使用在事件发生时调用3.methods需要注意的是，在methods方法中使用data数据时，要通过“this.属性名”形式去访问。this在Vue的methods方法中指向Vue实例本身，所以可以通过this访问data函数中定义的属性。4.computed（1）计算属性的基本使用方法

computed也是Vue实例中一个非常重要的选项，可以定义计算属性，对data选项中定义的数据进行处理，再将处理后得到的结果渲染在页面中。在计算属性中使用data数据时，要通过“this.属性名”形式去访问。使用计算属性时，就像使用普通属性一样，可以将计算属性名放在“{{}}”中。4.computed4.computed（2）计算属性的get方法和set方法computed中的每一个计算属性都对应着一个对象，该对象包含get方法和set方法，分别用来获取属性和设置属性。在绝大多数情况下，计算属性只有get方法，没有set方法，相当于一个只读对象；如果需要设置属性，必须自己添加set方法。4.computed（3）计算属性的缓存功能计算属性具有缓存功能。当计算属性首次被访问时，Vue会执行计算逻辑并缓存结果。在后续对计算属性的访问中，如果其依赖的数据没有发生变化，Vue会直接从缓存中获取结果，而不会再次执行计算逻辑。只有当其依赖的数据发生变化时，Vue才会重新执行计算逻辑并更新缓存。调用方式：computed计算属性在{{}}中使用时不加括号，像访问普通属性一样，如{{total}}；methods方法在{{}}中使用时必须加括号调用，{{getTotal()}}。4.computedcomputed计算属性与methods方法的区别：缓存机制：计算属性：有缓存，只要数据不变，无论模板中使用多少次，都只会执行一次，后续直接用缓存中的结果；methods方法：无缓存，每次调用都会重新执行函数。5.watch使用watch可以监听data中定义的数据，只要监听到数据发生变化，就会调用当前数据绑定的事件处理方法，执行相应的操作。（1）watch监听属性5.watch在Vue实例中设置了watch选项，在其中定义了username方法用于监听username属性，该方法包括两个参数，第一个参数是数据的新值，第二个参数是数据的旧值。5.watch当watch监听的是对象类型的数据时，函数中参数接收的新值和旧值是相等的，因为这两个形参指向的是同一个对象。因此watch提供了deep属性，用来深度监听一个对象，当将deep属性的值设置为true时，它会逐层深入监听对象每个属性的变化。（2）deep属性6.在Vue2中创建实例前面主要讲解的是如何在Vue3中创建实例及配置选项。Vue2和Vue3在创建实例以及挂载实例的方法上有所不同。使用newVue()创建Vue实例使用el选项将Vue实例挂载到页面中使用data选项来定义数据Vue实例的创建与挂载1数据的定义与渲染2总结constapp=Vue.createApp({}).mount(）定义：data(){return{}}渲染：插值{{}}methods选项：定义方法3computed选项：计算属性4watch选项：监听属性（使用deep开启深度监听）5任务1

实现简单的计时器【任务提出】

任务1

实现简单的计时器综合运用Vue实例的data、methods、computed以及watch等选项实现简单的计时器，计时器初始效果如图所示。【任务分析】

任务1

实现简单的计时器本任务要实现简单的计时器：计时器从0开始，单击“开始计时”按钮，启动计时器，按秒计时；单击“暂停计时”按钮，暂停计时器；再次单击“开始计时”按钮，可继续按秒计时。实现思路如下：（1）使用插值在页面中实时渲染数据；（2）分别为“开始计时”和“暂停计时”按钮添加click事件；（3）创建