10 - Vue 学习笔记 - v-model 的使用

v-model

v-model 的使用

表单控件在实际开发中是非常常见的。特别是对于用户数据的提交，需要大量的表单

Vue 中使用 v-model 指令来实现表单元素和数据的双向绑定。
让我们来看一下什么是双向绑定。

<div id="app">
	<label>
		<!-- message 与 input 通过 v-model 双向绑定 -->
		<input type="text" v-model="message">
	</label>
	<!-- 用于观察变化的 message	-->
	<h2>{
  {message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
	const app = new Vue({
     
		el: "#app",
		data: {
     
			message: "hello"
		}
	});
</script>

通过上面代码，我们会发现，我们通过修改 input 里面的文本内容，外面展示的 message 也会发生变化，同时通过控制台，我们也可以发现我们保存的 message 也发生了变化，同样地通过控制台修改内容，文本框里面的内容也会发生改变。

---

v-model 原理

v-model 其实是两个 Vue 指令的结合，我们在 input 中先添加 v-bind:value=“message” ，然后这个时候数据就和 input 里面的内容完成了单向绑定。

<input type="text" v-bind:value="message">

我们可以通过控制台修改 message 的内容，发现 input 和 h2 里面的 message 都发生了改变。
但是我们会发现，如果我们通过修改 input 确不能让 h2 里面的内容发生改变，显然，这个时候内存中的 message 变量也没有发生改变，可以通过控制台看到。
那么怎么绑定另外一端的数据呢，我们可以发现 input 有一个事件就叫做 input（当 input 的 value 值发生变化时就会触发），因此我们可以想到，通过个事件，改变 message 的值，
因此我们可以在 methods 中写一个方法，我们可以通过 event 对象的 target 属性的 value 属性获取 value，同时修改，这样就实现了另一端的数据绑定。

<div id="app">
	<label>
		<!-- v-model 实际上是两个指令的结合	-->
		<-- 完整写法 -->
		<-- <input type="text" v-bind:value="message" v-on:input="valueChange"> -->
		<-- 使用语法糖 -->
		<input type="text" :value="message" @input="valueChange">

	</label>
	<h2>{
  {message}}</h2>
</div>