JQuery和Vue中触发函数比较

最新推荐文章于 2023-08-22 11:49:22 发布

老婆就是要败家

最新推荐文章于 2023-08-22 11:49:22 发布

阅读量287

点赞数

分类专栏：前端文章标签： vue jquery js javascript html

本文链接：https://blog.csdn.net/qq_45014905/article/details/109141850

版权

前端专栏收录该内容

9 篇文章 1 订阅

订阅专栏

本文对比了Vue和jQuery中触发函数的不同，以输入框失去焦点为例，Vue通过在el-input标签使用@blur="change"并在methods中定义函数，而jQuery则在$(document).ready中监听blur事件。详细阐述了两种方式的实现方式和区别。

摘要由CSDN通过智能技术生成

1、vue代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo样本页</title>

    <script src="js/vue.js"></script>
    <script src="js/elementUi.js"></script>
    <link rel="stylesheet" href="css/elementUi.css">
</head>
<body>
<div id="one">
    第一个值 <el-input v-model="value_one" style="width:300px"   @blur="change"></el-input>

</el-input>
</div>
</body>
<script>
    new Vue({
        el:"#one",
        data:{
            value_one:'',
        },
        methods:{
            change:function () {
              alert("Vue中的弹框执行了!")
            }
        },

    });
</script>
</html>

2、JQuery代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.min.js"></script>
</head>

<script>
    $(function () {

        //当某一个组件失去焦点是，调用对应的校验方法
        //是通过ID 来进行获取的
        $("#username").blur(checkUsername);
    });


    function checkUsername() {
        alert("表单校验开始了")
    }

</script>
<body>

<div>
    <input type="text" placeholder="请输入数据" id="username" >
</div>
</body>
</html>

以上呢 , 两段代码实现的效果是一样的 , 都是当在输入框输入完之后 , 鼠标离开之后 ,就会触发函数体 , 也就是在页面上打印一段话 , 证明我们的书写的函数执行了 !

但是两者之间的区别是什么呢 ? 下面我来带领大家来进行分析 !

3、区别

Vue中函数体

首先你需要在el-input标签中书写上@blur=“change” 其中change 是函数名
然后你在script标签体中 new Vue() 选中你要管理的div, 也就是 el:"#one",
然后在methods中即可书写函数体格式就是函数名 function( 要执行效果)
例如咱们上面的代码 :
methods:{
change:function () {
alert(“Vue中的弹框执行了!”)
}
},

JQuery中函数执行

jquery不需要在input标签中书写触发事件, 这个也是在script标签体中进行书写, 首先我们要书写一个回调函数,
这个是页面加载完毕以后执行的
$ (function () {
});
然后 , 我们在上面的函数体中书写$("#username").blur(checkUsername); 这个意思就是
ID是username的blur事件的函数名是checkUsername
然后我们书写checkUsername的函数体, 也是打印出一句话 ;

function checkUsername() {
alert(“表单校验开始了”)
}