Vu基础及其开发12_第1页
Vu基础及其开发12_第2页
Vu基础及其开发12_第3页
Vu基础及其开发12_第4页
Vu基础及其开发12_第5页
已阅读5页，还剩71页未读， 继续免费阅读

下载本文档

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

文档简介

第二章Vue开发基础学习目标熟悉Vue实例定义熟悉Vue模板语法的使用掌握Vue的条件渲染、列表渲染、计算属性、侦听器和过滤器的使用掌握Vue的数据绑定掌握Vue的事件处理在上一章中我们了解了Vue的特点以及Vue的安装和使用方式。本章我们将学习Vue的基本使用，包括定义Vue实例、数据渲染、计算属性、侦听器、过滤器、数据绑定、事件处理等，通过这些学习，让我们对Vue的基础知识掌握更加牢固。Vue实例12模板语法3条件渲染4列表渲染5计算属性-computed6侦听器-watch7数据绑定8事件处理9案例：图书管理页面Vue实例在Vue3中只需要通过Vue提供的createApp函数就可以创建一个应用实例，使用应用实例就可以完成获取根组件的挂载、声明数据、定义方法等操作。1．挂载应用createApp函数中传入的对象实际上是一个根组件，每个应用都需要一个“根组件”，其他组件将作为其子组件；就像HTML文件需要一个根标签<html>一样，在根标签中由很多的子标签组成比如<body>、<head>、<div>等。创建应用实例对象app后，需要通过调用app的mount()方法将应用挂载到页面上。只有在挂载后，根组件的内容才会被渲染在容器元素中。mount()方法的参数可以是DOM元素或是一个CSS选择器字符串。mount()方法应该始终在整个应用配置和资源注册完成后被调用,并且它的返回值是根组件实例而非应用实例。

Vue实例根组件的模板通常是组件本身的一部分，当根组件没有设置template选项时，Vue将自动使用容器的innerHTML作为模板。使用createAppAPI也支持创建和绑定多个应用实例，而且每个应用都拥有独立的用于配置和全局资源的作用域。

Vue实例2．data数据模型在Vue中，可以通过定义一个data函数来定义数据模型，该函数返回一个JavaScript的对象，用来定义整个组件页面中需要使用的响应式数据（状态）。这些响应式数据可以通过模板语法在标签中进行声明式渲染，也可以直接在根组件内被其他函数调用。当一个Vue实例被创建时，它将data函数返回对象中的属性都加入到Vue的响应式系统中，从而让JavaScript对象中的属性可以产生“响应”。当这些属性的值发生改变时，Vue就会匹配视图并更新为新的值，如图所示。运行HTML代码，可以查看到网页中显示的内容为“message数据更新”，即当message的值发生改变的时候也会响应式的更新视图上message的值。

Vue实例在上述代码中，其中vm为挂载后返回的根组件Vue实例对象。data返回对象定义的属性可以通过Vue实例对象直接调用，当然Vue对象本身也具有属性与方法。为了跟用户定义的属性方法区分开，Vue实例的属性方法都有$前缀，比如：vm.$data、vm.$props、vm.$watch()等。在应用实例中使用this.$data可以访问data函数中对象的变量，并且$data可以省略不写，即this.$data.message等同于this.message的使用。

温馨提示data函数中JavaScript对象属性的定义一定要遵循标准命名，尽量不要出现特殊符号。以_、$开头的命名方式，否则属性无法被访问。以_或$开头的属性将不会被组件实例代理（模板语法调用后网页会显示为空字符串），因为它们可能和Vue的内置属性、API方法冲突。如果使用了_或$开头命名，必须以this.$data._property的方式访问它们。Vue实例3．methods定义函数Vue中通过methods选项可以定义一些自定义函数，例如点击触发的事件函数等。methods中声明的方法可以直接通过组件实例访问，或者在模板语法表达式中使用。在方法中可以通过this访问组件实例，调用实例的属性，因此methods中的方法避免使用箭头函数，因为定义为箭头函数就不能通过this访问组件实例。这里我们以点击触发函数为例，如下所示。

如果想要在元素中调用Vue实例中的方法，需要使用v-on指令进行绑定，v-on指令的使用会在后面的章节中详细介绍；如果在Vue实例中调用methods中定义的方法，可以直接使用this调用。但是需要注意，this的作用域可能会影响方法的调用结果。Vue实例12模板语法3条件渲染4列表渲染5计算属性-computed6侦听器-watch7数据绑定8事件处理9案例：图书管理页面模板语法1．模板语法介绍模板语法最初是服务端用于实现动态HTML页面的，它通过简单的模板语法格式将后端数据传递到HTML页面中进行数据动态展示。随着前端技术的发展，前端也开始使用模板语法进行页面渲染，将模板和数据通过前端渲染为静态HTML页面。模板语法用于定义和生成文本、代码或其他数据的模板。它允许在模板中插入占位符或变量，并根据需要进行替换或填充内容。借助于模板语法可以实现变量的插值、使用循环结构来重复生成一段模板内容、使用条件语句根据条件的真假来生成不同的模板内容等功能。模板语法的具体细节取决于所使用的模板引擎或框架。不同的模板引擎可能有不同的语法和功能。常见的模板语法有：Mustache、Handlebars、Vue模板语法、React的JSX模板语法等。Mustache是一种简单且易于学习的模板语法，被广泛应用于前端开发。它使用双大括号{{}}来标记变量插值，例如：Hello,{{name}}!。在渲染模板时，这些标记会被实际的变量值替换。Handlebars是基于Mustache的模板引擎，提供了更多功能和灵活性。它支持使用{{}}进行变量插值，并提供了更复杂的语法，如条件语句和循环。例如，使用{{#ifcondition}}...{{else}}...{{/if}}来实现条件语句。模板语法Vue中使用了基于HTML的模板语法，允许开发者声明式地将DOM绑定至底层Vue实例数据。Vue模板语法不仅支持{{}}进行变量插值，它还引入了指令，用于处理更复杂的逻辑。所有Vue的模板都是合法的HTML，能被所有遵循规范的浏览器和HTML解析器解析。在底层的实现上，Vue将模板编译成虚拟DOM渲染函数（在章节6.5中介绍）。结合它的响应系统，Vue能够智能地计算出最少需要重新渲染多少组件，并把DOM操作次数减到最少，大大提高了渲染的效率。Vue中的模板主要应用有模板插值、模板表达式和模板指令；

模板语法2．模板插值Vue模板中变量的插值方式支持文本插值、原始HTML插值和Attribute属性绑定；文本插值文本插值使用类似于Mustache”的语法({{}}),双大括号中可以直接绑定Vuedata函数中的变量，同时每次data对象中变量更改时它也会同步更新，从而实现数据的动态展示。如下图代码所示。

模板语法原始HTML插值双大括号会将数据解释为普通文本，而非HTML代码，有的时候需要把data中的数据解析为HTML代码显示，就需要使用v-html指令来完成，v-html可以直接当成标签的属性使用，使用v-html指令绑定带HTML标签的内容时不需要使用

{{}}，如下图代码所示。

模板语法Attribute属性绑定在Vue中，插值语法{{}}只能用于模板中的文本内容，不能直接作用于HTML标签属性上。如果想要让属性也像文本一样可以动态插值，可以使用指令v-bind。v-bind可以动态地绑定一个或多个attribute,其格式为“v-bind:属性”。当使用v-bind绑定一个属性时，可以使用冒号(:)代替缩写方式。

上述代码中，不管是v-bind:hidden还是:hidden,都可以绑定hidden属性可以实现标签的显示和隐藏的动态变化。如果属性要动态绑定多个值，那么v-bind不需要带参数直接绑定一个JSON对象即可。模板语法上述代码中，如果v-bind绑定的JSON对象值是null或者undefined，那么该attribute将会从渲染的元素上移除。模板语法3．模板表达式在Vue中，模板语法同样支持完整的JavaScript表达式的使用。可以在模板中使用算术运算符、三元运算符、以及有限的全局对象(如Math、String、Date等)的方法调用等。这些表达式可以在模板中直接使用，无需使用双大括号或v-bind指令来绑定它们。

代码中，`list-${id}`表示id为动态值拼接表达式，在表达式中如果要使用data的变量需要使用“${变量名}”的格式。模板语法值得注意的是，每个模板绑定仅支持单一表达式，也就是一段能够被求值的JavaScript代码，而不能像写JavaScript的函数一样写多段的处理并且函数的处理还不一定有值返回。如果需要对属性进行逻辑处理，模板中支持调用函数来进行处理。模板语法4．模板指令在Vue中，带有v-前缀的属性被称为指令（Directives）。指令用于为元素提供特殊的行为，例如控制元素的显示、隐藏、样式等。指令属性的值是一个表达式，可以是任意的JavaScript表达式或过滤器。当表达式的值发生变化时，指令会响应式地作用于DOM，从而使DOM的状态随之更新。如程序清单2-7中的<divv-bind:hidden="visible">就是通过控制表达式visible响应DOM来控制标签的显示和隐藏。Vue中定义了很多指令，每个指令都有其特殊含义。在前两个小节中，我们已经介绍了‘v-html’和‘v-bind’指令，它们分别用于插入HTML代码和属性的绑定。此外，Vue中的一些指令还可以接收一个“参数”，在指令名称之后以冒号表示。例如，‘v-bind:hidden’就是一个带有参数的指令。在后续章节中，我们将详细介绍更多的指令以及它们更详细的使用。Vue实例12模板语法3条件渲染4列表渲染5计算属性-computed6侦听器-watch7数据绑定8事件处理9案例：图书管理页面条件渲染在日常开发中，我们经常会遇到需要按需加载DOM元素的情况。例如，在多个登录方式的页面中，如果选择了手机验证码登录，就会显示输入手机号码获取验证码的布局；而选择账号密码登录，则会显示账号密码输入框的布局等场景。在Vue中，可以使用v-if、v-else、v-else-if和v-show指令来实现这样的按条件渲染场景；接下来，我们将详细介绍这些指令的使用方法。1．v-if条件渲染

v-if

v-if指令可以对DOM进行条件性地渲染，指令的表达式返回true时元素才会被渲染。在代码中，v-if指令只有在isPhone为true时才会渲染id为phoneLogin的div元素。如果isPhone为false,则该元素不会被渲染显示。通过浏览器的开发者工具(按F12),我们可以在“Elements”标签下看到，当isPhone为false时，HTML源代码中并没有phoneLogin的div元素。条件渲染

v-else

Vue同样提供了v-else指令可以为v-if添加一个“else区块”，表示在v-if不成立的情况下需要渲染的元素。需要注意的是，v-else元素必须跟在一个v-if或者v-else-if元素后面才会有效,运行结果如图所示。条件渲染

v-else-if

如果我们需要根据多个条件按需加载DOM元素，可以使用v-else-if指令。该指令可以连续多次重复使用以实现多条件的按需渲染。在实际开发中，很多服务端返回的数据是数值类型，这时候需要根据数值判断要显示的内容。同样的v-else-if的元素也必须跟在一个v-if或一个v-else-if的后面。温馨提示在使用的时候，如果没有v-else元素也可以使用多个v-if来代替v-else-if，它们的不一样之处在于如果使用多个v-if即使第一个v-if符合条件后面的依然也需要进行判断，而v-else-if则不会。条件渲染2．v-show

除了v-if指令，还可以使用v-show指令来按条件显示DOM元素。其用法和v-if基本上一致。与v-if指令不同的是，v-show指令是控制元素的隐藏和显示，而不是将其从页面中删除或添加，v-show和v-if的具体区别如下：v-if是按照表达式结果真假是否选择渲染，而v-show不管表达式结果真假都进行渲染，然后通过CSSdisplay属性进行切换显示和隐藏。v-if是真正意义的按条件渲染，它在切换时，条件区块内的事件监听会正常执行，子组件也会被销毁与重建。从开销来说，v-if有更高的切换开销，而v-show有更高的初始渲染开销。如果需要频繁切换显示和隐藏，使用v-show较好；如果在运行时绑定条件很少改变，则v-if会更合适。v-if有更好的结构结合，支持与v-else-if和v-else结合,而v-show不支持。v-if支持在template标签上使用，v-show也不支持。Vue实例12模板语法3条件渲染4列表渲染5计算属性-computed6侦听器-watch7数据绑定8事件处理9案例：图书管理页面列表渲染在网页开发中，我们经常需要展示一些列表结构，如商品列表、热门新闻列表、用户列表等。这些列表中的元素结构都是相同的，只是数据有所不同。Vue提供了v-for指令来实现列表数据的渲染。v-for指令表达式可以是一个Array数组、一个Object对象、一个number数字或一个String字符串。v-for通过对数组元素或对象属性进行遍历循环，然后将遍历的值渲染到元素结构上，v-for的语法格式如下所示：v-for=”(alias,index)initems”

其中items为循环的数组或对象，alias为循环数组迭代时的元素别名，index为迭代时的下标。如果迭代时不需要下标，则可以直接写成下面格式：

上述使用中，in关键字也可以使用of来替代。v-for=”aliasinitems”列表渲染1．遍历数组

v-for在开发中最常用的就是遍历数组渲染数据了，我们在data函数中定义一个数组对象bookList并使用v-for进行遍历显示。上述代码中，bookList为字符串数组，也可以是JSON对象数组。列表渲染列表渲染2．遍历对象

v-for也可以用来遍历一个对象的所有属性。遍历的顺序会基于对该对象调用Object.keys()的返回值来决定，Object.keys()用于获取对象的所有可枚举属性的名称。v-for使用的三种格式如下：其中key为迭代对象的属性名，value为迭代的属性值，index为索引下标值。这里在data中定义一个图书对象book来进行遍历。v-for=”valueinobject”v-for=”(value,key)inobject”v-for=”(value,key,index)inobject”列表渲染3．使用范围值

v-for的表达式结果也可以是一个number整数值。当是整数值时，v-for会将该模板基于1...n的取值范围重复多次，相当于JavaScript代码中按照次数循环的结构。4．v-for和v-if同时使用问题

需要注意的是，v-for和v-if要避免一起使用在同一节点上。如果同时使用在同一节点上，v-if比v-for的优先级更高，这意味着v-if的条件将无法访问到v-for作用域内定义的变量别名就会报错“Cannotreadpropertiesofundefined”。列表渲染

如果想要解决这个问题，其实我们只需要在外包装一层<template>标签即可。在<template>上使用v-for指令，然后里层使用v-if按需渲染即可，这样也更加明显已读。列表渲染5．通过key管理状态

通过v-for渲染的元素列表，当数据项发生了变化，DOM元素也需要进行更新。Vue默认按照“就地更新”（in-placepatchstrategy）的策略来更新；就地更新策略是指在更新组件时，尽可能地复用已有的DOM元素，而不是替换整个DOM树，这个策略可以提高组件的渲染效率和性能。在使用v-for指令时，如果想要快速复用或重新排序现有元素，最好为每个元素对应的块提供一个唯一的key属性。这样Vue就可以通过这个key属性轻松地跟踪到每个节点。

key属性是通过v-bind:key进行绑定的，当然也可以使用v-bind的缩写方式“:key”,Vue中推荐我们在使用v-for的时候最好都添加一个key属性，key属性的值最好是一个基础类型，例如：字符串或number类型。列表渲染6．数组变化侦测

当我们使用v-for对数组对象进行列表渲染的时候，Vue除了可以绑定数组对象实现响应式渲染外，还可以侦听到响应式数组的变更方法，并在它们被调用时触发相关的更新。当然不是所有数组的方法都可以被侦听并更新的，支持变更方法包括：push()、pop()、shift()、unshift()、splice()、sort()、reverse()。下面我们以sort排序方法为例来看下数组的变化更新。

代码中，sort方法中的函数为排序时元素的比较规则。通过运行代码，点击升序按钮，发现图书按照价格升序进行排列了，也就是说数组的sort函数会被Vue侦听到，并把排序后的数组元素响应到页面上。Vue实例12模板语法3条件渲染4列表渲染5计算属性-computed6侦听器-watch7数据绑定8事件处理9案例：图书管理页面计算属性-computed通常情况下，data函数中的对象属性可以非常方便地进行声明式渲染，但有些情况下需要对属性进行处理才能进行渲染显示。虽然可以在模板中（双大括号中）编写一些逻辑来处理数据，但这样会导致模板变得臃肿，甚至需要多次重复处理相同的逻辑，降低性能且难以维护。针对这种情况，Vue提供了计算属性来解决问题。1．计算属性的基本使用

简单来说，如果数据变更的逻辑比较复杂，就应该将其放在计算属性中处理。这样可以避免在模板中使用复杂的条件语句和副作用函数，使代码更加简洁易懂。

想要使用计算属性，需要在应用实例中添加computed选项，然后在computed中定义属性计算的方法，这里我们以购物满200减30为例。计算属性-computed上述代码中，定义了一个计算属性discountPrice，当price属性改变后可以看到discountPrice也随之更新，并且计算属性discountPrice跟data中的属性在模板中的使用方式是一样的。计算属性-computed2．计算属性vs方法调用

对于之前的案例的效果同样也可以使用普通方法实现。在模板中使用changePrice方法也可以达到一样的效果。计算属性-computed计算属性和使用方法不同之处在于计算属性的值会基于其响应式依赖被缓存。这意味着使用计算属性discountPrice只要price没有发生变化，无论调用多少次discountPrice都会立即返回先前的计算结果，而不会重复执行getter函数进行重新计算。但是如果是调用的方法的话每次访问都会进行逻辑计算，这样就非常的消耗性能。计算属性-computed3．可写计算属性

计算属性默认是只读的，如果想要修改计算属性值就需要提供一个“可写”的属性。Vue中通过在computed中声明getter和setter方法来控制计算属性的读和写。Vue实例12模板语法3条件渲染4列表渲染5计算属性-computed6侦听器-watch7数据绑定8事件处理9案例：图书管理页面侦听器-watch计算属性可以实现响应式属性逻辑处理后的结果。但是，如果我们需要监听一个属性的变化并执行其他的逻辑处理呢，例如检测文章中的不文明用语等场景，这时可以使用侦听器来实现。1．侦听器的基本使用

在Vue组件中，可以通过watch选项来监听特定属性的变化。当被监听的属性发生变化时，侦听器会被触发执行，从而可以执行一些逻辑或者发起请求等操作。这里以文章中不文明文字检测为例。

代码中，对content属性进行侦听，在watch中content函数的参数中，newValue表示要修改的新值，oldValue表示之前的值，通过对newValue内容的检测就可以达到不文明文字检测的目的。侦听器-watch2．深层侦听器和回调侦听器深层次侦听器

默认watch侦听的属性只有在重新赋值的时候才会被侦听到，如果侦听的属性是嵌套的属性如对象或者数组，则无法侦听到，所以默认watch被称为浅层次侦听器。如果想要侦听嵌套属性中内层属性的变化就需要使用深层次侦听器了，想使用深层次侦听器只需要在侦听的属性上添加deep属性为true即可。侦听器-watch回调侦听器

默认侦听器回调函数是在数据发生了变化之后才触发，也就是说赖侦听机制。那如果希望在创建侦听器的时候就立马执行呢，比如默认搜索的内容为空，当内容为空的时候希望加载初始的数据，这时就需要一个即时回调的侦听器。即时回调侦听器实现非常的简单，只需要在侦听的属性中跟添加deep一样添加一个immediate属性并设置其值为true，即可实现在创建侦听器的时候立马执行一次侦听。当更改了侦听的属性数据状态时，可能会同时触发Vue组件更新和侦听器回调，默认情况下侦听器会在Vue组件更新之前触发回调，这样在侦听器中只能获取到Vue更新之前的DOM状态，如果想要DOM更新同时侦听器被回调呢？在Vue3中watch中的每个属性提供了flush属性可以修改回调的触发时机，flush有三个取值如下：pre：默认值，在DOM更新前触发侦听器回调；pre的好处就是在DOM更新前数据也变化，然后把这些变化的数据和DOM一起更新，提高性能。post：在DOM更新后触发侦听器回调；如果需要在侦听器中获取更新的DOM进行操作，那么就选择post。sync：侦听器回调和DOM更新同时触发。侦听器-watch3．使用$watch()API创建侦听和停止监听在Vue中除了可以在组件内部声明watch属性实现侦听器外，还可以通过组件实例的$watch()方法来创建一个侦听器。默认用watch选项或者$watch()实例方法声明的侦听器，都会在宿主组件卸载时自动停止，但少数情况下也会主动停止侦听属性，这时候可以调用$watch()返回的函数即可停止侦听。代码中，在$watch()API中第一个参数是侦听的属性，第二参数是回调函数，第三个参数是侦听器的属性配置。侦听器-watch4．侦听器vs计算属性

侦听器和计算属性都可以实现观测到一个响应数据状态的变化，它们的不同之处有以下几点：计算属性是响应数据变化时执行操作，并计算出结果作为返回值更新DOM。而侦听器可以在DOM更新前后或者更新时都检测到变化进行响应其他的变化，不需要有返回值。计算属性中不能执行异步操作，而侦听器中可以执行异步操作。计算属性有响应式数据的缓存，当数据未发送变化时使用的是缓存数据不会重新计算。计算属性特别适合当多个数据发送变化而影响一个数据的场景；而侦听器比较适合的是当一个数据发送变化影响了其他数据变化的场景。Vue实例12模板语法3条件渲染4列表渲染5计算属性-computed6侦听器-watch7数据绑定8事件处理9案例：图书管理页面数据绑定Vue中数据绑定是最常见的应用之一，它可以在模板中使用，也可以在Class属性绑定、CSS样式绑定和表单数据的双向绑定中使用。下面我们来看一下Vue中数据绑定的使用。1．Class属性绑定在Vue中，class属性的绑定可以帮助开发者实现元素样式的变换，例如选中样式和非选中样式切换、显示和隐藏切换等场景。属性的绑定可以使用v-bind指令或者其缩写形式":"来实现。在class属性绑定中，其绑定的值可以为普通值、JSON对象或JSON数组。这些绑定的值也可以是通过计算属性返回的结果。绑定普通值class属性可以直接绑定一个普通的字符串className变量，通过className值的改变从而达到改变样式等目的。数据绑定数据绑定绑定对象Vue支持动态绑定class属性，通过传递一个对象来实现动态切换class，其中对象的属性控制class是否绑定，属性值为true时绑定，false时不绑定。如果对象中有多个字段，只要该字段值为true就会绑定该字段对应的class。v-bind:class或

:class指令可以和一般的class属性共存。如果绑定对象的属性中带有特殊字符命名最好使用单引号括起来。数据绑定绑定数组Class动态多属性的绑定也可以通过绑定数组来实现，并且如果数组中的某个class元素是有条件的渲染，也可以使用三元表达式来渲染。数据绑定2．内联样式绑定内联样式绑定其实就是通过HTML元素的style属性进行绑定，使用v-bind:style或:style绑定，绑定的期望值是JavaScript对象或对象数组。对象中的属性推荐使用camelCase驼峰命名（如：fontSize），也支持kebab-cased形式的写法（如：font-size）；如果绑定的是数组，数组中对象会被合并后渲染到同一元素上。

当在:style中使用了需要浏览器特殊前缀的CSS属性时，例如：webkit-transition、-moz-transition等，Vue会根据检查当前使用浏览器的支持自动添加相应的前缀。数据绑定3．表单数据的双向绑定在前端开发中，表单元素是用户与网站进行数据交互最常见的元素之一。无论是各种输入框(文本、密码等)、单选和复选框、列表等，都可以通过Vue中的v-model指令实现数据双向绑定。这意味着，当用户通过输入内容更新DOM时，与之绑定的数据也会自动更新；反之，当绑定的数据发生变化时，这些表单元素也会自动更新。文本输入框和多行输入框当文本类型的<input>或<textarea>绑定时，v-model绑定的是value属性，并侦听其input输入事件，从而实现数据的双向绑定。数据绑定运行上述代码，当在文本框中输入内容后，可以看到userName和content属性值也及时得到了更新。通过vue实例或devtools工具修改userName属性也可以达到同样的效果。温馨提示在<textarea></textarea>标签中是不支持模板插值的，插值使用v-model绑定。数据绑定单选框和复选框对于checkbox和radio类型的表单元素，v-model绑定的是checked属性并侦听change事件。数据绑定选择器当绑定的是select选择器时，绑定的是value属性值并侦听change选中事件。select选择器因为支持单选和多选操作，所以v-model绑定的value值可以是单个值或者数组。数据绑定v-model修饰符v-model指令提供了三个修饰符以帮助开发者更好的使用表单绑定，修饰符及其说明如表所示。修饰符说明.lazy懒更新，默认v-model是在input事件触发就更新数据，.lazy修饰符可以改为在change事件触发的时候更新数据。.number将输入的内容转换为数字，内部使用parseFloat()进行转换，如果无法转换则返回原内容，如果是type="number"则自动启用该修饰符。.trim去除输入内容两端的空格。修饰符可以直接使用在v-model后面，如：v-model.number=“age”。Vue实例12模板语法3条件渲染4列表渲染5计算属性-computed6侦听器-watch7数据绑定8事件处理9案例：图书管理页面事件处理在Vue中，页面中的大多数用户交互都需要使用操作事件进行处理，例如点击按钮、滑动内容、按回车键等。Vue不仅提供了简单灵活的事件绑定方式和处理机制，还扩展了事件修饰符和按键修饰符的使用，大大方便了用户交互的处理。1．事件的监听和处理Vue提供了v-on指令，可以简单地绑定DOM事件并在事件触发时执行对应的JavaScript代码操作。使用v-on指令时，可以直接在指令后面添加需要绑定的事件类型，如前面章节2.1中点击按钮实现数字的加减。v-on指令通常使用缩写形式‘@’来简化代码，例如：@click="check"等同于v-on:click="check"。事件的处理通常有两种方式：一种是在事件触发的时候直接执行简单的JavaScript代码。事件处理值得注意的是在事件中不能直接调用类似alert的代码，因为@click=""中的代码会默认是Vue实例对象的一个方法，会在js中寻找Vue实例的alert方法，显然并没有定义，因此会报错，如图所示。如果需要调用类似alert的代码可以将其放到自定义函数中再调用即可。事件处理

另一种处理方式是调用方法函数。可以直接使用方法名绑定处理，也可以通过调用方法并传递参数来处理。事件处理

如果方法调用的时候需要使用事件对象本身，那么在调用方法的时候直接传入$event即可传入事件对象使用。在Vue中也支持调用多个函数进行处理事件的使用。事件处理2．事件修饰符在处理事件时，经常需要解决一些除了必要处理代码逻辑以外的问题。例如，当点击子元素时，由于事件会向上冒泡传递，可能会导致父元素的事件也被触发；点击超链接时，除了触发点击事件外，还可能触发默认的链接跳转；有时还需要确保事件只触发一次等场景。虽然可以直接在调用的方法内执行一些JavaScript代码来解决上述问题，但如果事件处理的方法能够更专注于数据逻辑而不用去处理DOM事件的细节，那会更好。为了解决这个问题，Vue为v-on提供了事件修饰符,如表所示。修饰符说明.stop阻止事件的冒泡.prevent阻止事件的默认行为.self仅当event.target是元素本身时才会触发事件.capture事件的捕获，事件捕获的执行顺序是由父到子跟事件冒泡相反.once事件只触发一次.passive不阻止事件的默认行为，一般用于触摸事件的监听用来改善移动端设备的滚屏性能。事件处理

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

温馨提示

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

最新文档

评论

0/150

提交评论