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>

技术
下载桌面版
GitHub
百度网盘(提取码:draw)
Gitee
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:[email protected]
QQ群:766591547
关注微信