一、浅试双向绑定

1.1、导入vue的js库

<script src="assets/vue.min-v2.5.16.js"></script>

1.2、创建js代码段写vue代码

<script>
        //创建vue实例
        new Vue({
            el: '#app', //将id为app的div的管理权交给vue
            data: { //用户共享的数据
                msg: null
            }
        });
    </script>

1.3、添加网页内容，并把管理权交给vue

    <div id="app">
        <input type="text" v-model="msg"/>
        <p>{{msg}}</p><!--插值表达式-->
    </div>

1.4、完整代码

图片.png

1.5、案例

按要求实现需求：

图片.png

源代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <script src="assets/vue.min-v2.5.16.js"></script>

    <title>Document</title>

</head>

<body>

    <div id="app">

        <h1>用户登录</h1>

        用户名：<input type="text" v-model="username"/><br/>

        密码：<input type="password" v-model="passwd"/><br/>

        <button>登录</button>

        <hr/>

        用户名：{{username}}，密码：{{passwd}}

    </div>

    <script>

        //创建vue实例

        new Vue({

            el: '#app', //将id为app的div的管理权交给vue对象

            data: { //要绑定的数据

                username: null,

                passwd: null

            }

        });

    </script>

</body>

</html>