重学Vue3 - 邂逅vue - 代码天地

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第3天，点击查看活动详情

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

Vue基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型

我们可以在项目中一点点来引入和使用Vue，而不一定需要全部使用Vue来开发整个项目

初体验

Vue的本质就是一个JavaScript的库，在项目中可以引入并且使用它

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 引入后 会全局挂载 一个 Vue 对象 -->
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
  <!--
		vue会将渲染后的内容挂载到挂载点下
		而不会挂载到别的元素下
		挂载点下的元素可以通过vue来进行开发
		而其它元素使用原生方式进行开发或使用React来进行开发
		这就是vue渐进式的一种体现形式
	-->
  <header>header</header>
  <!-- 挂载点 -->
  <div id="app"></div>
  <footer>footer</footer>

  <script>
    // 通过createApp方法创建对应App实例
    // createApp方法的参数为配置对象
    const app = Vue.createApp({
      // template是我们所需要渲染的界面模板
      // 值一般为html格式字符串
      template: `<div>Hello Vue</div>`
    })

    // 通过mount方法将vue解析后的结果挂载到挂载点元素中
    // 参数为 css selector 字符串
    // mount方法会通过document.querySelector的方式查找到对应的挂载点
    app.mount('#app')
  </script>
</body>
</html>
复制代码

template的抽取

template的查找规则如下:

在createApp方法传入的配置对象中，如果template属性传入了不是以#开头的字符串,

则自动将template属性中的值作为字符串形似的模板进行解析
如果对应template属性的值是以#开头，会以template属性值作为元素的id值

并将对应元素中的内容作为模板进行解析
如果没有template属性，则自动将挂载点中的内容作为模板去进行解析

无论使用哪种方式解析模板，最后渲染出的内容一定会被挂载到挂载点中

并替换挂载点中原本存在的原本内容

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

<template id="template">
  <button @click="() => changeCount(-1)">decrement</button>
  <h1>{{ count }}</h1>
  <button @click="() => changeCount(1)">increment</button>
</template>

<script>
  Vue.createApp({
    template: '#template',
    data() {
      return {
        count: 0
      }
    },
    methods: {
      changeCount(step) {
        this.count += step
      }
    },
  }).mount('#app')
复制代码

<div id="app">
  <button @click="() => changeCount(-1)">decrement</button>
  <h1>{{ count }}</h1>
  <button @click="() => changeCount(1)">increment</button>
</div>

<script>
  Vue.createApp({
    data() {
      return {
        count: 0
      }
    },
    methods: {
      changeCount(step) {
        this.count += step
      }
    },
  }).mount('#app')
复制代码

命令式编程 vs 声明式编程

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

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

命令式编程

我们要分析我们完成对应的功能需要有哪些步骤
我们将一步步的步骤转换为 JS代码，给浏览器一个个的指令

声明式编程

我们将所展示的模板和需要使用的数据和方法按照特定的方式提前进行声明(定义)

之后至于如何渲染到界面上，或者说数据发生改变后，界面如何发生更新，都交给框架来帮助我们完成

也就是说使用声明式编程后，我们只需要关注业务逻辑即可，通过对应的框架，帮助我们从繁琐的DOM操作中释放出来

MVVM

MVC和MVVM都是一种软件的体系结构

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

通常情况下，我们也经常称Vue是一个MVVM的框架

Vue 在整个过程中充当的就是ViewModel

将Model中的数据自动绑定到 View 这个过程被称之为 Data Bindings
当View触发某些事件的时候，会自动去执行Model中绑定好的对应方法，这个过程被称之为DOM Listeners