网站开发工程师学什么,公司内部管理系统软件,怎么查询企业信息,wordpress多功能模板分享
Vue 官网教程上关于
v-model 的讲解不是十分的详细#xff0c;写这篇文章的目的就是详细的剖析一下#xff0c; 并介绍 Vue 2.2
v-model改进的地方#xff0c;然后穿插的再说点 Vue 的小知识。在 Vue 中#xff0c;有许多方法和 Angular 相似#xff0c;这主要是因…分享
Vue 官网教程上关于
v-model 的讲解不是十分的详细写这篇文章的目的就是详细的剖析一下 并介绍 Vue 2.2
v-model改进的地方然后穿插的再说点 Vue 的小知识。在 Vue 中有许多方法和 Angular 相似这主要是因为 Angular 是 Vue 早期开发的灵感来源。然而Augular 中存在许多问题在 Vue 中已经得到解决。 v-model 用在 input 元素上时 v-model虽然很像使用了双向数据绑定的 Angular 的
ng-model但是 Vue 是单项数据流
v-model 只是语法糖而已↓input v-modelsth / input v-bind:valuesth v-on:inputsth $event.target.value /
第一行的代码其实只是第二行的语法糖。然后第二行代码还能简写成这样↓
input :valuesth inputsth $event.target.value /
要理解这行代码首先你要知道
input 元素本身有个
oninput 事件这是 HTML5 新增加的类似
onchange 每当输入框内容发生变化就会触发
oninput 把最新的
value传递给
sth。
如果你不知道
$event 是从哪来的那你需要点击它再复习一下文档。我们仔细观察语法糖和原始语法那两行代码可以得出一个结论
在给 input / 元素添加 v-model 属性时默认会把 value 作为元素的属性然后把 input 事件作为实时传递 value 的触发事件 v-model 用在组件上时 v-model 不仅仅能在
input上用在组件上也能使用下面是一个和 Vue 官网教程类似的例子在看这个例子时我们要考虑两个问题实例演示.gif 父组件的
price 的初始值是 100更改子组件的值能实时更新父组件的
pricediv iddemo currency-input v-modelprice/currentcy-input span{{price}}/span /div script srchttps://cdn.bootcss.com/vue/2.3.0/vue.js/script script Vue.component(currency-input, { template: span input refinput :valuevalue !--为什么这里把 input 作为触发事件的事件名input 在哪定义的-- input$emit(input, $event.target.value) /span , props: [value],// 为什么这里要用 value 属性value在哪里定义的貌似没找到啊 }) var demo new Vue({ el: #demo, data: { price: 100, } }) /script 如果你知道这两个问题的答案那么恭喜你真正掌握了
v-model如果你没明白那么可以看下这段代码↓currency-input v-modelprice/currentcy-input !--上行代码是下行的语法糖 currency-input :valueprice inputprice arguments[0]/currency-input --
现在你知道
value 和
input 从哪来的了吧。与上面总结的类似给组件添加 v-model 属性时默认会把 value 作为组件的属性然后把 input 值作为给组件绑定事件时的事件名 v-model 的缺点和解决办法
在创建类似复选框或者单选框的常见组件时
v-model就不好用了。input typecheckbox v-modelsth / v-model 给我们提供好了
value 属性和
oninput 事件但是我们需要的不是
value 属性而是
checked 属性并且当你点击这个单选框的时候不会触发
oninput 事件它只会触发
onchange 事件。这就尴尬了?因为
v-model 只是用到了 input 元素上所以这种情况好解决↓input typecheckbox :checkedstatus changestatus $event.target.checked /
当
v-model 用到组件上时↓my-checkbox v-modelfoo/my-checkbox Vue.component(my-checkbox, { tempalte: input typecheckbox change$emit(input, $event.target.checked) :checkedvalue / props: [value], }) 在 Vue 2.2 版本你可以在定义组件时通过 mode l选项的方式来定制 prop/event↓
my-checkbox v-modelfoo/my-checkbox Vue.component(my-checkbox, { tempalte: input typecheckbox !--这里就不用 input 了而是 balabala-- change$emit(balabala, $event.target.checked) :checkedvalue / props: [checked], //这里就不用 value 了而是 checked model: { prop: checked, event: balabala }, })。
学习过程中遇到什么问题或者想获取学习资源的话欢迎加入学习交流群343599877我们一起学前端
