vue_start

vue基础入门

如果你会vue3那么你可以直接去看下一章了-.-
本篇完全为新人写 不一定能让新人完全熟悉vue3但也能让新人能参与开发了(

---

以下是一个vue3文件(Eg.vue)的基本结构:

<script setup>
// 组合式api入口, 任何在<script setup>声明的顶层的绑定(包括变量,函数声明,以及import导入的内容)都能在模板中直接使用
// 可以给该标签加上[type="ts"]属性启用typescript语言 [!!!]注意: 该项目目前未加入typescript支持
// 这家伙其实就是vue2中的methods.setup() awa
const me = 'LateDream';
function hello(target) {
  return `Hello, ${target}! `;
}
</script>

<template>
<!-- 模板内容, 会被vue.js挂载到页面(或通过路由预览标签渲染) -->
  <p>{{hello(me)}}</p>
  <p>Welcome to the world of vue!</p>
</template>

<style>
/*
  全局样式, 将影响到页面内所有元素
  可以给该标签加上[type="scss"]属性启用scss语言
 */
</style>

<style scoped>
/*
  范围样式, 只会影响出现在模板内的元素
  和全局样式同样支持scss
 */
p {
  font-size: 125%;
}
</style>

<script>
// 用于暴露vue组件选项给vue.js
// 和<script setup>同样支持typescript
export default {
  name: 'Eg'
}
</script>

你应该看明白了吧awa
什么?你太想进步了?那就去看官方文档awa

那么我们进入实战吧awa