- 问题:单向绑定的确可以将new Vue()中的变量值更新到页面显示,但还是无法将页面中用户输入的新内容,自动反向更新到new Vue()中保存
- 单向绑定:只能将new Vue()中模型对象转给你变量值的修改更新到页面上显示,如果页面中元素内容发生变化,无法自动将更改更新会new Vue()中的模型对象中保存
- 解决:今后只要希望自动获得用户在界面上输入或选择的新值,只能用双向绑定
- 双向绑定:既能将new Vue()中模型对象中变量值的修改更新到页面上显示.又能将页面中元素内容发生的变化,自动更新回new Vue()中的模型对象中保存
- 如何:
<表单元素 v-model:可能变化的属性="变量">简写:<表单元素 v-model="变量"> - 强调:双向绑定几乎只用在表单元素上
- 原理:v-model包含两部分原理
(1).从Model->View的绑定:访问器属性+虚拟DOM树
(2).从View->Model的绑定是新的原理:
new Vue()扫描到包含v-model的表单元素时,就自动为表单元素绑定onchange=function(){}
事件处理函数,意为当表单元素的值发生变化时,
就自动触发.然后在onchange事件处理函数内,
包含自动获取当前元素值并自动更新回Vue中指定变量中保存的语句
示例:
本例中: 点击button执行查找操作
用户在文本框上按回车，也能执行和按钮的click一样的查找操作！-->
<div id="app">
<input type="text" @keyup="search2" v-model:value="keywords">
<button @click="search">百度一下</button>
</div>
<script>
//2. 定义new Vue()对象
new Vue({
el:"#app",
//3. 定义模型对象
//问题: 页面中共需要几个变量
//本例中: 页面中只需要一个变量keywords，且如果用户未输入时，
keywords的默认值为""
//问题: 页面中共需要几个事件处理函数
//本例中: 按钮需要search函数
// 文本框需要search2函数
data:{
keywords:""
},
methods:{
search(){
//如果用户输入的关键词去空格后不为空
//if(this.keywords.trim()!==""){
//才用关键词执行查找操作
console.log(`查找 ${this.keywords} 相关的内容....`)
//}
},
search2(e){
//只有点在回车上，才执行search操作
if(e.keyCode==13){
this.search();
}
}
}
})
</script>
8.问题:不是所有表单元素修改时,更新的收视value属性,比如radio和checkbox元素更新时,更新的就不是value属性,而是value属性写死固定不变,而跟新checked选中状态属性 9.解决:用户修改表单元素时,哪个属性变化,就用v-model绑定哪个属性.比如:如果value属性值可能发生变化,就用v-model:value="变量",再比如如果checked属性可能发生变化,就用v-model:checked="变量" 10.其他类型的表单元素如何双向数据绑定:
(1).单选按钮:<input type="radio">
a.当用户选中与不选中时,修改的是checked属性,所以如果双向绑定时
应该用v-model:checked="变量"
b.如何:<input type="radio" value="写死的值" v-model="变量">
c.原理:
1).从Model-View绑定时,v-model先自动用变量的值和写死的value值做比较,
如果变量值==value值,则当前radio选中,否则如果变量值!=value值,则当前radio不选中.
2).从View->Model绑定时,当用户切换选中状态时,自动触发onchange事件,
onchange事件中只将选中的radio的值自动更新回v-model绑定的变量中
(2).下拉选择框:<select>...</select>
a.当用户在select内选择不同的option时,其实改的是整个select的value属性
b.如何:<select v-model="变量">
c.原理:
1).从Model-> view绑定时,v-model将变量值自动和每个option的value比较,
哪个option的value值与变量值相等,就自动选中这个option
(3).复选框单独使用:<input type="checkbox">
a.用户选中或不选中checkbox时,更改的是checked属性
b.如何:<input type="checkbox" v-model="变量">
c.强调:不需要写value,且checked值应该是一个bool值!true就选中,false就不选中
d.原理:
1).从Model->View绑定,变量值为true,就选中,变量值Wiefalse就不选中
2).从View->Model绑定,用户选中checkbox,就将true传到vue中变量里保存,
如果用户未选中checkbox,就将false传到vue中变量里保存
11.简写:v-model后的:value和:checked全部都可以省略!
双向数据绑定只写<表单元素 v-model="变量">
因为v-model会自定义区分该绑定哪个元素,不用人为区分
