当前位置：首页 > news >正文

Vue学习笔记（五、v-on指令）

news 2024/10/23 9:28:01

Vue中提供的v-on指令使用来绑定事件的。

下面的代码

<input type="button" value="按钮01" v-on:click="showHello">

将Vue对象的methods对象的showHello方法绑定到了按钮的click事件上。

注意下面的Vue对象的methods对象中的方法的两种写法：

        var vm = new Vue({el: '#app',data: {msg: 'Vue的基础代码学习',msg2:'<h1>这是一个大标题</h1>',mytitle:'这是一个自定义的title'},methods:{showHello:function(){alert('hello');},showSmile(){console.log('smile');}}});

其中showSmile采用了简写的方式，以后通常我们会使用这种方式。下面的代码将showSmile方法绑定到了mouseover事件上，注意这里使用了v-on的缩写形式@：

<input type="button" value="按钮02" @mouseover="showSmile">

完整代码参考如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>VueBaseCode</title>
</head><style>[v-cloak]{display: none;}
</style><body><div id="app"><p  v-cloak>{{msg}}++{{msg}}</p><h4  v-text="msg"></h4><input type="button" value="按钮01" v-on:click="showHello"><input type="button" value="按钮02" @mouseover="showSmile"></div><script src="./lib/vue.js"></script><script>var vm = new Vue({el: '#app',data: {msg: 'Vue的基础代码学习',msg2:'<h1>这是一个大标题</h1>',mytitle:'这是一个自定义的title'},methods:{showHello:function(){alert('hello');},showSmile(){console.log("smile");}}});</script>
</body></html>

查看全文

http://www.mrgr.cn/news/56636.html