4.Vue 及双向数据绑定 Vue事件介绍 以及Vue中的ref获取dom节点

一、vue中的双向数据绑定
双向数据绑定 mvvm,mvvm是前端开发思想，主要是把前端每个页面分成了M，v,vm；
vm是中间的调度者分割了M和V，每当V层想要获取或保存数据的时候都要经过vm层做中间的处理，
m是model保存着每个页面的数据,
v是view是每个页面的html结构，双向数据绑定是model改变影响view,view改变影响model,双向数据绑定必须在表单上用；
view层值改变影响model层例子：

 <div>
{{msg}}
<input type="text" v-model='msg'/>
</div>
效果如下：

在页面的input控件中修改值之后，（改变了view层的数据，model层的数据也会随之改变）效果如下：

model层值改变影响view层例子：
代码如下：

点击获取表单上的数据的按钮，效果如下：

点击设置表单上的数据按钮，效果如下图：

二、vue中ref获取dom节点
ref相当于html中的id；this.$refs.firstinput获取的是表单上的dom节点；this.$refs.firstinput.value获取的是dom节点的值；


this.$refs.firstinput效果：

`this.$refs.firstinput.value效果图：

改变style的例子：