云社区 博客 博客详情

前端开发之认识Vue.js

SUNSKY 发表于 2020-02-13 15:24:16 2020-02-13
0
0

【摘要】 近几年,互联网前端行业发展得依旧迅猛,涌现出了很多优秀的框架,同时这些框架也正在逐渐改变我们传统的前端开发方式。Google的AngularJS、Facebook的ReactJS,这些前端MVC(MVVM)框架的出现和组件化开发的普及和规范化,既改变了原有的开发思维和方式,也使得前端开发者加快脚步,更新自己的知识结构。2014年2月,原Google员工尤雨溪公开发布了自己的前端库——Vue....

近几年,互联网前端行业发展得依旧迅猛,涌现出了很多优秀的框架,同时这些框架也正在逐渐改变我们传统的前端开发方式。Google的AngularJS、Facebook的ReactJS,这些前端MVC(MVVM)框架的出现和组件化开发的普及和规范化,既改变了原有的开发思维和方式,也使得前端开发者加快脚步,更新自己的知识结构。2014年2月,原Google员工尤雨溪公开发布了自己的前端库——Vue.js,时至今日,Vue.js在GitHub上已经收获超过30000star,而且也有越来越多的开发者在实际的生产环境中运用它。

1 Vue.js是什么

单独来讲,Vue.js被定义成一个用来开发Web界面的前端库,是个非常轻量级的工具。Vue.js本身具有响应式编程和组件化的特点。

所谓响应式编程,即为保持状态和视图的同步,这个在大多数前端MV*(MVC/MVVM/MVW)框架,不管是早期的backbone.js还是现在AngularJS都对这一特性进行了实现(也称之为数据绑定),但这几者的实现方式和使用方式都不相同。相比而言,Vue.js使用起来更为简单,也无需引入太多的新概念,声明实例new Vue({ data : data })后自然对data里面的数据进行了视图上的绑定。修改data的数据,视图中对应数据也会随之更改。

Vue.js的组件化理念和ReactJS异曲同工——“一切都是组件”,可以将任意封装好的代码注册成标签,例如:Vue.component('example', Example),可以在模板中以的形式调用。如果组件抽象得合理,这在很大程度上能减少重复开发,而且配合Vue.js的周边工具vue-loader,我们可以将一个组件的CSS、HTML和js都写在一个文件里,做到模块化的开发。

除此之外,Vue.js也可以和一些周边工具配合起来,例如vue-router和vue-resource,支持了路由和异步请求,这样就满足了开发单页面应用的基本条件。

2 为什么要用Vue.js

相比较Angularjs和ReactJS,Vue.js一直以轻量级,易上手被称道。MVVM的开发模式也使前端从原先的DOM操作中解放出来,我们不再需要在维护视图和数据的统一上花大量的时间,只需要关注于data的变化,代码变得更加容易维护。虽然社区和插件并没有一些老牌的开源项目那么丰富,但满足日常的开发是没有问题的。Vue.js 2.0也已经发布了beta版本,渲染层基于一个轻量级的 virtual-DOM 实现,在大多数场景下初始化渲染速度和内存消耗都提升了 2~4 倍。而阿里也开源了weex(可以理解成ReactJS-Native和ReacJS的关系),这也意味着Vue.js在移动端有了更多的可能性。

不过,对于为什么要选择使用一个框架,都需要建立在一定的项目基础上。如果脱离实际项目情况我们来谈某个框架的优劣,以及是否采用这种框架,我觉得是不够严谨的。

作为新兴的前端框架,Vue.js也抛弃了对IE8的支持,在移动端支持到Android 4.2+和iOS 7+。所以如果你在一家比较传统,还需要支持IE6的公司的话,你或许就可以考虑其他的解决方案了(或者说服你的老板)。另外,在传统的前后端混合(通过后端模板引擎渲染)的项目中,Vue.js也会受到一定的限制,Vue实例只能和后端模板文件混合在一起,获取的数据也需要依赖于后端的渲染,这在处理一些JSON对象和数组的时候会有些麻烦。

理想状态下,我们能直接在前后端分离的新项目中使用Vue.js最合适。这能最大程度上发挥Vue.js的优势和特性,熟悉后能极大的提升我们的开发效率以及代码的复用率。尤其是移动浏览器上,Vue.js压缩后只有18KB,而且没有其他的依赖。

3 Vue.js的Hello world

现在来看一下我们第一个Vue.js项目,按照传统,我们来写一个Hello World。

首先,引入Vue.js的方式有很多,你可以采用直接使用CDN,例如:

<script src='http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js'></script>

也可以通过NPM进行安装:

npm install vue // 最新稳定版本

正确引入Vue.js之后,我们在HTML文件中的内容为:

<div id="app"> 
<h1>{{message}}</h1>
</div>

应用的js如下:

var vm = new Vue({
 el : '#app',
 data: {
  message : 'Hello world, I am Vue.js' 
  }
  });

输出结果为:

1581578542883384.png

这种形式类似于前端模板引擎,我们把js中message值替换了HTML模板中{{message}}这部分。

不过,如果仅仅是这样的例子,我相信你也不会有什么兴趣去使用Vue.js。根据上文对Vue.js的说明,我们继续写两个有关于它特性的例子。

第一个特性是数据绑定,我们可以在运行上述例子的浏览器控制台(console)环境中输入vm.message = 'Hello Vue.js',输出结果就变为了Hello Vue.js。也就说明vm.message和视图中的{{message}}是绑定的,我们无需手动去获取<h1>标签来修改里面的innerHTML。

同样,我们也可以绑定用户输入的数据,视图会随着用户的输入而变化,例如:

<div id="app"> 
<h1>Your input is {{ message }}</h1>
 <input type=”text” v-model=”message”>
 </div>

1581578542718866.png

vm.message的值会随着用户在input中输入的值的变化而变化,而无需我们手动去获取DOM元素的值再同步到js中。

第二个特性是组件化,简单来说我们可以自己定义HTML标签,并在模板中使用它,例如:

<div id="app"> 
<message content='Hello World'></message>
</div> 
<script type="text/javascript"> 
var Message = Vue.extend({
  props : ['content'],
  template : '<h1>{{content}}</h1>' 
  })
 Vue.component('message', Message);
 var vm = new Vue({
  el : '#app',
 });
 </script>

我们在浏览器里最终看到的HTML结果为:

1581578542665264.png

可以看到自定义的标签<message>被替换成了<h1>Hello World</h1>,当然,实际中的组件化远比示例复杂,我们会给组件添加参数及方法,使之能更好地被复用。

如果说这几个例子引起了你对Vue.js的兴趣的话,那接下来就将它真实地运用到生产环境中吧。


本文节选自《Vue.js 前端开发 快速入门与专业应用》


内容简介


本书主要介绍Vue.js的使用方法和在实际项目中的运用,它既可以在一个页面中单独使用,也可以将整站都构建成单页面应用。为了便于理解,本书会从传统的开发角度切入,先从数据渲染、事件绑定等方面介绍在Vue.js中的使用方法,然后渐进到Vue.js自身的特性,例如数据绑定、过滤器、指令以及最重要的组件部分。除了框架用法外,本书还介绍了和Vue.js相关的重要插件和构建工具,这些工具有助于帮助用户构建一个完整的单页面应用,而不仅仅是停留在个人DEMO阶段的试验品。而对于复杂项目,Vue.js也提供了对应的状态管理工具Vuex,降低项目的开发和维护成本。鉴于完稿前,Vue.js 2.0已正式发布完毕,本书也在相关用法上对比了1.0和2.0的区别,并补充了render函数和服务端渲染等特性。

本书适用于尚未接触过MVVM类前端框架的开发者,或者初步接触Vue.js的开发者,以及实际应用Vue.js开发项目的开发者。

本文转载自异步社区。

原文链接:https://www.epubit.com/articleDetails?id=NC7E3EF931C000001A44718503BA794C0


登录后可下载附件,请登录或者注册

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:huaweicloud.bbs@huawei.com进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
评论文章 //点赞 收藏 0
点赞
分享文章到微博
分享文章到朋友圈

上一篇:微软数据中心与SDDC漫谈

下一篇:右军:用康威定律打造动态研发团队

评论 (0)


登录后可评论,请 登录注册

评论