2019-3-31
为什么选择Vue
有这个一个需求,我们需要根据后端数据接口请求返回的数组在页面中按列表展示?
传统上我们使用jQuery的Ajax发送http请求,获取数据。判断列表数据是否存在,如果不存在,显示一条提示信息;如果存在,则显示出来。
<ul class="js-data"></ul>
<script>
$(document).ready(function () {
$.get("https://example.com/api/data")
.then( function (res) {
var $ul = $(".js-data")
if (!res.data.length) {
var $noItem = $("<li>")
$noLi.text("sorry, there are no data")
$ul.append($noItem)
} else {
res.data.forEach( function (item) {
var $li = $("<li>").text(item)
$ul.append($li)
})
}
})
})
</script>
jQuery 这段代码执行了以下逻辑:
1. 使用$.get()发起Ajax,获得数据列表;
2. 获得要挂载列表的ul元素;
3. 如果请求响应的结果中没有数据,则创建一个li元素,显示一段提示文本;
4. 如果有数据,则遍历每一个数据项目,将数据内容添加至li元素中;
5. 并将li元素挂载到ul元素上。
在这个例子js中,我们不仅要处理数据(请求数据,并判断响应的数据是否存在),还要处理视图中的DOM元素(创建li元素,并挂载到ul元素中)。
下面我们用VUE框架来处理上面的需求
<ul class="js-items">
<li v-if="!items.length">sorry, thert are no data</li>
<template v-else>
<li v-for="item in items">{{ item }} </li>
</template>
</ul>
<script>
new Vue({
el: ".js-items",
data: {
items: []
},
created() {
fetch("https://example.com/api/data")
.then(res = > {
this.items = res.data.items
})
}
})
</script>
VUE 这段代码执行了以下逻辑:
1. 使用fetch()发起了一个Ajax请求;(当然也可以用其它请求API,如axios)
2. 将返回数据赋值给data对象中的items属性
在VUE这个例子中,我们只需要按VUE的语法写好HTML部分,然后在script中请求数据,并完成赋值,视图会自动更新,与上面jQuery呈现的页面完全一样。
在VUE这里,视图HTML部分和逻辑SCRIPT部分完全分开,只专注于各自的业务,我们不用在js中操作DOM,VUE框架的内部会自动帮我们处理。这就是MVVM模式,View(视图) 和 Model(数据) 分离,由框架核心ViewModel控制两者关联。
VUE的MVVM模型
关于MVC / MVP / MVVM 理解可以查看阮一峰的blog
在web应用中,最底层最基础的结构是HTML / CSS / Javascript。分别处理页面的结构、样式、行为。
换个角度看,我们也可以把页面划分为视图层和逻辑层。视图层由HTML/CSS处理,逻辑层由JS处理。
按这样划分,我们学习的方向就是VUE框架是如何控制视图层显示,以及如何与逻辑层交互的。
VUE将视图层HTML抽象为一个模板template,作为VUE的template属性的值,模板中HTML元素通过VUE提供的面向视图层的API --叫做指令directive -- 来建立视图层view和viewModel的联系。
VUE向逻辑层model提供的API包括data/methods/computed/watch/filter/component等等。
<div id="app"></div>
<script>
new Vue({
// 视图层view
template: `<ul class="js-items">
<li v-if="!items.length">sorry, thert are no data</li>
<template v-else>
<li v-for="item in items">{{ item }} </li>
</template>
</ul>`,
// 逻辑层model
el: "#app",
data: {
items: []
},
created() {
fetch("https://example.com/api/data")
.then(res = > {
this.items = res.data.items
})
}
})
</script>