Vue概述

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式 JavaScript 框架

全称是 Vue. js 或者 Vuejs
它基于标准 HTML、 CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型

渐进式框架

表示我们可以在项目中一点点来引入和使用 Vue，而不一定需要全部使用 Vue 来开发整个项目
一般是直接使用 Vue 构建项目

在前端的地位

Google 指数:

百度指数:

npm 下载量:

GitHub 数据:

使用

Vue 的本质，可以简单的想象成是一个 JavaScript 的库：

在项目中可以引入并且使用它即可

引入方式:

方式一：在页面中通过 CDN 的方式来引入
方式二：下载 Vue 的 JavaScript 文件，并且自己手动引入
方式三：通过 npm 包管理工具安装使用它
方式四：直接通过 Vue CLI 创建项目，并且使用它

方式一

// 引入后就会有一个全局对象：Vue
<script src="https://unpkg.com/vue@next"></script>

案例:

<div id="app"></div>

<!-- CDN地址 -->
<script src="https://unpkg.com/vue@next"></script>

<script>
  
// 使用Vue，调用createApp方法，传入参数(一个对象)
const app = Vue.createApp({
  template: `<h2>Hello World</h2><span>哈哈哈</span>`
})
// 挂载
app.mount("#app")

</script>

方式二

下载 Vue 的源码，可以直接打开 CDN 的链接：

打开链接，复制其中所有的代码
创建一个新的文件，比如 vue. js，将代码复制到其中

通过 script 标签，引入刚才的文件

<script src="../js/vue.js"></script>

案例:

<script src="./js/vue.js"></script>
<script>
  
  // 1.创建app
  const app = Vue.createApp({
    template: `<h1>Hello Vue</h1>`
  })

  // 2.挂载app
  app.mount("#app")

</script>

声明式和命令式

命令式编程关注的是 “how to do”自己完成整个 how 的过程

声明式编程关注的是 “what to do”，由框架 (机器) 完成 “how”的过程

原生 JS

每个操作，都需要通过 JavaScript 编写一条代码，来给浏览器一个指令
就是命令式编程

Vue 中

在 createApp 传入的对象中声明需要的内容，模板 template、数据 data、方法 methods
是声明式编程
Vue、React、Angular、小程序的编程模式，我们称之为声明式编程

MVVM 模型

MVC 是 Model – View –Controller 的简称，是在前期被使用非常框架的架构模式，比如 iOS、前端
MVVM 是 Model-View-ViewModel 的简称，是目前非常流行的架构模式

Vue 是一个 MVVM 的框架

官方其实有说明，Vue 虽然并没有完全遵守 MVVM 的模型，但是整个设计是受到它的启发的

Vue options

data

传入一个函数，并且该函数需要返回一个对象：

Vue2. x 的时候，也可以传入一个对象（虽然官方推荐是一个函数）
Vue3. x 的时候，必须传入一个函数，否则就会直接在浏览器中报错

data 中返回的对象会被 Vue 的响应式系统劫持，之后对该对象的修改或者访问都会在劫持中被处理：

在 template 或者 app 中通过访问 counter，可以从对象中获取到数据
修改 counter 的值时，app 中的也会发生改变

// 1.创建app
const app = Vue.createApp({
    // data 是一个函数
    data:function() {
        // TODO 一些处理
        return {
          //.....
          // 返回的是一个对象
        }
      },
    //------简写如下:--------
    data() {
        return {
          //.....
          // 返回的是一个对象
        }
      },
    //========================
    methods: {
        liClick:function(index) {
          console.log("liClick:", index)
          this.currentIndex = index
        }
      }
    //------简写如下:--------  
    methods: {
        liClick(index) {
          console.log("liClick:", index)
          this.currentIndex = index
        }
      }
}) 
// 2.挂载app
app.mount("#app")

methods

其实是一个对象，通常我们会在这个对象中定义很多的方法：

这些方法可以被绑定到模板中
在该方法中，我们可以使用 this 关键字来直接访问到 data 中返回的对象的属性

为什么不能使用箭头函数?
官方解释如下: