vue - 01

Jeremy_ht
187 阅读4分钟

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

1. 前端流行的三大框架？

当前前端最流行的三大框架，莫过于Vue.js、React.js、Angular.js。他们各自都很有特点，Vue.js 应该是目前最火的一个框架，而React.js是现在最流行的一个框架，Angular.js 它入门很容易，但深入后概念很多, 学习中较难理解，并且文档例子非常少, 官方的文档基本只写了api。下面我通过几张招聘截图，让大家大概了解一下现在的前端招聘趋势。

在这里插入图片描述 在这里插入图片描述

2. Vue.js是什么？ 为什么要学Vue.js？

是什么？

  • Vue是一套用于构建用户界面的 渐进式框架，用于开发交互式Web界面。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合，可以很容易地集成到大型项目中。

为什么要写学？

  • 前面说过，Vue目前最流行三大框架中最火的，在GitHub上star数可以看出来，并且现在的前端招聘Vue是必要的一个技能，这些足够让你要好好学习Vue。
  • Vue.js 相比较 Angularjs 和 ReactJS，一直以轻量级，易上手称道。MVVM 的开发模式也使前端从原先的 DOM 操作中解放出来，我们不再需要在维护视图和数据的统一上花大量的时间，只需要关注于 data 的变化，代码变得更加容易维护。 在这里插入图片描述

3. 学习Vue.js前需掌握的知识点？

学习Vue并不需要你具备其他类似于Angular、React，甚至是jQuery的经验，但必须熟悉HTML、CSS、JavaScript。如果还了解下面内容那对你学习Vue将帮助很大：

  • Node.js Node (官网: nodejs.cn/) 是一个让 JavaScript 运行在服务端的开发平台，使用JavaScript也可以开发后台服务。我们使用Vue开发项目就必须要安装node.js。相当于后端Java web项目需要tomcat。

  • NPM npm (官网: www.npmjs.com) 是随同Node.js一起安装的包管理工具，能解决Node.js代码部署上的很多问题，他已经成了 Node.js 包的标准发布平台，用于 Node.js 包的发布、传播、依赖控制。后端web项目有maven管理包依赖。

  • Vue CLI vue-cli (官网: cli.vuejs.org/zh/) 是一个官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速创建 vue 项目。简单的说，就是我们使用vue-cli可以快速构建一个完整的vue项目，直接可以运行的vue本地项目，我们在此基础之上直接开发我们所需要的功能和代码即可。

  • Webpack webpack(官网: https://www.webpackjs.com) 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。 在这里插入图片描述


4. MVVM 和 SPA

MVVM: MVVM是前端视图层的概念，主要关注于视图层分离，也就是说：MVVM把前端的视图层，分为了 三部分 Model, View , VM ViewModel。

  • View层 视图层，在前端开发中，通常就是DOM层，主要的作用是给用户展示各种信息。

  • Model层 数据层，大对数都是前端通过网络请求后端，后端服务器响应返回给我们的数据。

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

在这里插入图片描述

SPA： SPA（single page web application）单页 Web应用，整个应用功能都存在于单个页面中。SPA不会因为用户的操作而进行页面的重新加载或跳转。它利用 JavaScript 动态的变换HTML的内容，从而实现数据的交互。由于避免了页面的重新加载，SPA 可以提供较为流畅的用户体验，但这也造成了首次加载页面时间过长。

这里我们简单了解mvvm和spa即可，随着我们学习的深入，会更深刻的去体会理解他们。


5. 安装Vue.js

  • 下载Vue.js(前期学习推荐)

    下载链接: cn.vuejs.org/v2/guide/in… 在这里插入图片描述

  • 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>
<!-- 生产环境 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

  • NPM: 后面都会使用npm方式引入，他能很好地和 webpack 或 Browserify 模块打包器配合使用，非常方便。npm方式在后面使用时，在详细介绍。

这一节我们简单的了解了Vue，知道如何去使用它，那下面一节将通过一个实例，去讲解Vue实例的结构组成，以及它的生命周期。

avatar
文章
阅读
粉丝