亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定

Vue3基礎知識詳解：從入門到上手

概述

本文详细介绍了Vue3的基础知识，包括其主要特点、安装与环境配置、基本语法、指令与事件处理、组件化开发、响应式原理以及路由与状态管理。通过学习这些内容，开发者可以更好地利用Vue3进行高效灵活的前端开发。

Vue3简介

Vue3 是一个用于构建用户界面的渐进式 JavaScript 框架。它遵循与 Vue2 类似的设计理念，但引入了许多重要的改进和优化，使开发体验更加流畅和高效。

Vue3的主要特点

  1. 性能提升：Vue3 通过改进的响应式系统、更轻量的组件树渲染等手段，显著提高了应用的性能。
  2. TypeScript 支持：Vue3 的 API 与 TypeScript 更好地集成，提供了更好的类型支持和更友好的开发体验。
  3. Composition API：引入了 Composition API，使得组件逻辑可以更好地组织和重用。
  4. Teleport：新增了 <teleport> 组件，可以将子组件渲染到 DOM 的任何位置。
  5. Fragments：允许在组件模板中使用多根节点。
  6. 自定义渲染器：Vue3 不再依赖于浏览器原生的 DOM API，可以轻松地跨不同平台进行渲染。
  7. 更小的体积：Vue3 的核心库体积更小，有利于快速加载和启动。

安装与环境配置

安装 Vue3 有多种方式，可以通过脚手架工具或直接使用 CDN 方式引入。

  • 使用脚手架安装
npm install -g @vue/cli
vue create my-vue3-app
cd my-vue3-app
npm run serve
  • CDN 方式引入
<!DOCTYPE html>
<html>
<head>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="app">
        {{ message }}
    </div>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    message: 'Hello, Vue3!'
                }
            }
        });
        app.mount('#app');
    </script>
</body>
</html>

响应式系统简介

Vue3 的响应式系统是其核心机制之一，它使用 Proxy 对象来追踪数据的变化。当数据发生变化时，Vue3 会自动触发对应的依赖更新视图。

const data = {
    message: 'Hello Vue3'
};

const observed = new Proxy(data, {
    get(target, key) {
        return target[key];
    },
    set(target, key, value) {
        target[key] = value;
        // 触发视图更新
        console.log(`更新了 ${key}: ${value}`);
    }
});

observed.message = 'Hello Vue3 Updated';

Ref与Computed的使用

  • Ref
import { ref } from 'vue';

const app = Vue.createApp({
    setup() {
        const count = ref(0);
        const increment = () => {
            count.value++;
        };
        return { count, increment };
    }
});
app.mount('#app');
  • Computed
import { computed } from 'vue';

const app = Vue.createApp({
    setup() {
        const count = ref(0);
        const doubleCount = computed(() => count.value * 2);
        return { count, doubleCount };
    }
});
app.mount('#app');
基本语法

数据绑定

Vue3 通过数据绑定可以实现视图与数据的实时同步。数据绑定可以分为插值绑定和指令绑定。

  • 插值绑定
<div id="app">
    {{ message }}
</div>
<script>
    const app = Vue.createApp({
        data() {
            return {
                message: 'Hello, Vue3!'
            }
        }
    });
    app.mount('#app');
</script>
  • 指令绑定
<div id="app">
    <span v-text="message"></span>
</div>
<script>
    const app = Vue.createApp({
        data() {
            return {
                message: 'Hello, Vue3!'
            }
        }
    });
    app.mount('#app');
</script>

模板语法

Vue3 的模板语法提供了丰富的 HTML 语法糖，可以通过简化的语法增强 HTML 属性。

  • v-if 指令
<div id="app">
    <div v-if="seen">Now you see me</div>
    <div v-else>Now you don't</div>
</div>
<script>
    const app = Vue.createApp({
        data() {
            return {
                seen: true
            }
        }
    });
    app.mount('#app');
</script>
  • v-for 指令
<div id="app">
    <ol>
        <li v-for="todo in todos">{{ todo.text }}</li>
    </ol>
</div>
<script>
    const app = Vue.createApp({
        data() {
            return {
                todos: [
                    { text: '学习 Vue3' },
                    { text: '构建应用' },
                    { text: '部署上线' }
                ]
            }
        }
    });
    app.mount('#app');
</script>

计算属性与方法

计算属性与方法都是在模板中用于处理数据的方法，但它们在内部实现和用途上有明显的区别。

  • 计算属性
<div id="app">
    <p>原始数据: {{ message }}</p>
    <p>计算属性结果: {{ reversedMessage }}</p>
</div>
<script>
    const app = Vue.createApp({
        data() {
            return {
                message: 'Hello Vue3'
            }
        },
        computed: {
            reversedMessage() {
                return this.message.split('').reverse().join('');
            }
        }
    });
    app.mount('#app');
</script>
  • 方法
<div id="app">
    <p>原始数据: {{ message }}</p>
    <p>调用方法结果: {{ reverseMessage() }}</p>
</div>
<script>
    const app = Vue.createApp({
        data() {
            return {
                message: 'Hello Vue3'
            }
        },
        methods: {
            reverseMessage() {
                return this.message.split('').reverse().join('');
            }
        }
    });
    app.mount('#app');
</script>
指令与事件处理

Vue3 提供了丰富的内置指令来简化 HTML 操作。

常用指令

  • v-if
<div id="app">
    <div v-if="seen">Now you see me</div>
    <div v-else>Now you don't</div>
</div>
<script>
    const app = Vue.createApp({
        data() {
            return {
                seen: true
            }
        }
    });
    app.mount('#app');
</script>
  • v-for
<div id="app">
    <ol>
        <li v-for="todo in todos">{{ todo.text }}</li>
    </ol>
</div>
<script>
    const app = Vue.createApp({
        data() {
            return {
                todos: [
                    { text: '学习 Vue3' },
                    { text: '构建应用' },
                    { text: '部署上线' }
                ]
            }
        }
    });
    app.mount('#app');
</script>
  • v-bind
<div id="app">
    <img v-bind:class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="imageSrc" />
</div>
<script>
    const app = Vue.createApp({
        data() {
            return {
                imageSrc: 'https://example.com/image.jpg'
            }
        }
    });
    app.mount('#app');
</script>

事件处理

  • v-on
<div id="app">
    <button v-on:click="increment">Count: {{ count }}</button>
</div>
<script>
    const app = Vue.createApp({
        data() {
            return {
                count: 0
            }
        },
        methods: {
            increment() {
                this.count++;
            }
        }
    });
    app.mount('#app');
</script>
组件化开发

Vue3 的组件化开发可以将复杂的应用拆分成更小的组件，提高代码的可维护性。

组件的基本使用

<div id="app">
    <my-component></my-component>
</div>
<script>
    const MyComponent = {
        template: `<div>A custom component</div>`
    };

    const app = Vue.createApp({
        components: {
            'my-component': MyComponent
        }
    });
    app.mount('#app');
</script>

插槽（slot）的使用

<div id="app">
    <my-component>
        <template v-slot:header>
            <h1>Header</h1>
        </template>
        <p>Main content</p>
        <template v-slot:footer>
            <p>Footer</p>
        </template>
    </my-component>
</div>
<script>
    const MyComponent = {
        template: `
            <div class="container">
                <slot name="header"></slot>
                <slot></slot>
                <slot name="footer"></slot>
            </div>
        `
    };

    const app = Vue.createApp({
        components: {
            'my-component': MyComponent
        }
    });
    app.mount('#app');
</script>

组件的通信

  • 父组件传给子组件
<div id="app">
    <child-component message="Hello from parent"></child-component>
</div>
<script>
    const ChildComponent = {
        props: ['message'],
        template: `<div>{{ message }}</div>`
    };

    const app = Vue.createApp({
        components: {
            'child-component': ChildComponent
        }
    });
    app.mount('#app');
</script>
  • 子组件传给父组件
<div id="app">
    <child-component @child-event="handleChildEvent"></child-component>
</div>
<script>
    const ChildComponent = {
        props: ['message'],
        template: `
            <button @click="sendMessage">{{ message }}</button>
        `,
        methods: {
            sendMessage() {
                this.$emit('child-event', 'Message from child');
            }
        }
    };

    const app = Vue.createApp({
        components: {
            'child-component': ChildComponent
        },
        methods: {
            handleChildEvent(message) {
                console.log(message);
            }
        }
    });
    app.mount('#app');
</script>
路由与状态管理

Vue Router基础

Vue Router 是 Vue3 官方提供的官方路由库，用于管理单页应用的导航。

  • 安装
npm install vue-router@next
  • 基本使用
import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';

const routes = [
    { path: '/', component: Home },
    { path: '/about', component: About }
];

const router = createRouter({
    history: createWebHistory(),
    routes
});

const app = Vue.createApp({
    router
});
app.mount('#app');

Vuex介绍与基本使用

Vuex 是一个用于 Vue3 应用的状态管理库，它可以帮助我们更好地管理应用的状态。

  • 安装
npm install vuex@next
  • 基本使用
import { createStore } from 'vuex';

const store = createStore({
    state: {
        count: 0
    },
    mutations: {
        increment(state) {
            state.count++;
        }
    },
    actions: {
        increment({ commit }) {
            commit('increment');
        }
    },
    getters: {
        doubleCount: state => state.count * 2
    }
});

const app = Vue.createApp({
    store
});
app.mount('#app');
总结

Vue3 作为 Vue 的最新版本，带来了许多新的特性和优化，使得开发变得更加高效和灵活。从基本的语法到复杂的组件化开发，再到路由管理和状态管理，Vue3 都提供了完善的支持和解决方案。通过掌握这些基础知识，开发者可以更好地利用 Vue3 进行实际项目的开发。

點擊查看更多內容
為 TA 點贊

若覺得本文不錯，就分享一下吧！

評論

作者其他優質文章

正在加載中
  • 推薦
  • 評論
  • 收藏
  • 共同學習，寫下你的評論
感謝您的支持，我會繼續努力的～
掃碼打賞，你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃，即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消