Vue之表单双向数据绑定和组件 您所在的位置:网站首页 什么是双向数据绑定 Vue之表单双向数据绑定和组件

Vue之表单双向数据绑定和组件

2024-05-09 22:47| 来源: 网络整理| 查看: 265

三、表单双向数据绑定和组件

目录:双向数据绑定、组件

1.双向数据绑定

1)什么是双向数据绑定 Vue.js是一个MVVM框架,即数据双向绑定,即当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会跟着同步变化。这就是Vue.js的精髓之处。 值得注意的是,所说的数据双向绑定,一定是对于UI控件来说的,非UI控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提。如果使用vuex,那么数据流也是单项的,这时就会和双向数据绑定有冲突。 为什么要实现数据的双向绑定 在Vue.js中,如果使用vuex,实际上数据还是单向的,之所以说是数据双向绑定,这是用的UI控件来说,对于处理表单,Vue.js的双向数据绑定用起来就特别舒服了。即两者并不互斥,在全局性数据流使用单向,方便跟踪;局部性数据流使用双向,简单易操作。 2)在表单中使用双向数据绑定 可以用v-model指令在表单、及元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但v-model本质上不过也是基础语法。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。 注意:v-model会忽略所有表单元素的value、checked、selected特性的初始值而总是将Vue实例的数据作为数据来源。应该通过JavaScript在组件的data选项中声明初始值。 ①单行文本

v-model 单行文本:;;单行文本是:{{ message }} var vm = new Vue({ el: '#vue', data: { message: "Hello Vue" } });

②多行文本

多行文本:;;多行文本是:{{ message }} var vm = new Vue({ el: '#vue', data: { message: "Hello Textarea" } });

③单复选框

单复选框: ;; {{ checked }} var vm = new Vue({ el: '#Vue', data: { checked: false } });

④多复选框

多复选框: Jack John


【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有