vue

1202字约4分钟

2025-11-21

Vue项目的创建

// 安装
npm install -g @vue/cli

// 命令行创建
npm create vue@latest

// 图形化界面创建
vue ui

Vue项目目录结构

环境

导入Axios

npm install axios

import axios from 'axios'

导入Element

npm install element-plus --save

main.ts

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

Vue代码框架

// html
<template>  </template>

// js
<script>
// 导入 / 导出
import HelloWorld from '@/components/HelloWorld.vue'

export default {}
</script>

// css
<style>  </style>

Vue指令

通过 v-blnd 和 v-model 绑定的变量，必须在数据模型中声明

指令	作用	特点
`v-if`	初始条件判断	作为条件链的起点，必须单独使用
`v-else-if`	中间条件判断（可选，可多个）	必须跟在 `v-if` 或 `v-else-if` 后面
`v-else`	兜底条件（可选，最多一个）	必须跟在 `v-if` 或 `v-else-if` 后面

<head>
    // 需要引入vue.js文件
    <script src="js/vue.min.js"></script>
</head>
<body>
    <div class="di">
<!-- v-model -->
        // 该标签与 url 绑定
        // 修改输入框中的值，url 中的内容也会跟着改变，因为双向数据绑定
        // url: "https://www.bing.com"
        <input type="text" v-model="url">
        {{message}}
        <br><hr><br>

<!-- v-bind -->
        <a v-bind:href="url">链接1</a>
        <!-- v-bind 简写 -->
        <a :href="url">链接2</a>
        <br><hr><br>

<!-- v-on -->
        <input type="button" value="按钮1" v-on:click="handle()">
        <!-- v-on简写 -->
        <input type="button" value="按钮2" @click="handle()">
        <br><hr><br>
        
        <input type="text" v-model="age">
<!-- v-if -->
        <span v-if="age <= 35">年轻人</span>
        <span v-else-if="age > 35 && age <= 60">中年人</span>
        <span v-else="age > 60">老年人</span>
        <br><hr><br>
        
<!-- v-show -->
        <span v-show="age <= 35">年轻人</span>
        <span v-show="age > 35 && age <= 60">中年人</span>
        <span v-show="age > 60">老年人</span>
        <br><hr><br>

<!-- v-for -->
        <div v-for="addr in addrs"> {{addr}} </div>
        <!-- ()中，第一个值（addr）表示元素，第二个值（inde）表示索引值；名字随意 -->
        <!-- in 后面指定对应的数组 -->
        <div v-for="(addr,inde) in addrs">{{inde}} : {{addr}} </div>

    </div>
</body>
<script>
    new Vue({
        // 指定标签，让vue在其标签中生效
        el: ".di",
        data: {
            message: "hello, vue",
            url: "https://www.bing.com",
            age: "输入年龄",
            addrs: ["北", "上", "广", "深"]
        },
        methods: {
            handle:function() {
                alert("我被点击了");
            }
        }
    })
</script>

Vue生命周期

<head>
    <title>Vue 生命周期示例</title>
    <script src="js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <p>{{ message }}</p>
        <button @click="updateMessage">修改数据</button>
        <button @click="destroyInstance">销毁实例</button>
    </div>

    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                message: '初始消息'
            },
            methods: {
                updateMessage() {
                    // 修改数据，触发更新阶段钩子
                    this.message = '数据已更新：' + new Date().toLocaleTimeString();
                },
                destroyInstance() {
                    // 销毁实例，触发销毁阶段钩子
                    this.$destroy();
                }
            },
            // 创建阶段
            beforeCreate() {
                console.log('1. beforeCreate：实例刚创建，data和methods未初始化');
                console.log('当前message值：', this.message); // undefined（无法访问）
            },
            created() {
                console.log('2. created：实例创建完成，data和methods已初始化');
                console.log('当前message值：', this.message); // 可以访问数据
                // 常用：在这里发起Ajax请求
            },
            // 挂载阶段
            beforeMount() {
                console.log('3. beforeMount：模板编译完成，未挂载到DOM');
                console.log('页面中p标签内容：', document.querySelector('p').innerText); // {{ message }}（未替换）
            },
            mounted() {
                console.log('4. mounted：模板已挂载到DOM，页面可用');
                console.log('页面中p标签内容：', document.querySelector('p').innerText); // 初始消息（已渲染）
                // 常用：在这里操作DOM或初始化插件
            },
            // 更新阶段
            beforeUpdate() {
                console.log('5. beforeUpdate：data变化后，DOM更新前');
                console.log('更新前的p标签内容：', document.querySelector('p').innerText);
            },
            updated() {
                console.log('6. updated：data变化后，DOM已更新');
                console.log('更新后的p标签内容：', document.querySelector('p').innerText);
            },
            // 销毁阶段
            beforeDestroy() {
                console.log('7. beforeDestroy：实例销毁前，仍可访问数据和方法');
                console.log('销毁前的message值：', this.message);
                // 常用：在这里清除定时器、解绑事件
            },
            destroyed() {
                console.log('8. destroyed：实例已销毁，数据和方法不可用');
                console.log('销毁后的message值（理论上仍可访问但不建议）：', this.message);
            }
        });
    </script>
</body>

路由

准备（下载vue官方的router工具），或者在创建vue项目时选择Router

npm install vue-router@4

vue目录结构

└─src
    ├─assets
    ├─components
    │  └─icons
    ├─router	// 路由表
    │  └─index.ts
    └─views

router/index.ts路由表

import { createRouter,createWebHistory } from 'vue-router'
// 导入要跳转的页面
import Home from '../components/Home.vue'
import img from '../components/Element/img.vue'
import about from '../components/Element/about.vue'

// 创建路由
const router = createRouter({
    // 路由工作模式
    history:createWebHistory(),
    // 路由表
    routes: [
        {
            path: '/',
            component: Home
        },
        {
            path: '/img',
            component: img
        },
        {
            path: '/about',
            component: about
        }
    ]
})

// 导出router
export default router

main.ts

import { createApp } from 'vue'
import App from './App.vue'
// 导入路由表
import router from './router'

const app = createApp(App)
app.use(router)
app.mount('#app')

app.vue

<script setup lang="ts">
import { RouterView, RouterLink } from 'vue-router';
</script>

<template>
// 因为路由表中已经设置好对应的路径需要进入的页面
// 所以当我们跳转到对应的路径时就会显示对应的页面
// 所以这里a标签也可以实现跳转功能
  <RouterLink to="/">home</RouterLink>
  <RouterLink to="/img">img</RouterLink>
  <RouterLink to="/about">about</RouterLink>
// 占位符：跳转页面显示的位置
  <RouterView></RouterView>
</template>