Vue2入门之超详细教程四-数据绑定

1、简介

　　数据绑定分为单向数据绑定和双向数据绑定，上一章节中出现的v-bind就属于单向数据绑定。

单向绑定(v-bind)：数据只能从data流向页面
双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data

　　备注：双向绑定一般用在表单类元素上（如：input、select）

　　V-model:value可以简写为v-model，因为v-model默认收集的就是value值。

　　学习Vue之前最后会一些HTML和CSS的基础知识，HTML基础知识传送门，CSS基础知识传送门。

2、数据绑定

1. 单向数据绑定

　　在vscode中创一个新目录，叫“03_Vue数据绑定”，在下面创建一个“03_vue单向绑定.html”文件，在里面输入以下代码：

<!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>Document</title>

    <script type="text/javascript" src="../js/development/vue.js"></script>

</head>

<body>

    <div id="root">  

        单向数据绑定 <input type="text" v-bind:value="name">

    </div>

    <script>

        Vue.config.productionTip = false

        new Vue({

            el:'#root',

            data:{

                name:"Li Rong Yang"

            }

        })

    </script>

</body>

</html>

　　我们在浏览器中打开该网页，并按F12打开开发模式，选择Vue开发工具

　　可以看出data的数据显示在了浏览器中，如果我们直接修改data中的数据，它也会实时显示在浏览器中

　　点击保存按钮后修改的内容会实时显示在浏览器中，但如果你在浏览器的input输入框中输入一些内容，并不会在data数据中进行显示

　　这就是单向数据绑定的效果。

2. 双向数据绑定

　　在“02_Vue数据绑定”目录下，创建一个“03_vue双向绑定.html”文件，在里面输入以下代码：

<!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>Document</title>

    <script type="text/javascript" src="../js/development/vue.js"></script>

</head>

<body>

    <div id="root">

        双向数据绑定 <input type="text" v-model:value="name"><br>

    </div>

    <script type="text/javascript">

        Vue.config.productionTip = false

        new Vue({

            el:"#root",

            data:{

                name:"Vue"

            }

        })

    </script>

</body>

</html>