Vue基础

Vue是一个渐进式的框架

• 渐进式意味着你可以将Vue作为你应用的一部分嵌套其中
• Vue的核心库以及其生态系统
• Core + Vue-router + Vuex

Vue特点和Web开发常见高级功能

1. 解耦视图和数据
2. 可复用的组件
3. 前端路由技术
4. 状态管理
5. 虚拟DOM

Vue安装方式

• 方式一. 直接CDN引入
  可以选择引入开发环境版本 / 生产环境版本

// 开发环境版本, 包含了帮助的命令行警告
<srcipt src='https://cdn.jsdeliver.net/npm/vue/dist/vue.js'></script>

// 生产环境版本, 优化了尺寸和速度
<srcipt src='https://cdn.jsdeliver.net/npm/vue'></script>

• 方式二. 下载和引入

// 开发环境
https://vuejs.org/js/vue.js

// 生产环境
https://vuejs.org/js/vue.min.js

• 方式三. NPM安装

通过webpack和CLI的使用

Vue的MVVM

M： Model 数据模型

数据层
数据可能是固定的思数据, 更多的是来自服务器, 从网络上请求下来的数据
V: View 视图模板

视觉层
在前端开发中, 通常是DOM层
作用: 是给用户展示各种信息
VM： View-Model 视图模型

视图模型层
是View和Model沟通的桥梁
一方面实现了Data Binding (数据绑定), 讲Model的改变实时的反应到View中
另一方面实现了DOM Listener (DOM监听), 当DOM发生一些时间 (点击, 滚动, touch等) 时, 可以监听到, 并在需要的情况下改变对应的Data