第一节:Vue的认识与了解

1. 认识Vue

1.1 Vue是什么

vue.js是一套渐进式 <span style="color:red">JavaScript</span> 框架,
vue是一款友好的,多途径且高性能的JavaScript框架,可维护和测试更强的代码


作用: 动态构建用户界面


和其他前端框架的关联

1. 借鉴了angular的模板和数据绑定技术
2. 借鉴了react的组件化和虚拟DOM 技术
   
   

1.2 了解库和框架

1. 框架 vue

   拥有一个完整的解决方案.,我们开发好以后,他就能调用我们的代码

   vue的核心是库,使用他vue核心库和一些插件就是框架,

2. 库 jQuery

   库是别人开发好以后,我们去调用库的方法

库的的概念和意义是用来提供一些方法的集合，避免重复定义相同功能的函数，并具有一定的模式兼容性。

框架，更应该是规范开发者按照框架的设计去做一些事，而非简单的工具集的概念，框架可以提供相应的库或者基于库来实现的插件，但库一般不会具备框架的规范性。

1.3. vue的特点

1. 核心只关注视图层
2. 易学,轻量,灵活的特点
3. 编码简洁,体积小,运行效率高,适合移动/PC开发
4. 渐进式框架
5. 遵循MVVM模式
   
   

1.4. 渐进式的理解

通过组合,完成一个完整的框架

通俗的来说,渐进式,就是vue有一个核心库, 和一堆的插件, 当核心库能完成的内容就用核心库就行了, 如果需要什么插件在下载什么插件使用

渐进式.jpeg

Vue全家通, vuejs + vue-router + vuex+ axios

1. 声明式渲染 (不关心是如何实现的用就可以了)

2. 组件系统 (大型项目,很多部分可以复用,这就是组件)

3. 客户端路由(vue-router)

4. 大规模状态管理(vuex)

5. 构建工具(vue-cli)
   
   

1.5. MV**

1. MVC 单向

   model 模型 view 视图 controller 控制器

   
   
   mvc.jpg

2. MVVM 双向

   model 模型 view 视图 viewModel 视图模型

mvvm.jpg

1.6 Vue扩展插件

1. vue-cli: Vue 脚手架
2. vue-resource: ajax请求, 官网已经不推荐使用了,推荐axios
3. vue-router: 路由
4. vuex: 状态管理
5. vue-lazyload: 图片懒加载
6. vue-scroller : 页面滑动相关
7. element-ui: 基于vue的UI组件库(PC端)
8. 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>引入

1. 直接下载并用<script>标签引入，Vue会被注册位一个全局变量。
2. 引入在线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

需要注意的点：

1. 一键生成要主要,项目的名字会自动使用文件夹的名字,
2. 所以此时文件夹的名字不能是中文,特殊大写字母

安装vue

npm install vue