VUE 常见指令

1、常见指令

1.1 v-text 用来设置当前元素的文本内容，相当于innerText

注意：会覆盖元素的默认内容

1.2 v-html 更新DOM对象的textContent

注意：不要使用v-html展示用户输入的内容

1.3 v-bind 为html元素绑定属性

1.4 v-on 为元素绑定事件

事件修饰符：

.stop 阻止冒泡，调用 event.stopPropagetion()

.prevent 阻止默认行为，调用 event.preventDefault()

.capture 添加事件监听器时使用事件 捕获 模式

.self 只当事件在该元素本身触发时，才会触发事件

.once 事件只触发一次

.native 给组件绑定原生事件

...



...

按键修饰符:

.enter 回车键

.tab tab键

.delete (捕获“删除”和“退格”键)

.esc esc键

.space back Space 键

.up 上键

.down 下键

.left 左键

.right 右键

可以通过全局 config.keyCodes 对象自定义按键修饰符别名：

// 可以使用 `v-on:keyup.f1`   ==》   键盘码为 112
Vue.config.keyCodes.f1 = 112

系统修饰键:

.ctrl ctrl键

.alt alt键

.shift shift键

.meta 系统键，window键

注意：

在 Mac 系统键盘上，meta 对应 command 键 (⌘)。
在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。
在 Sun 操作系统键盘上，meta 对应实心宝石键 (◆)。
在其他特定键盘上，尤其在 MIT 和 Lisp 机器的键盘、以及其后继产品，比如 Knight 键盘、space-cadet 键盘，meta 被标记为“META”。在 Symbolics 键盘上，meta 被标记为“META”或者“Meta”





Do something

鼠标按钮修饰符

.left 鼠标左键

.right 鼠标右键

.middle 鼠标中间键

1.5 v-model 在表单元素上创建双向数据[监听用户的输入事件以更新数据]

问题：关于在v-for循环是v-model的使用
答：在v-model中写一个数组arr[$index]

1.6 v-for 基于源数据多次渲染元素或模板块

1.7 key属性

使用 v-for 的时候提供 key 属性，以获得性能提升
使用 key, Vue 会基于 key 的变化重新排列元素顺序，且会移除 key 不存在的元素

1.8 v-if 和 v-show

v-if 用来控制元素的展示和隐藏，如果没有展示，那么结构不会出现在HTML中

注意：v-else 和 v-if 是一个组合，重甲不允许插入其他元素

v-show 用来控制元素的展示和隐藏，通过css的display属性来控制的

注意：需要进行频繁的展示和隐藏，此时使用 v-show ，因为v-if会删除和新建DOM元素，这个操作的代价很高

1.9 v-pre 用来跳过我们指定该属性所在的元素的内容，不解析该这段内容中的指令和表达式，从而提高渲染的性能

1.10 v-once 只渲染元素和组件一次。

1.11v-clock 通过添加 v-cloak 指令，配合[v-cloak]{display:none;} 避免了页面闪烁

原理： vue会在编译页面结束以后，将页面中的所有的 v-clock 指令，从页面中删除

1.12 keep-alive 把切换出去的组件保留在内存中，可以保留它的状态或者避免重新渲染