Vue的v-家族以及Set()，Map() ｜青训营主要写关于Vue的v-标签以及Set()与Map()的内容，其中关

Map()的使用简述

Map 对象保存键值对，并且能够记住键的原始插入顺序。任何值（对象或者基本类型）都可以作为一个键或一个值。

Map 对象是键值对的集合。Map 中的一个键只能出现一次；它在 Map 的集合中是独一无二的。Map 对象按键值对迭代——一个 for...of循环在每次迭代后会返回一个形式为 [key，value] 的数组。迭代按插入顺序进行，即键值对按 set()方法首次插入到集合中的顺序（也就是说，当调用 set() 时，map 中没有具有相同值的键）进行迭代。

const m = new Map();

m.set('name', '张三'); 
m.set(1, '一');

m.get('name'); // "张三"
m.get(1); // "一"

m.has('name'); // true
m.delete(1); 
m.has(1); // false

Set()的使用简述

Set是一个值的集合,集合中的元素是唯一的。它可以高效地添加、删除、查找元素。

const s = new Set();

s.add('foo');
s.add('bar');
s.add('foo'); 

s.has('foo'); // true
s.size; // 2

s.delete('foo');
s.has('foo'); // false

Map的键可以是任意类型,Set的元素只能是值

Attribute 绑定(v-bind)

v-bind简写:

v-bind可以绑定什么？

事实上，v-bind是属性绑定，包含属性的都可以绑定，例如：

<img v-bind:src="imageSrc" />
<div :class="{ red: isRed }"></div>
<div :style="{ fontSize: size + 'px' }"></div>
特殊: <div :id="dynamicId"></div>
特殊: <div :key="item.id"></div>

其他用法

绑定布尔型Attribute <button :disabled="isButtonDisabled">Button</button>

动态绑定多个元素

const objectOfAttrs = {
  id: 'container',
  class: 'wrapper'
}

<div v-bind="objectOfAttrs"></div>

v-on事件监听器

给元素绑定事件监听器。缩写：@

修饰符
- .stop - 调用 event.stopPropagation()。
- .prevent - 调用 event.preventDefault()。
- .capture - 在捕获模式添加事件监听器。
- .self - 只有事件从元素本身发出才触发处理函数。
- .{keyAlias} - 只在某些按键下触发处理函数。
- .once - 最多触发一次处理函数。
- .left - 只在鼠标左键事件触发处理函数。
- .right - 只在鼠标右键事件触发处理函数。
- .middle - 只在鼠标中键事件触发处理函数。
- .passive - 通过 { passive: true } 附加一个 DOM 事件。

示例：<button v-on:click="doThis"></button>

v-model

在表单输入元素或组件上创建双向绑定。

使用范围

<input> <select> <textarea> components

其他v-家族

除去上述的v-bind与v-html与v-on还有其他

v-show: 基于表达式值的真假性，来改变元素的可见性。
v-if: 基于表达式值的真假性，来条件性地渲染元素或者模板片段。
v-else: 为 v-if 添加一个“else 区块”。
v-else-if: 相应于 v-if 的“else if 区块”。
v-for: 基于原始数据多次渲染元素或模板块。<div v-for="item in items">{{ item.text }}</div>
v-once: 仅渲染元素和组件一次，并跳过之后的更新。

Vue的v-家族以及Set()，Map() ｜ 青训营