一 创建测试项目

vue init webpack-simple vuedemo

二 进入demo目录

cd vuedemo

三 安装依赖

cnpm install

四 修改代码App.vue

<template>
  <div id="app">
    <h2>{{msg}}</h2>
    
    <input  type="text" v-model="msg"/>

    <button v-on:click="getMsg()"> get table date</button>    
    <button v-on:click="setMsg()"> set table date</button>

    <br>
    <br>
    <br>
    <input type="text" ref="userinfo"/>
    <div ref="box">i am a box</div>
    <button v-on:click="getInputValue()">getInputValue</button>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },methods:{
    getMsg(){
      console.log(this.msg)
      alert(this.msg)
    },setMsg(){      
      this.msg = "i change !"
    },getInputValue(){
      this.$refs.box.style.background='red'
      console.log(this.$refs.userinfo)
      alert(this.$refs.userinfo.value)
    }
  }
}
</script>

<style>
</style>

五 运行

npm run dev

六 总结

1 v-model在表单绑定<input><textarea>,并注意data选项初始化变量
2 使用ref标签，绑定js内部组件变量，使用“this.$refs.变量名”访问这个组件
3 使用v-on绑定事件，click是button的事件

七 参考

https://cn.vuejs.org/v2/guide/forms.html
https://cn.vuejs.org/v2/guide/components-edge-cases.html