走进Vue【一】初识Vue-CFANZ编程社区

文章目录

🌟前言
🌟MVVM模式
🌟Vue简介
🌟Vue重要版本发布
🌟Vue特点
🌟快速上手Vue
🌟Hello Vue
🌟Vue实例
🌟写在最后

🌟前言

从历史的潮流来说，人们从之前的:原生JS -> Jquery之类的类库 -> 前端模板引擎 ,他们都有一个共同的特点需要我们去操作DOM元素。但是当我们大量的去操作DOM元素时，就会出现很多性能相关的问题。MVVM 的出现，完美解决了以上三个问题；而我就今天要讲的Vue就是基于MVVM的一个渐进式框架。最初它不过是个人项目，时至今日，已成为全世界三大前端框架之一，github 上拥有 15 万 Star 领先于 React 和 Angular，在国内更是首选。它的设计思想、编码技巧也被众多的框架借鉴、模仿。所以MVVM又是什么？Vue又是什么呢？

🌟MVVM模式

Vue在设计上使用MVVM(Model-View-ViewModel)架构模式。

当应用庞大到一定程度时，MVC架构模式也将变得十分复杂，特别是View的逻辑部分变得难易维护。在这样的背景下，MVVM(Model–View–ViewModel)的架构模型应运而生。前后端分离架构与SPA应用都离不开MVVM的流行,这些都带来了前端技术的快速发展。

通过MVVM的模式拆分为视图(View)与数据(Model)两部分，并将其分离。ViewModel是MVVM模式的核心，是连接View和Model的桥梁。视图(View)与数据(Model)通过ViewModel来通信，ViewModel通常要实现一个observer观察者，当数据发生变化，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定。

走进Vue【一】初识Vue_MVVM

MVVM 与 MVC 最大的区别就是：它实现了 View 和 Model 的自动同步，也就是当 Model
的属性改变时，我们不用再自己手动操作 Dom 元素，来改变 View 的显示，而是改变属性后该属性对应 View
层显示会自动改变（对应Vue数据驱动的思想）

🌟Vue简介

Vue官方网址 Vue是一个轻量级的MVVM前端框架，使用Vue可以让Web开发变得简单，同时也颠覆了传统前端开发模式。

Vue是一个基于JavaScript开发的MVVM库，是一套构建用户界面的渐进式框架。它是以数据驱动和组件化的思想构建的，采用自底向上增量开发的设计。

Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

🌟Vue重要版本发布

2013年，在 Google 工作的尤雨溪，受到 Angular 的启发，开发出了一款轻量框架，最初命名为 Seed 。
2013年12月，更名为 Vue，图标颜色是代表勃勃生机的绿色，版本号是 0.6.0。
2014.01.24，Vue 正式对外发布，版本号是 0.8.0。
2014.02.25，0.9.0 发布，有了自己的代号：Animatrix，此后，重要的版本都会有自己的代号。
2015.06.13，0.12.0，代号Dragon Ball，Laravel 社区（一款流行的 PHP 框架的社区）首次使用 Vue，Vue 在 JS 社区也打响了知名度。
2015.10.26，1.0.0 Evangelion 是 Vue 历史上的第一个里程碑。同年，vue-router、vuex、vue-cli 相继发布，标志着 Vue从一个视图层库发展为一个渐进式框架。
2016.10.01，2.0.0 是第二个重要的里程碑，它吸收了 React 的虚拟 Dom 方案，还支持服务端渲染。自从Vue 2.0 发布之后，Vue 就成了前端领域的热门话题。
2019.02.05，Vue 发布了 2.6.0 ，这是一个承前启后的版本，在它之后，将推出 3.0.0。
2019.12.05，在万众期待中，尤雨溪公布了 Vue 3 源代码，目前 Vue 3 处于 Alpha 版本。

🌟Vue特点

简洁：页面由HTML模板+Json数据+Vue实例组成。
轻量：Vue的生产版本（即min版）源码仅为72.9kb，官网称gzip压缩后只有25.11kb。
快速：Virtual DOM进行高效的DOM更新。
数据驱动：操作数据，DOM的事情Vue会帮你自动处理。
模块友好：结合一些第三方模块构建工具，如CommonJS、RequireJS或者SeaJs，可以轻松实现代码的模块化。
组件化：用可复用、解耦的组件(.vue)来构造页面。
文档友好：中文api文档和官方教程。

🌟快速上手Vue

安装Node环境 Node官网

去官网下载你电脑所对应的版本，一路回车即可。也可以看看我写的这篇博文去使用NVM(NVM-Node管理工具)。

Vue安装

script标签引入 <script src="vue.js"></script>
CDN引入 <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
命令行工具 (CLI)

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

CLI 工具假定用户对 Node.js 和相关构建工具有一定程度的了解。如果你是新手，我们强烈建议先在不用构建工具的情况下通读指南，在熟悉 Vue 本身之后再使用 CLI。

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：

通过 @vue/cli 实现的交互式的项目脚手架。
通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。
一个运行时依赖 (@vue/cli-service)，该依赖：

可升级；
基于 webpack 构建，并带有合理的默认配置；
可以通过项目内的配置文件进行配置；
可以通过插件进行扩展。

一个丰富的官方插件集合，集成了前端生态中最好的工具。
一套完全图形化的创建和管理 Vue.js 项目的用户界面。

Vue CLI 致力于将 Vue
生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需
eject。

Vue CLI安装

Node 版本要求:
Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10 以上)。你可以使用 n，nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。

可以使用下列任一命令安装这个新的包：

npm install -g @vue/cli
# OR
yarn global add @vue/cli

安装之后，你就可以在命令行中访问 vue 命令。你可以通过简单运行 vue，看看是否展示出了一份所有可用命令的帮助信息，来验证它是否安装成功。你还可以用这个命令来检查其版本是否正确：

vue --version
# OR
vue -v

通过Vue CLI创建一个Vue项目

vue create

vue create hello-world

走进Vue【一】初识Vue_vue.js_02

走进Vue【一】初识Vue_MVVM_03

使用图形化界面

你也可以通过 vue ui 命令以图形化界面创建和管理项目：

vue ui

走进Vue【一】初识Vue_Vue_04

🌟Hello Vue

script引入：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
    <script src="./vue.js"></script>
</head>
<body>
<div id="app">
    <h1>{{message}}</h1>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            message:'Hello Vue'
        }
    })
</script>
</body>
</html>

走进Vue【一】初识Vue_vue.js_05

Vue CLI构建工程：

//  mian.js
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

<!-- App.vue -->
<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <h1>{{message}}</h1>
  </div>
</template>

<script>

export default {
  name: 'App',
  data() {
    return {
      message: 'Hello Vue'
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

走进Vue【一】初识Vue_数据_06

🌟Vue实例

每个 Vue 应用都是通过 Vue 构造函数创建一个新的 Vue 实例开始的：

var vm = new Vue({
  // 选项
})

变量vm保存的就是Vue的实例。

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

示例
Vue.js 的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进 DOM。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
    <script src="./vue.js"></script>
</head>
<body>
<!--这是我们的 View-->
<div id="app">
    <h1>{{message}}</h1>
</div>
<script>
// 创建一个 vue实例，连接 View 与 Model
    new Vue({
        el:'#app',
        data:{
            message:'Hello Vue'
        }
    })
</script>
</body>
</html>

当创建一个 Vue 实例时，你可以传入一个选项对象。

参数	类型	描述
el	string\HTMLElement	Vue实例作用的根DOM对象，通过CSS选择器或DOM对象与html模板绑定
data	Object/function	Vue实例数据来源，其值的类型为JSON对象。视图就可以访问到`message`该属性