vue2.0配置：Vue双向绑定和获取dom节点

 

App2.0配置：Vue双向绑定和获取dom节点

 

1、需求：效果展示如下，

       

 当“获取第二个变淡里面数据”，弹出输入的文字，点击“确定”之后，box字体变红

 

 

2、源代码如下，

<template>

<!-- Vue双向绑定和获取dom节点 -->

  <div id="app">

    <h2>你好,{{ msg }}</h2>

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

    <button v-on:click="getMsg()">获取表单里面数据get</button>

    <button v-on:click="setMsg()">设置表单里面数据set</button>

    <hr>

     <div ref="box">我是一个box</div>

    <input type="text" ref="userinfo" />

    <button v-on:click="getInputValue()">获取第二个表单里面数据</button>

  </div>

</template>

 

<script>

//双向数据绑定：MVVM vue就是一个MVVM框架

/*

M model

V view

model改变会影响视图，视图改变反过来会影响model

双向数据绑定必须在表单里面使用

*/

export default {

  name: 'App',  //组件名字，无实际含义

  data() {   //业务逻辑里面定的数据

    return {

      msg: 'Vue2.0'

    }

  },

    methods: {

      getMsg(){

        //alert('vue方法执行了')

        alert(this.msg)

      },

      setMsg(){

        this.msg="恢复初始位置vue2.0";

      },

      getInputValue(){

        //获取表单dom节点

        console.log(this.$refs.userinfo);

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

        alert(this.$refs.userinfo.value)

      }

    }

}

</script>

<style>

</style>