vue中是可以给事件进行绑定的, 如点击事件, 鼠标移入移出事件 可以给标签绑定事件,当触发事件时, 可以给事件对应得操作,如调用方法,简单的表达式操作等
v-on:事件
可以使用 v-on 来绑定事件, 如
可以看到, 通过v-on:mouseover 给鼠标移入事件绑定了一个合适, 当检测到鼠标移入到button 按钮时会自动的触发
也可以使用简约的写法 @mouseover="mouses"
事件修饰符
事件修饰符可以对dom事件细节进行控制, 如阻止浏览器的默认行为,如阻止超链接的跳转, 阻止浏览器的冒泡事件
常见修饰符有:
.prevent ---- 阻止浏览器默认行为
.stop ---- 阻止浏览器事件冒泡
.once ---- 只触发1次
如:<a href="aaa" @click.prevent="handler"> 阻止默认跳转事件</a>
当点击a标签时会调用handler 函数
按键修饰符
按键修饰符和是检测按键事件的, 如 当回车键被按下的时候会去调用某个函数<input type="text" @keydown.enter="send" placeholder="回车发送消息">
当输入框检测到回车键按键被按下时会调用 send 方法
methods 和 computed
在vue 中, methods 是方法的集合,
这些方法可以被 HTML中 v-bind绑定的事件中被调用, 如上面的 @click="handler"
而computed 也是存储方法的集合, 只不过它是自动调用的,如:
当computed 集合中的 getnum 使用的 num 数据发生改变的时候, HTML 中使用到的 getnum会自动被调用,
生命周期
Vue的生命周期, 就是Vue实例从创建到销毁的过程.
beforeCreate 创建前
created 创建后 可以做一些初始化工作, 如获取数据
beforeMount 挂载到页面前
mounted 挂载到页面后
beforeUpdate 更新页面前
updated 更新页面后
beforeDestroy 销毁vue之前 收尾工作
destroyed 销毁之后