v-bind:是单项绑定,只能单方面交互,但是有时候提交表单元素的时候,必须事项双向的互动,所以就有V-MODEL的运用
v-model实现双向绑定
v-model指令,主要运用到表单元素上!
大家都知道v-model可以实现双向绑定,但是否想过它的本质?
其实本质上的v-model不过是监听用户的input事件来更新数据,以及对一些情况做特殊管理.而数据的来源便是vue实例中的data.
接下来通过案例来看一下V-MODEL的使用效果!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件修饰符之.stop</title>
</head>
<script type="text/javascript" src="js/vue.js" ></script>
<body>
<div id="app">
<p>{{ msg }}</p>
<input type="text" v-model:value="username"/>
</div>
<script>
//vue默认情况下保持单向数据绑定,如果修改了vue保存的数据,会立刻同步到页面上,
//但是修改页面的文本节点,不会修海vued的保存数据
var vm=new Vue({
el:"#app",
data:{
msg:"这是一个段落",
username:'提示消息'
}
});
</script>
</body>
</html>
注意:vue默认情况下保持单向数据绑定,如果修改了vue保存的数据,会立刻同步到页面上,但是修改页面的文本节点,不会修海vued的保存数据