Vue学习4----Vue及双向数据绑定，v-model，v-on:click，以及ref获取dom节点

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/zhaihaohao1/article/details/88942089

效果图：

源码，复制即可运行
App.vue文件

<!--05 Vue及双向数据绑定，v-model，v-on:click，以及ref获取dom节点-->
<template>
  <div id="app">
    <div>{{msg}}</div>
    <!--input里面的值改变，影响了msg-->
    <!--v-model 获取输入框中的数据，赋值给msg-->
    <input type="text" v-model="msg">
    <br/>
    <!--ref用来获取dom节点-->
    <input type="text" ref="info">
    <br/>
    <!--点击事件 -->
    <!--input的值改变影响msg-->
    <button v-on:click="getMsg()">获取表单里面的数据get</button>
    <br/>
    <!--msg改变影响input的值-->
    <button v-on:click="setMsg()">设置表单数据set</button>
    <br>
    <button v-on:click="getInputValue()">获取第二个表单里面的数据</button>
  </div>
</template>

<script>
  /**
   mvvm
   Model改变影响View,View改变影响视图
   双向数据绑定必须在表单(元素)里使用
   这个例子里面就是：input里面的值改变，影响了msg
   msg改变影响了div里面的值
   */
  export default {
    name: 'app',
    //放数据的地方
    data() {
      return {
        msg: 'msg数据'
      }
    },
    //放方法的地方
    methods: {
      getMsg() {
        // alert('vue方法执行了');
        //方法里面获取data里面的数据
        alert(this.msg);
      },
      setMsg(){
        this.msg = '改变后的数据';
      },
      //获取第二个输入框的数据
      getInputValue(){
        // 获取第二个输入框的dom节点
        console.log(this.$refs.info);
        //获取输入框的值
        alert(this.$refs.info.value);
      }
    }
  }
</script>

<style lang="scss">

</style>

源码下载：