Analysis of Vue Frame
Zequan LIAO Zhengde BAO Yawen TANG
School of Computer and Software,Jincheng College,Sichuan University,Chengdu,Sichuan,611731 Abstract
Vue is a front-end framework,as one of the three front-end frameworks at present,Vue framework is powerful and easy to use,so it has more and more users.This paper describes how to build the Vue initial template project after installing the nodejs environment,and the use of some basic syntax of the Vue framework,such as v/html,vif,v-show,and so on.This paper briefly introduces some functional features of Vue.This paper analyzes on the characteristics of MVVM mode of Vue,what kind of scenarios it is suitable for,and the advantages and disadvantages of Vue,and looks forward to the future development of Vue.
Key Words
Vue Framework,Front-end Technology,Web Page
DOI:10.18686/jsjxt.v1i2.650
浅析Vue框架
廖泽泉鲍正德唐娅雯
四川大学锦城学院计算机与软件学院，四川成都，611731
摘要
Vue是一个前端的框架，作为目前阶段前端的三大框架之一，Vue框架的功能强大且易上手，所以它的使用人越来越多。本文简述了安装nodejs环境后如何建立Vue初始模板项目，Vue框架的一些基础语法，比如v-html，v-if和v-show等等语法的使用。简介了Vue的一些功能特点。浅析了Vue的MVVM模式的特点，适用于何种场景，以及Vue的各种优缺点，展望了Vue的未来发展前景。
关键字
Vue框架；前端技术；网页
1.引言
现在前端框架三剑客：Angular（谷歌创造的）,React （Facebook开发的）和Vue（中国人尤雨溪写的）。其中Vue框架是三者中拥有最广大的中文开源社区的，它上手难度低，现在中国的很多大公司也很流行使用Vue。Vue.js与其他的软件的框架不同的是，它具有一套完备的用户界面构建模式且是呈现出渐进式的框架结构，Vue.js软件采取的是自下而上的逐渐增减的变量开发设计形式，Vue.js在操作过程中更加的灵活自由，框架结构设计简单、能够方便于使用者快速的熟悉并掌握其全部的使用特征，并将其投入到使用中，同时还能够与第三方数据库已有的项目进行融合[1]。
2.环境安装
2.1安装node.js
安装node.js是必要的。Node.js是这两年才兴起的新技术，使用Javascript语法，用于高性能后端服务的开发[2]。这个node.js是一个环境，下载安装这个环境后，就可以利用它的相关功能来迅速得搭建网页。2.2npm安装相关依赖
npm是包管理器的意思，英文名称为Node Package Manager，安装了node.js才能使用npm。通过npm包管
理器，就可以下载别人写好的包，这样会节省了很多的工作时间。安装了node.js后，我们就可以下载安装相关依赖了。在cmd中输入:npm install，(install就是安装的意思)就可以下载依赖。
2.3安装全局vue-cli脚手架
脚手架指的就是建筑工地上修房子的工人师傅搭的临时落脚点，它也起到保护建筑的作用。vue-cli脚手架呢，就是一个帮手，它用来创建模板，将各种不同的功能都创建一个文件或者文件夹。在运行调试项目的时候，脚手架是一直存在的，在build生成项目后，脚手架就自动拆除了。在cmd中输入：npm install vue-cli 就可以安装了，在install后面加上-g表示全局安装脚手架。
2.4创建项目
完成上面的步骤，就可以创建项目了，在cmd里输入：vue init webpack name，接下来会询问你是否添加一些插件，可以自己适当选择。
2.5安装依赖
第一步是在cmd中通过cd指令，路径走到创好的的项目文件夹中，这一步十分重要，要是路径不对，后面的操作就会报错！进入正确的路径后，输入npm install，系统会自动下载依赖，这些依赖文件加起来是很大的，我们push项目代码到云端时，通常都不会将依赖文件上传，而是将代码clone下来后，自己install下载依赖。
2.6运行项目
cmd里输入:npm run dev，也可以输入:npm start，若是vue初始项目运行成功，那么打开浏览器的8080端口将会出现一个有Vue项目标志的网页。
3.全家桶
Vue的核心是响应式原理，把一个普通JavaScript 对象传给Vue实例的data选项，同时每个Vue实例都有相应的watcher实例对象[3]。Vue是从底层往上走的逐层应用，这与其他一些框架是有一些区别的。而Vue 十分容易上手，因为它只关心试图层。同时，Vue还可以和其他库结合使用，比如引入JQuery，Element-UI 或者Bootstrap等等，这都极大得方便了开发者。Vue 是轻量级框架，属性和语法较易懂，具备组件和路由的特，适合写一个单页面应用。Vue可以让开发者用一小部分模板语法就可以渲染进DOM，这是十分方便和高效的。
3.1基础语法
3.1.1v-html指令
v-html指令是让开发者可以写原生的HTML。比如:
＜div id=“app“＞
＜div v-html=“message“＞＜/div＞
＜/div＞
＜script＞
new Vue（{
el:‘＃app‘,
data:{
message:‘＜h1＞v-html指令的举例＜/h1＞‘
}
}）
＜/script＞
这样就是直接使用了HTML的＜h1＞标签。
3.1.2文本插值
Vue利用两个大括号里面放"内容"的形式进行数据绑定，这里面的内容是一个文本插值。比如{{"word"}}，然后创建一个vue实例，再在data属性里面为word赋内容，双大括号里面的word就不是文本word，而是和word动态绑定的数据。这样声明后，word的内容和DOM就已经建立起来了联系，这些都是响应式的。打开浏览器的控制台，只要改变word的值，网页中的数据也会同步改变。
3.1.3属性绑定
属性绑定是十分重要的，这样属性也能是响应式的了。Vue中的使用的指令是v-bind。比如＜div v-bind:class=”{‘class6’:type}”＞＜/div＞，当type为true 时，使用该类，当type为false时就不使用该类，这样就能够通过改变type的值，来决定是否使用该类。v-bind 是能够绑定dom的全部属性的。
3.1.4其它基础语法
Vue的基础语法还包括很多的指令，这里就不一一举例了。简单提一下比较典型的v-if语句,Vue可以按照v-if指令的属性值的true或false来决定是不是表现该区域内容。
3.2组件
组件体系是Vue的一个主要观点。我们的页面就像一棵组件树，许多不同的内容的组件构成我们的页面，网页的动态变化，就是不同的组件改变，这些组件都是可以复用的，可以在一个网页中出现，也可以出现在下一个跳转的网页中。用组件搭建一个网页简直有趣，这就像是用不同的拼图来构建"世界"，而这个世界的拼图还可以复用到另一个"世界"，组件让网页变化万千。3.3Vue-axios
Vue如今已经是2.0版本以上了，实现ajax请求都是用的axios。而在这之前，Vue都要使用vue-resource 来实现ajax请求，但是现在官方已经不提倡使用了。要使用axios，首先要在mainjs中导入axios，代码如下: import axios from‘axios‘
Vue.prototype.$http=axios
这样就可以使用各种请求，比如GET请求，代码如下: this.$（URL）.then（response=＞{
//success callback
},response=＞{
//error callback
}）
3.4Vue-router
Vue的路由是按照URL来跳转的，＜router-link＞这个标签的功能是按照它的to属性的不同，改变不同的HTML内容。Vue中用＜router-view＞＜/router-view ＞划定区域。现在链接的标志还有链接展示的区域都有了，那如何让Vue-router来分配呢？答案是添加关系对应表，通常这也叫做路由映射。Vue-router可以根据这个表来到各个不同link所对应的view。路由切换由此实现了组件的复用，在网页局部变化时，仅仅是改变需要改变的组件，而不会渲染不会更改的内容，这就使得网页加载的更快。
4.MVVM模式
随着现代互联网科技的快速发展，用户对于WEB 前端框架的应用体验、对于软件的交互式操作流程以及对外观的要求变得越来越高。对于WEB系统中的数据处理以及业务的逻辑操作形式更偏向于前端框架，这就致使WEB前端的工作量变得更大，使数据的代码输入量增大。这样开发下去，开发出来的产品往往是不尽人意的，又花费了很多人力物力，又没有创造出好的产品来。MVVM模式最初是由微软的MartinFlowler提出，它的关注点在能够支持事件驱动的UI开发平台[4]。MVVM模式分为三部分，第一部分,View层，这是面向用户的，这是用户可见的。第二部分,Model层，各种对数据的操作都在这里，用户改密码或者添加好友的数据都存在这里，这一层用户是不能看见的。第三部分，ViewModel层。它是进行逻辑处理的，与Model层一样，这一层用户也是不能看见的。ViewModel层是十分重要的，它与其余两层紧密联系，是两层之间的"桥梁"。逻辑层根据要处理的逻辑，首先去数据层拿数据，然后到视图层展示各种逻辑。MVVM这种模式是目前很好的模式，对用户来说是有利的。
5.应用场景
近十年来，无论是PC端还是手机端的网页都变得丰富多彩，网页样式不仅美观，而且内容又突出。如今前后端之间的界限更加明显，以前很多复杂的功能都是通过后端实现，后端代码多且不容易维护。现在许多后端的代码都放在前端了，因为Javascript语言，前端可以实现的功能多了，前端的内容所以才变得丰富起来。而框架的出现就是为了规范组织形式。比如当前后端进行频繁数据交互时，Vue通过AJAX加载变化的数据，这样可以快速打开网页，不会降低用户使用体验。当前端对数据进行操作时，使用AJ
AX，用户打开网页不会有过久延迟，用户的使用体验就不太会受影响。再比如在手机端。当刷新页面时，所有的数据都会重新加载，代码也会重新解析，就会降低页面反应的时间，降低用户的体验，而如果只是加载变化的数据，则网页就会打开得非常快。
6.Vue的优缺点
6.1Vue的优势
6.1.1上手简单
因为Vue框架的作者是中国人，Vue相关的中文技术文档很多，开发者的学习成本就是很低的。同时Vue 是开源项目，在中国很多开源社区中也有很多文档都可以查看，这大大降低了Vue的学习难度。同时，Vue 的官方文档与Angular的官方文档相比较，前者更友善，也更易学。
6.1.2快速易组合
vue更新DOM的方式是异步处理，也就使得网页加载更快。而vue写出的一个单页面网页，是由很多可以复用的组件构成，节约时间成本。
6.1.3紧凑强大
仅仅18kb，且无依赖，在写网页时引入一个vuejs 的文件就可以使用vue框架了。并且功能强大，表达式＆无需声明以来的可推导属性。
6.1.4对模板友好
使用Angular的用户需要遵循Angular制定的很多规定，Vue就不用，而且Vue还可以通过npm方便安装。
6.2Vue的劣势
6.2.1大而全：
要深入学习Vue是有一定难度的，入门很简单，但是要精通还是需要刻苦专研，越到后面学习的曲线就越曲折。
6.2.2版本更替:
Vue更新2.0版本后，开发者是很难受的，因为这次Vue重写了部分底层的，也就是说习惯了1.x的开发者又要去学习2.0版本。在Vue3.0版本发布后，2.0版本的开发者有可能还是会难受一波。6.2.3不支持IE8以下
IE8以下的浏览器的是打不开Vue网页的，这是因为Vue是使用ES5（Javascript的一个较新版本）书写。而有一少部分用户的浏览器还不是最新的，这些浏览器是打不开Vue网页的。
7.总结
Vue作为三大主流框架之一，容易上手，进修成本不高。Vue是一个构建Web界面的Javascript库，它的理念是数据驱动，能通过尽可能简单的API实现响应式的数据绑定和组件式的视图组合[5]。Vue是轻量型框架，可以方便的引入到网页中，而且作者是中国人，无论是技术层面还是受情怀影响，Vue在中国的发展前景都非常好，国内的开发团队很大一部分都在使用Vue。
参考文献
vue与react面试题
[1]陈岩.轻量级响应式框架Vue.js应用分析[J].中国管理信息化,2018,21(03):181-183.
[2]赵昆.改变Web开发格局的新技术node.js[J].程序员,2011(7):124-125.
[3]朱二华.基于Vue.js的Web前端应用研究[J].科技与创新,2017(20):119-121.
[4]易剑波.基于MVVM模式的WEB前端框架的研究[J].信息与电脑(理论版),2016(19):76-77+84.
[5]江庆，叶浩荣.Vue+Webpack框架在银行App前端开发的应用[J].金融科技时代,2016(11):15-19.
作者简介
第一作者：廖泽泉（1998-），男，汉，四川省成都市，本科，四川大学锦城学院，研究方向：web前端。
第二作者：鲍正德（1989-），男，汉，黑龙江哈尔滨，研究生，四川大学锦城学院，研究方向：电子商务。
第三作者：唐娅雯（1999-），女，汉，四川省资阳市，本科，四川大学锦城学院，研究方向：信息管理、J2EE

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。