1. 认识Vue
1.1 Vue是什么
vue.js是一套渐进式 <span style="color:red">JavaScript</span> 框架,
vue是一款友好的,多途径且高性能的JavaScript框架,可维护和测试更强的代码
作用: 动态构建用户界面
和其他前端框架的关联
- 借鉴了angular的模板和数据绑定技术
- 借鉴了react的组件化和虚拟DOM 技术
1.2 了解库和框架
-
框架 vue
拥有一个完整的解决方案.,我们开发好以后,他就能调用我们的代码
vue的核心是库,使用他vue核心库和一些插件就是框架,
-
库 jQuery
库是别人开发好以后,我们去调用库的方法
库的的概念和意义是用来提供一些方法的集合，避免重复定义相同功能的函数，并具有一定的模式兼容性。
框架，更应该是规范开发者按照框架的设计去做一些事，而非简单的工具集的概念，框架可以提供相应的库或者基于库来实现的插件，但库一般不会具备框架的规范性。
1.3. vue的特点
- 核心只关注视图层
- 易学,轻量,灵活的特点
- 编码简洁,体积小,运行效率高,适合移动/PC开发
- 渐进式框架
- 遵循MVVM模式
1.4. 渐进式的理解
通过组合,完成一个完整的框架
通俗的来说,渐进式,就是vue有一个核心库, 和一堆的插件, 当核心库能完成的内容就用核心库就行了, 如果需要什么插件在下载什么插件使用
Vue全家通, vuejs + vue-router + vuex+ axios
声明式渲染 (不关心是如何实现的用就可以了)
组件系统 (大型项目,很多部分可以复用,这就是组件)
客户端路由(vue-router)
大规模状态管理(vuex)
构建工具(vue-cli)
1.5. MV**
-
MVC 单向
model 模型 view 视图 controller 控制器
mvc.jpg -
MVVM 双向
model 模型 view 视图 viewModel 视图模型
1.6 Vue扩展插件
- vue-cli: Vue 脚手架
- vue-resource: ajax请求, 官网已经不推荐使用了,推荐axios
- vue-router: 路由
- vuex: 状态管理
- vue-lazyload: 图片懒加载
- vue-scroller : 页面滑动相关
- element-ui: 基于vue的UI组件库(PC端)
- mint-ui: 基于vue的UI组件库(移动端)
2. 安装vue
2.1. 了解vue的兼容性
`Vue`不支持`IE8`及以下版本，因为`Vue`使用的是`IE8`无法模拟的`ECMAScript 5`特性。vue.js支持所有兼容`ECMAScript 5`的浏览器.
Object.definedProperty(es5) 的没有替代方案,所以不支持IE8及以下
2.2. 直接用<script>引入
- 直接下载并用
<script>标签引入，Vue会被注册位一个全局变量。 - 引入在线cdn
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
2.3. npm安装
npm init
会生成一个package.json文件,这个文件用来描述项目的依赖,
不能有大写 特殊字母 中文,而且不要和安装的包的名字相同
也可以一键生成
npm init -y
需要注意的点：
- 一键生成要主要,项目的名字会自动使用文件夹的名字,
- 所以此时文件夹的名字不能是中文,特殊大写字母
安装vue
npm install vue
