处理用户输入，也可以说与用户交互，比如说用户点击按钮后，我们的页面如何反应
下面我们来处理先来看如何处理最简单的点击事件，我们先把最简单的代码结构写出来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>vue3</title>
</head>
<body>
<div id="app"></div>
<script src="https://www.unpkg.com/vue@next"></script>
<script>
// 处理用户输入
const vueApp = Vue.createApp({
data() {
return {
message: '开始时是托尼',
}
},
template: `
<div>{{message}}</div>
`,
})
vueApp.mount('#app')
</script>
</body>
</html>
现在的基本结构跟上一节课类似，我们有一个数据叫message，把它通过双花括号的方式绑定到了模板中，页面就显示出来了。
现在我们添加一个按钮
<div>
<button v-on:click="onBtnClick">改变</button>
</div>
v-on:click="onBtnClick" 就是给按钮添加了一个点击事件，v-on表示要绑定事件，click表示要绑定的是点击事件，onBtnClick表示点击事件发生后，要调用的事件，大家可以发现其实更原生写法非常相似
还有一点，在实际开发中，v-on:click其实都是使用简写：
@click="onBtnClick"
使用@代替v-on，以后我们也都使用这种写法
现在我们还没有onBtnClick这个回调函数，在vue中，函数都是写在methods这个对象里面，methods就是方法，就是函数，一个意思
下面我们添加回调函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>vue3</title>
</head>
<body>
<div id="app"></div>
<script src="https://www.unpkg.com/vue@next"></script>
<script>
// 处理用户输入
const vueApp = Vue.createApp({
data() {
return {
message: '开始时是托尼',
}
},
methods: {
// 增加点击事件
onBtnClick() {
this.message = '点击变成了钢铁侠'
},
},
template: `
<div>{{message}}</div>
<div>
<button @click="onBtnClick">改变</button>
</div>
`,
})
vueApp.mount('#app')
</script>
</body>
</html>
我们再回调函数里改变了message的值，在页面里点击按钮，显示的文字也变化了，说明onBtnClick这个函数已经被调用了。
现在点击按钮，文字就只能变成固定的，我们想要它可以变成用户输入的内容，我们下面来学习一下在vue里input的使用
我们先在data里增加一个名字是content的数据，
data() {
return {
message: '开始时是托尼',
content: '',
}
},
然后在模板中增加一个input
<div>
<input type="text" v-model="content" />
<button @click="onBtnClick">改变</button>
</div>
这里通过v-model把data里的content绑定给了input，在vue中v-model起到了双向绑定的作用，也就是说我们改变input框里面的值，content的值会变，我们改变content的值，input框里的值也会变
大家现在知道了vue里两种绑定数据的方式，{{}}双花括号，单向绑定，用于把data里的数据显示到页面上，v-model，双向绑定，用于把data里的数据和input框里的内容同步起来。
现在我们要把点击变化以后的内容变成我们用户在input里输入的内容，完整代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>vue3</title>
</head>
<body>
<div id="app"></div>
<script src="https://www.unpkg.com/vue@next"></script>
<script>
// 处理用户输入
const vueApp = Vue.createApp({
data() {
return {
message: '开始时是托尼',
content: '',
}
},
methods: {
onBtnClick() {
this.message = this.content // 把input里面的值赋给message
},
},
template: `
<div>{{message}}</div>
<div>
<input type="text" v-model="content" />
<button @click="onBtnClick">改变</button>
</div>
`,
})
vueApp.mount('#app')
</script>
</body>
</html>
有了v-model的双向绑定，我们知道content的值和input里的值是一样的，我们只要把它赋值给message就行了。
这更原生写法比起来就方便多了，不用去获取dom元素，取值、赋值了
这节课我们学习了如何处理点击事件和获取用户输入的内容，建议初学者动手写一写，才能真正学会。
网友评论