表单双绑、组件
1、什么是双向数据绑定
Vue.js是一个MV VM框架, 即数据双向绑定, 即当数据发生变化的时候, 视图也就发生变化, 当视图发生变化的时候,数据也会跟着同步变化。这也算是Vue.js的精髓之处了。
值得注意的是,我们所说的数据双向绑定,一定是对于UI控件来说的非UI控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提。如果我们使用vue x那么数据流也是单项的,这时就会和双向数据绑定有冲突。
1.1 为什么要实现数据的双向绑定
在Vue.js
中,如果使用vuex
, 实际上数据还是单向的, 之所以说是数据双向绑定,这是用的UI控件来说, 对于我们处理表单, Vue.js
的双向数据绑定用起来就特别舒服了。即两者并不互斥,在全局性数据流使用单项,方便跟踪;局部性数据流使用双向,简单易操作。
2、在表单中使用双向数据绑定(v-model)
你可以用v-model
指令在表单、及元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇, 但v-model
本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端
注意:v-model
会忽略所有表单元素的value
、checked
、selected
特性的初始值而总是将Vue
实例的数据作为数据来源。你应该通过JavaScript
在组件的data
选项中声明初始值!
2.1 单行文本
<div id="hello">
<p>
<!--单行文本-->
输入的文本:<input type="text" v-model="msg">{{msg}}
</p>
</div>
<script src="../vue.js"></script>
<script>
var vm = new Vue({
el: '#hello',
data: {
msg: ''
}
});
</script>
2.2 多行文本
<div id="hello">
<p>
<!--多行文本-->
输入的文本:<textarea v-model="msg"></textarea>{{msg}}
</p>
</div>
<script src="../vue.js"></script>
<script>
var vm = new Vue({
el: '#hello',
data: {
msg: ''
}
});
</script>
2.3 单选框
<div id="hello">
性别:
<input type="radio" name="sex" value="男" v-model="msg"> 男
<input type="radio" name="sex" value="女" v-model="msg"> 女
<p>{{msg}}</p>
</div>
<script src="../vue.js"></script>
<script>
var vm = new Vue({
el: '#hello',
data: {
msg: ''
}
});
</script>
2.4 多选框
<div id="hello">
爱好:
<input type="checkbox" value="打游戏" v-model="msg"> 打游戏
<input type="checkbox" value="学习" v-model="msg"> 学习
<input type="checkbox" value="睡觉" v-model="msg"> 学习
<p>{{msg}}</p>
</div>
<script src="../vue.js"></script>
<script>
var vm = new Vue({
el: '#hello',
data: {
msg: []
}
});
</script>
2.5 下拉框
<div id="hello">
地址:
<select v-model="msg">
<option value="" disabled>--请选择--</option>
<option>广东</option>
<option>黑龙江</option>
<option>广西</option>
</select>
<p>{{msg}}</p>
</div>
<script src="../vue.js"></script>
<script>
var vm = new Vue({
el: '#hello',
data: {
msg: ''
}
});
</script>
注意:v-model
表达式的初始值未能匹配任何选项,元系将被渲染为“未选中”状态。 在iOS中, 这会使用户无法选择第一个选项,因为这样的情况下,iOS不会触发change
事件。因此,更推荐像上面这样提供一个值为空的禁用选项。
3、组件
组件是可复用的Vue
实例, 说白了就是一组可以重复使用的模板, 跟JSTL
的自定义标签、Thymeleal
的th:fragment
等框架有着异曲同工之妙,通常一个应用会以一棵嵌套的组件树的形式来组织:
例如,你可能会有页头、侧边栏、内容区等组件,每个组件又包含了其它的像导航链接、博文之类的组件。
3.1 第一个 Vue 组件
注意:在实际开发中,我们并不会用以下方式开发组件,而是采用vue-cli
创建,vue
模板文件的方式开发,以下方法只是为了让大家理解什么是组件。
使用Vue.component()
方法注册组件,格式如下:
<div id="hello">
<aze/>
</div>
<script src="../vue.js"></script>
<script>
Vue.component("aze",{
template: '<h2>Hello,Vue!</h2>'
});
var vm = new Vue({
el: '#hello'
});
</script>
说明:
Vue.component()
:注册组件pan
:自定义组件的名字template
:组件的模板
3.2 使用 props 属性传递参数
像上面那样用组件没有任何意义,所以我们是需要传递参数到组件的,此时就需要使用props
属性了!
注意:默认规则下props属性里的值不能为大写;
<div id="hello">
<aze v-for="item in items" v-bind:abc="item"/>
</div>
<script src="../vue.js"></script>
<script>
Vue.component("aze",{
props: ['abc'],
template: '<h2>{{abc}}</h2>'
});
var vm = new Vue({
el: '#hello',
data: {
items: ["Java","C","Python"]
}
});
</script>
说明:
v-for="item in items"
:遍历Vue
实例中定义的名为items
的数组,并创建同等数量的组件v-bind:panh="item"
:将遍历的item
项绑定到组件中props
定义名为item
属性上;= 号左边的panh
为props
定义的属性名,右边的为item in items
中遍历的item项的值