Vue3进阶教程:1.初次了解vue

1.初次了解vue

vue文件目录和各个文件在这里不做介绍

此课程对针对有点vue基础的同学,或者看过我上部分vue的教程

与之前我的Vue教程不同的是,写法和内容有区别

真正的了解Vue3

1.创建vue组件
shell 复制代码
1.npm create vue@latest
2.取名
3.TS要选上
4.其他先不选
5.npm i
...
2.编写App组件
1.删除src文件夹,创建一个新的src空文件夹,并在里面如下:
2.创建文件main.ts
tsx 复制代码
// 导入createApp函数,用于创建Vue应用
import {createApp} from 'vue'

// 导入App组件,作为应用的主组件
import App from './App.vue'

// 创建并挂载应用程序实例
createApp(App).mount('#app')
3.创建App.vue,基本结构:
vue 复制代码
<template>
    <!-- html -->
</template>
<script lang="ts">
// JS或TS
</script>
<style>
/* 样式 */
</style>
4.例程

App.vue

vue 复制代码
<template>
    <div class="app">
        <h1>你好啊</h1>
    </div>
</template>

<script lang="ts">
export default {
    name: "App",  // 组件名
    data() {
        return {};
    },
    methods: {},
};
</script>

<style>
.app {
    background-color: #ddd;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}
</style>

启动项目:

shell 复制代码
npm run dev

打开:localhost:5173


3.一个简单的效果

src下 创建文件夹和文件\components\Preson.vue

Preson.vue:

vue 复制代码
<template>
    <!-- 个人信息展示区域 -->
    <div class="person">
        <!-- 动态显示姓名 -->
        <h2>姓名:{{ name }}</h2>
        <!-- 动态显示年龄 -->
        <h2>年龄:{{ age }}</h2>
        <!-- 修改姓名按钮 -->
        <button @click="changeName">修改名字</button>
        <!-- 修改年龄按钮 -->
        <button @click="changeAge">修改年龄</button>
        <!-- 查看联系方式按钮 -->
        <button @click="showTel">查看联系方式</button>
    </div>
</template>

<script lang="ts">
export default {
    name: "Preson",
    // 初始化组件数据
    data() {
        return {
            name: "张三", // 默认姓名
            age: 18, // 默认年龄
            tel: "13888888888" // 联系方式,敏感信息,需通过按钮点击事件查看
        }
    },
    methods: {
        // 显示联系方式的方法
        showTel() {
            alert(this.tel)
        },
        // 修改姓名的方法
        changeName() {
            this.name = "王五"
        },
        // 修改年龄的方法
        changeAge() {
            this.age +=1
        }
    }
}
</script>

<style scoped>
/* 个人信息区域样式 */
.person {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}
/* 按钮样式 */
button {
    margin: 0 5px;
}
</style>
相关推荐
你的人类朋友1 小时前
【Node&Vue】什么是ECMAScript?
前端·javascript·后端
shix .2 小时前
最近 | 黄淮教务 | 小工具合集
前端·javascript
烛阴3 小时前
解锁动态键:TypeScript 索引签名完全指南
前端·javascript·typescript
秉承初心3 小时前
Node.js 开发 JavaScript SDK 包的完整指南(AI)
开发语言·javascript·node.js
上单带刀不带妹4 小时前
ES6 中的 Proxy 全面讲解
前端·ecmascript·es6·proxy
芜青7 小时前
JavaScript手录18-ajax:异步请求与项目上线部署
开发语言·javascript·ajax
织_网7 小时前
Electron 核心 API 全解析:从基础到实战场景
前端·javascript·electron
2401_837088508 小时前
setup 语法糖核心要点
开发语言·前端·javascript
你也向往长安城吗9 小时前
基于 navmesh 的路径搜索技术剖析 (游戏、三维方向必看!!!)
javascript·游戏·游戏开发
JustHappy9 小时前
「Versakit攻略」🔥Pnpm+Monorepo+Changesets搭建通用组件库项目和发包流程
前端·javascript·vue.js