vue-learning:1 - 为什么选择vue
为什么选择vue
通过一个对比,展示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部分和逻辑js部分完全分开,只专注于各自的业务,我们不用在js中操作dom,vue框架的内部会自动帮我们处理。这就是mvvm模式,view(视图) 和 model(数据) 分离,由框架核心viewmodel控制两者关联。
vue的mvvm模型
关于mvc / mvp / mvvm 理解可以查看
在web应用中,最底层最基础的结构是html / css / javascript。分别处理页面的结构、样式、行为。
换个角度看,我们也可以把页面划分为视图层和逻辑层。视图层由html/css处理,逻辑层由js处理。
按这样划分,我们学习的方向就是vue框架是如何控制视图层显示,以及如何与逻辑层交互的。
vue将视图层html抽象为一个模板template,作为vue实例的template属性的值,模板中html元素通过指令directive来建立视图层view和viewmodel的联系。
vue向视图层view提供api叫做指令
vue向逻辑层model提供的api包括data/methods/computed/watch/filter/component等等。
vue在template中实现视图逻辑,在js中实现业务逻辑
上面的例子,我们也可以改为下面的写法,以便更好理解:
<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>
vue: the progressive framework
vue 是一个渐近式框架
参考《深入浅出vue.js》第一章 p3
vue 的主要历史
- 2013年7月28日 尤雨溪在github上提交第一个commit。此时还不叫
vue
,叫element
,后又更名为seed.js
- 2013年12月7日 发布
v 0.6.0
版,正式更名为vue.js
,并且把指令系统写法改为v-
。这一版本代表vue
正式问世 - 2015年10月26日 正式发布
v 1.0.0
- 2016年10月1日 国庆 发布
v 2.0.0
vue定位变化
在最早期的vue
只专注于视图层,没有路由,没有状态管理,也没有官方构建工具,只是一个库,相当一个新的视图模板库。
后来,为了适应不同应用场景,慢慢加入了一些官方辅助工具,如路由router
、状态管理vuex
等。
但是在这个演变发展过程中,vue
始终维持一个理念:”这个框架应该是渐近式的
也就是vue
的目前的定位:the progressive framework
vue 渐近式框架的理解
所谓渐近式框架,就是把框架分层。
最核心的部分是视图渲染,然后往外是组件机制,在此基础上加入路由机制,加入状态管理,添加单元测试,使用构建工具等。除了核心部分,其它部分都可以根据项目应用的需求添加,不是必需的。
用一张图理解渐近式的概念
本节是 vue-learning系列
的开篇,对核心部分的基础内容,学习总结已经完成并发布,点击下方链接可直达内容目录。
上一篇: 自学前端第三天