《网页设计与 Web 前端开发》课件 第7、8章 jQuery基础知识、Vue框架

网页设计与Web前端开发案例教程第7章jQuery基础知识CONTENT目录jQuery介绍01基本选择器02高级选择器03事件处理04内容处理05样式处理06进阶应用07扩展知识08习题0901jQuery介绍7.1jQuery介绍jQuery的作用简化DOM操作跨浏览器兼容安全性特点禁止访问本地硬盘不允许对网络中的文本修改或删除jQuery的特性链式调用强大选择器事件处理AJAX下载安装例7-1一个最简单的jQuery程序$(document).ready()确保DOM加载后执行$符号是jQuery的别名$()是合法的函数或对象名称，它等价于jQuery()例7-1执行效果02基本选择器常用选择器jQuery代码说明$("#block")选择id为block的首个元素$(".block")选择class为block的所有元素$("div")选择所有div标签的元素$("span,#block")选择所有span标签和id为block的元素$("span#block")选择所有span标签下面id为block的元素标签选择器举例标签选择器$("p").css("color","red");id选择器​​$("#myElement").css("color","red");​​类选择器$(".myClass").css("color","red");03高级选择器过滤器选择器jQuery选择器说明:first选择集合中的第一个元素。:last选择集合中的最后一个元素。:eq(index)选择集合中指定索引的元素。:gt(index)选择集合中索引大于指定索引的元素。:lt(index)选择集合中索引小于指定索引的元素。过滤器选择器jQuery选择器说明:even选择集合中索引为偶数的元素。:odd选择集合中索引为奇数的元素。:visible选择当前可见的元素。:hidden选择当前隐藏的元素。:contains(text)选择包含指定文本的元素。:has(selector)选择包含子元素的元素。过滤器选择器jQuery选择器说明:parent选择有子元素的元素。:empty选择没有子元素的元素。:not(selector)选择不匹配指定选择器的元素。属性选择器jQuery选择器说明[attribute]选择具有指定属性的元素。[attribute=value]选择具有指定属性值等于指定值的元素。[attribute~=value]选择具有指定属性值包含指定值的元素。[attribute|=value]选择具有指定属性值以指定值开头的元素。[attribute^=value]选择具有指定属性值以指定值开头的元素。[attribute$=value]选择具有指定属性值以指定值结尾的元素。[attribute*=value]选择具有指定属性值包含指定值的元素。伪类选择器jQuery选择器说明:focus选择当前获得焦点的元素。:hover选择鼠标悬停在其上的元素。:active选择当前被激活的元素。:focus选择当前获得焦点的元素。:focus-within选择当前或其子元素获得焦点的元素。:target选择当前URL中的目标元素。:lang(language)选择具有指定语言的元素。伪元素选择器jQuery选择器说明::before选择元素的开始伪元素。::after选择元素的结束伪元素。::first-letter选择元素的第一个字母。::first-line选择元素的第一行。::selection选择用户选中的文本。04事件处理例7-2绑定事件的jQuery程序$符号是jQuery的别名jQuery常用事件事件名/方法名功能描述click单击事件：当用户单击某个元素时触发。dblclick双击事件：当用户双击某个元素时触发。focus获取焦点事件：当元素获得焦点时触发。keydown键盘按下事件：当用户按下键盘上的任意键时触发。keyup键盘抬起事件：当用户释放键盘上的任意键时触发。mousedown鼠标按下事件：当用户按下鼠标按钮时触发。mouseup鼠标抬起事件：当用户释放鼠标按钮时触发。submit提交事件：当表单提交时触发。blur失去焦点事件：当元素失去焦点时触发。change变化事件：当元素的内容发生变化时触发。解绑事件触发事件事件委托自定义事件与链式调用05内容处理一般属性读写class读写事件委托内容读写06样式处理标签样式读写标签尺寸读写事件委托标签位置计算计算位置：使用

.offset()

方法获取元素相对于文档的偏移量。07进阶应用批量操作这个例子中的each内部匿名函数中的$(this)访问到的是当前正在处理的div元素，each会自动的遍历所有被前面选择器(div)选中的元素，并依次调用后面的匿名函数。表单验证动画处理类似的动画方法还有hide/show、fadeIn/fadeOut、slideDown/slideUp/slideToggle、animate等，具体用法可以查阅7.8.2提到的手册和在线教程。视频控制这个例子中的get(0)与之前7.1.2一节中的[0]是等价的，都可以访问到原始的DOM元素，然后就可以调用DOM对象原有的方法了。标签处理类似的能直接改变DOM结构的方法还有append/prepend、after/before、remove/empty等，适当地利用这些方法，可以在不使用网络流量的情况下对页面内容进行局部或彻底的修改调整。案例改写利用本章所学的jQuery语法，我们可以对之前6.12.1中的交互案例进行改写，改写后的案例文件夹为pra07。关键部分代码及注释见教材7.7.608扩展知识AJAX动态加载AJAXAJAX即“AsynchronousJavaScriptAndXML”（异步JavaScript和XML）执行逻辑​​来避免整个页面刷新带来的流量大、速度慢、延时高等问题​​基本原理它通过在浏览器端运行特殊的JavaScript脚本，动态地修改页面中的局部内容，来避免整个页面刷新带来的流量大、速度慢、延时高等问题。例7-4一个最简单的AJAX程序.load()动态加载content.htm的内容到指定元素中，这个过程可以在F12的network标签观察到数据流。文档参考网页设计与Web前端开发案例教程第8章Vue框架CONTENT目录Vue简介和环境搭建01Vue3基础语法

02组件基础知识03生命周期04简单Vue应用实例0501Vue简介和环境搭建Vue简介定义Vue框架是EvanYou（尤雨溪）创建的开源JavaScript框架，是一个用于构建用户界面的渐进式框架，提供了一套声明式、组件化的编程模型，可以高效的开发用户界面特点Vue的核心库只关注视图层，采用自底向上的增量开发设计，易学易用，便于与其它库或项目整合。。安全性特点禁止访问本地硬盘不允许对网络中的文本修改或删除地位与Angular、React并称前端三大主流框架，是最年轻且热门的框架。Vue的发展​自2014年推出以来，Vue经历了几个版本的发展：1.1.xVue1.0于2014年10月正式发布，是Vue的初始版本，一经发布就获得了广泛的应用。2.Vue2.xVue2.0于2016年9月发布，是Vue成为主流框架的重要里程碑。但随着技术的发展和Vue3.x的推出和逐步成熟，2.x版本也逐渐进入尾声并与2023年12月31日停止维护。3.Vue3.xVue3.0于2020年9月发布，并于2022年2月成为Vue的默认版本。截至目前，最新的Vue稳定版是3.4.35。Vue3特点​1.轻量级：Vue的核心库非常小巧，运行时核心库仅10KB左右，加载速度快。2.渐进式框架：Vue可以自下而上逐层应用，可以在一个已有项目中作为视图层库使用，也可以管理整个前端应用。3.响应式数据绑定：Vue提供了简洁易用的响应式数据绑定机制，可以方便的实现数据和视图之间的同步。4.高性能：Vue的虚拟DOM和高效的差异化算法，使其具有良好的页面性能和渲染效率。5.组件化开发：Vue允许使用组件构建应用程序，提高了代码的可维护性和复用性。易于学习：Vue以HTML和JavaScript为基础，语法简单直观，适合初学者学习使用。Vue环境搭建(一)：独立脚本​适用场景：前端逻辑简单或增强已有项目，无需复杂项目构建。使用方式：通过<script>标签引入Vue的js文件，可通过全局变量或模块方式使用。版本类型：全局构建版（如Vue.global.js）：开发用生产环境版（如Vd.js）：最小化，移除开发代码ESM版（如Vd.js）：采用ES模块语法，需浏览器支持资源来源：本地文件（官网下载）或CDN（推荐，如Unpkg、StaticfileCDN等）。常用的CDN：Unpkg:"/vue@3/dist/vue.global.js"StaticfileCDN："/vue/3.x.x/vue.global.js"Cdnjs："/ajax/libs/vue/3.x.x/vue.global.js"jsDelivr："/npm/vue@3/dist/vue.global.js"Vue环境搭建(二)：构建工具​适用场景：开发大型或复杂应用。工具要求：官方推荐Vite，需Node.js20+支持。搭建步骤：命令行输入npmcreatevue@latest按提示输入项目名称，选择TypeScript、VueRouter等功能选项初始化完成后，执行cd项目名、npminstall、npmrundev启动项目其他工具：VSCode、WebStrom、HbuilderX等可按提示创建Vue项目。Vue实例创建Vue应用开发的第一步就是在页面中创建应用实例。在全局构建的版本中，Vue是定义在Windows上的全局对象，可以在html文件中直接使用，所有的顶层API都暴露在Vue对象上。通过全局对象Vue调用createApp()方法可以创建一个Vue应用实例，该方法接收一个根组件对象参数。语法如下：functioncreateApp(rootComponent,rootProps)参数：rootComponent：Vue应用实例的根组件，可以是内联组件，也可以是外部组件。rootProps：用来向根组件传递参数，可以省略Vue实例创建后，必须挂载之后才能被渲染进DOM树。实例通过调用mount方法挂载到指定的DOM元素上。mount方法由接收一个DOM元素参数，并返回根组件实例。02Vue3基础语法模板语法Vue使用一种基于HTML的声明式语法将其组件实例的数据绑定到DOM元素上，这种语法称为模板语法。模板语法可以被浏览器和HTML解析器解析，与响应式系统结合，能够在应用状态改变时智能地计算出最少数量的渲染组件和DOM应用操作。Vue模板语法与HTML是语法层面上的结合，即Vue模板语法是在HTML标签中的以一种特殊内容或属性的形式存在，并将其数据绑定到DOM元素上，数据被解析成HTML的内容或属性在渲染时更新到视图中。Vue模板语法主要包括文本插值和指令两种形式。文本插值是最简单最基本的数据绑定形式，采用“Mustache”语法，即双大括号。文本插值用于在文本信息中插入绑定的数据，绑定的数据来自Vue实例中的响应式数据，双大括号标签中的数据值会被解析为纯文本信息。当响应式数据的值更改时，DOM中文本自动更新并重新渲染。Mustache语法会被解析成文本内容，只能在文本信息中使用，不能在HTML属性中使用。Vue提供了一些以“v-”为前缀的特殊HTML属性，为DOM元素绑定数据或提供特殊行为，这些特殊属性称为指令。指令是Vue的核心功能之一性，以HTML属性的方式将响应式数据绑定到DOM元素上，可以动态的对DOM元素的属性进行更新，极大的减少了代码量。文本插值代码示例：<divid=’app’>消息内容：{{message}}</div>其中：{{message}}中的message是来自Vue实例的响应式数据，当响应式数据message的值变化时，插值处的文本信息也自动更新并重新渲染。文本插值以v-为前缀的特殊HTML属性，用于数据绑定或行为控制根据功能分为属性绑定指令、条件渲染指令、列表渲染指令、事件处理指令等。常用指令如表8-1所示。指令表8-1Vue常用指令表指令描述v-text用于更新元素文本信息。v-show用于根据表达式的值来条件性地显示或隐藏元素。v-html用于将v-html

的内容作为普通HTML插入，不推荐使用。v-bind用于将

Vue实例的数据绑定到HTML元素的属性上。v-if用于根据表达式的值来条件性地渲染元素或组件。v-for用于根据数组或对象的属性值来循环渲染元素或组件。v-on用于在

HTML元素上绑定事件监听器。v-model用于在表单控件和

Vue实例的数据之间创建双向数据绑定。在Vue中，可以通过条件指令决定是否渲染元素或者模板，条件指令包括v-if、v-else和v-else-if。v-if指令：条件性的渲染一个元素或模板指令的值为真时：该元素及其包含的子元素进行渲染指令的值为假时：全部不渲染指令的值改变时：元素及其内容会销毁或重建，同时触发过渡效果。当多个元素需要根据同一个条件同时切换时，可以增加一个容器并在容器上使用v-if。v-else指令：根据前置v-if的条件值反向渲染，必须与v-if必须在v-if或者v-else-if元素之后，否则不会被识别。v-else-if指令：提供elseif的条件渲染，可以连续多次使用表示多个条件分支，指令需要传入条件值。v-else-if的元素也必须在一个v-if或者v-else-if之后，否则不会被识别。条件渲染条件渲染<divid="app"><ul><liclass="container"v-if="true">成绩{{id}}：{{score}}，成绩等级：

<spanv-if="score>=90">优</span><spanv-else-if="score>=80">良</span><spanv-else-if="score>=70">中</span><spanv-else-if="score>=60">及格</span><spanv-else>不及格</span></li></ul></div><script>Vue.createApp({data(){return{id:1,score:83}}}).mount('#app')</script>图8-4条件渲染实例效果图【例8-6】

条件渲染实例。Vue提供的列表渲染指令v-for，可以根据数据用简洁的代码生成元素并对元素进行高效渲染。v-for指令作为一个特殊的HTML属性，可以将数组、对象、数值等数据源绑定到该DOM元素，并通过对数据源的遍历实现DOM元素的循环渲染v-for功能类似于Javascript的forEach，但v-for比forEach代码实现更为简洁，只需要提供遍历的数据源，并将数据源绑定到循环Dom元素中即可实现大量数据的动态渲染。列表渲染数组是列表渲染最常用的数据源形式。v-for指令遍历数组时，遍历的迭代项是数组元素指令值的形式必须采用以下两种特殊语法中的一种：v-for="iteminarrayname"v-for="(item，index)inarrayname"其中：item是当前数组元素名称，用来获取当前数组元素值，名称可自定义；

in是分隔符，也可以用of替代；index是当前数组元素索引名称，可自定义；arrayname是数据源数组，需要在根组件的响应式数据中提前定义。1、数组遍历条件渲染 <divid="mydiv"> <ul> <liv-for="(item,index)intitleArray"> {{index+1}}:{{item}} </li> </ul> </div> <script> const{ createApp}=Vue constapp=createApp({ data(){ return{ titleArray:["奥运新闻","国际局势","国内热点"] } } }) app.mount("#mydiv") </script>【例8-7】

数组列表渲染实例代码：图8-5数组列表渲染实例效果图v-for指令还可以用来遍历对象的所有属性，遍历的顺序按照Object.keys()的返回值顺序。遍历对象是指令的值形式与数组相似，必须采用以下语法中的一种：v-for="valueinobject"v-for="(value,key)inobject"v-for="(value,key,index)inobject"其中：value为对象当前属性的值，名称可自定义； key为对象当前属性名，可自定义； index为对象当前属性的索引值，可自定义； object为数据源对象，需要在组件响应式数据中定义。2、对象遍历条件渲染<divid="app"> <divv-for="(value,key)ofgolden">{{key}}:{{value}}</div></div><script> Vue.createApp({ data(){ return{ golden:{

比赛项目:"10米气步枪混合团体",

获得者:"黄雨婷/盛李豪",

时间:"2024.7.27" } } } }).mount('#app')</script>【例8-8】

对象列表渲染实例代码：图8-6对象列表渲染实例效果图v-for还可以接受一个整数值n做范围遍历，n必须必须是大于0的整数，遍历的取值范围是1～n，包括1和n。采用的语法为：v-for="iinn"其中：i为当前遍历值，名称可自定义； n为范围值整数，需要在组件响应式数据中定义的整数属性。3、范围值遍历条件渲染 <divid="app"> <divv-for="iinn"> {{i<10?"0"+i:i}}/{{n}}:第{{i}}个列表项 </div> </div> <script> Vue.createApp({ data(){ return{ n:13 } } }).mount('#app') </script>【例8-9】

范围值列表渲染实例代码：图8-7范围值列表循环实例效果图v-for指令可以实现多层循环嵌套，其内层元素的作用域可以访问父级作用域，反之则不可以。4、循环嵌套<divid="mydiv> <h3style="margin:20px;">中国金牌榜</h3> <ul> <liv-for="(item,index)ingoldenList"class="listItem">第{{index+1}}金： <spanv-for="valueinitem"class="data"> {{value}}</span> </li> </ul></div><script> Vue.createApp({ data(){ return{ goldenList:[{event:"10米气步枪混合团体", winner:"黄雨婷/盛李豪", time:"2024.7.27"}, {event:"跳水女子双人3米板", winner:"陈艺文/昌雅妮", time:"2024.7.27"}, {event:"男子10米气手枪", winner:"谢瑜", time:"2024.7.28"}, {event:"男子双人10米跳台", winner:"练俊杰/杨昊", time:"2024.7.28"}]} } }).mount('#app')</script>【例8-10】

循环嵌套的列表渲染实例代码：图8-8嵌套循环实例效果图Vue的v-bind指令用来对HTML属性进行数据绑定，通过绑定的响应式数据可以动态地修改属性值。绑定的属性可以HTML标签的原生属性，也可以是组件自定义的标签属性。书写语法在绑定属性前添加前缀“v-bind：”或简写“：”即可。如：<buttonv-bind:disabled="isDisabled">上传</button><child:custom-prop="parentValue"></child>其中：button的原生属性disabled绑定响应式数据isDisabled，

组件child的custom-prop属性绑定响应式数据parentValue。样式绑定条件渲染<style> .card{ background-color:#f5ffff; border-radius:6px6px00; width:230px; height:270px; text-align:center; vertical-align:bottom; padding:15px00; } .danger{ color:red; background-image:url(img/error.webp); background-size:180px; background-repeat:no-repeat; background-position:25px70px; }</style><scriptsrc="/vue@3/dist/vue.global.js"></script><divid="app"><div:class="classObject">警告：错误！！</div></div>

【例8-11】

样式绑定对象实例代码：图8-9样式绑定实例效果图<script> Vue.createApp({ data(){ return{ classObject:{ 'card':true, 'danger':true } } } }).mount('#app') </script>条件渲染<divid="app"> <div:class="[cardClass,dangerClass]">警告：错误！！！</div> </div> <script> Vue.createApp({ data(){ return{ cardClass:'card', dangerClass:'danger' } } }).mount('#app') </script>【例8-12】

样式绑定数组实例代码：图8-9样式绑定实例效果图Vue提供了很好的数据双向绑定方式，可以方便的处理表单输入。v-model指令将响应式数据绑定到表单的输入值，并在表单输入值变化时，自动同步到响应式数据中。需要注意的是，v-model的输入过程并不包括汉字的拼写过程。另外，v-model并不能辨识元素上的初始值，如value、selected、checked等.若要将表单的初始值与响应数据同步需要给响应式数据赋初始值。表单输入绑定条件渲染<inputtype="text"v-model="uname"/><div>你好:{{uname}}</div>data(){ return{uname:"同学" }}【例8-13】

表单输入绑定实例代码：图8-10表单输入绑定实例效果图条件渲染<spanv-for="(value,key)inmedalList"> <inputtype="checkbox"v-bind:value="value"v-model="checks"/> <label>{{value}}</label></span><p>选择结果：{{checks}}</p>data(){ return{ checks:[], medalList:{gold:"金牌",silver:"银牌",bronze:"铜牌"} }}【例8-14】

多选框输入绑定实例代码：图8-11多选框输入绑定实例效果图Vue为v-model提供了修饰符用来处理输入值或对监听事件细化。语法为指令后用点语法加修饰符，如：v-model.lazy。常用的修饰符有：.lazy修饰符用来可以将对文本输入的监听事件改为change事件，响应式数据的更新会在每次输入确定的change事件发生时而不会在每个字符输入时更新。.number修饰符可以将输入内容从字符串自动转化为数值，若不能转化成功则保持原值。.trim修饰符可以将输入内容两端的空格去除，在用户名密码等需要对输入内容进行校验的场景中非常实用。表单输入绑定修饰符计算属性是Vue组件的一个选项，使用computed来声明，接收一个对象值。选项式API风格的计算属性是可以根据响应式数据（data或props中的数据）动态计算并缓存的派生值。在计算属性中定义方法进行逻辑处理，方法通过this获取响应式数据、进行计算，通过return语句返回一个派生值，并对返回的派生值进行缓存。只要响应式数据不变化，访问计算属性返回的都是缓存中保存的先前的计算结果，只有响应式数据发生变化时，计算属性中相应的方法会自动重新计算并更新缓存，所有绑定该计算属性的视图都会被自动刷新。计算属性中可以定义多个方法进行不同的逻辑处理，如数据格式化、条件选择等逻辑问题。应尽量避免在计算属性中对响应式数据进行修改，否则会引起无限更新等异常问题。计算属性条件渲染<divid="app"> <inputv-model="message"/> <div>响应式数据message：<span>{{message}}</span></div> <div>计算属性倒序的结果：<span>{{reversemessage}}</span></div> </div> <script> constapp=Vue.createApp({ data(){ return{ message:"开始Vue学习.." } }, computed:{ reversemessage(){ returnthis.message.split('').reverse().join('') } } }) app.mount("#app") </script>【例8-15】

计算属性实例代码：图8-12计算属性实例效果图事件处理是交互式Web的核心功能，Vue中可以通过v-on指令来给DOM元素绑定事件监听器，用法为：v-on:event="handle"其中：v-on指令可缩写为@。event：事件类型，当DOM元素为普通HTML元素时，event为DOM的原生事件，若DOM为自定义组件，event是子组件的自定义事件。handle：事件处理器，事件触发时被执行。事件处理器的值可以是内联的JavaScript表达式，也可以是methods中声明的事件处理器。原始DOM事件的事件处理器定义与DOM事件回调函数一样，只接收一个事件对象作为参数。事件处理条件渲染<divid="app"> <div>count1<buttonv-on:click="count1++">+1</button>={{count1}}</div> <div>count2<button@click="clickHandle">+2</button>={{count2}}</div></div><script> Vue.createApp({ data(){ return{ count1:0, count2:0 } }, methods:{ clickHandle(e){ this.count2+=2 } } }).mount("#app")</script>【例8-16】事件处理实例代码：图8-13事件处理实例效果图组件是Vue框架的核心概念之一，是可以复用的Vue实例，拥有自己的模板、逻辑和样式，使用组件可以将UI分割成独立、可复用的部分，每一部分拥有独立的逻辑。如图所示，页面头部、侧边、内容区，尾部等多个页面要用到一样的就可以做成组件，提高了代码的复用率。组件可以与普通HTML元素一样嵌套使用形成树状结构，如图8-14所示。事件修饰符03组件基础知识组件是Vue框架的核心概念之一，是可以复用的Vue实例，拥有自己的模板、逻辑和样式，使用组件可以将UI分割成独立、可复用的部分，每一部分拥有独立的逻辑。页面中，页面头部、侧边、内容区，尾部等多个页面要用到一样的就可以做成组件，提高了代码的复用率。组件可以与普通HTML元素一样嵌套使用形成树状结构，如图8-14所示。组件简介图8-14Vue组件结构图不使用构建步骤的Vue应用中，组件以包含组件选项的JavaScript对象方式定义，通常以常量方式定义组件，如果采用ES模块语法，则可以采用export导出组件。右侧代码式采用常量方式定义组件。组件的定义constcomponentA={ data(){ return{ clickTimes:0 } }, template:`

按钮<button@click="clickTimes++">单击</button>次数：{{clickTimes}}`};组件在使用前必须先进行注册，注册的方式有两种：全局注册和局部注册。全局注册是Vue应用实例调用component()方法注册组件。全局注册的组件在该Vue应用实例中全局可用。component()可以链式调用注册多个组件，全局组件可以在该应用实例的子组件中彼此使用。全局注册代码如下：ponent('componentName',component)局部注册是在需要使用组件的父组件components选项中注册。局部注册的组件只能在父组件中使用，任何子组件中都不可用。components:{componentName:component}组件注册组件注册后就可以像HTML元素一样在使用范围内进行使用，其标签名称就是注册的组件名，标签应采用成对标签方式显式的写出关闭标签，否则可能会产生标签解析错误。HTML中有一些标签对子元素有特殊限制，如<ul>、<table>、<select>等，组件作为这些标签的子元素可能会被忽略从而造成错误。如果组件必须作为这些标签的子元素时，可以通过限定子元素的is属性将该元素动态的改变成组件。需要注意的是is的属性值必须添加Vue：前缀，否则HTML原生元素无法被解析为Vue组件。组件使用Vue组件代码有选项式和组合式两种不同的API风格两种风格的API实际上是在同一套底层系统的基础上实现的不同接口两者的应用是相通的，都能覆盖大部分的应用场景。选项式API以“组件实例”的概念为中心，更符合面向对象的程序设计理念，初学者而言更为友好。组合式API更加自由，是在函数作用域内定义响应式状态变量，并获得状态组合，需要对Vue的响应式系统有较深的理解才能灵活使用。组件代码API风格选项式API风格是用对象的方式描述组件的逻辑，用属性和方法的方式定义组件的选项，如data、methods、computed等，在内部函数中，这些属性可以通过this获取选项式API风格<divid="app">

计数器：{{count}}<button@click="increment"style="margin-left:10px;">单击</button></div><script> constRootComponent={ data(){ return{ count:0