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

我是Sam9029，一个前端

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

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

---

本来说，为了这个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>Usernamelabel>
  <input placeholder="Enter your username" key="username-input">
template>
<template v-else>
  <label>Emaillabel>
  <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'
}

注意 不推荐同时使用

不推荐同时在一个元素上使用 v-if 和 v-for。但是当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。

---

我是Sam9029，一个前端

文章若有错误，敬请指正

**‍‍恭喜你，都看到这了，求收藏，求评论，求一个大大的赞！不过分吧**

注意 不推荐同时使用**

不推荐同时在一个元素上使用 v-if 和 v-for。但是当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。

---

我是Sam9029，一个前端

文章若有错误，敬请指正

**‍‍恭喜你，都看到这了，求收藏，求评论，求一个大大的赞！不过分吧**

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