一、浅试双向绑定

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、完整代码

1.5、案例

按要求实现需求：

源代码：

<!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>