Vue数据绑定详解-优快云博客

本文链接：https://blog.youkuaiyun.com/Alive_m/article/details/126336427

1.单向绑定

语法：v-bind:href ="xxx" 或简写为 :href ="xxx"

单向绑定（v-bind）：数据只能从data流向页面

<!-- 普通写法 -->
单向数据绑定：<input type="text" v-bind:value="name"><br/>
<!-- 简写  -->
单向数据绑定：<input type="text" :value="name"><br/>

原理图：
请添加图片描述

2.双向绑定

语法：v-mode:value="xxx" 或简写为 v-model="xxx"

双向绑定（v-model)：数据不仅能从data流向页面，因为v-model默认收集的就是value值

<!-- 普通写法 -->
双向数据绑定：<input type="text" v-model:value="name"><br/>
<!-- 简写  -->
双向数据绑定：<input type="text" v-model="name">

原理图：

请添加图片描述

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据绑定</title>
    <!--    引入vue-->
    <script type="text/javascript" src="/excise/src/vue2.0/daima/js/vue.js"></script>
</head>
<body>
<div id="root">
    <!--    普通写法  -->
    <!--   单向数据绑定：<input type="text" v-bind:value="name"><br/>
       双向数据绑定：<input type="text" v-model:value="name">
   -->
    <!--    简写  -->
    单向数据绑定：<input type="text" :value="name"><br/>
    双向数据绑定：<input type="text" v-model="name">

    <!--  如下代码是错误的，因为v-model只能应用在表单类元素（输入类元素）上  -->
    <h1 v-model:x="name">你好啊</h1>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止vue在启动时生成提示

    const v = new Vue({
        //el: "#root",//第一种写法
        data: {
            name: '清华大学12'
        }
    })
    v.$mount("#root")//第二种写法
</script>
</body>
</html>