当前位置：首页 > news >正文

Vue入门【四】-- 事件机制与双向数据绑定

news 来源：原创 2024/5/10 13:15:02

首先我们要了解事件机制的特点：

事件三要素
事件绑定
事件流
事件对象
事件代理
事件类型

这些是在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>

可以看到，当我们在表单控件中的输入与选择都被{{}}插值语法渲染到了页面上：