Vue简介

1. Vue是什么？

是一款javaScript渐进式框架 Vue是一款友好的灵活的多途径且高性能的javaScript框架,可维护和测试更强的代码

1.1 作用：动态构建用户页面

和其他前端框架的关联 三大主流框架：angular(国外主流) react Vue

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

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

1.2 Vue扩展插件

vue-cli: Vue 脚手架

vue-resource: ajax请求, 官网已经不推荐使用了,推荐axios

vue-router: 路由

vuex: 状态管理

vue-lazyload: 图片懒加载

vue-scroller : 页面滑动相关

element-ui: 基于vue的UI组件库(PC端)

mint-ui: 基于vue的UI组件库(移动端)

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

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

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

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

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

5. 构建工具(vue-cli)

1.4 渐进式的理解

当核心库不能够满足需求在下载插件

22285013-c768406ee19f6645.png

1.5 MVC

model模型 view视图 controller控制器

22285013-20ec9524c3e7f251.png

1.6 MVVM双向

model 模型 view视图 viewModel 视图模型

当Model数据改变触发------>Data Bindings控制器------->改变view

当View视图改变触发------>DOM Listeners监听器-------->改变model

22285013-bcfd01d513645a11.png

2.安装Vue

Vue兼容性

Vue不支持IE8及以下版本，因为Vue使用的是IE8无法模拟的ECMAScript 5特性。vue.js支持所有兼容ECMAScript 5的浏览器.

2.1直接使用script引入

直接下载并用<script>标签引入，Vue会被注册位一个全局变量。 引入在线CDN

<script src="https://cdn.jsdelivr.net/npm/vue"> </script>

2.1 npm安装

npm init -y
//会生成一个package.json文件,这个文件用来描述项目的依赖,
//不能有大写 特殊字母 中文,而且不要和安装的包的名字相同
npm install vue -S

原著：无为