vue单向绑定,vue单选框双向绑定
本文主要详细介绍了Vue表单的双重绑定和组件。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下，希望能帮到你。
:
目录
1.什么是双向数据绑定2。在forms 3中使用双向数据绑定。什么是组件摘要？
1、什么是双向数据绑定
Vue.js是一个MV VM框架，即数据的双向绑定，即数据变化时视图变化，视图变化时数据同步变化。这就是Vue.js的精髓
值得注意的是，当我们谈到双向数据绑定时，一定是UI控件的非UI控件不会涉及双向数据绑定。单向数据绑定是使用状态管理工具的前提。如果我们用vue x，那么数据流也是单一的，会和双向数据绑定冲突。
（1）为什么要实现数据的双向绑定
在Vue.js中，如果使用vuex，其实数据还是单向的。之所以是双向数据绑定，是因为使用了UI控件。对于我们处理表单来说，Vue.js的双向数据绑定用起来特别舒服。即两者不互斥，在全局数据流中使用一个单项，便于跟踪；本地数据流是双向的，简单易操作。
2、在表单中使用双向数据绑定
您可以使用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
脚本src=./js/vue.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
脚本src=./js/vue.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
脚本src=./js/vue.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
脚本src=./js/vue.js/script
脚本类型=文本/javascript
var vm=new Vue({
埃尔： #app ，
数据：{
checkedNames:[]
}
});
/脚本
/body
/html
（6）单选按钮
！声明文档类型
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
脚本src=./js/vue.js/script
脚本类型=文本/javascript
var vm=new Vue({
埃尔： #app ，
数据：{
已选：“两个”
}
});
/脚本
/body
/html
（7）下拉框
！声明文档类型
html lang=en
头
meta charset=UTF-8
标题标题/标题
/头
身体
div id=应用程序
！性别：
type= radio name= sex value= male v-model= pan 男性
type= radio name= sex value= female v-model= pan 女
p选定：{{pan}}/p-
下拉框：
选择垂直模型=平移
选项= 已禁用-请选择-/选项
选项a/选项
选项b/选项
选项c/选项
选项d/选项
/选择
spanvalue:{{pan}}/span
/div
脚本src=./js/vue.js/script
脚本类型=文本/javascript
var vm=new Vue({
埃尔： #app ，
数据：{
潘：“答”
}
});
/脚本
/body
/html
注意：v-model表达式的初始值未能匹配任何选项，元系统将呈现为“未检查”。在iOS中，这将阻止用户选择第一个选项，因为在这种情况下，iOS不会触发change事件。因此，更建议像上面那样提供一个空值的禁用选项。
3、什么是组件
它是组件的一个可重用的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
头
meta charset=UTF-8
标题标题/标题
/头
身体
div id=应用程序
！-组件：传递给组件的值：props -
pan v-for= items in items v-bind:panh= item /pan
/div
script src= https://cdn . jsdelivr . net/NPM/vue @ 2 . 5 . 21/dist/vue . min . js /script
脚本类型=文本/javascript
//定义组件
Vue.component(pan ，{
道具：[panh]，
模板： li{{panh}}/li
});
var vm=new Vue({
埃尔： #app ，
数据：{
项目：[java ， Linux ，前端]
}
});
/脚本
/body
/html
说明:
v-for= items in items :遍历Vue实例中定义的名为items的数组，创建相同数量的组件v-bind:panh=item :将遍历的item item绑定到组件中props定义的名为item的属性；=号左边的Panh是props定义的属性名，右边的是items中item遍历的item的值。
总结
本文到此为止。希望能帮到你，也希望你能多关注我们的更多内容！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。