vue入门教程 简单实现一个事件绑定

vue入门教程 简单实现一个事件绑定

<template>
  <div id="app">
    <!-- v-model 是input中用于动态绑定vule值所用 -->
    <input type="text" v-model="value">
    <!-- v-on用于绑定事件，也可以简写成@：事件类型 -->
    <button v-on:click='handelBtn'>按钮</button>
    <div>点击按钮输出内容：{{meassge}}</div>
  </div>
</template>

<script>
  // vue中作为组件，data需要写成一个函数return一个对象的形式
  // 其中的值可以用this来访问到
export default {
  name: 'App',
  data(){
    return{
      value:'',
    meassge:''
    }
  },
  // methods用于书写，定义的方法
  methods: {
    handelBtn() {
      this.meassge = this.value;
    }
  },
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>