Vue study - directive

vuejs_directive.md

指令

v-if, v-bind... ..

指令参数

<a v-bind:href="url"></a>

修饰符 (Modifiers)

<form v-on:submit.prevent="onSubmit"></form>

.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()

缩写

<!-- v-bind:href的缩写 -->
<a :href="url"></a>

<!-- v-on:click的缩写 -->
<a @click="doSomething"></a>

条件指令 v-if / v-else-if/ v-else

<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-show

<h1 v-show="ok">Hello!</h1>

和v-if比较：

• 带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 是简单地切换元素的 CSS 属性 display 。
• 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件不太可能改变，则使用 v-if 较好。
• v-show 不支持 <template> 语法，也不支持 v-else。

v-for

<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>

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

<div v-for="item of items"></div>

<div v-for="(value, key, index) in object">
  {{ index }}. {{ key }}: {{ value }}
</div>

<div v-for="item in items" :key="item.id">
  <!-- 内容 -->
</div>

关于显示顺序

• 在遍历对象时，是按 Object.keys() 的结果遍历，但是不能保证它的结果在不同的 JavaScript 引擎下是一致的。
• 当 Vue.js 用 v-for 更新之前渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序已改变，Vue 不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。所以** 建议在使用 v-for 时提供 key **