【Vue】数据双向绑定、事件绑定

Vue 数据双向绑定、事件绑定

1. 数据双向绑定

总结：

v-on：绑定行内事件，用在“事件属性上”;

2.$event:vue中的事件对象，代替event
事件主体：$event.target:<input>;

3.v-on 用 @ 代替

4.v-model:双向数据绑定，代替 @input="value=$event.targe.value"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据的双向绑定</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <p>
        <!-- ES6 原生数据双向绑定 -->
        <span>ES6:</span>
        <input type="text" name="" oninput="this.nextElementSibling.textContent = this.value">
        <span></span>
    </p>
    <hr>
    <!-- Vue 数据双向绑定 -->
    <!-- v-bind:绑定预定义属性 -->
    <div id="app">
        <span>Vue:</span>
        <!-- v-on：绑定行内事件，用在“事件属性上” -->
        <!-- $event:vue中的事件对象，代替event -->
        <!-- 事件主体：$event.target:<input> -->
        <!-- v-on 用 @ 代替  -->
        <!-- <input type="text" v-on:input="value=$event.target.value" :value="value"> -->
        <input type="text" @:input="value=$event.target.value" :value="value">
        <span>{{value}}</span>
        <hr>
        <!-- v-model:双向数据绑定，代替 @input="value=$event.targe.value" -->
        <span>Vue:</span>
        <input type="text" v-model="value" :value="value">
        <span>{{value}}</span>
    </div>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    value: 'php1.cn',
                };
            },
        });
        const vm = app.mount('#app');
    </script>
</body>
</html>

2. 事件绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件绑定</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <!-- 函数方法实现:点击链接,输出链接 -->
    <p>
        事件属性：
        <a href="https://www.php.cn" onclick="showUrl(this,event)">show Url</a>
        <span class="url"></span>
    </p>
    <script>
        // function showUrl(ev){
        //     //禁用默认行为
        //     ev.preventDefault();
        //     // ev.target.href = https://www.php.cn
        //     ev.target.nextElementSibling.textContent = ev.target.href;
        // }
        // 代码简化
        // function showUrl(ele, ev) {
        //     //禁用默认行为
        //     ev.preventDefault();
        //     // ev.target.href = https://www.php.cn
        //     ele.nextElementSibling.textContent = ele.href;
        // }
    </script>
    <hr>
    <!-- Vue 实现方法 -->
    <div class="app">
        <!-- @click.prevent:事件修饰符,禁用默认点击行为 -->
        <!-- stop:防止冒泡 -->
        <a href="https://www.php.cn" @click.prevent="showUrl($event)">show Url</a>
        <span class="url">{{url}}</span>
    </div>
    <script>
        Vue.createApp({
            //数据
             data() {
                return {
                    url: null,
                };
            },
            //方法
            methods: {
                showUrl(ev){
                    // ev.preventDefault();//事件禁用放到事件触发(@click后面)
                    //数据注入:所有Data中声明的变量,都是实例的属性
                    this.url = ev.currentTarget.href;
                },
            },
        }).mount('.app');
    </script>
</body>
</html>

Vue 数据双向绑定、事件绑定

1. 数据双向绑定

2. 事件绑定

相关文章