ECMAScript前端开发之动上前Vue.js

Vue.js作为当前最吃香最具有前景的前端框架之一,其提供了同样栽助我们很快构建并出前端项目的新的思想模式。本文旨在救助大家认识Vue.js,了解Vue.js的付出流程,并越明白什么通过Vue.js来构建一个被巨型的前端项目,同时办好相应的布局与优化办事。

章将因PPT图片附加文字介绍的花样开展,不会见涉嫌知识点的具体代码,点及为止。有趣味之同学可以翻相应的文档进行询问。

Vue.js简介

ECMAScript 1

从上图的牵线着我们不难发现Vue.js是如出一辙暂缓轻量级的为数令之前端JS框架,其与jQuery最特别的不同点在于jQuery通过操作DOM来转页面的亮,而Vue通过操作数据来促成页面的翻新与显。下面就是是Vue数据驱动的概念模型:

ECMAScript 2

 Vue.js主要负责之是高达图绿色正方体ViewModel的一对,其当View层(即DOM层)与Model层(即JS逻辑层)之间通过ViewModel绑定了DOM
Listeners与Data Bingings两单相当给监听器的事物。

当View层的视图发生变动时,Vue会通过DOM
Listeners来监听并转Model层的数码。相反,当Model层的数码来改变时,其为会见通过Data
Bingings来监听并转移View层的显示。这样便实现了一个双向数据绑定的效用,也是Vue.js数据驱动的原理所在。

Vue实例

ECMAScript 3

以一个html文件中,我们一直可以通过script标签引入Vue.js,然后便足以以页面里写Vue.js代码了。上图中我们通过new
Vue()构建了一个Vue的实例,在实例中,可以蕴涵挂在要素(el),数据(data),模板(template),方法(methods)与生命周期钩子(created等)等选项。不同之实例选项拥有不同之法力,如:

(1)el表明我们的Vue需要操作哪一个因素下的区域,’#demo’表示操作id为demo的元素下区域。

(2)data表示Vue 实例的数额对象,data 的性能能够响应数据的浮动。

(3)created表示实例生命周期中创造好的那无异步,当实例已经创办好后以调用其方式。

Vue常用命令

ECMAScript 4

当Vue项目的开支被,我们应用的最好多之应就是属于Vue的吩咐了。通过Vue提供的常用命令,我们可以酣畅淋漓地表达Vue数据让的精力量。以下就是图被常用命令的简要介绍:

(1)v-text: 用于更新绑定元素被的内容,类似于jQuery的text()方法

(2)v-html: 用于更新绑定元素中之html内容,类似于jQuery的html()方法

(3)v-if:
用于冲表达式的值的真真假假条件渲染元素,如果达到图P3吧false则无见面渲染P标签

(4)v-show: 用于冲表达式的值的真假条件显得隐藏元素,切换元素的
display CSS 属性

(5)v-for:
用于遍历数据渲染元素或模板,如图被P6为[1,2,3]尽管会渲染3独P标签,内容逐条为1,2,3

(6)v-on: 用于在要素上绑定事件,图中于P标签上绑定了showP3的点击事件

关于更多之Vue指令可以翻Vue2.0文档,地址:https://vuefe.cn/api/\#指令

Vue.js技术栈

ECMAScript 5

上述我们叙到可以一直在一个html页面里通过引入Vue.js来直接写Vue代码,但是这么的办法并无常用。因为如果我们的品类比异常,项目被会设有许多页面,一旦每个页面还引入一个Vue.js或者声明一个Vue实例,这样充分勿便于后期的维护与代码的公用,也会是实例名闯的情事,所以我们用用到Vue提供的技术栈来构建强大的前端项目。

除去Vue.js我们尚需利用:

(1)vue-cli:Vue的底手架工具,用于自动生成Vue项目之目及文件。

(2)vue-router
Vue提供的前端路由于工具,利用该我们落实页面的路途由于决定,局部刷新和本需要加载,构建单页应用,实现上下端分离。

(3)vuex:Vue提供的状态管理工具,用于同一管理我们项目蒙各种数据的相与录取,存储我们用用到数码对象。

(4)ES6:Javascript的新本子,ECMAScript6之简称。利用ES6咱可简化我们的JS代码,同时使用该提供的强力量来飞实现JS逻辑。

(5)NPM:node.js的保证管理工具,用于同一管理我们前端项目被待采取的担保、插件、工具、命令等,便于开发与护卫。

(6)webpack:一悠悠强大的公文包工具,可以以我们的前端项目文件一律打包压缩至js中,并且可以经过vue-loader等加载器实现语法转化和加载。

(7)Babel:一慢用ES6代码转化为浏览器兼容的ES5代码的插件

采用上述等技能,我们尽管得以起构建我们的Vue项目了。

构建大型应用

ECMAScript 6

于构建我们的吃巨型Vue项目被,我们根本介绍如何以vue-cli来自动生成我们种之前端目录和文件,了解Vue中布满均组件的概念以及父子组件的通信问题,讲解在Vue项目被我们什么样利用第三正插件,最后采取webpack来打包及布局我们的类型。

vue-cli构建

ECMAScript 7

当以vue-cli之前我们需要安装node.js,利用其提供的npm命令来设置vue-cli。安装node.js只需要去其官网下充斥软件并设置即可,地址也:https://nodejs.org/en/
设置到位后咱们打开计算机的cmd命令行工具依次输入上图中之通令:

(1)npm install -g vue-cli:全局安装vue-cli

(2)vue init webpack my-project:
利用vue-cli在目录地址生成一个因webpack的名为也’my-project‘的Vue项目文件以及目录

(3)cd my-project:打开刚刚创建的文书夹

(4)npm intall:安装项目所倚的包文件

(5)npm run dev:利用本地node服务器在浏览器被开拓并浏览项目页面

如此咱们的一个因webpack的vue项目目录就构建好了。

单文件组件

ECMAScript 8

于刚刚构建好的vue项目受到,我们会发现一个App.vue和Hello.vue的文本,那么像这样的以.vue后缀结尾的公文就是咱Vue项目面临泛的单文件组件。单文件组件包含了一个功能或模块的html、js及css。在.vue文件中,我们可以template标签中描写html,在script标签中描绘js,在style标签中写css。这样一个功效还是模块就是一个.vue组件,对于组件公用和后期的保护为要命方便。

父子组件通信

ECMAScript 9

这就是说像这样在因为只文件组件为中心之花色支出中,我们一定会想到一个问题,就是.vue父子组件之间是哪些交换数据来促成通信的为?在Vue2.0饱受提供了props来兑现父亲组件向子组件传递数据,通过$emit来贯彻子组件为爸爸组件传递数据。当然如果是较复杂与大面积的数据交互,建议大家使用vuex来同样管理数据。详情请见:https://vuefe.cn/guide/components.html\#使用Props传递数据

插件使用

ECMAScript 10

通下我们介绍下于因webpack的vue项目遭到我们是什么样运用插件的,主要发生星星点点种植状态:

(一)全局使用

(1)在index.html引入:这样的章程不引进应用,因为存在程序加载顺序的题目,有些插件不支持就无异于术。

(2)由此webpack配置文件引入:主要通过plugin配置起之webpack.ProvidePlugin()方法实现,不过才可支持CommonJs规范并提供一个全局变量的插件,如jQuery中之$。

(3)通过import +
Vue.use()引入
:这种措施欲在全局.vue文件中import需要加载的插件,然后通过Vue.use(‘插件变量名’)来促成,不过者方式只有支持按Vue.js插件编写规范的插件使用,如vue-resourece。

(二)单文件使用

(1)经import直接引入:这种方式得以当需要调用插件的.vue文件中应用,不过用专注与实例的创始顺序问题,或者为得以透过require引入。

(2)import +
components注册
:此方吧Vue组件的用方法,可以以一个零件中登记并采用一个子组件。

配备与优化

ECMAScript 11

当我们搞定所有Vue项目之前端编码阶段后,我们需要针对咱们的前端项目文件进行配置与优化工作,主要的几乎独点子如下:

(1)采用webpack的DefinePlugin指定生产环境:通过plugin中之DefinePlugin配置,我们得声明’process.env’属性为’development’(开发环境)或者’production’(生产条件),结合npm配置文件package.json中scripts的指令来切换环境模式大利于。

(2)动UglifyJs自动删除代码块内的警告语:一般在养条件之webpack配置文件中动用,通过new
webpack.optimize.UglifyJsPlugin()来进展布局,删除警告语句子可以抽文件的体积。
(3)行使Webpack
hash处理缓存
:当我们用针对发布到丝上之公文进行改动时,重新编译的文件称而同事先版本的一模一样会挑起浏览器无法辨认而加载缓存文件之问题。这样我们需要活动的生成带hash值的文书名来阻止缓存。详见:https://segmentfault.com/a/1190000006178770#articleHeader7

(4)利用v-if减少非必要之零部件加载:v-if指令其实特别有因此处,它可以给咱种被临时无待之机件不进行渲染,等要用的上以渲染,比如某弹窗组件等。这样我们好减页面首不良加载的时空以及文件量。

除去上述几乎点的优化,还有多优化增选,有趣味之童鞋可以好好地打听下webpack的API文档,毕竟webpack的功效非常无敌。

数量驱动实例

ECMAScript 12

眼看是自家前以Vue.js数据驱动的原理写的一个拼图游戏,希望能够供大家进一步询问Vue数据让的理念。

演示地址:拼图游戏

代码地址:拼图代码

总结

本文为PPT图片附加文字介绍的形式简单介绍了Vue.js的知识点和开发流程,并将前端自动化、组件化、工程化的观点贯穿其间,由浅入雅地阐述了Vue.js“简单也不失去雅致,小巧而非发大匠”的与众不同魅力。