一、基本指令
- v-cloak
作用:解决初始化慢导致网页闪动
用法:
<div id="app" v-cloak>
{{message}}
</div>
<script>
var app = new 飞lue ( {
el:’ #app ’,
data : {
message : ’ 这是一段文本 ’
}
})
</script>
<style>
[v-cloak] {
display: none;
}
</style>
原理:配合css设置v-cloak不显示,所以看不到相应的标签,当dom被渲染之后,v-cloak会自动失效,所以现在就显示出来啦
- v-once
数据只渲染一次,后面数据变化的时候,它不再变化,相当于渲染了一次之后,后面将变成不是双向绑定的
二、v-if 和v-show
1、
v-if 是条件判断,满足条件之后再显示。
v-else 不满足上面的 v-if条件的显示
v-else-if 是不满足上面的if条件的,且满足这个if条件的才显示
这里的显示和不显示是值dom节点渲染或者不渲染
2、
v-show 满足条件才显示
这里的显示和不显示是指:display是不是none
三、v-for循环
1、数组循环
在 v-for 块中,我们拥有对父作用域属性的完全访问权限。v-for 还支持一个可选的第二个参数为当前项的索引。
<ul id="example-2">
<li v-for="(item, index) in items">
{{ parentMessage }} - {{ index }} - {{ item.message }}
</li>
</ul>
var example2 = new Vue({
el: '#example-2',
data: {
parentMessage: 'Parent',
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
结果:
你也可以用 of 替代 in 作为分隔符,因为它是最接近 JavaScript 迭代器的语法:
<div v-for="item of items"></div>
2、对象循环
你也可以用 v-for 通过一个对象的属性来迭代。
<ul id="v-for-object" class="demo">
<li v-for="value in object">
{{ value }}
</li>
</ul>
new Vue({
el: '#v-for-object',
data: {
object: {
firstName: 'John',
lastName: 'Doe',
age: 30
}
}
})
你也可以提供第二个的参数为键名:
<div v-for="(value, key) in object">
{{ key }}: {{ value }}
</div>
第三个参数为索引:
<div v-for="(value, key, index) in object">
{{ index }}. {{ key }}: {{ value }}
</div>
注:在遍历对象时,是按 Object.keys() 的结果遍历,但是不能保证它的结果在不同的 JavaScript 引擎下是一致的。
3、key
当 Vue.js 用 v-for 正在更新已渲染过的元素列表时,它默认用“就地复用”策略。如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序, 而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素。这个类似 Vue 1.x 的 track-by="$index"
。
这个默认的模式是高效的,但是只适用于不依赖子组件状态或临时 DOM 状态 (例如:表单输入值) 的列表渲染输出。
为了给 Vue 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的唯一 id。这个特殊的属性相当于 Vue 1.x 的track-by
,但它的工作方式类似于一个属性,所以你需要用 v-bind 来绑定动态值 (在这里使用简写):
<div v-for="item in items" :key="item.id">
<!-- 内容 -->
</div>
建议尽可能在使用 v-for 时提供 key,除非遍历输出的 DOM 内容非常简单,或者是刻意依赖默认行为以获取性能上的提升。
因为它是 Vue 识别节点的一个通用机制,key 并不与 v-for 特别关联,key 还具有其他用途,参考链接key
四、方法和事件
v-on:click=“xxx” 简写模式 @click=“xxx”
事件修饰符:
• .stop
• .prevent
• .capture
• .self
• .once
具体用法如下:
//阻止单击事件冒泡
<a @click.stop=”handle " ></a>
//提交事件不再重载页面
<form @submit.prevent="handle ” ></ form>
//修饰符可以串联
<a @click.stop.prevent=” handle ” ></ a>
//只有修饰符
<form @submit . prevent></form>
添加事件侦听器时使用事件捕获模式
<div @click . capture=” handle ” > ... </div>
//只当事件在该元素本身(而不是子元素) 触发时触发回调
<div @click.self=” handle ” > ... </div>
//只触发 次,组件同样适用
<div @click.once=” handle ” > ... </div>
在表单元素上监昕键盘事件时,还可以使用按键修饰符,比如按下具体某个键时才调用方法:
//只有在 keyCode 13 时调用 vm submit()
<input @keyup.13 =“ subm ”
也可以自己配置具体按键:
Vue . config .keyCodes .fl = 112;
//全局定义后,就可以使用自 keyup. fl
除了具体的某个 keyCode 外, Vue 还提供了 些快捷名称,以下是全部的别名:
• .enter
• .tab
• .delete (捕获“删除”和“退格”键)
• .esc
• .space
• .up
• .down
• .left
• .right
这些按键修饰符也可以组合使用,或和鼠标一起配合使用:
• .ctrl
• .alt
• .shift
• .meta (Mac 下是 Command 键, Windows 下是窗口键)
例如:
<! -- Shift + S -->
<input @keyup.shift . 83=”handleSave ”>
<!-- Ctrl + Click -->
<div @click.ctrl=”doSomething”>Do something</div>