v-on参数
当通过methods中定义方法，以供@click调用时，需要
- 情况一：如果该方法不需要额外参数，那么方法后的（）可以省略不添加。但是注意，如果方法本身中有一个参数，那么会默认将原生事件event参数传递出去
- 情况二：如果需要同事传入某个参数，同时需要event时，可以通过$event传入事件
v-on修饰符
在某些情况下，我们拿到event的目的可能是进行一些事件处理。
vue提供了修饰符来帮助我们方便的处理一些事件
.stop 调用event.stopPropagation()
.prevent 调用event.prevent Default()
.{keyCode | keyAlias} 只当事件是从特定键触发时才会触发回调
.native 监听组件根元素的原生事件
.once 只触发一次回调
<body>
<div id="app">
<!--.stop修饰符的使用-->
<div @click="divClick">
<button @click.stop="btnClick">按钮</button>
</div>
<!--.prevent修饰符的使用-->
<form action="baidu">
<input type="submit" value="提交" @click.prevent="submitClick">
</form>
<!--监听某个键盘的键帽-->
<input type="text" @keyup.enter="keyUp">
<!--.once修饰符的使用-->
<button @click.once="doThis">点击</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'hello world!'
},
methods: {
btnClick() {
console.log('btnClick');
},
divClick() {
console.log("divClick");
},
submitClick() {
console.log('submitClick');
},
keyUp() {
console.log('keyUp');
},
doThis() {
console.log('doThis')
}
}
})
</script>
</body>v-show
v-show的用法和v-if非常相似，也用于决定一个元素是否渲染
v-if和v-show对比
v-if和v-show都可以决定一个元素是否渲染，那么开发中我们如何选择呢？
- v-if当条件为false时，压根不会有对应的元素在DOM中
- v-show当条件为false时，仅仅是将元素的display属性设置为none而已
开发中我们如何选择呢？
- 当需要在显示与隐藏之间切片很频繁时，使用v-show
- 当只有一次切换时，通常使用v-if
组件的key属性
官方推荐我们在使用v-for时，给对应的元素或组件添加上一个key属性
为什么需要这个key属性呢？
这个其实和vue的虚拟DOM的Diff算法有关系
key的作用就是更加高效的更新虚拟DOM
检测数组更新
因为vue是响应式的，所以当数据发生变化时，Vue会自动检测数据变化，视图会发生对应的更新
Vue中包含了一组管擦数组编译的方法，使用他们改变数组也会触发视图的更新
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
31万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
