【菜鸡学艺--Vue2--002】[基础指令[条件与循环]

🦖我是Sam9029，一个前端

Sam9029的CSDN博客主页:Sam9029的博客_CSDN博客-JS学习,CSS学习,Vue-2领域博主

**🐱‍🐉🐱‍🐉恭喜你，若此文你认为写的不错，不要吝啬你的赞扬，求收藏，求评论，求一个大大的赞！👍**

文章目录

@[toc]
基础指令
条件与循环
条件-[v-if](https://v2.cn.vuejs.org/v2/api/#v-if)
[用 `key` 管理可复用的元素](https://v2.cn.vuejs.org/v2/guide/conditional.html#用-key-管理可复用的元素)-建议直接看文档

循环-[v-for](https://v2.cn.vuejs.org/v2/api/#v-for)
使用v-for时注意绑定 key
循环-渲染数组
循环-渲染对象

注意不推荐同时使用

本来说，为了这个Vue系列同时写一个，可运行的vue代码项目模板的，最近隔一周有怠惰了，上次001都是周一周二的事，今天都周日了

欸！

目前看来vue代码项目模板 要往后放一放了，系列才写到002

基础指令

在vue框架中，提供了许多的基础指令，其作用类似与在原生的html元素的身上，写属性值或者绑定事件，同时也做了扩展

以下是一些常用指令：

v-show

作用类似与 css 属性 display 控制隐现；
v-if

作用是控制元素节点的渲染与否；

v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
v-else

一定配合 v-if 使用
v-else-if

一定配合 v-if 使用
v-for

循环渲染元素节点

v-on

事件绑定；可缩写为 @

<div v-on:click='handleClick'></div>
<div @click='handleClick'></div>

v-bind

（数据）变量绑定；可缩写为 :
<img v-bind:src='url'></img> //在data中定义url
<img :src='url'></img>

v-model
注意：一般实在表单元素（input、select、、、）身上实现双向数据响应
```
<input v-model='inputVal'></input>
// data 中定义的 inputVal 将会实时的获得 页面 input 元素中输入的值
```
关于v-model 的用法是需要特别注意的，不同的表单元素绑定时，其变量类型是不一样的，详情参阅文档：表单输入绑定-基础用法

不常用

v-slot (写组件的时候会常常用到)
v-text
更新元素的 textContent。如果要更新部分的 textContent，需要使用 {{ Mustache }} 插值。
```
<span v-text="msg"></span>

<span>{{msg}}</span>
```
v-html

更新元素的 innerHTML。注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译。如果试图使用 v-html 组合模板，可以重新考虑是否通过使用组件来替代。
v-pre

(感觉可用于优化) 跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。
v-cloak

这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

说的太官方了：大概使用场景就是解决页面初始渲染时的元素闪动
v-once

只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

条件与循环

很好理解，编程语言的思维来处理HTML标签

条件：比如在符合条件的情况下才渲染某一个节点

循环：比如需要的创建多个重复的html标签元素，只是标签中的内容节点展示的值不一样时，就可以使用循环

实现上诉效果的指令如下：

v-if
v-else
v-else-if
v-for

条件-v-if

<h1 v-if="awesome">Vue is awesome!</h1> // data中定义awesome
<h1 v-else>Oh no 😢</h1>// awesome 为 真值 truthy 时渲染 <h1>Vue is awesome!</h1>
// awesome 为 假值 false 时渲染 <h1 v-else>Oh no 😢</h1>

用 `key` 管理可复用的元素-建议直接看文档

Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这样也不总是符合实际需求，所以 Vue 为你提供了一种方式来表达“这两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的 key attribute 即可：

<template v-if="loginType === 'username'"><label>Username</label><input placeholder="Enter your username" key="username-input">
</template>
<template v-else><label>Email</label><input placeholder="Enter your email address" key="email-input">
</template>

循环-v-for

比如，我们需要很多个 li 元素时

<ul id="example-1"><li v-for="item in 10" :key="item.message"> // 将渲染10个 li元素{{ item.message }}</li>
</ul>

使用v-for时注意绑定 key

建议尽可能在使用 v-for 时提供 key attribute，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。

不要使用对象或数组之类的非基本类型值作为 v-for 的 key。请用字符串或数值类型的值。

循环-渲染数组

第二个的参数为每个属性的值
第三个参数作为索引：

<ul id="example-2"><li v-for="(item, index) in items">{{ parentMessage }} - {{ index }} - {{ item.message }}</li>
</ul>items: [{ message: 'Foo' },{ message: 'Bar' }
]

循环-渲染对象

第二个的参数为每个属性的值
第二个的参数为 property 名称 (也就是键名)
第三个参数作为索引：

<ul id="v-for-object" class="demo"><li v-for="value in object">{{ value }}</li>
</ul>object: {title: 'How to do lists in Vue',author: 'Jane Doe',publishedAt: '2016-04-10'
}