第三课 Vue中的方法的定义及事件绑定指令

Vue中的方法的定义及事件绑定指令

方法定义

方法定义通过Vue对象中的methods属性进行拓展

1）基础示例

    new Vue({
        el: '#app',
        methods: {
            fun(){
                alert(1);
            }
        }
    })

2）操作对象数据

    new Vue({
        el: '#app',
        data: {
            val: 'Hello World !'
        },
        methods: {
            fun(){
                alert(val);
            }
        }
    })

事件绑定指令

Vue中拓展了事件绑定指令(v-on)，用于绑定自定义的事件

1）基础示例

    <div id="app">
        <input type="button" value="点击我" v-on:click="fun()">
    </div>
    <script>
        new Vue({
            el: '#app',
            methods: {
                fun(){
                    alert('Hello World !');
                }
            }
        })
    </script> 

2. 简写指令绑定

v-on指令还有较方便的简写方式 @

    <div id="app">
        <input type="button" value="点击我" @:click="fun()">
    </div>
    <script>
        new Vue({
            el: '#app',
            methods: {
                fun(){
                    alert('Hello World !');
                }
            }
        })
    </script> 

3）综合指令绑定事件示例

    <div id="app">
        <input type="button" value="点击我" v-on:click="fun()">
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                val: 'Hello World !'
            },
            methods: {
                fun(){
                    alert(this.val);
                }
            }
        })
    </script>  

原文地址：https://blog.csdn.net/weixin_44010641/article/details/142750068

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！