vue03-vue绑定事件及双向绑定

最新推荐文章于 2023-08-04 12:09:30 发布

敏姐儿

最新推荐文章于 2023-08-04 12:09:30 发布

阅读量794

点赞数 1

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

本文链接：https://blog.csdn.net/weixin_46128463/article/details/122440361

版权

VUE 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

vue绑定事件及双向绑定

vue绑定事件
vue双向绑定
双向绑定练习

vue绑定事件

绑定事件其实Vue里面的绑定事件就和js里面原理一样，只是Vue使用形式不同 js里面要绑定触发事件，我们直接在标签里面写上触发事件和执行的js方法即可

v-on 监听事件
事件有vue的事件和前端页面本身的一些事情，我们这边click是vue的事件可以绑定到vue中的methods中的方法事件，
$\color{#FF0000}{实例}$

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!-- view层 模版 -->
<div id="app">
    <button v-on:click="say">惦记我</button>
</div>
<!-- 1.导入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        // 数据
        el:"#app",
        data:{
            message: "敏姐儿"
        },
        methods: { //方法必须定义在Vue的Methods
            say: function() {
                alert(this.message)
            }
        }
    });
</script>
</body>
</html>

运行结果：
在这里插入图片描述

vue双向绑定

vue.js 是一个MVVM框架，即数据双向绑定，当数据发生变化的时候，视图也会发生变化，相应的当视图发生变化的时候数据也会跟着同步变化

我们思考一个问题：我们为什么要使用数据双向绑定？带着这个问题我们来探究以下的内容：
我们先设计一个业务场景：我们在银行签字，需要在pdf版合同上显示对应文字
$\color{#FF0000}{代码示例}$

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!-- view层 模版 -->
<div id="app">
    <-- 通过v-model来进行数据的双向的绑定 -->
    <textarea name="" id="" cols="" rows="10" v-model="message"></textarea>
    {{message}}
</div>
<!-- 1.导入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        // 数据
        el:"#app",
        data:{
            message: "签名："
        }
    });
</script>
</body>
</html>

运行效果：
在这里插入图片描述
在这个业务场景中实现了视图变化，数据同步变换的情况，那么我们在控制台做相应的操作来实现数据变化，视图跟着变化的情况：

根据上述动图来看，当手动修改数据发生变化的时候，视图也相应的发生了变化。
那么到现在我们来回顾在讲解双向绑定的那一个问题其中回答是否可以总结为以下的观点：
在vue.js中，如果使用vuex实际上数据还是单向的，之所以说是数据双向绑定，这是用的UI控件来说的，对于我们处理器表单，vue.js的数据双向绑定就用起来特别舒服，两者并不互斥，在全局性数据流使用单向，方便跟踪，局部性数据流使用双向，简单容易操作。

双向绑定练习

业务场景：在微信绑卡业务中，选中某张账户卡片之后需要出现相应卡片账号。
$\color{#FF0000}{代码实例}$

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!-- view层 模版 -->
<div id="app">
    卡号：
    <input type="radio" name="cardName" value="6666********2222" v-model="card">工商
    <input type="radio" name="cardName" value="6321********1111" v-model="card">招商
    <p>
        选择卡片为：{{card}}
    </p>
</div>
<!-- 1.导入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        // 数据
        el:"#app",
        data:{
            card: ""
        }
    });
</script>
</body>
</html>

在这里插入图片描述

业务场景：选择答案
$\color{#FF0000}{代码实例}$

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!-- view层 模版 -->
<div id="app">

    下拉框：
    <select v-model="selected">
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <span>{{selected}}</span>
</div>
<!-- 1.导入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        // 数据
        el:"#app",
        // 默认选项
        data:{
            selected: "A"
        }
    });
</script>
</body>
</html>