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

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>

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

猜你喜欢