Vue2.0学习笔记一 认识Vue

立场简单
318 阅读3分钟

一、 什么是VUE

​ Vue (读音 /vjuː/，类似于 view) （千万不要读错，尤其是在面试时，曾经听同事说过有人就因为读错被PASS）是一套用于构建用户界面的渐进式框架。

​ 学习Vue之前有个前提，就是基本掌握前端的三板斧HTML、CSS、JavaScript。

1. 什么是渐进式框架？

​ Vue并不是强主张的框架，并没有规定必须使用它的模块机制和依赖注入。渐进式意味着你可以将Vue作为你应用的一部分嵌入其中，带来更丰富的交互体验。Vue将功能分层，最核心的部分就是视图渲染，然后往外是组件机制，再加入路由机制，状态管理，构建工具等等，简单的来说，Vue不强求你一次性使用并接受它的全部功能特性，你可以根据项目的实际情况使用部分的功能。

​ 举个例子：当公司要求对一个老项目新增一个功能，此时可以选择使用Vue框架。

2. Vue的安装

​ Vue分为两个版本：开发版本和生产版本。生产版本使用了代码混淆，代码混淆保护代码的同时，对代码进行了压缩处理。被混淆的代码难于理解，因此调试以及除错也变得困难起来。

​

开发版本生产版本
区别包含完整的警告和调试模式删除了警告，33.30KB min+gzip
使用场景项目开发时使用项目上线时使用

​ Vue的安装有多种方式 ,常见方式如下：

2.1 CDN引入

​ CDN引入会智能选择最快的服务器引入

​ 对于制作原型或学习，你可以这样使用最新版本：

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

​ 对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏：

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

​ 如果你使用原生 ES Modules，这里也有一个兼容 ES Module 的构建文件：

<script type="module">
  import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.esm.browser.js'
</script>

2.2 NPM 安装

​ 在用 Vue 构建大型应用时推荐使用 NPM 安装[1]。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。

# 最新稳定版
$ npm install vue

2.3 直接下载和引入

在这里插入图片描述

​

<script src='../../demo/vue.js'> 
<script>

2.4 命令行工具 (CLI)

Vue 提供了一个官方的 CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验，以及生产环境可用的构建版本。

更多理解查看官网，地址：cn.vuejs.org/v2/guide/in…

二、 MVVM模式

​ MVVM模式本质来说是MVC( Model-View-Controller)模式发展而来的，想要了解MVVM模式最好先了解一下什么是MVC模式。

1. MVC模式

​ mvc一般指MVC框架。经典MVC模式中，M是指业务模型，V是指用户界面，C则是控制器，使用MVC的目的是将M和V的实现代码分离，从而使同一个程序可以使用不同的表现形式。

​ M即model模型是指模型表示业务规则，也就是数据层。

​ V即View视图是指用户看到并与之交互的界面。

​ C即controller控制器是指控制器接受用户的输入并调用模型和视图去完成用户的需求，控制器本身不输出任何东西和做任何处理。它只是接收请求并决定调用哪个模型构件去处理请求，然后再确定用哪个视图来显示返回的数据。

=在这里插入图片描述

​ 举个例子：一个客人到饭店吃饭，指着菜单上的图片（view视图）点菜，服务员（controller控制器）接受到请求后知道了客人要点的菜，将请求通知后厨（model模型），后厨知道了需求并处理了客人需要菜，传给服务员，服务员收到菜后端到了桌上。（解释的有点牵强，请见谅 如需详细了解 还请查看文档）

在这里插入图片描述

2. MVVM模式

​ MVVM没有MVC模式的控制器，也没有MVP模式的presenter，有的是一个绑定器。在视图模型中，绑定器在视图和数据绑定器之间进行通信。

在这里插入图片描述

  • View层：视图层。用户看到并与之交互的界面

  • Model层：数据层 。存放数据

  • VueModel层：视图模型层。也就是View层和Model层的桥梁，一方面它实现了Data Binding，也就是数据绑定，将Model的改变实时的反应到View中；另一方面它实现了DOM Listener，也就是DOM监听，当DOM发生一些事件(点击、滚动、touch等)时，可以监听到，并在需要的情况下改变对应的Data。

    刚刚逛帖子刷到一个对MVVM理解不错的贴子，如果还不理解的朋友可以看看。www.cnblogs.com/wzfwaf/p/10…

三、Vue的生命周期 （理解）

生命周期是指一个事物从诞生到消亡的一个过程，比如人从诞生到死亡就是一个生命周期。Vue从挂载到销毁也是一个生命周期，期间的每一个步骤都是一个生命周期钩子。

Vue的生命周期 前期只需稍微理解，因为随着自己上手的项目越来越多，对生命周期的理解也会越来越深刻。

生命周期钩子描述
beforeCreate（创建前）在实例初始化之后，数据观测和事件配置之前被调用，此时组件的选项对象还未创建，el 和 data 并未初始化，因此无法访问methods， data， computed等上的方法和数据。
created（创建后）vue实例的数据对象data有了，el为undefined，还未初始化。
beforeMount（载入前）在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。
mounted（挂载后）在mounted阶段，vue实例挂载完成，data.message成功渲染。（在整个实例中只执行一次）
beforeUpdate（更新前）在数据更新之前被调用，发生在虚拟DOM重新渲染和打补丁之前，可以在该钩子中进一步地更改状态，不会触发附加地重渲染过程。
updated（更新后）在由于数据更改导致地虚拟DOM重新渲染和打补丁只会调用，调用时，组件DOM已经更新。
beforeDestroy（销毁前）在实例销毁之前调用，实例仍然完全可用。
destroyed（销毁后）开始拆卸组件和监听器，生命周期终结。

如图：（转自juejin.cn/post/691123…

img

avatar
文章
阅读
粉丝