作者是二个刚结业八个月多的前端小白,进公司做事的时候,由于公司的前端本领还没定下来,所以在做项目标时候自己是自由发挥。由于vue具备上心灵,开荒功能高的特色,所以,笔者在做项目时候,便采取了vue作为才具栈,由于是首先次接纳bootstrap加jQuery以外的才干栈,所以以下是在成功项目标进度中,对vue使用方面认知不到或不足的自问。

Vue.js作为当下最吃香最具前景的前端框架之一,其提供了一种扶助大家火速构建并支付前端项目标新的思虑方式。本文旨在帮衬大家认知Vue.js,掌握Vue.js的开支流程,并进而精晓什么通过Vue.js来创设2个中山大学型的前端项目,同时抓好对应的布局与优化专门的学问。

Vue.js作为当前最吃香最具前景的前端框架之1,其提供了1种扶助我们神速塑造并付出前端项目标新的思索情势。本文目的在于救助大家认识Vue.js,领悟Vue.js的支付流程,并进一步掌握什么通过Vue.js来创设1个中山大学型的前端项目,同时办好相应的配置与优化办事。

一.首先,新手使用vue最普遍的失误,正是DOM操作,而vue的双向数据绑定,恰恰让我们实际不需求实行繁琐的DOM操作,大家只必要关心数据层面就可以了。想想自身最初步得到input依然用什么document.getElementById(‘id’).value这种,就以为本人很傻,明明只须求v-model绑定data就好了,唉~

小说将以PPT图片附加文字介绍的款型开展,不会波及知识点的切实可行代码,点到甘休。有意思味的同学能够查阅相应的文书档案进行摸底。

小说将以PPT图片附加文字介绍的花样举办,不会涉及知识点的现实性代码,点到竣事。风乐趣的同学能够查阅相应的文书档案举办问询。

二.以为vue只好用于支付SPA。直到见到尤大神在腾讯网上回复的:不必然做个体系就非得cli2个全家桶,vue也不是为单页面而生的。小编才知道,vue的选拔格局,小编只是驾驭冰山1角,怎么着能灵活依照自个儿的要求使用支付,还需本人之后的多多成长。

Vue.js简介

Betway官网 1

Vue.js简介

从上海体育场地的介绍中大家简单窥见Vue.js是1款轻量级的以数量驱动的前端JS框架,其和jQuery最大的不一致点在于jQuery通过操作DOM来改换页面包车型客车体现,而Vue通过操作数据来兑现页面包车型客车更新与显示。上面正是Vue数据驱动的概念模型:

Betway官网 2

数据模型

Vue.js重要承担的是上海体育场面棕黄正方体ViewModel的部分,其在View层(即DOM层)与Model层(即JS逻辑层)之间通过ViewModel绑定了DOM
Listeners与Data Bingings八个也就是监听器的事物。

当View层的视图爆发转移时,Vue会通过DOM
Listeners来监听并转移Model层的多少。相反,当Model层的多寡发生改动时,其也会透过Data
Bingings来监听并改动View层的来得。那样便完毕了三个双向数据绑定的作用,也是Vue.js数据驱动的原理所在。

01-

三.组件化思想。早先1起先,感到外人的UI框架都写好了,就径直拿来用。当然如此做并不曾什么难题。不过,当自家意识小编种种页面大约都有几段同样的代码,大概都亟待用到那个UI框架的零部件,比方面包屑,举例导航菜单,那自个儿干嘛不把那样UI框架做成独立的零件呢?

Vue实例

Betway官网 3

Vue实例

在一个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.js简介

Betway官网 4

从上海教室的牵线中大家简单发现Vue.js是一款轻量级的以数据驱动的前端JS框架,其和jQuery最大的差别点在于jQuery通过操作DOM来更改页面的来得,而Vue通过操作数据来贯彻页面包车型客车换代与呈现。上边正是Vue数据驱动的概念模型

Betway官网 5

Vue.js首要承担的是上海体育场所法国红正方体ViewModel的一部分,其在View层(即DOM层)与Model层(即JS逻辑层)之间通过ViewModel绑定了DOM
Listeners与Data Bingings四个约等于监听器的事物。

当View层的视图产生改换时,Vue会通过DOM
Listeners来监听并改换Model层的多少。相反,当Model层的多少产生转移时,其也会由此Data
Bingings来监听并转移View层的展现。这样便完成了2个双向数据绑定的效果,也是Vue.js数据驱动的规律所在。

4.路由懒加载。当自个儿的品类打包后,运维,初次加载慢的飞起。那让作者很胃疼,那样光有付出速度有怎么着用,用户体验料定是不好的。小编查了下打包后的dist文件夹,小编去,好几兆。所以,难道要笔者重新选用任何才干栈再开拓2遍。当然是不也许了。在网络查了资料后,终于通晓了路由懒加载这几个办法。使用路由懒加载后,webpack会把原先比异常的大的js分解成多少个体量一点都不大的js,当大家运营加载行,它会按需加载,那样初次加载过长的标题便化解了。

Vue常用命令

Betway官网 6

Vue常用命令

在Vue项目标费用中,大家采纳的最多的应该就属Vue的通令了。通过Vue提供的常用命令,大家得以不亦乐乎地宣布Vue数据驱动的雄强功用。以下正是图中常用命令的简练介绍:

(1)v-text: 用于更新绑定元素中的内容,类似于jQuery的text()方法
(2)v-html:
用于更新绑定成分中的html内容,类似于jQuery的html()方法
(3)v-if:
用于依赖表明式的值的真真假假条件渲染成分,假使上图P三为false则不会渲染P标签
(4)v-show: 用于依赖表达式的值的真假条件�展现隐藏成分,切换到分的
display CSS 属性
(5)v-for:
用于遍历数据渲染成分或模板,如图中P⑥为[1,2,3]则会渲染一个P标签,内容逐条为壹,二,三
(6)v-on: 用于在要素上绑定事件,图中在P标签上绑定了showP3的点击事件

关于更加多的Vue指令能够查看Vue二.0文书档案,地址:https://vuefe.cn/api/\#指令

02-

伍.webpack。用到了vue全家桶,便少不了webpack。并不是,你npm run
build,就能够安慰睡觉去。就比如笔者在应用video.js时就需求在webpack里面配备(那几个搞了自家很久,头皮发麻)。webpack是个有力的事物,能够依据webpack做过多的事,比方,引进别的插件,把单页面改成多页面配置,给文件夹配置路线方便书写等等。但,不得不说,那么些东西很难学,而且官方网址说实话对自个儿来说写的并不通俗易懂,那多少个个插件表达文书档案就更别提了,能看懂的不到百分之五十。当然也说不定是小编太菜。要想成长,webpack是本人然后必须占有的难处。

Vue.js技术栈

Betway官网 7

Vue.js技术栈

上述大家讲到能够一直在三个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的新本子,ECMAScript六的简称。利用ES陆大家得以简化我们的JS代码,同时使用其提供的雄强作用来连忙完成JS逻辑。
(5)NPM:node.js的包管理工科具,用于同1管理我们前端项目中须要利用的包、插件、工具、命令等,便于开拓和保卫安全。
(6)webpack:一款庞大的公文打包工具,能够将大家的前端项目文件壹律打包压缩至js中,并且能够经过vue-loader等加载器达成语法转化与加载。
(7)Babel:1款将ES陆代码转化为浏览器包容的ES5代码的插件

选拔上述等才干,大家便得以起来营造大家的Vue项目了。

Vue实例

Betway官网 8

在多个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,那正是,遭逢标题,先想1想,上网查看资料,资料看不懂了,再去问人家。那点其实际职场很关键,因为大家都有温馨的干活,哪个人也远非时间和免费去帮你,所以能和睦度决的玩命和谐节决。

�创设大型应用

Betway官网 9

�塑造大型应用

在构建大家的中山大学型Vue项目中,咱们根本介绍如何运用vue-cli来自动生成大家项目标前端目录及文件,通晓Vue中整整皆组件的概念及老爹和儿子组件的通讯难题,讲授在Vue项目中大家什么利用第3方插件,最终采纳webpack来打包及配置大家的体系。

03-

自己小白,不足之处多多指教。

vue-cli构建

Betway官网 10

vue-cli构建

在运用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服务器在浏览器中开采并浏览项目页面

诸如此类大家的3个根据webpack的vue项目目录就营造好了。

Vue常用命令

Betway官网 11

在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]则会渲染二个P标签,内容逐条为一,贰,三
  6. v-on: 用于在要素上绑定事件,图中在P标签上绑定了showP三的点击事件

关于越多的Vue指令能够查看Vue二.0文书档案,地址:https://vuefe.cn/api/\#指令

单文件组件

Betway官网 12

单文件组件

在刚刚构建好的vue项目中,大家会发掘1个App.vue和Hello.vue的文书,那么像这么的以.vue后缀结尾的文本正是大家Vue项目中广泛的单文件组件。单文件组件包罗了贰个意义或模块的html、js及css。在.vue文件中,大家得以在template标签中写html,在script标签中写js,在style标签中写css。那样二个职能或模块正是三个.vue组件,对于组件公用和末代的爱戴也11分便利。

04-

�父子组件通讯

Betway官网 13

老爹和儿子组件通讯

那么像那样在以单文件组件为中央的档次成本中,我们必然会想到多个主题材料,便是.vue父子组件之间是怎么沟通数据来兑现通讯的呢?在Vue二.0中提供了props来贯彻父组件向子组件传递数据,通过$emit来落实子组件向父组件传递数据。当然假诺是比较复杂和广泛的多寡交互,建议大家利用vuex来平等管理数据。详细情形请见:https://vuefe.cn/guide/components.html\#使用Props传递数据

Vue.js技术栈

Betway官网 14

上述大家讲到能够一向在2个html页面里通过引进Vue.js来直接写Vue代码,不过这么的方法并不常用。因为要是咱们的档案的次序相当大,项目中会存在大多页面,壹旦各个页面都引进三个Vue.js大概声美素佳儿(Friso)个Vue实例,那样卓殊不便利后期的护卫和代码的公用,也会设有实例名抵触的景况,所以我们供给用到Vue提供的本事栈来营造庞大的前端项目。

除了Vue.js我们还供给运用:

  1. vue-cli:Vue的脚手架工具,用于自动生成Vue项目标目录及文件。
  2. vue-router:
    Vue提供的前端路由工具,利用其我们落到实处页面包车型大巴路由调整,局地刷新及按需加载,营造单页应用,达成内外端分离。
  3. vuex:Vue提供的状态管理工科具,用于同一管理我们项目中各个数据的互相和重用,存款和储蓄我们需求用到数码对象。
  4. ES陆:Javascript的新本子,ECMAScript⑥的简称。利用ES陆我们得以简化大家的JS代码,同时使用其提供的精锐效率来连忙落成JS逻辑。
  5. NPM:node.js的包管理工科具,用于同壹处理咱们前端项目中供给使用的包、插件、工具、命令等,便于开拓和掩护。
  6. webpack:一款强大的公文打包工具,能够将大家的前端项目文件1律打包压缩至js中,并且能够经过vue-loader等加载器达成语法转化与加载。
  7. Babel:1款将ES陆代码转化为浏览器包容的ES伍代码的插件

运用上述等才能,大家便足以起首创设大家的Vue项目了。

插件使用

Betway官网 15

插件使用

接下去大家介绍下在依靠webpack的vue项目中大家是何许利用插件的,主要有二种情况:

(1)全局使用

(1)在index.html引入:那样的不贰秘籍不推荐使用,因为存在程序加载顺序的难题,有些插件不帮忙那一方法。
(2)透过webpack配置文件引入:主要透过plugin配置项的webpack.ProvidePlugin()方法完成,但是只适合协助CommonJs规范并提供1个全局变量的插件,如jQuery中的$。
(3)通过import +
Vue.use()引入
:那种方法亟待在全局.vue文件中import需求加载的插件,然后通过Vue.use(‘插件变量名’)来贯彻,然而此办法只帮忙遵从Vue.js插件编写标准的插件使用,如vue-resourece。

(二)单文件使用

(1)透过import间接引进:这种办法能够在要求调用插件的.vue文件中选拔,可是须要专注和实例的制造顺序难题,或然也能够经过require引进。

(2)import +
components注册
:此方式为Vue组件的使用办法,可以在2个零部件中注册并应用四个子零部件。

05-

布局及优化

Betway官网 16

布署及优化

当大家解决一切Vue项目的前端编码阶段后,我们要求对我们的前端项目文件举办陈设和优化职业,首要的几个章程如下:

(1)行使webpack的DefinePlugin内定生产条件:通过plugin中的DefinePlugin配置,大家得以表明’process.env’属性为’development'(开辟遇到)只怕’production'(生产境况),结合npm配置文件package.json中scripts的一声令下来切换境况格局13分有益于。

(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的功能特别精锐。

营造大型应用

Betway官网 17

在营造大家的中山高校型Vue项目中,大家根本介绍如何行使vue-cli来自动生成大家项目标前端目录及文件,精晓Vue中整整皆组件的定义及父亲和儿子组件的通讯难点,疏解在Vue项目中我们怎么利用第一方插件,最终动用webpack来打包及配置大家的品类。

数码驱动实例##

Betway官网 18

数据驱动实例

那是自己事先使用Vue.js数据驱动的法则写的一个拼图游戏,希望能够供大家进一步掌握Vue数据驱动的思想。
演示地址:拼图游戏
代码地址:拼图代码

06-

总结

本文以PPT图片附Gavin字介绍的款式简要介绍了Vue.js的知识点及支付流程,并将前端自动化、组件化、工程化的观念贯穿其间,由表及里地阐释了Vue.js“轻便却不失优雅,小巧而不发大匠”的特殊吸重力。

vue-cli构建

Betway官网 19

在选用vue-cli之前大家须要安装node.js,利用其提供的npm命令来安装vue-cli。安装node.js只需去其官方网址下载软件并设置就可以,地址为:https://nodejs.org/en/

安装到位之后我们开发Computer的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服务器在浏览器中张开并浏览项目页面

这么我们的3个依照webpack的vue项目目录就营造好了。

07-

单文件组件

Betway官网 20

在刚刚创设好的vue项目中,我们会意识三个App.vue和Hello.vue的文书,那么像那样的以.vue后缀结尾的文本正是我们Vue项目中常见的单文件组件。单文件组件包罗了五个功效或模块的html、js及css。在.vue文件中,大家得以在template标签中写html,在script标签中写js,在style标签中写css。那样三个效用或模块正是3个.vue组件,对于组件公用和后期的爱惜也拾分方便。

08-

父亲和儿子组件通讯

Betway官网 21

那正是说像这么在以单文件组件为骨干的连串开辟中,大家一定会想到三个难点,正是.vue父亲和儿子组件之间是何等调换数据来促成通讯的呢?在Vue二.0中提供了props来实现父组件向子组件传递数据,通过$emit来兑现子组件向父组件传递数据。当然假如是较为复杂和大规模的数额交互,提议我们利用vuex来平等管理数据。详细情况请见:https://vuefe.cn/guide/components.html\#应用Props传递数据

09-

插件使用

接下去大家介绍下在依赖webpack的vue项目中大家是什么样行使插件的,首要有二种情景:
(一)全局使用
(壹)在index.html引入:那样的点子不引入应用,因为存在程序加载顺序的标题,有些插件不协理这一艺术。
(二)通过webpack配置文件引进:重要透过plugin配置项的webpack.ProvidePlugin()方法实现,然则只适合帮助CommonJs规范并提供一个全局变量的插件,如jQuery中的$。
(3)通过import +
Vue.use()引进:那种艺术索要在大局.vue文件中import供给加载的插件,然后经过Vue.use(‘插件变量名’)来实现,可是此方法只协助听从Vue.js插件编写标准的插件使用,如vue-resourece。

(二)单文件使用
(壹)通过import直接引进:那种艺术可以在需求调用插件的.vue文件中央银行使,可是供给留意和实例的创办顺序难题,或许也得以透过require引入。
(二)import +
components注册:此措施为Vue组件的利用格局,能够在一个零件中注册并接纳多个子组件。

10-

陈设及优化

Betway官网 22

**
当大家解决全数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指令其实很有用处,它可以让大家项目中临时不要求的组件不进行渲染,等急需选取的时候在渲染,举个例子有些弹窗组件等。那样我们能够收缩页面第3遍加载的日子和文件量。

除开上述几点的优化,还有诸多优化增选,风乐趣的童鞋能够可以地问询下webpack的API文书档案,究竟webpack的效能极度有力。

总结

vue是七个享有尤其魔力粗略却不失优雅,小巧而不发大匠的框架!

相关文章