vue学习笔记(一)入门

前言

随着前端不断的壮大,许多公司对于前端开发者的需求也越来越多了,作为一名优秀的前端工程师,如果连vue和react都不会的话,那真是out了,为什么那么说呢?这是我在招聘网站上截的一张图,十家公司有九家都是需要对vue或者react熟悉,当然仅仅熟悉肯定是不够的,毕竟掌握住了才能保住自己的铁饭碗,否则的话可能会被炒鱿鱼,精通vue或者react话就可能就需要很长时间了,反正我是不敢说精通,只能说了解。那么一起来看看vue到底是什么东西吧!


image

image

本章目标

  • 了解vue是什么
  • 区别框架和库
  • 了解vue的优点
  • 入门第一个vue实例

vue.js是什么

首先我需要说的是vue.js是国人开发的,作者是尤玉溪,重要事情说三遍:作者是中国人,作者是中国人,作者是中国人!!!!
在这里我就直接用官网的解释了,毕竟官网的解释是比较详细的,Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。大家可能对于渐进式不太了解,这里我给大家找了一张有关渐进式的图片。


image

声明式渲染:
常见的有v-if,v-for,v-html等,主要是vue的基本语法
组件系统:
组件系统的话,我们可以认为将可复用的代码作为一个模板,方便维护和管理,常见的有父子组件通信。
客户端路由:
路由的话可以理解为一个链接,通常可以用做SPA单页应用。
大规模状态管理:
状态管理的话,博主暂时也不太了解,等以后了解之后再回来补充
构建工具:
构建工具的话主要将小模块进行整合,我们开发有些项目的时候可能的一个小模块小模块的开发,等待全部开发完成之后,我们就需要将这些模块进行整合,而vue-cli脚手架正好起到了这个作用,vue-cli我们以后会谈到。

框架和库的区别

一提到框架,很多人就会联想到库,毕竟在没有接触到框架之前我们都是使用库的(jQuery),那么什么是库,什么是框架呢?我总结如下

框架

框架是为了解决一类问题而开发出来的产品,基于自身的特点向用户提供一套完整的解决方案,例如:vue,react,angular等前端三大主流框架
在这里我们可能不太了解框架的意思,你可以这样理解,框架的话,主动权在它手上,我们必须遵守它制定的一系列规则,如果我们不遵守的话,我们就使用不了框架或者框架会抛出异常信息,例如:在vue中数据必须写在data中,方法必须写在methods中,当然有些既可以当做方法也可以当做计算属性。这个我们后面会提到,现在只是抛砖引玉。

库是将代码集合成一个产品,供开发者去使用,开发者去调用库中的方法去实现自己的功能,例如:jQuey,zepto,
库的话我们就是拿来即用,之前也没有去想过或者弄懂库是什么东西,我自己总结是:库的主动权在我们手上,例如:在jQuery中我们获取某个节点是$('[类名/id]')这种操作,但是我们也可以使用javascript中的原生方法document.getElementById('id')或者document.getElementsByClassName('class'),主动权在我们自己的手上,我们想使用jQuey中的方法就使用jQuey中的方法,想使用原生的js方法就是用js原生的方法。
讲到这里,希望对大家了解框架和库有所帮助,这里主要是我个人的理解。

vue的优点

易用:

会html,css,js即可上手

灵活:

不断繁荣的生态系统,可以在一个库和一套完整框架之间自如伸缩

高效:

20kB min+gzip大小,超快虚拟DOM,最省心的优化

第一个vue实例

中文官网:https://cn.vuejs.org/
英文官网:https://vuejs.org
学习资料:https://www.bilibili.com/video/av62914998?from=search&seid=6339600099504545137
在进行第一个vue实例之前,我们需要先下载vue,进入官网之后我们找到安装,安装方法暂定三种

直接用
2.对于生产环境,我们推荐链接到一个明确的版本号和构建文件,以避免新版本造成的不可预期的破坏:
3.如果你使用原生 ES Modules,这里也有一个兼容 ES Module 的构建文件:

NPM安装

在用 Vue 构建大型应用时推荐使用 NPM 安装。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。
命令:npm install vue
在这里我提倡使用开发环境的vue.js而不是生产环境的vue.js,开发环境的vue.js对于我们来说调试比较方便,哪里出错了需要修改也比较容易,一起来看看案例吧!



    
        
        入门第一个vue实例
    
    
        
{{msg}}

注意:数据必须写在data里面

总结

本章我们主要从四个方面进行了讲解,分别是了解vue,区别框架和库,了解vue的优点,入门第一个vue实例,本章内容也相对简单,主要是入门第一个vue实例,如果文章有理解错误的地方,或者你认为有更好的解释的,请在下方留下您的评论,感谢支持!下一章我们学习vue的生命周期和钩子函数。本章内容到此结束。

你可能感兴趣的:(vue学习笔记(一)入门)