1、常见指令
1.1 v-text 用来设置当前元素的文本内容，相当于innerText
==注意==：会覆盖元素的默认内容
<h1 v-text='msg'></h1>
1.2 v-html 更新DOM对象的textContent
==注意==：不要使用v-html展示用户输入的内容
1.3 v-bind 为html元素绑定属性
<a v-bind:href="url"></a>
<a :href="url"></a>
1.4 v-on 为元素绑定事件
<button v-on:click='fn'></button>
<button @click='fn'></button>
==事件修饰符==：
.stop 阻止冒泡，调用 event.stopPropagetion()
.prevent 阻止默认行为，调用 event.preventDefault()
.capture 添加事件监听器时使用事件 捕获 模式
.self 只当事件在该元素本身触发时，才会触发事件
.once 事件只触发一次
.native 给组件绑定原生事件
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>
==按键修饰符:==
.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”
<!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>
==鼠标按钮修饰符==
.left 鼠标左键
.right 鼠标右键
.middle 鼠标中间键
1.5 v-model 在表单元素上创建双向数据[监听用户的输入事件以更新数据]
<input v-model='message'>
问题：关于在v-for循环是v-model的使用
答：在v-model中写一个数组arr[$index]
1.6 v-for 基于源数据多次渲染元素或模板块
<div v-for='itme in list'></div>
<div v-for='(itme,index) in list' :key='index'></div>
1.7 key属性
使用 v-for 的时候提供 key 属性，以获得性能提升
使用 key, Vue 会基于 key 的变化重新排列元素顺序，且会移除 key 不存在的元素
<div v-for='item in list' :key='item.id'></div>
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 指令，从页面中删除
网友评论