vue--クリックイベント

<template>
  <div id="app">
    <p>{{msg}}p>
    <input type="text" v-model="msg" ref="userinfo" />
    <input type="button" value="  " v-on:click="getMsg()">
    <input type="button" value="  " @click="setMsg()">
    <input type="button" value="      " @click="getNode()">    
    <input type="button" value="      " @click="setNode()">
    <hr>
    {{text}}
    <p><input type="text" v-model="text" /><input type="button" @click="addlist()" value="  "/>p>
    <p v-for="x in list">{{x}}p>   
  div>
template>
<script>
export default {
  name: 'App',
  data (){
    return {
      msg:"  ！",
      text:'  ！',
      list:[]
    }
  },
  methods:{
    getMsg(){
      alert(this.msg)
    },
    setMsg(){
      this.msg = "hello"
    },
    getNode(){
      console.log(this.$refs.userinfo);
      console.log(this.$refs.userinfo.value);
      this.$refs.userinfo.style.background="red";//   DOM
    },
    setNode(){
      this.$refs.userinfo.value = "    ！" //         
    },
    addlist(){
      this.list.push(this.text);
    }
  }
}
script>