4. vue2 双向数据绑定 以及Vue中的ref获取dom节点

一、 双向数据绑定

• 双向数据绑定： MVVM
• vue就是一个MVVM的框架。
• 其中 M 代表 model ，V 代表 view
• MVVM： model 改变会影响视图 view ，view 视图改变反过来影响 model
• 双向数据绑定必须在表单里面使用。

<template>
  <div>
    <h2>{{ msg }}h2>

    <input type="text" v-model="msg" />

    <button v-on:click="getMsg()">获取表单里面的数据getbutton>
    <button v-on:click="setMsg()">设置表单的数据setbutton>
  div>
template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "hello world",
    };
  },
  /*放方法的地方*/
  methods: {
    getMsg() {
      //方法里面获取data里面的数据
      alert(this.msg);
    },
    setMsg() {
      this.msg = "我是改变后的数据";
    },
  },
};
script>

二、 Vue中的ref获取dom节点

<template>
  <div>
    <input type="text" ref="userinfo" />
    <br />
    <div ref="box">我是一个boxdiv>
    <br />
    <button v-on:click="getInputValue()">获取第二个表单里面的数据button>
  div>
template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "hello world",
    };
  },
  /*放方法的地方*/
  methods: {
    getInputValue() {
      //获取ref定义的dom节点,后面的操作都是原生js的dom操作
      console.log(this.$refs.userinfo);

      this.$refs.box.style.background = "red";

      alert(this.$refs.userinfo.value);
    },
  },
};
script>