vue基础

最新推荐文章于 2024-02-28 21:40:39 发布

原创最新推荐文章于 2024-02-28 21:40:39 发布 · 276 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了Vue.js框架的基本概念，包括其设计理念、安装方法、MVVM架构的应用以及数据响应性和插值表达式的使用。Vue.js作为一个轻量级且功能强大的前端框架，适合初学者快速上手，并能与复杂项目无缝整合。

一、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引入

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

<script src="https://cdn.jsdelivr.net/npm/vue@1.6.16/dist/vue.js"></script>

你可以在 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里面定义了的属性可以直接通过插值表达式渲染在页面。

<div id="app">
   <p>{{ foo }}</p>
</div>