第一节:Vue的认识与了解

1. 认识Vue

1.1 Vue是什么

vue.js是一套渐进式 JavaScript 框架,

vue是一款友好的,多途径且高性能的JavaScript框架,可维护和测试更强的代码

作用: 动态构建用户界面

和其他前端框架的关联

借鉴了angular的模板和数据绑定技术

借鉴了react的组件化和虚拟DOM 技术

1.2 了解库和框架

框架    vue

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

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

库 jQuery

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

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

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

1.3. vue的特点

核心只关注视图层

易学,轻量,灵活的特点

编码简洁,体积小,运行效率高,适合移动/PC开发

渐进式框架

遵循MVVM模式

1.4. 渐进式的理解

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

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

渐进式.jpeg

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

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

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

客户端路由(vue-router)

大规模状态管理(vuex)

构建工具(vue-cli)

1.5. MV**

MVC    单向

model 模型  view  视图  controller 控制器

mvc.jpg

MVVM  双向

model 模型  view  视图  viewModel 视图模型

mvvm.jpg

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

<scriptsrc="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