首先我们要了解事件机制的特点：
- 事件三要素
- 事件绑定
- 事件流
- 事件对象
- 事件代理
- 事件类型
这些是在DOM阶段就熟悉的概念，在vue中依旧存在。
1.事件绑定
可以用 v-on 指令监听DOM 事件，并在触发时运行一些 JavaScript 代码。
v-on 还可以接收一个需要调用的方法名称：
<button v-on:click="handler">good</button>
// 调用的方法名称handler
……
methods: {
handler: function (event) {
if (event) {
alert(event.target.tagName)
}
// event 是原生 DOM 事件
} }除了直接绑定到一个方法，也可以在内联 JavaScript 语句中调用方法，通过$event传递原生事件对象：
<button v-on:click="say('hi',$event)">Say hi</button>
methods: {
say: function (message,event) {
alert(message) } }实例：
<body>
<div id="app">
<button @click="handler">一号点击</button>
<!-- vue将事件对象变成vue的内部属性 -->
<button @click="hand($event,123)">二号点击</button>
</div>
<script>
new Vue({
el:"#app",
data:{
},
methods:{
handler(event){
console.log(event);
},
hand(e, n){
console.log(e, n); // e--$event n--123
}
}
})
</script>
</body>注意: v-on:事件名 也可以直接简写为 @事件名
2.事件修饰符
事件修饰符 ---- 在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。Vue提供了更好的方式：事件处理函数只有纯粹的数据逻辑，而不是去处理 DOM 事件细节，我们可以通过事件修饰符来完成这些细节。
详见：Vue入门【一】-- 基本模板语法_愛 / 滥 / 時的博客-CSDN博客
3.双向数据绑定
可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。 它会根据控件类型自动选取正确的方法来更新元素。
Vue 是数据双向绑定的框架，双向绑定由三个重要部分构成：
- 数据层（Model）：应用的数据及业务逻辑
- 视图层（View）：应用的展示效果，各类UI组件
- 业务逻辑层（ViewModel）：框架封装的核心，它负责将数据与视图关联起来
<body>
<div id="app">
<!-- v-model 数据改变视图也会更新 用户的交互也会更新数据 -->
{{stu}}
<!-- lazy 修饰符 输入完毕按下回车后才会更新到数据层 -->
<!-- 用户名：<input type="text" v-model.lazy="stu.username"> -->
<!-- trim 修饰符 自动去除前后空格 -->
用户名：<input type="text" v-model.trim="stu.username">
<!-- number修饰符 将原本输入的string转换为number类型的值 -->
密码：<input type="password" v-model.number="stu.password">
<br>
<!-- 单选框 -->
男：<input type="radio" v-model="stu.gender" value="male">
女：<input type="radio" v-model="stu.gender" value="female">
<!-- 复选框 -->
蜡笔小新：<input type="checkbox" v-model="stu.hobby" value="xin">
混沌武士：<input type="checkbox" v-model="stu.hobby" value="hun">
星际牛仔：<input type="checkbox" v-model="stu.hobby" value="niu">
<!-- 多行文本框 -->
<textarea v-model="stu.introduce"></textarea>
<!-- 下拉框 -->
<select v-model="stu.city">
<option value="guilin">桂林</option>
<option value="liuzhou">柳州</option>
<option value="nanning">南宁</option>
</select>
</div>
<script>
new Vue({
el:"#app",
data:{
// 表单对象
stu:{
hobby:[]
}
},
methods:{}
})
</script>
</body>
</html>可以看到，当我们在表单控件中的输入与选择都被{{}}插值语法渲染到了页面上：
本文含有隐藏内容，请 开通VIP 后查看