号称目前最火的前端框架Vue,它有什么显著特点呢?
1、Vue是什么
Vue.js 是目前最火的一个前端框架,除了可以开发网站,还可以开发手机App。
Vue.js 是前端的主流框架之一,和Angular.js、React.js 一起,并成为前端三大主流框架。
Vue.js 是一套构建用户界面的框架,只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。
Vue.js 是一套用于构建用户界面的渐进式框架。
2、Vue的特点
遵循 MVVM 模式
编码简洁,体积小,运行效率高,适合移动/PC 端开发
它本身只关注 UI, 可以轻松引入 vue 插件或其它第三库开发项目
3、Vue与其他前端框架的关系
借鉴 angular 的模板和数据绑定技术
借鉴 react 的组件化和虚拟 DOM 技术
4、Vue的现有插件
vue-cli: vue 脚手架,用于搭建项目的骨架
vue-resource(axios): ajax 请求
vue-router: 路由
vuex: 状态管理
vue-lazyload: 图片懒加载
vue-scroller: 页面滑动相关
mint-ui: 基于 vue 的 UI 组件库(移动端)
element-ui: 基于 vue 的 UI 组件库(PC 端)
5、学习Vue的思想改变
Vue的中心思想是数据驱动,像远古时代的老前辈jQuery是结构驱动。
大家回忆下以前我们使用jQuery写代码的时候,经常是这样写的:
$("#myDiv").html("HelloWorld");
这些写法首先要获取Dom节点,也就是Dom结构,然后再修改数据更新结构的内容,使用jQuery的一个很大的目的就是为了去简化Dom的操作,而使用Vue就大不一样了,Vue的做法就是直接this.msg=HelloWorld,然后msg就会自动的同步到结构上,我们所要关心的是数据内容的改变,而不再去关心如何操作Dom结构了。
总结一句话:不要在想着怎么操作DOM,而是想着如何操作数据!!
vue是什么 vue特点 vue和其他前端框架区别
vue是什么
Vue.js (读音 /vju?/,类似于 view) 是一套基于javascript的用于构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动。
vue特点
简洁、轻量、组件化、快速、数据驱动、模块友好
vue和其他前端框架区别
1.与AngularJS的区别
相同点:
都支持指令:内置指令和自定义指令。
都支持过滤器:内置过滤器和自定义过滤器。
都支持双向数据绑定。
都不支持低端浏览器。
不同点:
1AngularJS的学习成本高,比如增加了Dependency Injection(依赖注入)特性,而Vue.js本身提供的API都比较简单、直观。
2在性能上,AngularJS依赖对数据做脏检查,所以Watcher越多越慢。
Vue.js使用基于依赖追踪的观察并且使用异步队列更新。所有的数据都是独立触发的。
对于庞大的应用来说,这个优化差异还是比较明显的。
手机渲染速度:angular1 300ms * vue 200ms * react 100ms
2.与React的区别
相同点:
React采用特殊的JSX语法,Vue.js在组件开发中也推崇编写.vue特殊文件格式,对文件内容都有一些约定,两者都需要编译后使用。
中心思想相同:一切都是组件,组件实例之间可以嵌套。
都提供合理的钩子函数,可以让开发者定制化地去处理需求。
都不内置列数AJAX,Route等功能到核心包,而是以插件的方式加载。
在组件开发中都支持mixins的特性。
不同点:
React依赖Virtual DOM,而Vue.js使用的是DOM模板。React采用的Virtual DOM会对渲染出来的结果做脏检查。
Vue.js在模板中提供了指令,过滤器等,可以非常方便,快捷地操作DOM。
vue的应用场景
简单地说,就是需要对 DOM 进行很多自定义操作的项目小项目;理论上 Vue 配合类似Flux的架构也可以胜任超大规模多人协作的复杂项目。
vue项目完整搭建步骤
为了让一些不太清楚搭建前端项目的小白,更快上手。今天我将一步一步带领你们进行前端项目的搭建。前端开发中需要用到框架,那vue作为三大框架主流之一,在工作中很常用。所以就以vue为例。
下载并安装node
下载地址为:
在 nodejs官网下载最新版稳定版的node.js安装,自带了npm工具 ,推荐下载左边的。
检查node是否安装成功
为了更快安装,可以使用淘宝的镜像:
在终端输入以下命令:
检测cnpm是否安装成功
vue-cli是vue脚手架工具,方便打包,部署,测试等。
进入你的项目目录,创建一个基于 webpack 模板的新项目: vue init webpack 项目名
进入项目
安装依赖
此时项目中会多了一个node_modules
启动成功
如何通过 Vue+Webpack 来做通用的前端组件化架构设计
angular:
我觉得angularjs的学习上手周期比较长,可能遇到问题,都无法立刻解决,而且编码的质量明显的很差,如果团队没有制定规范,那写出来的代码就没法看。对于一个选用angularjs的团队来说,我认为编码规范是很重要的,否则对编码能力是没有提升的。
avalon:
avalonjs文档资料没有那么全,我感觉一些开源支持的力量不够多。不过,如果有项目需求,需要去做IE浏览器的支持话,我建议选择avalonjs
vue:
vuejs 文档比较齐全,vue吸取了angularjs
的一些优点,规避了一些缺点,至少编码规范上有了一个质的飞跃,学习上手的周期比较短。vue起初只是一个轻量级的类库,用来做类似于react的事情,
同时vue也是可以拿来做前端架构设计的,比如:vueify + vue-router (spa框架)。
vue学习地址:
以上说了那么多没用的,下面就来点干活了!
我的前端组件化架构设计,目录如下:
项目架构用到的知识点,还是挺多的,知识清单如下:
[1]: gulp + webpack 构建打包工具, 使用了一系列的loader,比如:vue-loader, sass-loader, babel-loader , 以及 postcss,postcss-custom-properties,等等
[2] : postcss-custom-properties : 用来做样式全局化, 只需要通过变量去维护,通过编译变量既可以换肤。
[3] : vue-loader (vue文件组件化):用来去编译处理 *.vue 的文件,一个vue 文件就是一个单独的组件,vue组件开发具有高独立且易维护。组件的划分可大可小,一个页面也可以看作成由多个vue 组件构成的,一个页面也可以是一个vue组件, vue 文件结构如下:
[4] : babel-loader :实现对vue文件中 es6 语法的编译解析
[5] : vue-router :用来做路由分发,而且文档非常的齐全(学习地址:)。
[6] : vue (插件式方式):vue本身提供了一个install 方式用来注入,我们可以注入一些全局的(属性、方法、以及通用的ui组件)。
下面说说文件夹的含义:
common 文件夹: 是用来存一些通用的东西,比如样式,以及全局的js等等
components 文件夹:用来放独立的组件,我打算后期做细分,ui 组件,以及page 组件等等,这里面就是团队的心血,以后就能做成独立的组件库了。
filters 文件夹:用来放通用的过滤器操作。
plugins 文件夹:用来放 Vue.use 注入到Vue全局的插件库,比如:请求加载、弹框、分页、ui组件 等等。plugins 只是把 componets 组件暴露给 Vue全局。
views 文件夹: 用来存放页面模块
app.vue 文件:第一次启动的主程序模块
app.js 文件:启动前的加载,注入,实例化
router.config.js 文件:路由模块
目前该架构在前后台的SPA架构都适用,可能还是有很多不完善,不过我还很年轻,vue也还狠年轻,望各位道友多给我们年轻人一些机会。
web前端开之网站搭建框架之vue详解
网站搭建框架之vue
Vue是web前端快速搭建网站的框架之一。它与jQuery有所不同,是以数据驱动web界面(以操作数据改变页面,而jQuery是以操作节点来改变页面),同时,vue还实现了数据的双向绑定,可及时响应用户的输入。最主要的是vue的写法简单,容易掌握,组件形式可以大大提高工作效率。
对于vue的使用可以分为两种使用形式:1.引入vue.js文件,在js中将vue实例化;2.通过node安装第三方包--vue,搭建脚手架,用脚手架将页面分成几个组件编写,从而利用组件来搭建页面。
引入vue.js的写法
Vue分为V层(视图层)和M层(数据层),一般都是由M层的数据来驱动V层的改变。而vue的常用指令数量不多且写法简单。常用的有v-html、v-text、v-show、v-if、v-else、v-for、v-bind:、v-model。v-html和v-text都是将数据写进标签内,但它们的不同之处在于v-text会将标签当做文本内容写入
,而v-html则会对标签进行编译,只显示标签内的内容。
至于v-show、v-if、v-else这三个指令都是通过布尔值的判断来执行的,当布尔值为真时,设置了v-show、v-if指令的标签会显示出来,当布尔值为假时,标签隐藏;而v-else与这两个指令相反。除此之外,v-show和v-if、v-else之间也有差别,v-show是改变标签的display属性来使标签显示或隐藏;而v-if、v-else是通过添加或删除节点,来显示或隐藏标签的。
V-for是vue的一种遍历方法,这个方法极大的简化了数组或对象的遍历并显示到页面的步骤
而v-bind:是对html属性或自定义属性的数据驱动方式,格式为v-bind:href,可简写为:href。对于类(class)的操作是通过布尔值来判断增加或者隐藏类,同时。类和样式(style)所接受的数据类型为对象。
V-model指令的作用是将数据进行双向绑定,仅限于输入类型标签。当用户在页面输入时,数据层的数据会跟着改变。这是VM模式。由v驱动m。
除了这些普通的指令之外,还有事件指令v-on:,可简写为@+事件名,例如:@click,并将执行函数写到vue的methods中
通过脚手架来写项目的话,可用通过写组件,再将组件引入(注册)到另一个vue文件里拼接在一起,从而构建出一个页面。
(组件书写格式)
(组件整合)
(注册路由)
路由是通过vue-router来实现的,在注册路由的时候要将router实例化。不同的路由跳转不同的页面,这是搭建单页面应用的优势。
而父组件与子组件之间的通讯可以通过props将父组件的信息传递给子组件,改变子组件的内容,这样子组件的复用就不会有障碍了,而子组件传递信息给父组件或者其他组件的通讯则需vuex。
通过引入vuex并实例化一个Vuex.Store作为一个公共平台,将数据进行传输。通过vue的computed方法接收数据,通过methods方法改变数据。而这个公用平台可以实现组件与组件之间的信息传递,从而实现组件之间的交互。
通过一个星期的实战,深深的体会到了vue的优势,在构建移动端这方面的效率很高。但在搭建的过程中,还是少不了与jQuery结合,毕竟每个工具都有其优点,择其优而用是明智的选择。