《vue教程课件》-《vue教程课件》-2.Vue组成_第1页
《vue教程课件》-《vue教程课件》-2.Vue组成_第2页
《vue教程课件》-《vue教程课件》-2.Vue组成_第3页
《vue教程课件》-《vue教程课件》-2.Vue组成_第4页
《vue教程课件》-《vue教程课件》-2.Vue组成_第5页
已阅读5页，还剩20页未读， 继续免费阅读

下载本文档

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

文档简介

Vue基础Vue是目前前端开发中最优秀的框架之一。本章首先介绍如何创建vue实例、vue实例中的data,methods,computed,watch等选项，其次重点介绍事件及事件修饰符，最后介绍vue生命周期及钩子函数。学习目标：了解Vue实例掌握Vue选项理解Vue生命周期及钩子函数

2.1Vue实例Vue应用的开发离不开Vue实例，每个Vue应用都是通过Vue.createApp()创建新的Vue实例开始的。2.1.1创建Vue实例及挂载创建Vue实例的基本代码如下：<script>constapp=Vue.createApp({/*选项*/})</script>传递给

createApp

的选项用于配置根组件，该组件被用作渲染的起点。选项中可包含data(数据对象)、methods(方法)、components(子组件)、computed(计算属性)、filters(过滤器)、watch(监听器)等选项。每个实例需要被挂载到一个DOM元素，被元素用作渲染的起点。例如，把一个Vue实例挂载到

<divid="app"></div>，应该传入

#app，代码如下：constvm=Vue.createApp().mount(“#app”)2.1.2Vue数据与方法实例化Vue对象时需要在data中定义数据，data

选项是一个函数，它应该返回一个对象，然后Vue会通过响应性系统将其包裹起来，并以

$data

的形式存储在实例中。为方便起见，该对象的任何顶级property也直接通过组件实例暴露出来。例1.data数据的绑定与显示<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>data选项</title><scriptsrc="vue.js"></script></head><body><divid="app">{{num}}</div><script>constapp={data(){return{num:10}}}constvm=Vue.createApp(app).mount("#app")console.log("vm.$data.num:"+vm.$data.num)console.log("vm.num:"+vm.num)</script></body></html>程序运行结果如图2-1所示。图2-1Vue数据选项代码第20~21行通过控制台分别输出num的值，同时可在控制台中修改num的值，如图2-2所示。图2-2修改data中的数据Vue中方法是通过methods选项实现的，Vue自动为

methods

绑定

this，以便于它始终指向该实例。注意，在定义

methods

时应避免使用箭头函数，这会阻止Vue绑定恰当的

this

指向。例2：单击“加1”按钮给数据num加1。<body><divid="app"><p>{{num}}</p><button@click=add>加1</button></div><script>constapp={data(){return{num:10}},methods:{add(){this.num++console.log(vm.num)}}}constvm=Vue.createApp(app).mount("#app")</script></body>程序运行结果如图2-3所示。图2-3Vue中methods方法2.2计算属性和侦听属性2.2.1计算属性计算属性需要在computed选项中定义，计算属性就是当其依赖属性的值发生变化时，它的属性值会自动更新，与之相关的DOM也会同步更新。例3:计算属性<body><divid="app"><p>单价：{{price}}</p><p>数量：{{num}}</p><p>通过nsum方法求总价：{{msum()}}</p><p>通过csum计算属性求总价:{{csum}}</p></div><script>constapp={data(){return{price:50,num:2,discount:1}},methods:{msum(){returnthis.price*this.num*this.discount}},computed:{csum(){returnthis.price*this.num}}}constvm=Vue.createApp(app).mount("#app")</script></body>程序运行结果如图2-4所示。图2-4vue中的computed属性当改变单价或数量时，通过方法和计算属性求总价都发生变化，但当改变折扣时，因为计算属性不依赖折扣，所以通过计算属性求的总价不发生变化，如图2-5所示。图2-5改变折扣后的总价2.2.2侦听属性Vue允许开发者使用侦听属性(watch选项)为实例添加被观察对象，当对象改变时自动调用开发者自定义的方法。例4：侦听属性<body><divid="app"><p>单价：{{price}}</p><p>数量：{{num}}</p><p>总价：{{price*num}}</p></div><script>constapp={data(){return{price:50,num:3,}},watch:{price:function(newValue,oldValue){this.price=newValuealert("原价："+oldValue+"新价："+newValue)}}}constvm=Vue.createApp(app).mount("#app")</script></body>程序运行效果如图2-6所示。图2-6侦听属性当在控制台中改变价格(vm.price=100)时，侦听器监听到价格改变，自动执行侦听属性，确定后重新计算总价。Vue中计算属性和侦听属性都可以监听数据的变化。不同的是，计算属性只对依赖数据的变化进行操作，必须返回一个数据，而侦听属性侧重对监听的数据发生变化后执行相应的逻辑操作，不仅仅局限于返回数据。2.3事件事件系统是Web开发中最常见的操作，Vue对其进行了封装和拓展，使用v-on:事件名(或@事件名)进行定义。2.3.1事件监听及事件处理Vue中通过内置指令v-on监听DOM事件，当事件发生时运行一段JavaScript代码或绑定事件处理方法。例5：事件监听及事件处理<body><divid="app"><p>{{count}}</p><buttonv-on:click="count--">减1</button><buttonv-on:click=add()>加1</button></div><script>constapp={data(){return{count:0}},methods:{add(){returnthis.count++}}}constvm=Vue.createApp(app).mount("#app")</script></body>程序运行结果如图2-7所示。图2-7监听事件及处理2.3.2事件修饰符事件修饰符是对事件添加一些通用限制，如阻止默认事件、阻止事件冒泡等行为，Vue中对事件限制的通用格式为：v-on:事件名.修饰符。Vue中常用的事件修饰符有以下几个：.stop阻止事件冒泡，等同于JavaScript中的event.stopPropagation().capture事件捕获，内外到内，与事件冒泡方向相反.prevent阻止默认事件，等同于JavaScript中的event.preventDefalut().passive执行默认事件.self只会触发自身范围内的事件.once事件只触发一次例6：事件捕获与阻止事件冒泡<body><divid="app"><divid=box1@click=box1><divid="box2"@click=box2><divid="box3"@click=box3>事件捕获</div></div></div><divid=box4@click=box4><divid="box5"@click=box5><divid="box6"@click.stop=box6>box6<br>阻止事件冒泡</div></div></div></div><script>constapp={methods:{box1(){alert("box1")},box2(){alert("box2")},box3(){alert("box3")},box4(){alert("box4")},box5(){alert("box5")},box6(){alert("box6")}}}constvm=Vue.createApp(app).mount("#app")</script></body>程序运行效果如图2-8所示。图2-8事件捕获与阻止事件冒泡单击左图不同颜色框会由内向外弹出相应警告框，单击右图中box6框由于阻止事件冒泡，不会由内外外弹出警告框。例7：once与slef修饰符<body><divid="app"><divid=box1@click=box1><divid="box2"@click=box2><divid="box3"@click.once=box3>box3只触发一次</div></div></div><divid=box4@click=box4><divid="box5"@click.self=box5><divid="box6"@click=box6>触发box6,不会触发box5</div></div></div></div><script>constapp={methods:{box1(){alert("box1")},box2(){alert("box2")},box3(){alert("box3")},box4(){alert("box4")},box5(){alert("box5")},box6(){alert("box6")}}}constvm=Vue.createApp(app).mount("#app")</script></body>程序运行效果如图2-9所示。图2-9once与slef修饰符单击左图中的box3框只会触发一次，单击右图中的box6框，不会触发box5框。例8：阻止默认事件<body><divid="app"><ahref="">单击1，打开百度网站</a><br><ahref=""@click.prevent>单击2，阻止默认行为</a></div><script>constapp={}constvm=Vue.createApp(app).mount("#app")</script></body>程序运行效果如图2-10所示。图2-10阻止默认事件2.3.3按键修饰符vue中允许为v-on或者@在监听键盘事件时添加按键修饰符，格式如下：@keyup.键名=事件为了使用方便，Vue为最常用的键提供了别名：.enter、.tab、.delete(捕获“删除”和“退格”键)、.esc、.space、.up、.down、.left、right，若需要使用组合键控制时，vue同样提供了别名：.ctrl、、alt、.shift、.meta(⊞或⌘)。例9：按键修饰符<body><divid="app"><inputtype=text@keyup.enter=inputv-model=contplaceholder="输入完成后，按回车"></div><script>constapp={data(){return{cont:""}},methods:{input(){alert(this.cont)}}}constvm=Vue.createApp(app).mount("#app")</script></body>程序运行效果如图2-11所示。图2-11按键修饰符2.4vue生命周期vue生命周期就是指vue实例从创建到消亡的过程。在这个过程中有不同的时期，开发者可以用对应的生命周期钩子函数在合适的时期上执行相应的代码。生命周期如图2-12所示。图2-12vue生命周期图2.4.1生命周期钩子函数Vue实例中几个主要的生命周期钩子函数说明如下：beforeCreate在Vue实例开始初始化时调用。created在实例创建之后进行调用，此时尚未开始DOM编译。beforeMountVue实例挂载之前，render函数首次被调时。mountedVue实例挂载到DOM节点上之后进行调用，相当于JavaScript中的window.onload()方法beforeUpdate数据更新时，在虚拟DOM状态变化之前。updated虚拟DOM被重新渲染之后调用。beforeUnmont实例销毁之前，此时Vue实例依然可用。unmountedVue实例销毁之后，此时Vue实例及其子实例将完全解绑。2.4.2生命周期钩子函数实例通过一个示例来了解Vue内部运行机制。例10：生命周期钩子函数<body><divid="app"><p>{{n}}</p><button@click=n++>修改数据</button></div><script>constapp={data(){return{n:1,}},beforeCreate(){console.log("1--beforeCreate")},created(){console.log("2--created")},beforeMount(){console.log("3--beforeMount")},mounted(){console.log("4--mounted")},beforeUpdate(){console.log("5--beforeUpdate")},updated(){console.log("6--updated")},beforeUnmount(){console.log("7--beforeUnmount")},unmounted(){console.log("8-unmounted")}}constvm=Vue.createApp(app).mount("#app")</script></body>程序运行效果如图2-13所示。图2-13生命周期钩子函数运行图单击“修改数据”按钮，进行数据更新，出现图2-14所示。图2-14更新数据后生命周期钩子函数运行图在控制台输入app.beforeUnmount()和app.unmounted()后，出现图2-15所示。图2-15销毁之前及销毁钩子函数习题与实践选择题1、Vue实例的data属性，可以在哪些生命周期中获取到？()A.beforeCreateB.createdC.beforeMountD.mounted2、关于Vue的生命周期，下列哪项是不正确的？()A.DOM渲染在mounted中就已经完成了B.Vue实例从创建到销毁的过程，就是生命周期C.created表示完成数据观测、属性和方法的运算和初始化事件，此时$el属性还未显示出来D.页面首次加载过程中，会依次触发beforeCreate，created，beforeMount，mounted，beforeUpdate，updated3、下列对Vue原理的叙述，哪些是正确的？A.Vue中的数组变更通知，通过拦截数组操作方法而实现B.编译器目标是创建渲染函数，渲染函数执行后将得到VNode树C.组件内data发生变化时会通知其对应watcher，执行异步更新D.patch

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

温馨提示

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

最新文档

评论

0/150

提交评论