vue单向绑定,vue绑定表单数据
本文主要介绍vue表单绑定和组件的相关信息，帮助你更好的理解和学习使用vue框架。感兴趣的朋友可以了解一下。
目录
一、什么是双向数据绑定？
1.为什么要实现数据的双向绑定？
第二，采用双向数据绑定的形式
1.单行文本2，多行文本3，单个复选框4，多个复选框5，单选按钮6，下拉框3。什么是组件？
1.第一Vue组件
2.使用props属性传递参数。
一、什么是双向数据绑定
Vue.js是一个MV VM框架，即数据的双向绑定，即数据变化时视图变化，视图变化时数据同步变化。这就是Vue.js的精髓
值得注意的是，当我们谈到双向数据绑定时，一定是UI控件的非UI控件不会涉及双向数据绑定。单向数据绑定是使用状态管理工具的前提。如果我们用vue x，那么数据流也是单一的，会和双向数据绑定冲突。
1、为什么要实现数据的双向绑定
在Vue.js中，如果使用vuex，其实数据还是单向的。之所以是双向数据绑定，是因为使用了UI控件。对于我们处理表单来说，Vue.js的双向数据绑定用起来特别舒服。即两者不互斥，在全局数据流中使用一个单项，便于跟踪；本地数据流是双向的，简单易操作。
二、在表单中使用双向数据绑定
您可以使用v-model指令在表单和元素上创建双向数据绑定。它将根据控件类型自动选择正确的方法来更新元素。尽管它很神奇，但v-model本质上只不过是语法糖。它负责监测用户的输入事件来更新数据，并针对一些极端场景做一些特殊处理。
注意：v-model忽略所有表单元素的value、checked和selected属性的初始值，始终以Vue实例的数据作为数据源。你应该通过JavaScript在组件的数据选项中声明初始值！
1、单行文本
！声明文档类型
html lang=en
头
meta charset=UTF-8
标题标题/标题
/头
身体
div id=应用程序
输入的文本：input type= text v-model= message value= hello { { message } }
/div
script src= https://cdn . jsdelivr . net/NPM/vue @ 2 . 5 . 21/dist/vue . min . js /script
脚本类型=文本/javascript
var vm=new Vue({
埃尔： #app ，
数据：{
消息：“”
}
});
/脚本
/body
/html
2、多行文本
！声明文档类型
html lang=en
头
meta charset=UTF-8
标题标题/标题
/头
身体
div id=应用程序
多行文本：textareav-model= pan /textarea nbsp。nbsp多个版本：{{pan}}
/div
script src= https://cdn . jsdelivr . net/NPM/vue @ 2 . 5 . 21/dist/vue . min . js /script
脚本类型=文本/javascript
var vm=new Vue({
埃尔： #app ，
数据：{
潘：“你好你好！”
}
});
/脚本
/body
/html
3、单复选框
！声明文档类型
html lang=en
头
meta charset=UTF-8
标题标题/标题
/头
身体
div id=应用程序
单一复选框：
输入类型=复选框 id=复选框 v-model=选中
nbspnbsp
=复选框的标签“{checked}}/label
/div
script src= https://cdn . jsdelivr . net/NPM/vue @ 2 . 5 . 21/dist/vue . min . js /script
脚本类型=文本/javascript
var vm=new Vue({
埃尔： #app ，
数据：{
选中：假
}
});
/脚本
/body
/html
4、多复选框
！声明文档类型
html lang=en
头
meta charset=UTF-8
标题标题/标题
/头
身体
div id=应用程序
多个复选框：
输入类型= checkbox id= Jack value= Jack v-model= checked names
nbspnbsp
=jack 的标签Jack/label
输入类型=复选框 id=联接值=联接 v-model=checkedNames
nbspnbsp
=join 插孔的标签/标签
输入类型=复选框 id=mike 值=Mike v-model=checkedNames
nbspnbsp
标签为=麦克麦克/标签
span的选定值：{{checkedNames}}/span
/div
script src= https://cdn . jsdelivr . net/NPM/vue @ 2 . 5 . 21/dist/vue . min . js /script
脚本类型=文本/javascript
var vm=new Vue({
埃尔： #app ，
数据：{
checkedNames:[]
}
});
/脚本
/body
/html
5、单选按钮
！声明文档类型
html lang=en
头
meta charset=UTF-8
标题标题/标题
/头
身体
div id=应用程序
单选按钮框
输入类型= radio id= One value= One v-model= picked
的标签=oneOne/label
输入类型=单选 id=两个值=两个 v-model=已选取
标签为=twoTwo/label
span的选定值：{{picked}}/span
/div
script src= https://cdn . jsdelivr . net/NPM/vue @ 2 . 5 . 21/dist/vue . min . js /script
脚本类型=文本/javascript
var vm=new Vue({
埃尔： #app ，
数据：{
已选：“两个”
}
});
/脚本
/body
/html
6、下拉框
！声明文档类型
html lang=en
头
meta charset=UTF-8
标题标题/标题
/头
身体
div id=应用程序
下拉框：
选择垂直模型=平移
选项= 已禁用-请选择-/选项
选项a/选项
选项b/选项
选项c/选项
选项d/选项
/选择
spanvalue:{{pan}}/span
/div
script src= https://cdn . jsdelivr . net/NPM/vue @ 2 . 5 . 21/dist/vue . min . js /script
脚本类型=文本/javascript
var vm=new Vue({
埃尔： #app ，
数据：{
潘：“答”
}
});
/脚本
/body
/html
注意：v-model表达式的初始值未能匹配任何选项，元系统将呈现为“未检查”。在iOS中，这将阻止用户选择第一个选项，因为在这种情况下，iOS不会触发change事件。因此，更建议像上面那样提供一个空值的禁用选项。
三、什么是组件
它是组件的一个可重用的Vue实例。说白了就是一套可以复用的模板。它类似于JSTL的自定义标签，百里香的th:fragment和其他框架。通常，应用程序是以嵌套组件树的形式组织的：
例如，您可能有一个标题、侧边栏、内容区域和其他组件，每个组件包含其他组件，如导航链接和博客帖子。
1、第一个Vue组件
注意：在实际开发中，我们不使用以下方法开发组件，而是使用vue-cli创建和vue模板文件进行开发。以下方法只是为了让大家明白什么是组件。
使用Vue.component()方法注册组件，格式如下：
div id=应用程序
平移/平移
/div
script src= https://cdn . jsdelivr . net/NPM/vue @ 2 . 5 . 21/dist/vue . min . js /script
脚本类型=文本/javascript
//首先注册组件
Vue.component(pan ，{
模板： liHello/li
});
//重新实例化Vue
var vm=new Vue({
埃尔： #app ，
});
/脚本
描述：
Vue.component():注册组件
Pan:自定义组件的名称。
模板：组件的模板。
2、使用props属性传递参数
像上面这样使用组件是没有任何意义的，所以我们需要给组件传递参数，然后需要使用props属性！
注意：默认情况下，props属性中的值不能大写；
！声明文档类型
html lang= en xmlns:v-bind= http://www . w3 . org/1999/XHTML
头
meta charset=UTF-8
标题标题/标题
/头
身体
div id=应用程序
！-组件，传递给组件中的值：props -
CPN v-for= items中的item v-bind:item child= item /
/div
！-1.导入vue.js -
script src= https://cdn . jsdelivr . net/NPM/vue @ 2 . 5 . 21/dist/vue . min . js /script
脚本
//定义一个vue组件组件
Vue.component(cpn ，{
道具：[itemChild]，
模板：` li{{itemChild}}/li
})
var vm=new Vue({
埃尔： #app ，
数据：{
物品：[海贼王，火影忍者，剑神域]
}
});
/脚本
/body
/html
描述：
v-for= items in items :遍历Vue实例中定义的名为items的数组，并创建相同数量的组件。
V-bind:itemChild=item :将遍历的项绑定到由组件中的props定义的名为item的属性；=号左边的itemChild是props定义的属性名，右边的值是items中item被遍历的值。
以上是对vue表单绑定和组件的详细说明。更多关于vue表单绑定和组件的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。