有关以新手用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地图