vue表单元素和组件中v-model应⽤、⾃定义v-model、watch监听(1)表单与侦听器
1、放在input、textarea等输⼊框标签内
<input v-model="message" placeholder="edit me">
<textarea v-model="message" placeholder="add multiple lines"></textarea>
(1)会忽略表单元素的value初始值,⽽是将data中初始化变量据作为数据来源的初始值
修饰符(可以链式调⽤):
v-model.lazy 等到回车/焦点消失，变量中的内容才是输⼊框中的内容
v-model.number 将⽤户的输⼊值转为数值类型，单纯设置<input type='number'' />还是会被转换成字符串
2、放在单选框/复选框中
v-model='变量'
单选框:
v-model值为选中的value值
<input type="radio" id="one" value="One" v-model="picked">
<input type="radio" id="two" value="Two" v-model="picked">
多选框:
(1)当标签未设置value,v-model会绑定是否选中的布尔值
<input type="checkbox" id="checkbox" v-model="checked"> 未设置value初始值，则会绑定到选中状态的布尔值
(2)当标签设置value，且v-model绑定的值是数组，则会根据是否选中的value，往数组增/删元素
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<input type="checkbox" id="john" value="John" v-model="checkedNames">
checkedNames: []
3、下拉框
v-model的值为option标签中选中的值，若option标签设置了value，则为value值
<select v-model="selected">
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
4、多选下拉框(即在下拉框多加了multiple属性)
v-mdodel必须声明成数组[ ]，数组内容为多选⽂本内容，若option标签设置了value，则为value值
<select v-model="selected" multiple >
<option>A</option>
<option>B</option>
<option>C</option>
</select>
其中:
使⽤model选项来⾃定义各个表单的v-model
<template>
<input
type="checkbox"
:checked="v-model传递的变量名"
@change="$emit('改变时触发的事件名称', $event.target.checked)"
>
</template>
export default{
model:{
prop: 'v-model传递的变量名',  v-model的值会传⼊该变量
event: '改变时触发的事件名称'
},
props:['v-model传递的变量名'] 在组件的props选项⾥声明这个prop。
}
<base-checkbox v-model="lovingVue"></base-checkbox>
<base-checkbox v-model="lovingVue"></base-checkbox>
这⾥的lovingVue的值将会传⼊这个prop，同时当<base-checkbox>触发⼀个change事件并附带⼀个新的值的时，这个lovingVue的property将会被更新。
(2)组件中使⽤v-model
1、在标签上使⽤v-model会等价于
<input v-model="searchText">
<input
v-bind:value="searchText"
@input="searchText = $event.target.value"
>
2、故在组件上使⽤，需要接收传递的value和$emit抛出input事件让⽗元素接收
<custom-input v-model="searchText"></custom-input>
旧版本:
<custom-input
v-bind:value="searchText"
@input="searchText = $event"
></custom-input>
组件中:
Vueponent('custom-input', {
props: ['value'],
template: `
<input
input标签placeholder属性v-bind:value="value"
@input="$emit('input', $event.target.value)"
>
`
})
新版本:
<custom-input
:model-value="searchText"
@update:model-value="searchText = $event"
></custom-input>
组件中:
appponent('custom-input', {
props: ['modelValue'],
emits: ['update:modelValue'],
template: `
<input
:value="modelValue"
@input="$emit('update:modelValue', $event.target.value)"
>
`
})
(1)修改默认:modelValue 、update:modelValue默认名称
通过v-model:⾃定义名称，进⾏修改
<my-component v-model:title="bookTitle"></my-component>
appponent('my-component', {
props: {
title: String
},
emits: ['update:title'],
template: `
<input
type="text"
:value="title"
@input="$emit('update:title', $event.target.value)">
`
})
(2)传递并修改多个v-model名称同理:
<user-name
v-model:first-name="firstName"
v-model:last-name="lastName"
v-model:last-name="lastName"
></user-name>
(3)⾃定义修饰符
<my-component v-model.capitalize="myText"></my-component>
1、添加到组件v-model的修饰符将通过modelModifiers这个prop提供给组件
appponent('my-component', {
props: {
modelValue: String,
modelModifiers: {
default: () => ({})
}
},
emits: ['update:modelValue'],
created() {
console.delModifiers)  =>{ capitalize: true }
},
methods: {
emitValue(e) {
let value = e.target.value
if (delModifiers.capitalize) {
value = value.charAt(0).toUpperCase() + value.slice(1)
}
this.$emit('update:modelValue', value)
}
},
template: `<input
type="text"
:value="modelValue"
@input="emitValue">`
})
2、重命名的带修饰符的v-model
<my-component v-model:description.capitalize="myText"></my-component>
appponent('my-component', {
props: ['description', 'descriptionModifiers'],
emits: ['update:description'],
template: `
<input type="text"
:value="description"
@input="$emit('update:description', $event.target.value)">
`,
created() {
console.log(this.descriptionModifiers)  =>{ capitalize: true }
}
})
(4)使⽤computed封装
appponent('custom-input', {
props: ['modelValue'],
emits: ['update:modelValue'],
template: `
<input v-model="value">
`,
computed: {
value: {
get() {
delValue
},
set(value) {
this.$emit('update:modelValue', value)
}
}
}
}
})
(3)监听函数
监听的就是引⽤地址
不能使⽤箭头函数:this将不会按照期望指向Vue实例，
watch:{
(1)普通监听
函数名(data)/变量名:function(newData,oldData)
{
xxx
},
变量名:'methods中声明的变量名'
"对象.属性":function (val, oldVal) {...} 监视嵌套属性，即对象下的某个属性
(2)监听对象/数组内部属性的变化,deep表⽰深层监听
名称:{
handler:⽅法,
deep:true
},
vm.$watch('someObject', callback, {
deep: true
})
(2.5)监听函数返回值
vm.$watch(
function () {
return this.a + this.b  每当返回不同结果都会触发监听回调，类似计算属性
return this.a.b  监视嵌套属性，通过函数的⽅式
},
function (newVal, oldVal) {
...
}
)
watch:{
"e.g":function (val, oldVal) {} 监视嵌套属性，即e下的g属性
}
(2.6)设置监听调⽤时机
vm.$watch('value',fn,{
flush:'pre'|'post'|'sync'
'pre': 默认值，指定的回调应该在渲染前被调⽤，它允许回调在模板运⾏前更新了其他值。
回调使⽤队列进⾏缓冲，回调只被添加到队列中⼀次，即使观察值变化了多次，值的中间变化将被跳过，不会传递给回调。      'post'：指定回调推迟到渲染之后调⽤，如果回调需要通过$refs访问更新的DOM或⼦组件，那么则使⽤该值。
回调使⽤队列进⾏缓冲，回调只被添加到队列中⼀次，即使观察值变化了多次，值的中间变化将被跳过，不会传递给回调。      'sync': ⼀旦值发⽣了变化，回调将被同步调⽤,⽆pre和post的特性。
})
(3)侦听开始⽴即调⽤
名称:{
handler:⽅法,
immediate: true,
},
vm.$watch('a', callback, {
immediate: true
})
(4)可以传⼊回调数组，它们会被逐⼀调⽤
名称:[回调函数，回调函数,...]
f:[
⽅式⼀:
'handle1', 在methods中声明的函数名
'handle1', 在methods中声明的函数名
⽅式⼆:
function handle2(val, oldVal) {
console.log('handle2 triggered')
},
⽅式三:
{
handler: function handle3(val, oldVal) {
console.log('handle3 triggered')
}，
deep: true
},
...
]
(5)返回取消监听函数
var unwatch = vm.$watch('a', cb);
unwatch(); 取消监听，当添加immediate参数时，不能在第⼀次回调函数中取消监听兼容写法:
var unwatch = vm.$watch(
'value',
function () {
doSomething()
if (unwatch) {
unwatch()
}
},
{ immediate: true }
)
}
代码⽰例:
<template lang='html'>
<div >
<div>
/
/输⼊框
<input im.number='inpt' type='text' name='' value='' id=''>
<p>{{inpt}}</p>
//单个多选按钮
<input type='checkbox' value='a' id='ipt' v-model='checked'>
<label for='ipt'>{{checked}}</label>
<span>{{checked}}</span>
//单选按钮
<input type="radio" id="one"  v-model="picked">
<label for="one">One</label>
<span>{{picked}}</span>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
//多选下拉框
<select v-model="selected" multiple >
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<br>
<span>Selected:{{ selected }}</span>
//单选下拉框
<select v-model="selected2">
<option disabled value="">请选择</option>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。