DispatcherServlet初始化之遍历HandlerMethod-CFANZ编程社区

文章目录

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

欸！

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

基础指令

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

以下是一些常用指令：

v-show
v-if
v-else
v-else-if
v-for
v-on
v-bind
v-model

不常用

v-slot (写组件的时候会常常用到)
v-text
v-html
v-pre
v-cloak
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

循环-渲染数组

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

<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'
}