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>