Vue（三）：数据绑定（v-bind和v-model）-526互联

数据绑定分为单向数据绑定和双向数据绑定，单向数据绑定就是前面学习的v-bind指令，而双向数据绑定则是下面学习的v-model指令。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>数据绑定</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>

    <body>
        <!--
            数据绑定分为单向绑定和双向绑定
            单向绑定是指容器可以从Vue实例中获取数据，但是Vue实例中的数据不会随着容器内容的改变而改变
            双向绑定是指容器和Vue中的数据是相互改变的，二者都会随着对方的改变而变化
            v-bind指令用于单向绑定，适用于大多数情况，常规写法为v-bind:XXX="xxx"，可以简写为:XXX="xxx"
            v-model指令用于双向绑定，适用于表单类的标签中，且默认是给value赋值，常规写法为v-model:value="xxx"，可以简写为v-model="xxx"
        -->
        <div id="root">
            单向数据绑定：<input type="text" :value="name"><br>
            双向数据绑定：<input type="text" v-model="name">
        </div> 
    </body>
    <script type="text/javascript">
        new Vue({
            el: "#root",
            data: {
                name: "JMS"
            }
        })
    </script>
</html>