1.v-model指令
1.v-model指令
:Vue中使用v-model指令来实现 表单元素和数据的双向绑定。
表单控件是很常见的,特别是对于用户信息的提交,需要大量的表单。
2.v-model指令实现:表单元素和数据的双向绑定
特点:
1.之前是用Mustache语法将数据在元素中显示,现在是用v-model将数据绑定在属性里;
(表单中很多标签是没有反标签的)
2.之前修改data数据,界面中显示会响应,
使用v-model指令,则表单中修改绑定的数据,则data中的也会改变;
<div id="app">
<input type="text" v-model="message">
<h2>{
{
message}}</h2>
</div>
<script>
const app = new Vue({
el:"#app",
data:{
message:"你好啊"
}
})
</script>
2.v-model的原理
1.v-model的原理
:v-model是一个语法糖,它的背后本质上是包含两个操作:
1. v-bind绑定一个value属性;
(特点1.实现将数据绑定在元素的属性里,动态绑定属性值)
2. v-on指令给当前元素绑定input事件;
(特点2.input事件响应,将data中message的值改为输入框中的值(value值))
控件的value(显示的内容) = data中的值
//input标签里,有一个input事件,用于监听我们用户输入内容,当输入框中输入内容时,该事件响应;
注:input事件:用户在输入框中输入内容时,该事件响应。
2.所以:
<input type="text" v-model="message">
等同于
<input type="text" v-bind:value="message" v-on:input="message = $event.target.value">
<div id="app">
<input type="text" v-model="message">
<input type="text" v-bind:value="message">
<input type="text" v-on:input="message=$event.target.value">
<h2>{
{
message}}</h2>
</div>
<script>
const app = new Vue({
el:"#app",
data:{
message:"你好啊"
},
methods:{
get(event){
this.message=event.target.value;
}
}
})
<