1. 什么是双向绑定?
Vue框架很核心的功能就是双向的数据绑定。
双向是指:HTML 标签数据绑定到 Vue对象,另外反方向数据也是绑定的。
通俗点说就是,Vue 对象的改变会直接影响到 HTML 的标签的变化,而且标签的变化也会反过来影响 Vue 对象的属性的变化。
这样以来,就彻底变革了之前 Dom 的开发方式,之前 Dom 驱动的开发方式尤其是以 jQuery 为主的开发时代,都是 dom 变化后,触发 js 事件,然后在事件中通过 js 代码取得标签的变化,再跟后台进行交互,然后根据后台返回的结果再更新 HTML 标签,异常的繁琐。
有了 Vue 这种双向绑定,让开发人员只需要关心 json 数据的变化即可,Vue 自动映射到 HTML 上,而且HTML 的变化也会映射回 js 对象上,开发方式直接变革成了前端由数据驱动的 开发时代,远远抛弃了Dom开发主导的时代了。
v-model 指令用来在 、
它会根据控件类型自动选取正确的方法来更新元素
这样说有些神奇,但 v-model 本质上不过是语法糖
它负责监听用户的输入事件以更新数据,并处理一些极端的例子
语法糖
语法糖(Syntactic sugar),也译为糖衣语法,指计算机语言中添加的某种语法,这种语法对语言的功能并没有影响,但是更方便程序员使用。通常来说使用语法糖能够增加程序的可读性,从而减少程序代码出错的机会。
简单的说,语法糖就是一种便捷写法。例如:
input.map(item => item + 1);
input.map(function (item) {
return item + 1;
});
通过例子你可以看出来,语法糖的使用其实就是让我们的写的代码更简单,看起来也更容易理解
简单的说,语法糖就是一种便捷写法,例如:
input.map(item => item + 1)
它表达的意思就是
input.map( function ( item ){
return item + 1
})
通过这个例子你可以看出来,箭头函数让让我们写代码更简洁,但是达到的效果是一样的。这个箭头函数就是语法糖。
糖在不改变其所在位置的语法结构的前提下,实现了运行时的等价效果。
Vue 中有若干个“语法糖”:
后三种语法糖即使不深入理解,也可以直接应用, V-model 的实现原理我们深入理解后有助于更好的使用
1. 文本
<input v-model = 'message' placeholder = 'edit me'>
<p> {{message}}p>
现在页面上有两个 message 的值的输出,这个时候你对对 input 框里的值发生改动时,下面的 message 值也发生了改变
2. 多行文本
<div id="app">
<span>文字输出到这里:span>
<p style = 'white-space:pre-line'>{{message}}p>
<br>
<textarea v-model = 'message' placeholer = '请在此输入文字'>textarea>
div>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'Vue 很强大!'
}
})
直接在文本区域插值 ( ) 并实现效果,用 v-model 绑定一下,就实现了数据绑定
你应该已经发现了,我们一般通过 javascript 在组件中的 data 选项中声明初始值
v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值。因为它会选择 Vue 实例中的数据来作为具体的值
下面我们用 v-model 来做一个表单