浅谈Vue.js

　　

vue.js的总体评价”简单却不失优雅,小巧而不乏大匠”

　　

<强> Vue.js简介

　　

Vue。js的作者为埃文你(尤雨溪),任职于谷歌创新实验室,虽然Vue是一个个人项目,但在发展前景上个人认为绝不输于谷歌的AngularJs、下面我会将Vue与角(1.0角+版本)做一些简单的比较。

　　

Vue的主要特点就和它官网(http://cn.vuejs.org/)所介绍的那样:

　　

(1)简洁(2)轻量(3)快速(4)数据驱动(5)模块友好(6)组件化

　　

下面看一段角的实现双向绑定的代码

　　 　　//html 　　& lt;身体ng-app=癿yApp”比; 　　& lt; div ng-controller=癿yCtrl”比; 　　& lt; p>{{注意}}& lt;/p> 　　& lt;输入类型=拔谋尽眓g-model=白⒁狻北? 　　& lt;/div> 　　& lt;/body>//js 　　var myModule里=角。模块(“myApp”,[]); 　　myModule里。控制器(“myCtrl”, [scopp美元,函数(范围美元){ 　　美元的范围。请注意="; 　　]); 　　之前 　　 　　

然后再看一下Vue的代码

　　 　　//html 　　& lt; body> 　　& lt; div id=坝τ谩北? 　　& lt; p>{{注意}}& lt;/p> 　　& lt;输入类型=拔谋尽眝模型=白⒁狻北? 　　& lt;/div> 　　& lt;/body>//js 　　var vm=new Vue ({ 　　埃尔:“#应用”, 　　数据:{ 　　注:“ 　　} 　　}) 　　之前 　　 　　

相比较而言我个人认为Vue的代码编写风格更加简洁,并且通俗易懂。

　　

<强>不失优雅

　　

Vue虽然是一个比较轻量级的框架,简单轻量的同时还非常的人性化,其提供的API也是非常的容易理解,同时也提供了一些很便捷的指令和属性。

　　

例如: 　　点击

(1)绑定事件

　　

<代码> & lt; v:点击=癲oSomething祝辞& lt;/a>

　　

可以简写为:

　　

<代码> & lt; @click=癲oSomething祝辞& lt;/a>

　　

(2)绑定动态属性

　　

<代码> & lt; v-bind: href=" https://www.yisu.com/zixun/url " rel=巴獠縩ofollow”rel=巴獠縩ofollow”祝辞& lt;/a>

　　

可以简写为:

　　

<代码> & lt;: href=" https://www.yisu.com/zixun/url " rel=巴獠縩ofollow”rel=巴獠縩ofollow”祝辞& lt;/a>

　　

(3)便捷的修饰符

　　 　　 　　& lt; !——阻止单击事件冒泡——比; 　　& lt; @click.stop=" doSomething "祝辞& lt;/a> 　　 　　& lt; !——只在按下回车键的时候触发事件——比; 　　& lt;输入@keyup.enter=疤峤弧北? 　　之前 　　 　　

(4)实用的参数特性

　　 　　 　　& lt; !——防反跳设置一个最小的延时——比; 　　& lt;输入v模型="注意"防反跳=" 500 "比; 　　 　　& lt; !——在“改变”而不是“输入”事件中更新数据——比; 　　& lt;输入v模型=拔毒眑azy> 　　之前 　　 　　

怎么样,是不是感觉优雅极了。

　　

<强>小巧

　　

说起小巧,那应该首先要关注下Vue的源码大小,Vue的生产版本(即最小版)源码仅为72.9 kb,官网称gzip压缩后只有25.11 kb,相比角的144 kb缩小了一半。

　　

小巧的一种好处就是可以让用户更自由的选择相应的解决方案,在配合其他库方面它给了用户更大的空间。

　　

如Vue的核心默认是不包含路由和Ajax功能,但是如果项目中需要路由和Ajax,可以直接使用Vue提供的官方库Vue-router及第三方插件vue-resource,同时你也可以使用其他你想要使用的库或插件,如jQuery的Ajax等。

　　

是不是感觉非常的灵活。

　　

<强>不乏大匠

　　

Vue虽然小巧,但是“麻雀虽小五脏俱全”,在构建大型应用的时候也是得心应手。

　　

　　

结合一些第三方模块构建工具,如CommonJS, RequireJS或者SeaJs,可以轻松实现代码的模块化。

　　

但是在这里小编不推荐使用上述构建工具,直接使用ES6的模块化功能,再结合Webpack进行相应打包是目前最热门的方案。

　　

在今后的文章中,我也会对其进行介绍,包括Webpack的配置。

　　

　　

Vue的组件化功能可谓是它的一大亮点,通过将页面上某一组件的html, CSS, javascript代码放入一个.vue的文件中进行管理可以大大提高代码的维护性。

　　

例如: 　　 　　//App.vue 　　& lt; template> 　　& lt; div类="盒子" v-text=白⒁狻痹? lt;/div> 　　& lt;/template> 　　& lt; script> 　　出口默认{ 　　数据(){ 　　返回{ 　　注:“这是一个组件的html模板!” 　　} 　　} 　　} 　　& lt;/script> 　　& lt; scoped>风格; 　　.box { 　　颜色:# 000; 　　} 　　& lt;/style> 　　

浅谈Vue.js