前端框架 Vue 初探

一、前言

前几日使用微信网页版时，好奇这个网页用了什么前端框架。用Chrome的开发者模式一探究竟，发现原来用了一个名叫 Angular 的框架。好吧，既然微信用了，那我也不妨看看。等等，你这篇文章的标题不是“初探Vue”吗？鬼扯什么Angular呢？

好吧，我承认有些跑题。是的，我原本是要学着用Angular的，但是翻看网贴和资料后，发现有许多类似的框架，着力解决“在浏览器端如何以优雅的方式动态生成html网页”的问题。其中就有前Google员工，咱大中华子民@youyuxi 尤小右同学开创的框架 Vue。

OK，总算回到正题了。

于是借着这个由头，翻看了一些对比各类流行前端框架优劣的文章。最终，我选择先拿 Vue 用用，试着改造我的部分已有业务。

我选择Vue的原因是：它似乎能够优雅并且简单地解决我的问题——页面布局和数据模型可以有很清晰的边界，并且能够以松散的方式结合或关联。这里还要插一句：我认为前端的展现，最后能和js 百分百的兼容。我讨厌、反感使用jsp标签，使用s:iterator,使用el表达式！所以，能够使用js语法来实现渲染，是我梦寐以求的！

好吧，实际体验又是如何？

二、列表的渲染

当然，一般的体验都是关于Hello, world 如何实现。但那个太初级，我们直接上高级一些的。

假如我有一个表格需要呈现，该如何做？

1. 首先要引入 vue 库的 js，参见后文链接；注意：开发期间一定要引入开发版，否则查起问题来完全找不到北。

2. 要渲染的表格(略去table头)，形如：

    <tbody id="dataList" ><tr v-for="item in items" id="row_{{$index}}" ><td>{{item.dataId}}</td><td>{{item.appKey}}</td>....</tr></tbody>

3. js的部分，需要创建 vue 对象，来关联DOM元素和数据，并最终实现数据同步。

比如以下代码：

 vueItems = new Vue({el: '#dataList',data: {items: []}});

4. OK，到目前为止，我们的 vueItems 对象已经和 id 为 "dataList" 的 DOM 元素挂钩了。并且，通过在 html 里面 tr 一节的 "v-for" 属性，表明了要通过对 vueItems 对象的数组元素进行遍历来渲染出表格的行数据。

5. 因此，接下来就是往 vueItems.items 里面放入数据的过程。稍等一下，为何是 vueItems.items, 而不是 vlueItems.data.items 呢？如果你和我一样有这个想法，那么很不幸你被误导了。构建 vue 对象时，传入的对象的 data 属性，并不在后续的 vue 对象中真实存在。要访问数组的模型，必须用 vueItems.items。

6. OK，不论数据来源于动态网页的生成过程，还是ajax 请求得到，总归会有一个 JS 的数组对象作为原始的数据。假设它就是 list 对象。那么，这时需要对list进行遍历，将list对象经过处理后，形成 vueItems 的真正用来渲染的数据。我的惯例是我宁愿用js来实现，而不愿意把这个过程放到模版里。

所以就有类似以下的代码：

for (var key in list) {<span style="white-space:pre">   </span>var vueItem = {};var dataItem = list[key];vueItem.app_name = dataItem.app_name == null ? "--" : dataItem.app_name;vueItem.app_key = dataItem.app_key == "" ? "--" : dataItem.app_key;vueItem.consume_fund = dataItem.consume_fund / 1000;vueItem.reason = dataItem.reason == 0 ? "成功" : "错误码(" + dataItem.reason + ")";vueItems.items.push(vueItem);
}

其中，最要紧的是就是最后一句：

vueItems.items.push(vueItem);

这是Vue 这个框架神奇的地方：将页面渲染的细节隐藏起来，代码简洁、优雅。

我调试了代码，表格的行按照要求渲染出来，大功告成！除了有个细节以外，即包含 {{}}内容的模版行会显示一下，然后隐藏。这个好解决，就是把tbody先设为隐藏，等数据加载好了，再显示即可。所以改进后的数据模版是这样的：

    <tbody id="dataList" style="display:none;"><tr v-for="item in items" id="row_{{$index}}" ><td>{{item.dataId}}</td><td>{{item.appKey}}</td>....</tr></tbody>

然后js代码里要加上一句：

$("#dataList").show();

一切显得很完美！

正当我准备收工的时候，坏了。由此也引出下一个章节。

三、意料之外的异常

我突然发现，当我页面上的条件更改后，重新获取数据，再次使用vue做渲染，结果居然抛出了异常。这个异常不是在我的js里面抛出，而是在另外的线程，在 vue 的延时更新的定时器里抛出的。

Uncaught TypeError: Cannot read property 'removeChild' of nullremove @ vue.js:1176(anonymous function) @ vue.js:1028applyTransition @ vue.js:1056removeWithTransition @ vue.js:1027singleRemove @ vue.js:4483remove @ vue.js:4985diff @ vue.js:4816update @ vue.js:4728Directive._bind._update @ vue.js:7708Watcher.run @ vue.js:3257runBatcherQueue @ vue.js:2990flushBatcherQueue @ vue.js:2964nextTickHandler @ vue.js:434

看到这个错误，我一下傻了。老革命遇到新问题了。这，，，这框架怎么了？不是很行的嘛？不是大牛开发的吗？！！！

我反复看了代码，没问题啊。难道真的是框架的问题。OK，我弄一个干净的列表的Demo，试试。

结果，新做的Demo没问题。这下没辙了。又怀疑其他,,,,,,折腾了十几分钟。。。。。这里略去N字以及苦水若干升。

绝望之中，我仔细看了看这个异常的内容：Cannot read property 'removeChild' of null

我似乎悟到一些什么。

我一拍大腿，明白了，NND（我TM猪头啊，...这里又略去N字）。原来，我改造代码时，忘记将原先的一行代码去掉了，这行代码是直接访问DOM将表格的数据清除。因为当用户再次点击查询时，需要将原数据删除，然后重新append新的行。

我将上述这句代码删除，这回终于OK 了！

原来，在Vue里面，如果DOM元素已经绑定了Vue框架，则不能再通过DOM直接进行删除，必须要通过Vue的对象来删除。至少我使用的Vue 1.0.13 版本是这个情况。

好吧！切切！以后不能再犯这种低级错误了！

四、后记

前述那个异常，到底是要容错还是应该抛出异常？似乎容错也说得通。所以我将这个情况发了个推告知给作者，让他评估一下。因为时差的关系，他还没有回复我。

前端框架 Vue 初探相关推荐

vue ui框架_你为什么要使用前端框架Vue?
1.前端框架的根本意义 1.1 前端框架的好处最开始学习前端框架的时候(我第一个框架是 React)并不理解框架能带来什么,只是因为大家都在用框架,最实际的一个用途就是所有企业几乎都在用框架,不用框 ...
前端框架Vue——vue-i18n ，vue项目中如何实现国际化，$t的用法
前端框架Vue--vue-i18n ,vue项目中如何实现国际化,$t的用法 vue中html页面写入$t('')怎么显示
失败原因【object object】_使用前端框架Vue的原因！
1.前端框架的根本意义 1.1 前端框架的好处最开始学习前端框架的时候(我第一个框架是 React)并不理解框架能带来什么,只是因为大家都在用框架,最实际的一个用途就是所有企业几乎都在用框架,不用框 ...
JavaWeb前端框架VUE和Element组件详解
文章目录前言一.前端框架--VUE 1.1 概述 1.2 快速入门 1.3 Vue 指令 1.3.1 v-bind & v-model 指令 1.3.2 v-on 指令 1.3.3 条件判 ...
详细总结流行前端框架Vue重难点概念
详细总结流行前端框架Vue重难点概念 1 什么是Vue? 2 Vue基本属性 3 Vue基本指令 4 组件化 4.1 创建组件 4.1.1 注册全局组件 4.1.2 注册局部组件 4.2 组件通信 5 ...
ssm框架app管理平台_后端程序员跨平台应用的前端框架uni-app初探
公司经常会接到各种前端h5,安卓,IOS,小程序开发的工作,开发的同事前端这块相对较弱,如果全部学习一遍的话成本也太高,也不太现实,因此,需要一个开发一遍能满足在各大平台都能使用的技术显得尤为重要.u ...
前端框架Vue、angular、React的优点和缺点，以及应用场景
学习web前端开发中,会有很多的框架,那么目前流行的框架有哪些,以及他们的优缺点和应用场景有哪些呢? 一.Vue.js: 其实Vue.js不是一个框架,因为它只聚焦视图层,是一个构建数据驱动的Web界 ...
前端框架VUE学习纪要
2022.03.26 前端主流框架 Vue (/vjuː/) Vue是一套用于构建用户界面的渐进式框架可以自底向上逐层应用核心库只关注视图层,易于上手,便于与第三方库或既有项目整合与现代化的工具 ...
web前端框架——Vue的特性
目录前言: 一.vue 二.特性 1.轻量级 2.数据绑定 3.指令 4.插件三.比较Angular .React .Vue 框架之间的比较 1. Angular Angular的优点: 2. R ...

前端框架 Vue 初探

前端框架 Vue 初探相关推荐

最新文章

热门文章