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

MarcoPage

于 2024-10-08 07:05:06 发布

阅读量304

点赞数 1

分类专栏： VUE 基础课程文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_44010641/article/details/142750068

版权

VUE 基础课程专栏收录该内容

19 篇文章 0 订阅

订阅专栏

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>

简写指令绑定

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>