数据响应式和事件绑定以及事件修饰符

数据相应式
举例


以上改变数据，浏览器中的数据也一起改变，就是数据响应式

默认就是数据响应的，那么如何不要响应式子呢？
用v-once指令如：
< div v-once>{{msg}}</ div >
这样数据只会编译一次，不会随着数据改变而改变！
不过，这有啥用？
答：有些信息不需要后续改动才用v-once，一般没啥用
总结：
在这里插入图片描述

数据双向绑定

以上两图中，改变页面中数据，vue中数据会改变，改变vue中数据，页面数据也会改变，这种就叫做双向数据绑定
相关指令v-model
如<input v-model=‘msg’/ >

事件绑定：
注意：事件绑定的函数最后一个默认为事件对象。
如<div @click=add>
add(event){
console.log(event)}
这时候将输出事件对象
有别的参数时候，$$event传递对象，且必须以$ $event作为参数名字如add(num,$ $event)
鼠标事件修饰符号
stop/prevent
<@click.stop>这样可以阻止冒泡事件
<@click.prevent>这样可以阻止默认行为
例如< a href=‘www.baidu.com’ @click.prenent=add’> < a>这样取消了默认行为，不会跳转到百度了
< a href=‘www.baidu.com’ @click.stop.prevent=add’> < a>这种写法也可以，即阻止冒泡又阻止默认行为。《注意.xx的顺序》

键盘修饰符

keyup.xxx如
<@keyup.enter='add'>表示按回车后触发的事件> 如何按下某个自己想要的案件呢？ 如下所示