【Vue学习总结】6.Vue双向数据绑定和ref属性操作原生DOM

接上篇《5.Vue绑定属性、Html、class、style》

上一篇我们主要讲解了Vue属性、Html、class以及style的操作，本篇我们主要来介绍Vue及双向数据绑定和Vue事件，以及Vue中的ref获取dom节点的操作。
本系列博文使用的Vue版本：2.6.11

一、双向数据绑定

什么叫做“双向数据绑定”？其实就是我们前面提到过的“MVVM”，即“Model-View-ViewModel”，是MVC模式的改进版，将View的状态和行为抽象化，将Model和View关联起来，代替原来的Controller，ViewModel负责把Model的数据同步到View显示出来，还负责把View的修改同步回Model，这就是双向的意思。
“MVVM”模式把Model用纯JavaScript对象表示，View负责显示，两者做到了最大限度的分离。使用“MVVM”模式，我们可以很爽，因为：
（1）我们不需要关心DOM的结构，而是关心数据如何存储。
（2）我们不操作DOM，而是直接修改JavaScript对象。
（3）我们的关注点从如何操作DOM变成了如何更新JavaScript对象的状态，而操作JavaScript对象比DOM简单多了。

原来的DOM操作：

var dom = document.getElementById('username');
dom.value = '张三';

或（使用Jquery）：

$('#username').val('张三');

变为纯JavaScript对象状态更新：

var user = {
    username: '张三'
};

爽吗？爽！
注：双向数据绑定必须在表单中使用。

Vue借鉴了Augular1.0的双向数据绑定，实现了自己的MVVM模式。我们下面编写一个例子来实现数据的双向绑定效果：

<template>
  <!-- vue的模板里面，所有的内容都需要被一个根节点包裹起来 -->
  <div id="app">
     <h2>{{msg}}</h2>
     
    <input type="text" v-model="msg" />
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
      return {
        msg: '你好，vue'
      }
  }
}
</script>

<style>
</style>

这里我们的input框的值绑定了msg，msg改变的时候，会影响input框的值，而input框的值改变时，会影响msg的值，效果：

上面的动图可能看不出在网页上直接修改input框的值，data()中的msg的值到底改变没有，那么我们写个按钮，获取data()中msg的值并输出：

<template>
  <!-- vue的模板里面，所有的内容都需要被一个根节点包裹起来 -->
  <div id="app">
     <h2>{{msg}}</h2>
     
    <input type="text" v-model="msg" />

    <!-- v-on:click用来绑定Vue的方法 -->
    <button v-on:click="getMsg()">获取表单里的数据</button>    
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
      return {
        msg: '你好，vue'
      }
  },
  methods:{ /*存放自定义方法的地方 */
    getMsg(){
      //获取data()里面的数据，通过this.xxx就能获取data()里定义的数据
      alert(this.msg);
    }
  }
}
</script>

<style>
</style>

这里面注意两个点，一个是Vue的方法绑定为“v-on:click”，方法定义在export default区域中的methods中定义。
具体定义methods方法的知识点，我们下一篇详细介绍。
我们再次修改Vue的值，点击按钮看看msg的值是否变化：

可以看到双向绑定是生效的，完全没有问题。然后我们也可以设置表单中的数据，我们再添加一个按钮，动态改变msg的值：

<template>
  <!-- vue的模板里面，所有的内容都需要被一个根节点包裹起来 -->
  <div id="app">
     <h2>{{msg}}</h2>
     
    <input type="text" v-model="msg" />

    <!-- v-on:click用来绑定Vue的方法 -->
    <button v-on:click="getMsg()">获取表单里的数据</button>  
    <button v-on:click="setMsg()">设置表单里的数据</button>  
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
      return {
        msg: '你好，vue'
      }
  },
  methods:{ /*存放自定义方法的地方 */
    getMsg(){
      //获取data()里面的数据，通过this.xxx就能获取data()里定义的数据
      alert(this.msg);
    },setMsg(){
      this.msg="我是改变后的数据";
    }
  }
}
</script>

<style>
</style>

我们可以看到input的值也跟着改变了，就像直接操作DOM一样，很神奇：

这就是View(视图)改变，会重新赋值给model(数据)，model(数据)改变的时候，也会重新渲染View(视图)。

以上就是Vue的MVVM双向绑定的效果。

二、使用ref来获取表单中的数据

上面使用MVVM双向绑定获取表单数据的操作，如果我们还是习惯原生操作dom 的操作方式，获取dom对象和设置其参数，我们可以使用vue的ref属性来获取表单中的数据。
如下面的例子：

<template>
  <!-- vue的模板里面，所有的内容都需要被一个根节点包裹起来 -->
  <div id="app">
     <h2>{{msg}}</h2>
    <input type="text" v-model="msg" />
    <!-- v-on:click用来绑定Vue的方法 -->
    <button v-on:click="getMsg()">获取表单里的数据</button>  
    <button v-on:click="setMsg()">设置表单里的数据</button>
    <hr/><br/>
    <!-- ref其实相当于之前操作DOM的id -->
    <input type="text" ref="userinfo"/>
    <button v-on:click="getInputValue()">获取第二个表单里的数据</button>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
      return {
        msg: '你好，vue'
      }
  },
  methods:{ /*存放自定义方法的地方 */
    getMsg(){
      //获取data()里面的数据，通过this.xxx就能获取data()里定义的数据
      alert(this.msg);
    },setMsg(){
      this.msg="我是改变后的数据";
    },getInputValue(){
       //获取ref定义的dom节点
       console.log(this.$refs.userinfo);
       //获取dom节点的原生value值
       alert(this.$refs.userinfo.value);
    }
  }
}
</script>
<style></style>

其中ref的功能就是用来获取DOM节点，“this.$refs.userinfo”就可以理解为一个原生JavaScript的DOM对象，除了value之外，还可以操作“style”等属性。

点击按钮后，我们可以看到浏览器控制台打印出了dom对象的结构：

然后对话框也弹出了第二个input的值：

以上就是使用双向数据绑定和ref操作DOM的介绍。下一篇我们来讲解Vue事件，以及如何定义、执行方法，如何获取和改变数据，执行方法传值以及事件对象。

参考：
《廖雪峰的官方网站-MVVM》
https://www.liaoxuefeng.com/wiki/1022910821149312/1108898947791072
《IT营：itying.com-2018年Vue2.x 5小时入门视频教程》

转载请注明出处：https://blog.csdn.net/acmman/article/details/107851402