【Vue】数据双向绑定、事件绑定 - PHP前端

Home > List of blog posts > 【Vue】数据双向绑定、事件绑定

Blogger Information

Blog 94

fans 0

comment 0

visits 91864

Special Recommendation

More>

Related recommendations

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>

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

【HTML】文档结构与元素，标签，属性的类型

2022-11-27 20:51:59

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

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

1. 数据双向绑定

2. 事件绑定