贵阳仿站定制模板建站,华为净亏26亿,广州网站建设广州,淄博想建网站文章目录 一、v-model是什么二、什么是语法糖三、v-model常见的用法1、对于输入框#xff08;input#xff09;#xff1a;2、对于复选框#xff08;checkbox#xff09;#xff1a;3、对于选择框#xff08;select#xff09;#xff1a;4、对于组件#xff08;comp… 文章目录 一、v-model是什么二、什么是语法糖三、v-model常见的用法1、对于输入框input2、对于复选框checkbox3、对于选择框select4、对于组件component 四、v-model修饰符五、v-model 仅仅是语法糖吗六、v-model 是单向数据流吗七、如何让自定义组件支持 v-model 一、v-model是什么
v-model是Vue框架的一种内置的API指令本质是一种语法糖写法它负责监听用户的输入事件以更新数据并对一些极端场景进行一些特殊处理。在Vue中v-model是用于在表单元素和组件之间创建双向数据绑定的指令。它可以简化表单元素的绑定使得在用户输入时能够自动更新数据。
v-model是valueinput的语法糖是v-band和v-on的简洁写法。v-model就实现了双向数据绑定实际上它就是通过Vue提供的事件机制。即在子组件通过$emit()触发一个事件在父组件使用v-model即可。
二、什么是语法糖
在计算机科学中语法糖syntactic sugar是指编程语言中可以更容易地表达一个操作的语法。它可以使程序员更加容易地使用这门语言使操作变得更加清晰、方便或者更加符合程序员的编程习惯。
具体来说语法糖是语言中的一个构件当去掉该构件后并不影响语言的功能和表达能力。例如C语言中的标记a[i]就是*(ai)的语法糖。
语言的处理器包括编译器静态分析器等经常会在处理之前把语法糖构件转换成更加基础的构件这个过程通常被称为desugaring。
简而言之语法糖就是一种便捷写法。例如input.map(a a-8); 去掉语法糖就是input.map(function (a) { return a - 8; }); 通过例子你可以看出来语法糖的使用其实就是让我们的写的代码更简单看起来也更容易理解。
三、v-model常见的用法
单向数据绑定: 在Vue中我们可以使用v-bind实现单项的数据绑定也就是通过父组件向子组件传入数据 但是反过来子组件不可以修改父组件传递过来的数据 这也就是所谓的单向数据绑定。
双向数据绑定 v-bind和v-on实现了双向绑定实现了双向数据绑定。
1、对于输入框input
input typetext v-bind:valuevalue v-on:inputvalue $event.target.value /或
input typetext :valuevalue inputvalue $event.target.value /v-model是v-bind和v-on的语法糖即v-model算是v-band和v-on的简洁写法。
input typetext v-modelvalue /在这个例子中v-model将输入框的值与数据对象中的value属性进行了绑定。当用户输入时value的值会自动更新。
2、对于复选框checkbox
input v-modelchecked typecheckbox在这个例子中v-model将复选框的选中状态与数据对象中的checked属性进行了绑定。当用户选中或取消选中复选框时checked的值会自动更新。
3、对于选择框select
select v-modelselected option valueoption1Option 1/option option valueoption2Option 2/option
/select在这个例子中v-model将选择框的值与数据对象中的selected属性进行了绑定。当用户选择一个选项时selected的值会自动更新为所选选项的value值。
4、对于组件component
父组件
templatedivchild-component v-modelmessage/child-componentpMessage from parent component: {{ message }}/p/div
/template script
import ChildComponent from ./childComponent.vue;export default {data() {return {message: hello world};},components: {ChildComponent}
};
/script子组件
templatedivpMessage from parent component: {{ value }}/pbutton typebutton clickupdateValue更新/button/div
/template script
export default {props: {value: {type: String,default: }},methods: {updateValue() {this.$emit(input, update message);}}
};
/script在这个例子中父组件将message属性绑定到子组件的value属性上并使用v-model指令来实现双向数据绑定。子组件内部点击按钮更新message并使用$emit()触发一个事件从而更新父组件的message属性。 除了以上的例子v-model还可以用于其他表单元素和组件如文本域textarea、开关switch等。它的工作原理是监听表单元素的输入事件将输入值同步到绑定的数据属性上同时当数据属性的值发生变化时也会自动更新表单元素的值。 需要注意的是v-model使用的数据属性通常应该是响应式对象或数组这样才能够实现数据的双向绑定。如果使用非响应式对象或数组v-model可能无法正常工作。 四、v-model修饰符
v-model有一些常用的修饰符它们可以用来控制v-model的行为。使用这些修饰符可以让我们更方便地控制v-model的行为提高开发效率。
以下是一些常用的v-model修饰符
input v-model.lazymessage
input v-model.numbermessage
input v-model.trimmessage.lazy用于实现懒加载只有当输入框获取焦点时才会更新绑定的数据。.number我们的输入将自动将输入转为字符串—即使我们将输入是数字。确保将值作为数字处理的一种方法是使用. number修饰符。根据Vue文档如果输入发生变化并且parseFloat()无法解析新值那么将返回输入的最后一个有效值。.trim与大多数编程语言中的trim方法类似.trim修饰符在返回值之前删除开头或结尾的空格。
五、v-model 仅仅是语法糖吗
v-model不仅仅是语法糖它还具有创建响应式数据的功能。v-model将组件的value属性和input事件进行绑定实现数据的双向绑定。同时v-model还可以创建响应式数据例如在表单元素上绑定一个不存在的属性v-model会自动创建该属性并且该属性是响应式的。因此v-model的作用不仅仅是语法糖还包括创建响应式数据和实现数据的双向绑定。
举个例子
template div input typetext v-modeluser.age /div
/template script
export default { data() { return { user:{name:张三 }}; }
};
/script在这个例子中响应式数据user中没有定义 user.age 属性但是 template 里却用 v-model 绑定了 user.agev-model会在user 上新增 age 属性并且 age 这个属性还是响应式的。
六、v-model 是单向数据流吗
虽然官方没有明确表示这点但我们可以捋一捋两者的关系。 什么是单项数据流 子组件不能改变父组件传递给它的 prop 属性推荐的做法是它抛出事件通知父组件自行改变绑定的值。 v-model 的做法是怎样的 v-model 做法完全符合单项数据流。甚至于它给出了一种在命名和事件定义上的规范。 单向数据流』总结起来其实也就8个字『数据向下事件向上』。 七、如何让自定义组件支持 v-model
一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件但是像单选框、复选框等类型的输入控件可能会将 value 属性 用于不同的目的。model 选项可以用来避免这样的冲突。
在定义 vue 组件时你可以提供一个 model 属性用来定义该组件以何种方式支持 v-model。
model 属性本身是有默认值的如下
// 默认的 model 属性
export default {model: {prop: value,event: input}
}也就是说如果你不定义 model 属性或者你按照上面方法定义属性当其他人使用你的自定义组件时v-model“foo” 就完全等价于 :value“foo” 加上 input“foo $event”。
让我们看个例子。
先定义一个自定义组件
templatediv当前数量是{{ count }}el-button clickchangeCount(1)加/el-buttonel-button clickchangeCount(-1)减/el-button/div
/template
script
export default {props: {count: {type: Number,default: 1},},// // 自定义v-model的格式model: {prop: count,// 代表 v-model 绑定的prop名event: input// 代码 v-model 通知父组件更新属性的事件名},methods: {changeCount(step) {const newCount this.count stepthis.$emit(input, newCount)},}
}
/script然后我们在父组件中使用该组件
templatedivchild-component v-modelcount/child-component/div
/template
script
import ChildComponent from ./childComponent.vue;
export default {data() {return {count: 6};},components: {ChildComponent}
};
/script在这个例子中这里的 count 的值将会传入这个名为 count 的 prop。同时当 触发一个 changeCount 事件并附带一个新的值的时候这个 count 的 property 将会被更新。 注意你仍然需要在组件的 props 选项里声明 count 这个 prop。
