VUE（template标签事件绑定与监听）

最新推荐文章于 2024-07-31 18:30:30 发布

置顶世间百态不过尔尔

最新推荐文章于 2024-07-31 18:30:30 发布

阅读量1.1w

点赞数

分类专栏： VUE 文章标签： VUE（template标签事件绑定与监听）

本文链接：https://blog.csdn.net/weixin_44706842/article/details/88629560

版权

VUE 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、template标签
Vue.js提供了template标签，可以将指令作用到这个标签上，对其子元素进行渲染，但最后渲染的结果里不会有它。

二、事件绑定与监听
1.方法与内联语句处理器
1）Vue.js中通过v-on可以绑定实例选项属性methods中的方法作为事件的处理器，v-on:后参数可以接受所有原生的事件名称。
2）v-on:的简写形式，用@代替；除了直接绑定methods函数外，v-on也支持内联的JavaScript语句，但仅限一个。
3）在直接绑定methods函数和内联JavaScript语句时，都有可能需要获取原生的DOM事件对象，Vue.js中提供了两种写法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src = "vue.js"></script>
</head>
<body>
    <div id="app">
        <p>这是一段文字</p>
        <template v-for = "n in 3">
            <p>template文本{{n}}</p>
            <span>这是span</span>
            <a href="#">这是一个链接</a>
        </template>
    </div>
    <script>
        var vm = new Vue({
            el:"#app"
        })
    </script>

    <div id="app1">
        <input type="button" value = "按钮" v-on:click = "showInfo">
        <input type="button" value = "又一个按钮" @click = "showAgain">
        <input type="button" value = "第三个按钮" @click = "count++">
        <p>{{count}}</p>
        <input type="button" value = "获取对象" @click = "event">
        <input type="button" value = "再获取一次对象" @click = "event1($event)">
        <input type="button" value = "对象" @click = "event2()"> <!-- 这里获取不到event对象 -->
    </div>
    <script>
        var vm1= new Vue({
            el:"#app1",
            data:{
                count : 1
            },
            methods:{
                showInfo:function(){
                    console.log("我被点击了");
                },
                showAgain:function(){
                    console.log("我又被点击了");
                },
                event:function(event){
                    console.log(event);
                },
                event1:function(event){
                    console.log(event);
                },
                event2:function(event){
                    console.log(event);
                }
            }
        })
    </script>
</body>
</html>

世间百态不过尔尔

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
VUE（template标签事件绑定与监听）

一、template标签Vue.js提供了template标签，可以将指令作用到这个标签上，对其子元素进行渲染，但最后渲染的结果里不会有它。二、事件绑定与监听1.方法与内联语句处理器1）Vue.js中通过v-on可以绑定实例选项属性methods中的方法作为事件的处理器，v-on:后参数可以接受所有原生的事件名称。2）v-on:的简写形式，用@代替；除了直接绑定methods函数外，v-...
复制链接

扫一扫