声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：

<div id="app">
  {{ message }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'message'
  }
})

输出:message 除了文本插值，我们还可以像这样来绑定元素 attribute：

<div id="app">
        <p v-bind:title="message">v-bind</p>
    </div>

    <script>
        let vm = new Vue({
            el: "#app",
            data: {
               message:"<b>this is a message</b>"
            }
        })

单向绑定：把Model绑定到View，当我们用JavaScript代码更新Model时，View就会自动更新。因此，我们不需要进行额外的DOM操作，只需要进行Model的操作就可以实现视图的联动更新。

双向绑定：把Model绑定到View的同时也将View绑定到Model上，这样就既可以通过更新Model来实现View的自动更新，也可以通过更新View来实现Model数据的更新。所以，当我们用JavaScript代码更新Model时，View就会自动更新，反之，如果用户更新了View，Model的数据也自动被更新了。

        v-model
        不需要指定属性名
        双向绑定  vm=>value;value=>vm

        v-bind
        必须指定绑定属性
        单项绑定 vm=>属性
    -->
    <div id="app">
        <input type="text" v-model="val">
        <input type="text" v-bind:value="val">
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
               val:"文本框"
            }
        })
    </script>