Vue.js的核心学习笔记 - 第四章绑定数据以及事件_vue.js <router-view> 绑定数据-CSDN博客

本文链接：https://blog.csdn.net/qq_33638188/article/details/123025344

Vue.js的核心学习笔记 - 第四章绑定数据以及事件

前言
绑定语句
结束语

前言

今天我们来学习一下关于Vue得数据绑定

绑定语句

v-bind
v-on
v-model

v-bind

使用v-bind可以动态绑定Vue中的数据
例：使用v-bind:属性 = “dataValue”

<!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>Vue学习关于数据绑定</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
     <div id="app">
        <div class="vue_test">
            <a v-bind:href="url">百度链接</a>
            <input type="text" v-bind:placeholder = "msg"></span>
        </div>
     </div>
</body>
<script>
    var vue = new Vue({
        el: "#app",
        data:{
            url: "http://www.baidu.com",
            msg: "请输入你得消息",
        },
        methods:{
        
        }
    })
</script>
</html>

v-on

使用v-on可以绑定vue中的事件
例：使用v-on:click 给button绑定点击事件修改数据

<!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>Vue学习关于数据绑定</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
     <div id="app">
        <div class="vue_test">
            <a v-bind:href="url">百度链接</a>
            <input type="text" v-bind:placeholder = "msg"></span>
        </div>
        <div class="vue_on">
            <span>{{info}}</span>
            <button @click="updateData()">修改Info数据</button>
        </div>
     </div>
</body>
<script>
    var vue = new Vue({
        el: "#app",
        data:{
            url: "http://www.baidu.com",
            msg: "请输入你得消息",
            info: "233"
        },
        methods:{
            //修改
            updateData(){
                this.info = "infos";
            
            }
        
        }
    })
</script>
</html>

v-model

使用v-model可以给表单数据绑定动态数据控制
例：使用v-model给表单数据绑定上vue的数据

<!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>Vue学习关于数据绑定</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
     <div id="app">
        <div class="vue_test">
            <a v-bind:href="url">百度链接</a>
            <input type="text" v-bind:placeholder = "msg"></span>
        </div>
        <div class="vue_form">
            <form action="#" v-on:submit.prevent="showFormData">
                <input type="text" v-model="userName" />
                <input type="password" v-model="userPwd" />
                <input type="submit">
            </form>
        </div>
        <div class="vue_on">
            <span>{{info}}</span>
            <button @click="updateData()">修改Info数据</button>
        </div>
     </div>
</body>
<script>
    var vue = new Vue({
        el: "#app",
        data:{
            url: "http://www.baidu.com",
            msg: "请输入你得消息",
            userName: "admin",
            userPwd: "123123",
            info: "233"
        },
        methods:{
            //提交显示方法
            showFormData(){
                console.log("form表单数据。");
                console.log("userName" + this.userName);
                console.log("userPwd:" + this.userPwd);
                
            },
            //修改
            updateData(){
                this.info = "infos";
            
            }
        
        }
    })
</script>
</html>

结束语

回到目录点我序章