2.Vue的数据绑定

我们知道Vue使用的模型为MVVM模型

MVVM 即 Model-View-ViewModel 的简写。即模型-视图-视图模型。

        1.模型（Model） 指的是后端传递的数据。

        2.视图(View)指的是所看到的页面。

        3.视图模型(ViewModel)是 mvvm 模式的核心

双向数据绑定正是Vue的特色

数据绑定的方法如下：

1.el的编写方式有两种：

            1.el:'#root'

            2.vm.$mount('#root')

2.data的编写也为两种：

            1.data:{}   对象式

            2.data(){

                return{

                        函数式（推荐这种方式）

                }

            }

<div id="root">
        单向数据绑定: <input type="text" v-bind:value="name">
        <!--内部的值能影响外面的值，但是外面的值不能影响内部的值-->
        双向数据绑定： <input type="text" v-model:value="name">
        <!--v-model只能应用在表单元素（输入类元素）中，也就是说得有value属性-->
        <!--v-model:value可以简写成v-model,因为v-model默认收集的就是value值-->
        <input type="text" v-model="sex">
    </div>
    <script>
        Vue.config.productionTip = false
        var vm = new Vue({
            el: '#root',
            data() {
                return {
                    name: 'fxy',
                    sex: 'man'
                }
            }
        })
    </script>

效果图如下