©2020-2024 ioDraw All rights reserved
1.事件处理
# 事件指令
-click:点击事件
# input标签的事件
-input：只要输入内容，就会触发
-change：只要输入框发生变化，就会触发
-blur：只要失去焦点，就会触发
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
<title>Title</title> <script src="./js/vue.js"></script> </head> <body> <div
id="app"> <h1>input事件</h1> <input type="text" @input="handleInput"
v-model="username"> --->{{username}} <h1>change事件</h1> <input type="text"
@change="handleChange" v-model="username1"> --->{{username1}} <h1>blur事件</h1>
<input type="text" @blur="handleBlur" v-model="username2"> --->{{username2}}
</div> </body> <script> let vm = new Vue({ el: '#app', data: { username: 'lqz',
username1: '', username2: '', }, methods: { handleInput() {
console.log(this.username) }, handleChange() { console.log('我执行了') },
handleBlur(){ console.log('失去焦点了') } } }) </script> </html>
2.数据的双向绑定
# 数据双向绑定---》只有input标签---》v-model 做双向数据绑定
# 咱们之前写的，其实都是数据的单向绑定
修改js的值，页面变了
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
<title>Title</title> <script src="./js/vue.js"></script> </head> <body> <div
id="app"> <h1>单向数据绑定，咱们不用</h1> <!-- <p>用户名<input type="text"
:value="username"></p>--> <!-- <p>密码<input type="password"
:value="password"></p>--> <!-- <p>--> <!-- <button
@click="handleSubmit">登录</button>--> <!-- </p>--> <h1>双向数据绑定</h1> <p>用户名<input
type="text" v-model="username"></p> <p>密码<input type="password"
v-model="password"></p> <p> <button @click="handleSubmit">登录</button> </p>
</div> </body> <script> let vm = new Vue({ el: '#app', data: { username: 'lqz',
password: '123' }, methods: { handleSubmit() { console.log(this.username)
console.log(this.password) } } }) </script> </html>