4.1、什么是双向数据绑定
Vue.js是一个MVVM框架,即数据双向绑定,即当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会跟着同步变化。这也算是Vue.js的精髓之处了。
值得注意的是,我们所说的数据双向绑定,一定是对于UI控件来说的,非UI控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提。如果我们使用vuex
,那么数据流也是单项的,这时就会和双向数据绑定有冲突。
4.1.1、为什么要实现数据的双向绑定
在Vue.js
中,如果使用vuex
,实际上数据还是单向的,之所以说是数据双向绑定,这是用的UI控件来说,对于我们处理表单,Vue.js的双向数据绑定用起来就特别舒服了。即两者并不互斥,在全局性数据流使用单项,方便跟踪;局部性数据流使用双向,简单易操作。
4.2、在表单中使用双向数据绑定
你可以用v-model
指令在表单<input>
、<textarea>
及<select>
元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但v-model本质上不过是语法糖。它负责监听户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。
注意: v-model会忽略所有表单元素的value、checked. selected 特性的初始值而总是将Vue实例的数据作为数据来源。你应该通过JavaScript在组件的data选项中声明初始值!
单行文本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--我们这里希望,输入框的值和{}取值动态绑定,实时相同,我们就使用v-model绑定message-->
<div id="app">
单行文本:<input type="text" v-model="message">{{message}}
</div>
<!--导入Vue.js-->
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data:{
message: ""
}
});
</script>
</body>
</html>
多行文本
<div id="app">
<textarea name="" id="" cols="30" rows="10" v-model="message"></textarea>
{{message}}
</div>
<!--导入Vue.js-->
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data:{
message: ""
}
});
</script>
单选按钮
<div id="app">
<input type="radio" v-model="message" value="男">男
<input type="radio" v-model="message" value="女">女
{{message}}
</div>
<!--导入Vue.js-->
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data:{
message: ""
}
});
</script>
单复选框
<div id="app">
单复选框:<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{checked}}</label>
</div>
<!--导入Vue.js-->
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data:{
checked: false
}
});
</script>
多复选框
<div id="app">
多复选框:
<input type="checkbox" id="Alan" value="Alan" v-model="names">
<label for="Alan">Alan</label>
<input type="checkbox" id="Bill" value="Bill" v-model="names">
<label for="Bill">Bill</label>
<input type="checkbox" id="Tony" value="Tony" v-model="names">
<label for="Tony">Tony</label>
<span>获取的值:{{names}}</span>
</div>
<!--导入Vue.js-->
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data:{
names: []
}
});
</script>
下拉框
<div id="app">
<select v-model="selected">
<option value="" disabled>--请选择--</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
{{selected}}
</div>
<!--导入Vue.js-->
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data:{
selected: ""
}
});
</script>
</body>
</html>
注意:如果v-model
表达式的初始值未能匹配任何选项, 元素将被渲染为"未选:中”状态。在ios中,这会使用户无法选择第-个选项。因为这样的情况下,ios不会触发change事件。因此,更推荐像上面这样提供一个值为空的禁用选项。
4.3、Vue组件
组件是可复用的Vue实例,说白了就是一组可以重复使用的模板,跟JSTL的自定义标签、Thymeleaf的th:fragment 等框架有着异曲同工之妙。通常一个应用会以一棵嵌套的组件树的形式来组织:
例如,你可能会有页头、侧边栏、内容区等组件,每个组件又包含了其它的像导航链接、博文之类的组件。
4.3.1、第一个Vue组件
注意:在实际开发中,我们并不会用以下方式开发组件,而是采用vue-cli创建.vue 模板文件的方式开发,以下方法只是为了让大家理解什么是组件。
使用Vue.component()方法注册组件,格式如下
<!--view层 模板-->
<div id="app">
<chen></chen>
</div>
<!--导入Vue.js-->
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script>
//定义一个Vue组件component
Vue.component("chen",{
template: '<li>Hello</li>'
});
var vm = new Vue({
el: "#app",
//Model:数据
data:{
message:"hello,vue!"
}
});
</script>
说明:
- Vue.component():注册组件
- chen: 自定义组件的名字
- template:组件的模板
4.3.2、使用props属性传递参数
像上面那样用组件没有任何意义,所以我们是需要传递参数到组件的,此时就需要使用props 属性了!
注意:默认规则下props属性里的值不能为大写;
<!--view层 模板-->
<div id="app">
<!--组件:传递给组件中的值:props-->
<chen v-for="item in items" v-bind:item="item"></chen>
</div>
<!--导入Vue.js-->
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script>
//定义一个Vue组件component
Vue.component("item",{
props: ['xi'],
template: '<li>{{xi}}</li>'
});
var vm = new Vue({
el: "#app",
//Model:数据
data:{
items:["Java","Linux","前端"]
}
});
</script>
说明:
v-for="item in items"
:遍历Vue
实例中定义的名为items
的数组,并创建同等数量的组件v-bind: item="item"
: 将遍历的item
项绑定到组件中props
定义的名为item
属性上; =号左边的item为props定义的属性名,右边的为item in items
中遍历的item项的值