Vue基本指令（超详细介绍），网页前端开发自学还是培训

用户57923016702
30 阅读9分钟

我叫!!!，今年000岁

之后我们在slow 3G的条件下运行，我们可以看到没有出现插值闪烁的现象，在对应位置显示了其它的信息（这时我们设置的默认数据，如果没有默认数据，会显示空白）。

在这里插入图片描述

两者比较：

  • v-text：将数据输出到元素内部，如果输出的数据有HTML代码，会作为普通文本输出

  • v-html：将数据输出到元素内部，如果输出的数据有HTML代码，会被渲染

我叫!!!，今年000岁

我叫!!!，今年000岁

运行结果：

在这里插入图片描述

v-model实现双向绑定

刚才的v-text和v-html可以看做是单向绑定，数据影响了视图渲染，但是反过来就不行。接下来学习的v-model是双向绑定，视图（View）和模型（Model）之间会互相影响。

既然是双向绑定，一定是在视图中可以修改数据，这样就限定了视图的元素类型。目前v-model的可使用元素有：

  • input

  • select

  • textarea

  • checkbox

  • radio

  • components（Vue中的自定义组件）

测试代码(checkbox)：

Title

Java

Python

PHP

C++

C#

你选择了：{{language.join(',')}}

  • 多个CheckBox对应一个model时，model的类型是一个数组，单个checkbox值默认是boolean类型

  • radio对应的值是input的value值

  • text 和textarea 默认对应的model是字符串

  • select单选对应字符串，多选对应也是数组

效果：

在这里插入图片描述

v-on绑定事件

基本用法：v-on指令用于给页面元素绑定事件

语法：v-on:事件名="js片段或函数名"，之前已经用过了，另外，事件绑定是可以简写的，例如v-on:click= ‘add’ 可以简写为 @click='add’

示例：

Title

<button @click="num++">增加一个

<button @click="decrement">减少一个

{{num}}

效果：

在这里插入图片描述

事件修饰符：

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。修饰符是由点开头的指令后缀来表示的。

  • .stop ：阻止事件冒泡到父元素

  • .prevent：阻止默认事件发生*

  • .capture：使用事件捕获模式

  • .self：只有元素自身触发事件才执行。（冒泡或捕获的都不执行）

  • .once：只执行一次

测试代码：

Title

<button @contextmenu.prevent="num++">增加一个


<button @contextmenu="decrement()">减少一个


{{num}}

<input @keyup.enter="submit">

<button @click.ctrl="clear">Clear

右键“增加一个”，不会触发默认的浏览器右击事件；右键“减少一个”，会触发默认的浏览器右击事件

按键修饰符：

在监听键盘事件时，我们经常需要检查常见的键值。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：

<input @keyup.enter="submit">

全部的按键别名：

  • .enter (13)

  • .tab

  • .delete (捕获“删除”和“退格”键)

  • .esc

  • .space

  • .up

  • .down

  • .left

  • .right

运行测试：

在这里插入图片描述

组合按钮

可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。

  • .ctrl

  • .alt

  • .shift

例如：

<input @keyup.alt.67="submit()">

<button @click.ctrl="clear">Clear

在这里插入图片描述

v-for遍历数据

遍历数据渲染页面是非常常用的需求，Vue中通过v-for指令来实现。

遍历数组：

语法：v-for="item in items"

  • items：要遍历的数组，需要在vue的data中定义好。

  • item：迭代得到的数组元素的别名

在遍历的过程中，如果我们需要知道数组角标，可以指定第二个参数：

语法：v-for="(item,index) in items"

  • index：迭代到的当前元素索引，从0开始。

示例：

Title

  • {{user.name}} - {{user.gender}} - {{user.age}}

运行结果：

在这里插入图片描述

遍历对象：

v-for除了可以迭代数组，也可以迭代对象。语法基本类似：

v-for="value in object"

v-for="(value,key) in object"

v-for="(value,key,index) in object"

  • 1个参数时，得到的是对象的属性值

  • 2个参数时，第一个是属性值，第二个是属性名

  • 3个参数时，第三个是索引，从0开始

示例：

  • {{index+1}} - {{user.name}} - {{user.gender}} - {{user.age}}

  • {{index + 1}}. {{key}} - {{value}}

效果：

在这里插入图片描述

key

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。

这个功能可以有效的提高渲染的效率。但是要实现这个功能，你需要给Vue一些提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的且唯一的 id。

示例代码：

  • 这里使用了一个特殊语法：:key="" 我们后面会讲到，它可以让你读取vue中的属性，并赋值给key属性

  • 这里我们绑定的key是数组的索引，应该是唯一的

v-if和v-show

v-if，条件判断。当得到结果为true时，所在的元素才会被渲染。 语法：v-if="布尔表达式"

v-show 也是用于根据条件展示元素的选项指令，用法大致一样。

示例：

Title

<button @click="show = !show">按钮


看到我啦？！

看到我啦？！show

效果：

在这里插入图片描述

不同点：（一般使用v-if）

v-if 的元素始终会被渲染并保留在 DOM 中

v-show 只是简单地切换元素的 CSS 属性 display，block为显示，none为隐藏.

与v-for结合:

当v-if和v-for出现在一起时，v-for优先级更高。也就是说，会先遍历，再判断条件。

修改v-for中的案例，添加v-if：

  • {{index + 1}}. {{user.name}} - {{user.gender}} - {{user.age}}

测试：只显示女性用户信息

在这里插入图片描述

v-else

我们可以使用 v-else 指令来表示 v-if 的“else 块”：

使用了 if

使用了 else

v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用：

Title

<button @click="random=Math.random()">点我呀{{random}}

if

if 0.5

if 0.25

else

类似于 v-else，v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。

演示：

在这里插入图片描述

v-bind

html属性不能使用双大括号形式绑定，只能使用v-bind指令。在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

Title

效果：

在这里插入图片描述

在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

绑定class样式：

语法：v-bind:class可以简写为:class

数组语法： (不会使用)

渲染后的效果：（具有active和hasError的样式）

在这里插入图片描述

对象语法： 传给 v-bind:class 一个对象，以动态地切换 class：

上面的语法表示 active 这个 class 存在与否将取决于数据属性 isActive 的 truthiness（所有的值都是真实的，除了false,0,“”,null,undefined和NaN）。

你可以在对象中传入更多属性来动态切换多个 class。此外，v-bind:class 指令也可以与普通的 class 属性共存。如下模板:

v-bind:class="{ active: isActive, 'text-danger': hasError }">

和如下 data：

data: {

isActive: true,

hasError: false

}

结果渲染为：

active样式和text-danger样式的存在与否，取决于isActive和hasError的值。本例中isActive为true，hasError为false，所以active样式存在，text-danger不存在。

最后

推荐一些系统学习的途径和方法。

路线图

每个Web开发人员必备，很权威很齐全的Web开发文档。作为学习辞典使用，可以查询到每个概念、方法、属性的详细解释，注意使用英文关键字搜索。里面的一些 HTML，CSS，HTTP 技术教程也相当不错。

HTML 和 CSS：

html5知识

css基础知识

开源分享：docs.qq.com/doc/DSmRnRG…

avatar
文章
阅读
粉丝