Vue.js学习系列(七)---监听事件

想要使用户与应用进行互动。此时我们就需要使用一个新的指令“v-on”,该指令绑定一个监听事件

Vue.js学习系列(七)---监听事件_第1张图片

上述代码实现的是点击显示时间按钮,将当前的时间显示在id=”div1”的div上。

Vue.js学习系列(七)---监听事件_第2张图片

在showTime方法中,我们在没有接触DOM的情况下更新了应用的状态- 所有的 DOM 操作都由 Vue 来处理,你写的代码只需要关注基本逻辑。

Vue提供了v-model指令,它使得在表单输入和应用状态中做双向数据绑定变得非常轻巧。

Vue.js学习系列(七)---监听事件_第3张图片

通过v-model指令直接将p标签的值传递到input表单里面。显示结果如下图:

Vue.js学习系列(七)---监听事件_第4张图片

你可能感兴趣的:(Vue.js学习系列(七)---监听事件)