Vue实现双向数据绑定

需求：输入框输入数据，会显示到 span 元素上，分别通过 js 和 vue 实现

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
</head>
<body>
<div id="app">
    <input type="text" v-model="word">
    <h2>{{word}}</h2>
</div>
</body>
</html>
<script src="./lib/vue.js"></script>
<script>
var vm = new Vue({
    el: "#app",
    data: {
        word: "你好世界"
    }
})
</script>

vue 双向数据绑定原理: vue 双向数据绑定原理是通过 数据劫持 结合 发布订阅模式 的方式来实现的，也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变;