vue事件绑定、事件参数、事件修饰符、表单双向绑定、监听器、计算属性

**Vue事件绑定**

在 Vue 中，事件绑定是指将事件处理函数绑定到 DOM 元素上，以响应用户的交互行为。例如，点击按钮、输入框改变值等。

###事件绑定方式有两种方式可以绑定事件：

####1. 使用 `v-on` 指令

html<template>
 <div>
 <button v-on:click="handleClick">点击我</button>
 </div>
</template>

<script>
export default {
 methods: {
 handleClick() {
 console.log('按钮被点击了！');
 }
 }
}
</script>

html<template>
 <div>
 <button @click="handleClick">点击我</button>
 </div>
</template>

<script>
export default {
 methods: {
 handleClick() {
 console.log('按钮被点击了！');
 }
 }
}
</script>

html<template>
 <div>
 <button @click="handleClick($event)">点击我</button>
 </div>
</template>

<script>
export default {
 methods: {
 handleClick(event) {
 console.log('按钮被点击了！');
 console.log(event); // 输出事件对象 }
 }
}
</script>

html<template>
 <div>
 <button @click.stop="handleClick">点击我</button>
 </div>
</template>

<script>
export default {
 methods: {
 handleClick() {
 console.log('按钮被点击了！');
 }
 }
}
</script>

html<template>
 <div>
 <form @submit.prevent="handleSubmit">提交表单</form>
 </div>
</template>

<script>
export default {
 methods: {
 handleSubmit() {
 console.log('表单被提交了！');
 }
 }
}
</script>

html<template>
 <div>
 <button @click.self="handleClick">点击我</button>
 </div>
</template>

<script>
export default {
 methods: {
 handleClick() {
 console.log('按钮被点击了！');
 }
 }
}
</script>

html<template>
 <div>
 <button @click.capture="handleClick">点击我</button>
 </div>
</template>

<script>
export default {
 methods: {
 handleClick() {
 console.log('按钮被点击了！');
 }
 }
}
</script>

html<template>
 <div>
 <input v-model="name" type="text">
 {{ name }}
 </div>
</template>

<script>
export default {
 data() {
 return {
 name: ''
 }
 }
}
</script>

html<template>
 <div>
 {{ count }}
 </div>
</template>

<script>
export default {
 data() {
 return {
 count:0 }
 },
 watch: {
 count(val) {
 console.log(`count changed to ${val}`);
 }
 }
}
</script>

html<template>
 <div>
 {{ doubleCount }}
 </div>
</template>

<script>
export default {
 data() {
 return {
 count:0 }
 },
 computed: {
 doubleCount() {
 return this.count *2;
 }
 }
}
</script>