03-表单的数据绑定和网络请求
主要内容
- 表单数据绑定
- 生命周期
- 网络请求
表单的数据绑定
概念: 在开发中我们经常需要创建一些表单元素,表单元素的内容由vue实例中的data控制。而用户在表单上的输入操作又可以修改实例中的数据。上面的行为我们称之为表单的双向绑定。
例子: 下面的代码就是实现input表单的双向绑定
<div id="app">
<input v-bind:value="str" @input="inputHandel">
{
{str}}
</div>
<script>
new Vue({
el: "#app",
data: {
str: 'hello world'
},
methods: {
inputHandel(evt) {
this.str = evt.target.value
}
}
})
</script>
注意:
- Vue为了简化表单元素的数据绑定, input 、select、 textarea 这些值绑定全部统一使用value属性,但是单复选框依然是checked属性
<div id=app>
<input v-bind:value="str" @input="inputHandel">
{
{str}}
<textarea :value="str"></textarea>
<select :value="city">
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="gz">广州</option>
<option value="sz">深圳</option>
</select>
<input type="checkbox" :checked="true">
</div>
<script>
new Vue({
el: "#app",
data: {
str: 'hello world',
city: 'sz'
},
methods: {
inputHandel(evt) {
this.str = evt.target.value
}
}
})
</script>
- 虽然Vue帮我们简化了表单元素值得绑定,但是在不同表单元素之间依然有一些差异的。要根据不同的表单元素差异绑定不同的属性与方法还是有些繁琐。这时Vue为了帮我们解决表单的差异,提供了一个v-model的指令,v-model本质上是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。
语法: v-model="data属性"
<div id="app">