有关以新手用vue后之片反思。前端开发之Vue

或者都需要用到这个UI框架的组件,并进一步理解如何通过Vue.js来构建一个中大型的前端项目

我是一个正要毕业半年多的前端小白,进铺做事之时节,由于店的前端技术还未曾定下来,所以在做项目的当儿自己是自由发挥。由于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简介

lovebet体育 1

自上图的牵线着我们不难窥见Vue.js是同样款轻量级的以数令之前端JS框架,其以及jQuery最深之不同点在于jQuery通过操作DOM来改变页面的显得,而Vue通过操作数据来落实页面的创新和显。下面就是Vue数据令的概念模型

lovebet体育 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实例

lovebet体育 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常用命令

lovebet体育 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技术栈

lovebet体育 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-

构建大型应用

lovebet体育 6

每当构建我们的被巨型Vue项目被,我们根本介绍如何以vue-cli来自动生成我们种之前端目录和文件,了解Vue中漫天均组件的概念以及父子组件的通信问题,讲解在Vue项目被我们怎么利用第三正插件,最后以webpack来打包及配置我们的花色。

06-

vue-cli构建

lovebet体育 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-

单文件组件

lovebet体育 8

当正构建好的vue项目蒙,我们会发觉一个App.vue和Hello.vue的文本,那么像这样的以.vue后缀结尾的公文就是我们Vue项目受到广泛的单文件组件。单文件组件包含了一个效益要模块的html、js及css。在.vue文件中,我们可以在template标签中描写html,在script标签中描绘js,在style标签中写css。这样一个效能还是模块就是一个.vue组件,对于组件公用和深的保护也坏轻便。

08-

父子组件通信

lovebet体育 9

这就是说像这样在以单文件lovebet体育组件为中心的种类开发被,我们终将会想到一个问题,就是.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-

布置以及优化

lovebet体育 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是一个存有特别魅力粗略却休错过优雅,小巧而不作大匠的框架!