VUE3 学习笔记（一）——Vue3介绍

合集 - Vue3知识(12)

1.VUE3 学习笔记（一）——Vue3介绍2023-02-27

2.VUE3 学习笔记（二）——开发环境安装与部署项目2021-12-083.VUE3 学习笔记（三）——Nodejs版本升级、降级与版本共存2022-05-244.VUE3 学习笔记（四）——目录介绍2022-01-215.VUE3 学习笔记（五）——页面启动逻辑分析2023-02-276.Vue3 学习笔记（六）——Vue应用的使用2023-02-277.Vue3 学习笔记（七）——模板2023-04-188.Vue3 学习笔记（八）——Vue语法2023-04-189.Vue3 学习笔记（九）——Vue组件的使用2023-04-1810.Vue3 学习笔记（十）——生命周期2023-04-2511.Vue3 学习笔记（十一）——倾听器watch2023-05-0312.Vue3 学习笔记（十二）——插件Plugins2023-05-07

收起

一、Vue是什么？

  Vue (渐进式框架；发音为 /vjuː/，类似 view)： 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

  可开发桌面端、移动端、WebGL、命令行终端中的界面，可开发静态或者动态界面。

二、运用的技术

  1、底层技术：HTML、CSS 和 JavaScript；

  2、声明式渲染：Vue 基于标准 HTML 拓展了一套模板语法，使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。

  3、响应方式：监控 JavaScript 状态并在其发生变化时更新 DOM。

三、示例（选项式API风格）：

<div id="app">
  <button @click="count++">
    Count is: {{ count }}
  </button>
</div>

<script>
import { createApp } from 'vue'
    
export default {
  // data() 返回的属性将会成为响应式的状态
  // 并且暴露在 `this` 上
  data() {
    return {
      count: 0
    }
  },

  // methods 是一些用来更改状态与触发更新的函数
  // 它们可以在模板中作为事件监听器绑定
  methods: {
    increment() {
      this.count++
    }
  },

  // 生命周期钩子会在组件生命周期的各个不同阶段被调用
  // 例如这个函数就会在组件挂载完成后被调用
  mounted() {
    console.log(`The initial count is ${this.count}.`)
  }
}
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

 

下一章：VUE3 学习笔记（二）——开发环境安装与部署项目