vue基础

mac2025-12-02 7

一、Vue初步

1.1 Vue简单认识

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vfue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 vue.js、Angular.js、React.js并称前端三大主流框架！ Vue.js是一套构建用户界面的框架，只关注视图层，不仅易于上手，还便于第三方库或既有项目整合。（Vue有配套的第三方类库，可以整合起来做大型项目的开发）前端的主要工作？主要负责MVC中的V这一层；主要工作就是和界面打交道，来制作前端页面效果；

1.1.1 Vue 安装

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

1.1.1.1 本地导入

直接下载并用

1.1.1.2 CDN引入

我们推荐链接到一个你可以手动更新的指定版本号：

你可以在 cdn.jsdelivr.net/npm/vue 浏览 NPM 包的源代码。

1.1.1.3 npm 安装

npm i vue

1.2 Vue 的 MVVM对应关系

1.2.1 创建一个Vue实例

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的。创建一个Vue的实例当我们导入包之后，在浏览器的内存中，就多了一个 Vue 构造函数。一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例，以及可选的嵌套的、可复用的组件树组成。所有的 Vue 组件都是 Vue 实例，并且接受相同的选项对象 (一些根实例特有的选项除外)。 el: 提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个HTMLElement 实例。在实例挂载之后，元素可以用 vm.$el 访问。表示，要控制页面上的哪个区域。这个区域就是MVVM中的 v (view层) data: 这里的 data 就是 MVVM中的 M （model层），专门用来保存每个页面的数据的 data 属性中，存放的是 el 中要用到的数据 vm: 实例化的Vue就是MVVM中的 VM（调度者）层 template：一个字符串模板作为 Vue 实例的标识使用。模板将会替换挂载的元素。挂载元素的内容都将被忽略，除非模板的内容有分发插槽。 render：字符串模板的代替方案，允许你发挥 JavaScript 最大的编程能力。该渲染函数接收一个 createElement 方法作为第一个参数用来创建 VNode。（更多内容见Vue进阶） <div id="app"> <p>{{ msg }}</p> </div> <script> var vm = new Vue({ el: '#app', data: { msg: '欢迎学习Vue' } }) </script>

以上代码，虽然没有完全遵循 MVVM 模型，但是 Vue 的设计也受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例。 msg 通过 Vue 提供的指令，很方便的就能把数据渲染到页面上，程序员不再手动操作DOM元素了【前端的Vue之类的框架，不提倡我们去手动操作DOM元素了】

1.2.2 数据与方法

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

// 我们的数据对象 var data = { a: 1 } // 该对象被加入到一个 Vue 实例中 var vm = new Vue({ data: data })

我们可以通过data.a去获取绑定在data上的a属性，也可以直接通过vm实例获取到

vm.a == data.a // => true

设置属性也会影响到原始数据

vm.a = 2 data.a // => 2

反之亦然

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

当这些数据改变时，视图会进行重渲染。值得注意的是只有当实例被创建时 data 中存在的属性才是响应式的。也就是说如果你添加一个新的属性，不会触发任何视图的更新。

如果你知道你会在晚些时候需要一个属性，但是一开始它为空或不存在，那么你仅需要设置一些初始值。比如：

var vm = new Vue({ data: { newTodoText: '', visitCount: 0, hideCompletedTodos: false, todos: [], error: null } })

1.2.3 {{}} 插值表达式

在data里面的属性通过{{}}插值表达式可以直接渲染到页面中

var vm = new Vue({ el: '#app', data: { foo: 'bar' } })

在data里面定义了的属性可以直接通过插值表达式渲染在页面。

最新回复(0)