Vue3从零开始：基础语法、数据绑定与事件处理

一、 Vue3 简介

1.1 Vue.js 简史

Vue.js 是由尤雨溪（Evan You）在 2014 年创立的一个渐进式 JavaScript 框架。Vue.js 旨在通过简单易用的 API 和灵活的架构来帮助开发者构建用户界面。

• 2014 年 2 月：Vue.js 1.0 发布，迅速受到开发者社区的关注。
• 2016 年 10 月：Vue.js 2.0 发布，引入了虚拟 DOM 和更高效的渲染机制，使得性能大幅提升。
• 2020 年 9 月：Vue.js 3.0 发布，采用了全新的编译器和更强大的 Composition API，为开发者提供了更灵活和模块化的开发方式。

1.2 Vue2 与 Vue3 的区别

Vue3 在 Vue2 的基础上进行了多方面的改进和优化，主要区别如下：

1. 性能提升：

   • Vue3 采用 Proxy 实现响应式数据，比 Vue2 的 Object.defineProperty​ 性能更高。
   • 更小的体积和更快的启动速度。

2. Composition API：

   • Vue3 引入了 Composition API，使得逻辑复用和代码组织更加灵活，适用于大型项目和复杂的功能开发。
   • 类似于 React 的 Hooks，使得状态和逻辑更加直观和可管理。

3. TypeScript 支持：

   • Vue3 对 TypeScript 提供了原生支持，类型推导更好，使得开发过程更加安全和可靠。

4. 自定义渲染器 API：

   • Vue3 提供了自定义渲染器 API，允许开发者创建适用于非 DOM 环境的渲染器，例如 WebGL、Weex 等。

5. 更好的树形抖动 (Tree Shaking) ：

   • Vue3 的模块设计更加模块化，使得不使用的代码可以被更好地剔除，从而减小打包体积。

二、vite 创建项目

1. 安装 pnpm 进行创建项目：

npm install -g pnpm

2. 输入下面的指令检测是否安装成功：

pnpm -v

3. 使用 npnm 创建项目

pnpm create vite

4. 输入项目名称

项目名称默认是 vite-project​，这里输入 vite-vue3​：

​

5. 选择前端框架：

​

6. 选择开发语言：

​

7. 创建完成后按照步骤运行项目：

​

cd vite-vue3
pnpm install
pnpm run dev

8. 访问 http://localhost:5173/​：

​

‍

三、常用插件安装

1. Vue - Official

​

2. Vue 3 Snippets

​

3. ESLint

​

4. Prettier - Code formatter v​

​

5. JavaScript Debugger

​

6. Path Intellisense

​

‍

四、基础代码解析

main.js ​代码：

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
/**
 * 使用createApp(APP)创建根组件
 * 调用mount方法挂载到id为app的元素上（index.html中的<div id="app"></div>），应用实例必须在调用了.mount()方法后才会渲染出来
 * vue2中使用new Vue()进行创建
 */
createApp(App).mount('#app')

App.vue ​代码：

<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
...
</template>

<style scoped>
...
</style>

• template​：包含了组件要渲染的 HTML 结构、指令以及子组件的引用
• script​：存放程序逻辑代码，使用 Composition API
• style​：通常用于存放 CSS 样式

五、Composition API

官方文档：API 风格

‍

​

5.1 选项式 API (Options API)

使用 data​、methods​ 和 mounted​ 等选项来组织代码逻辑，初学者阅读起来很舒服 。选项所定义的属性都会暴露在函数内部的 this​ 上，它会指向当前的组件实例。

代码示例：

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

5.2 组合式 API (Composition API)

组合式 API 通常会与 <script setup>​ 搭配使用，使用 ref​、watch ​等函数组织代码逻辑，可以将选项式 API 中数据和方法中的代码写在一起。

代码示例：

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

5.3 组合式 API 和选项式 API 对比

特点	组合式 API	选项式 API
逻辑复用	通过组合函数实现，复用性更强	依赖 mixins 和插件，复用性较低
代码组织	灵活，通过setup​函数按功能分块	固定，通过选项块按功能分块
类型支持	对 TypeScript 支持更好	TypeScript 支持有限
学习曲线	较陡，适合有一定基础的开发者	较平缓，适合初学者
可读性	需要适应新语法，可读性逐渐提高	结构清晰，容易阅读

本文中我们选择使用组合式API，当然使用选项式API也可以，因为vue3是向下兼容vue2的。

六、基本语法

前置知识： 这里推荐去官网学习，讲的非常详细：响应式基础，先学习一下 ref​ 即可。

6.1 模板语法

模板语法用于定义 Vue 组件的视图结构，通过插值、指令和属性绑定来实现动态功能。

6.1.1 插值 (Interpolation)

使用 {{ }}​ 语法进行数据插值。

双大括号会将数据解释为纯文本，而不是 HTML。若想插入 HTML，你需要使用 v-html​ 指令：

<p>Using text interpolation: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

<template>
  <div>{{ message }}</div>
  <h2>{{firstName + lastName}}</h2>
  <h2>{{firstName + " " + lastName}}</h2>
  <h2>{{firstName}}{{lastName}}</h2>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const message = ref('Hello, Vue3!');
    const firstName = ref('fisrt');
    const lastName = ref('last');

    return { 
      message ,
      firstName,
      lastName
    };
  }
};
</script>

​

6.1.2 指令 (Directives)

使用内置指令如 v-bind​ 来绑定属性对应的数据。

<template>
  <a v-bind:href="url">点击访问</a>
  <img v-bind:src="imageUrl" alt="">
  <!-- 简写 -->
  <a :href="url">点击访问</a>
  <img :src="imageUrl" alt="">
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const url = ref('https://www.baidu.com');
    const imageUrl = ref('https://i.pinimg.com/originals/d9/d6/3f/d9d63fa09fb226b55cd8ed60db2faf36.jpg');
    return { 
      url,
      imageUrl
    };
  }
};
</script>

6.2 数据绑定 (Data Binding)

Vue3 的组合式 API 提供了 ref​ 和 reactive​ 来定义响应式数据。

开发时遵循：默认都使用 ​ref​​ ，当需要分组时使用 ​reactive​​。

参考：Ref vs. Reactive：使用 Vue3 组合式 API 该如何选择？

6.2.1 单向绑定

单向的数据同步，当 JavaScript ​中相应的变量数据更改时会影响到控件中的内容，控件中内容更改并不会影响 JavaScript ​中相应的变量。

<template>
  <img :src="imageUrl" alt="图片">
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const imageUrl = ref('https://i.pinimg.com/originals/d9/d6/3f/d9d63fa09fb226b55cd8ed60db2faf36.jpg');
    return { imageUrl };
  }
};
</script>

6.2.2 双向绑定

双向绑定使得表单输入框的内容和 JavaScript​ 中相应的变量数据同步。

<template>
  <input v-model="name" placeholder="输入你的名字">
  <p>你好，{{ name }}</p>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const name = ref('');
    return { name };
  }
};
</script>

​

6.3 事件处理 (Event Handling)

使用 v-on​ 指令 (简写为 @​) 来监听 DOM 事件，并在事件触发时执行对应的 JavaScript。

事件处理还有许多修饰符，比如：.stop​、.prevent​、.self​、.capture​、.once​、.passive ​等等。

可以参考：事件修饰符

6.3.1 基础用法

<template>
  <button @click="showAlert">点击我</button>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const showAlert = () => {
      alert('按钮被点击了！');
    };
    // 记得暴露方法
    return { showAlert };
  }
};
</script>

6.3.2 传递参数

<template>
  <button @click="greet('Vue3')">点击我</button>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const greet = (name) => {
      alert(`你好，${name}！`);
    };
    return { greet };
  }
};
</script>

6.4 条件渲染 (Conditional Rendering)

6.4.1 基础用法

单独使用 v-if​，变量为布尔值，为 true ​才渲染 DOM。

v-show ​的变量也是布尔值，为 true ​才显示内容，v-show​ 会在 DOM 渲染中保留该元素；v-show​ 仅切换了该元素上名为 display​ 的 CSS 属性。

v-if vs. v-show

<template>
  <p v-if="isVisible">isVisible为true显示这个</p>
  <p v-show="isVisible">isVisible为true显示这个</p>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const isVisible = ref(true);
    return { isVisible };
  }
};
</script>

6.4.2 v-else-if 和 v-else

v-if​、v-else-if​ 、v-else​联合使用相当于 if​、else if​、else​，但是在条件比较多的时候建议使用计算属性。

<template>
  <p v-if="age<18">未成年</p>
  <p v-else-if="age<=66">中年人</p>
  <p v-else="">老年人</p>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const age = ref(67);
    return { age };
  }
};
</script>

6.5 列表渲染 (List Rendering)

开发中常用的数组有许多数据，需要全部展示或者部分展示，在原生 JS 中需要使用 for 循环遍历依次替换 div ​元素，在 vue 中，使用 v-for ​可以简单遍历生成元素节点。

注意：不要使用对象或数组之类的非基本类型值作为 v-for​ 的 key​。请用字符串或数值类型的值。

6.5.1 基础用法

<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      {{ item.text }}
    </li>
  </ul>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const items = ref([
      { id: 1, text: '苹果' },
      { id: 2, text: '香蕉' },
      { id: 3, text: '橘子' }
    ]);
    return { items };
  }
};
</script>

​

6.5.2 索引值

<template>
  <ul>
    <li v-for="(item, index) in items" :key="item.id">
      {{ index + 1 }} - {{ item.text }}
    </li>
  </ul>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const items = ref([
      { id: 1, text: '苹果' },
      { id: 2, text: '香蕉' },
      { id: 3, text: '橘子' }
    ]);
    return { items };
  }
};
</script>

6.5.3 ​v-for​ 与对象

<template>
	<ul>
    <li v-for="(value, key, index) in myObject">
		  {{ index }}. {{ key }}: {{ value }}
		</li>
  </ul>
</template>

<script>
import { reactive } from "vue";
export default {
  setup() {
    const myObject = reactive({
      title: "How to do lists in Vue",
      author: "Jane Doe",
      publishedAt: "2016-04-10",
    });
    return { myObject };
  },
};
</script>

6.5.4 在 v-for​ 里使用范围值

<template>
	<ul>
    <li v-for="n in 10">
      {{ n }}
	</li>

  </ul>
</template>

<script>
import { reactive } from "vue";
export default {
  setup() {

  },
};
</script>

七、总结

本文介绍了Vue3的基本概念、新特性和使用方法，能够帮助读者快速上手Vue3并进行实际开发。其中我们详细讲解了Vue项目的创建流程和一些基本的语法，希望对大家有所帮助☺️。
‍

‍

‍

‍

‍

---

参考文章：

VSCode 开发 Vue3 建议必备的插件

Vue官网