Vue学习（一）

Vue学习（一）

认识Vue

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

Vue与React、Angular的比较及MVVM框架的理解

三者的比较

（1）Angular
2009年诞生的，起源于个人开发，后来被Google 收购了。
核心技术：指令和数据绑定技术。
（2）React
2013年5月开源的，起源于Facebook的内部项目，对市场上所有的框架都不满意，于是自己写了一套。
核心技术：组件化和虚拟DOM技术。
（3）Vue.js
吸收了上面两个框架的技术优点，借鉴了Angular的指令和React的组件化，是后起之秀。Vue.js更轻量，zip后只有20K+，而且Vue更易上手，学习成本更低。
但是Vue不支持IE8及以下版本，因为Vue使用了ECMAScript5特性。
相同点：三者都是MVVM框架。

MVVM框架

（1）MVC(Model-View-Controller)
是一种表现形式，将软件的UI部分拆分为三个主要单元，分别是Model、View和Controller。核心是控制器，负责处理用户指令，并返回内容。
（2）MVVM框架（Model-View-ViewModel）
MVVM的核心是ViewModel，它提供了对于Model和View的双向数据绑定，通过ViewModel连接View的Model，确保数据的一致性。
M（model）：JavaScript数据对象，数据部分。
V(view)：前端展示页面，DOM元素。
VM(ViewModel)：用于双向绑定数据与页面，即Vue的实例。
MVVM响应式编程模型，避免直接操作DOM，降低DOM操作的复杂性。

如何引入Vue.js

1、 npm方式下载
一般进入项目所在文件，打开cmd窗口，输入cnpm install vue，回车即可下载。
下载完成后进入node_modules_vue@2.6.11@vue\dist文件
2、直接官网下载
开发版本：单击下载vue.js（包含完整的警告和调试模式）
生产版本：单击下载vue.man.js(删除了警告，33.30KB min+gzip)
3、通过script标签引入

<!-- 开发版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 生产版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

Vue实例

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始：

var vm = new Vue({
  // 选项
})

数据与方法

当一个 Vue 实例被创建时，它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。

// 数据对象
var data = { a: 1 }

// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
  data: data
})

// 获得这个实例上的 property
// 返回源数据中对应的字段
vm.a == data.a // => true

// 设置 property 也会影响到原始数据
vm.a = 2
data.a // => 2


data.a = 3
vm.a // => 3

当这些数据改变时，视图会进行重渲染。如果添加一个新的 property，例如：

vm.b = 'hi'
data: {
  newTodoText: '',
  visitCount: 0,
  hideCompletedTodos: false,
  todos: [],
  error: null
}