Vue前端框架自学文档

一、简介

一些基础概念：

1. 单文件组件

使用一种类似 HTML 格式的文件来书写 Vue 组件，也称作单文件组件，也可以理解为，每一个Vue文件就代表了一个组件

2. 选项式 API (Options API)

用选项对象来描述组件逻辑，具体选项有：

• data：描述对外暴露的数据值

• methods：描述对外暴露的方法名

• mounted：描述组件加载时所需要的初始化操作

具体例子如下：

<script>
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>

3. 组合式 API (Composition API)

更像常规脚本的一种状态，需要注意的是：

• 需要用<script setup>来说明在该组件在编译时需要一些处理

• 需要引入ref来声明挂载在this上的变量以供外部使用

• 依然需要引入mounted来执行组件怪在完成后的操作

具体例子如下：

<script setup>
import { ref, onMounted } from 'vue'

// 响应式状态
const count = ref(0)

// 用来修改状态、触发更新的函数
function increment() {
  count.value++
}

// 生命周期钩子
onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
</script>

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

备注:

• 一个快速验证Vue组件的方式：https://jsfiddle.net/yyx990803/2ke1ab0z/

• 一个网页版的Vscode编辑器，可以快速建立Vue项目：https://stackblitz.com/edit/vitejs-vite-ghdnpf?file=index.html&terminal=dev

二、快速上手

1. 创建Vue项目：

Step1: 创建项目

npm init vue@latest

Step2: 安装依赖并且运行项目

cd <your-project-name> 
npm install npm run dev

Step3: 构建生产环境版本

npm run build

2. 通过CDN使用Vue项目：

使用全局构建版本的示例代码：

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">{
  { message }}</div>

<script>
  const { createApp } = Vue
  
  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>

使用ES模块构建版本的示例代码：

<div id="app">{
  { message }}</div>

<script type="module">
  import { createApp } from 'https://unpkg.com/vue@3/dist/vue