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

<template>
  <div id="app">
    <!-- 双向数据绑定（必须在表单里面使用） m:model  v:view  mvvm:model改变会影响视图，视图改变会影响model -->
    <h2>{{msg}}</h2>
    <input type="text" v-model="msg" />
    <button v-on:click="getMsg()">获取表单数据get</button>
    <button v-on:click="setMsg()">设置表单数据set</button>
    <br>
    <hr>
    <br>
    <input type="text" ref="input2" />
    <button v-on:click="getMsg2()">获取表单2数据get</button>
    <br>
    <hr>
    <br> 
    <div ref="box">box</div>
    <button v-on:click="getMsg2()">获取表单2数据并改变box字体颜色</button>
  </div>
</template>

<script>
export default {
  data () {/*业务逻辑里面定义的数据*/
    return {        
        msg:'你好，世界',
    }
  },
  methods:{/*方法*/
    getMsg(){
        alert(this.msg)
    },
    setMsg(){
        this.msg="改变后数据"
    },
    getMsg2(){
        //获取ref定义的dom节点
        console.log(this.$refs.input2);
        this.$refs.box.style.color = 'red';
        alert(this.$refs.input2.value);
    }
  }
}
</script>

<style>
    
</style>