有关按新手用vue后底一对反思。前端开发之Vue

自身是一个恰巧毕业半年多之前端小白,进庄办事之下,由于企业之前端技术还没定下来,所以在召开项目的时刻自己是自由发挥。由于vue具有高达心灵,开发效率高的性状,所以,我于召开项目下,便摘了vue作为技术栈,由于是首先浅用bootstrap加jQuery以外的技术栈,所以以下是当成就项目之进程中,对vue使用方面认识不交要不足之自省。

Vue.js作为当下极端红最富有前景的前端框架之一,其提供了一样种助我们迅速构建并付出前端项目的新的想想模式。本文旨在帮助大家认识Vue.js,了解Vue.js的支出流程,并进而明白什么通过Vue.js来构建一个被巨型的前端项目,同时办好相应的配置与优化办事。

1.率先,新手用vue最常见的错,就是DOM操作,而vue的双向数据绑定,恰恰为我们实在不欲开展繁琐的DOM操作,我们惟有待关爱数据层面即便可以了。想想自己太开头取input还是用什么document.getElementById(‘id’).value这种,就看好不行笨,明明仅待v-model绑定data就好了,唉~

文章将以PPT图片附加文字介绍的样式开展,不见面波及知识点的切实代码,点到竣工。有趣味之同室可以查相应的文档进行打探。

2.认为vue只能用来开发SPA。直到见到过深神在知乎上对的:不必然做只品种就是非得cli一个全家桶,vue也未是也单页面而生的。我才懂,vue的动方式,我偏偏理解冰山一角,如何会灵活根据自己之求下支付,还得好以后的多多成人。

01-

3.组件化思想。起初一开始,觉得他人的UI框架都勾好了,就直接以来所以。当然如此做并无呀问题。但是,当我发觉自每个页面几乎都起几乎截同样之代码,或者都亟需因此到这UI框架的零部件,比如面包屑,比如导航菜单,那自己关系嘛不将这样UI框架做成独立的零部件为?

Vue.js简介

图片 1

于上图的牵线着我们不难发现Vue.js是一模一样缓缓轻量级的盖数驱动之前端JS框架,其以及jQuery最酷之不同点在于jQuery通过操作DOM来转页面的展示,而Vue通过操作数据来落实页面的换代与展示。下面就是是Vue数据让之概念模型

图片 2

Vue.js主要承担的是高达图绿色正方体ViewModel的片,其以View层(即DOM层)与Model层(即JS逻辑层)之间通过ViewModel绑定了DOM
Listeners与Data Bingings两独相当给监听器的东西。

当View层的视图发生改变时,Vue会通过DOM
Listeners来监听并改变Model层的多少。相反,当Model层的多寡有反时,其也会通过Data
Bingings来监听并转移View层的展示。这样就算实现了一个双向数据绑定的效用,也是Vue.js数据令的规律所在。

4.路由于懒加载。当自己之种打包后,运行,初次加载慢的飞起。这给自己死去活来头疼,这样只有开发进度发出啊用,用户体验肯定是糟糕的。我查看了生打包后底dist文件夹,我错过,好几主。所以,难道要自身重新选择任何技术栈再开发同赖。当然是不可能了。在网上查看了材料后,终于掌握了路程由于懒加载这个方法。使用路由懒加载后,webpack会管原本好可怜之js分解成多单体积比小的js,当我们运行加载行,它见面按需要加载,这样初加载了长的问题就解决了。

02-

5.webpack。用到了vue全家桶,便少不了webpack。并无是,你npm run
build,就足以欣慰睡觉去。就随我在动用video.js时即待以webpack里面配备(这个为了本人深悠久,头皮发麻)。webpack是个有力的事物,可以根据webpack做过多之事,比如,引入其他插件,把单页面改化多页面配置,给文件夹配置路径方便书写等等。但,不得不说,这个事物好难学,而且官网说实话对自我而言写的连无通俗易懂,那些只插件说明文档就再次别提了,能看懂的匪顶一半。当然也说不定是自己极其菜。要想成长,webpack是自个儿后须上下之难关。

Vue实例

图片 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表示实例生命周期中开创好的那无异步,当实例已经创办好以后以调用其艺术。

6.末一个,无关于vue,那就是是,遇到问题,先想同一想,上网查看资料,资料看无明白了,再失问问别人。这点其实际职场好重点,因为大家还发生自己之办事,谁为尚无时间和白去救助您,所以能够和谐解决的玩命协调解决。

03-

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

Vue常用命令

图片 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/\#指令

04-

Vue.js技术栈

图片 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项目了。

05-

构建大型应用

图片 6

以构建我们的遭遇大型Vue项目面临,我们最主要介绍如何采取vue-cli来自动生成我们项目的前端目录及文件,了解Vue中尽皆组件的概念和父子组件的通信问题,讲解在Vue项目遭到我们什么样以第三正在插件,最后以webpack来打包及布局我们的品种。

06-

vue-cli构建

图片 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项目目录就构建好了。

07-

单文件组件

图片 8

于刚构建好的vue项目遭到,我们会意识一个App.vue和Hello.vue的文件,那么像这么的以.vue后缀结尾的文本就是我们Vue项目蒙广的单文件组件。单文件组件包含了一个效应要模块的html、js及css。在.vue文件中,我们得以在template标签中描绘html,在script标签中写js,在style标签中形容css。这样一个效能要模块就是一个.vue组件,对于组件公用和季的保障为十分省事。

08-

父子组件通信

图片 9

那像这样以为单独文件组件为基本之项目支付被,我们自然会想到一个问题,就是.vue父子组件之间是怎么交换数据来落实通信的啊?在Vue2.0饱受提供了props来实现父亲组件向子组件传递数据,通过$emit来贯彻子组件为爸爸组件传递数据。当然如果是较为复杂与大面积的数额交互,建议大家利用vuex来平等管理数据。详情请见:https://vuefe.cn/guide/components.html\#行使Props传递数据

09-

插件使用

接下我们介绍下以冲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组件的行使方法,可以当一个组件中注册并运用一个子零部件。

10-

布局与优化

图片 10

**
当我们搞定所有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的效益十分有力。

总结

vue是一个具非常魅力简短也非错过优雅,小巧而无作大匠的框架!

相关文章

admin

网站地图xml地图