vue的学习笔记（1）：v-on的使用

最新推荐文章于 2024-12-14 21:39:33 发布

原创最新推荐文章于 2024-12-14 21:39:33 发布 · 397 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #学习 #javascript

笔记专栏收录该内容

21 篇文章

订阅专栏

本文介绍了Vue框架的引入方式，包括CDN、本地导入和npm安装，并重点讲解了v-on指令用于事件监听的基本用法和语法糖。通过实例展示了如何使用v-on绑定函数及表达式，同时提到了修饰符stop和prevent的应用，防止事件冒泡和阻止默认行为。此外，文章还提及了jQuery中类似的on方法，帮助读者更好地理解v-on。

vue是一个前段框架，也是比较有名的，它是写在.js文件里面，我们有三种引入vue框架的方式，第一种是通过cdn，也就是网页上面的资源，第二个就是自己下载一个vue的.js文件引入，第三个就是npm了，没有学过的小伙伴们可以去看我的专栏了解一下什么是npm这个东西；

好了，这一期我们就讲解一下在我们学习vue的过程中，v-on的一些基本使用，我们引入vue之后，只需要new vue({})就表示你已经开始了框架的使用了，是不是很神奇？

new Vue({
        //元素对象
        el:'#app',
        //数据对象
        data:{
            counte: 0,
            message:'你好，李焕英',
            movies:['唐僧','孙悟空','猪八戒','沙和尚'],
            tag:'<a href="http://www.baidu.com">百度一下</a>',
            name:'李天王',
            age:'18',
            myclass:'物联网2003',
            blind:'动态绑定属性',
            isred:true,
            isgreen:false,
            imgurl:'./img/apple.jpg',
            fristname:'Tony',
            lastname:'Jkson',
            key:'键盘'
        }})

包括那个bootstrap的框架使用也是比较快捷的，如果对这种用法还难以理解的可以去看看我的专栏jQuery那一部分，就会发现这个不就跟$很像；

废话不多说，我们来看看什么是v-on，其实这就是一个监听事件，在我们jQuery中也有，而且为了避免一些事件的冒泡，jQuery就是使用的on来实现的监听；

<button v-on:click = "shownumber()">{{movies[0]}}</button>

有一个简便写法，也叫作语法糖：

<button @click = "showobj(123,$event)">{{movies[1]}}</button>

这里填的是一个函数，如果是一些简单的实现我们可以直接写表达式；

            shownumber(){
                console.log("1")
            },
            showobj(a,event){
                console.log(a )
                console.log(event)
            }

这里的$符号是可以拿到js对象的，而不是传参；

2、修饰符

监听事件有一些修饰符，比如stop、prevent等，它们的作用是用来限定事件的，我们直接在语法糖后面点出属性即可：

<div @click="fatherlisten" >
            父类
            <button @click.stop="sonlisten">子类</button>
</div>

这里父类和子类都有单击监听事件，那么当我们点击自雷的时候会触发两次监听事件，因为浏览器并不知道这个事件源是哪一个，那么就会向上去寻找事件处理，这种情况叫做事件冒泡，vue只是使用了一个简简单单的stop修饰就解决了这个问题；

还有是默认的事件我们不想要时，可以通过prevent来进行拦截：

        <form action="">
            <!-- 阻止默认的监听事件 -->
            <input type="submit" value="提交表单" @click.prevent = "submitlisten">
        </form>

这是一个提交表单的例子，默认情况下点击按钮会提交一次表单，但是这里我们使用了prevent，所以会被这个函数替代。点击按钮之后就会执行函数里面的代码，而不是提交表单了；