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
}