首頁手記 Vue3入門教程：輕松掌握基礎組件和指令

Vue3入門教程：輕松掌握基礎組件和指令

標簽：

Vue.js

概述

Vue3作为Vue.js的最新版本，显著提升了性能、易用性和开发体验。文章详细介绍了Vue3的主要特性，如更快的渲染速度、更小的体积以及Composition API，并对比了Vue3与Vue2的区别。此外，还涵盖了Vue3的安装和环境搭建、项目初始化、组件创建及使用等基础内容。

Vue3简介

Vue3的主要特性

Vue 3 是 Vue.js 的最新版本，自发布以来，它在性能、易用性和开发体验方面都进行了显著改进。以下是 Vue 3 的一些主要特性：

更快的渲染速度：通过引入了虚拟 DOM 优化、预渲染和缓存等技术，Vue 3 在渲染速度上相比 Vue 2 有了显著的提升。
更小的体积：Vue 3 的核心库体积经过优化，使得加载速度更快，这对于提升前端应用的性能非常关键。
Composition API：引入了 Composition API，允许开发者以函数形式组织和管理组件逻辑，使组件更易于维护和复用。
更好的错误信息：Vue 3 改进了错误信息的提示，使得调试更加简单。
Tree Shaking：Vue 3 通过引入了 Tree Shaking 机制，允许开发者在构建时只打包实际使用到的部分代码，进一步减小了最终的打包体积。

Vue3与Vue2的区别

Vue 3 相比 Vue 2 有以下几个主要区别：

虚拟 DOM 优化：Vue 3 对虚拟 DOM 进行了优化，减少了不必要的节点重渲染和属性更新。
Composition API：引入了 Composition API，这是一种新的声明式 API，允许开发者使用函数组织和管理组件逻辑，使得代码更加模块化和可重用。
更好的 TypeScript 支持：Vue 3 原生支持 TypeScript，使得使用 TypeScript 开发 Vue 应用变得更加简单。
自定义渲染器：Vue 3 使得开发者可以构建自定义渲染器，这种灵活性使得 Vue 可以被用于更多的场景，比如在服务端渲染或构建原生移动应用。
更好的错误报告：Vue 3 在错误报告方面进行了改进，提供更清晰和有用的错误信息，便于开发者调试。

Vue3的安装和环境搭建

安装 Vue 3 的步骤如下：

安装 Node.js：确保系统上安装了 Node.js 和 npm。你可以从 Node.js 官方网站下载并安装最新版本。
创建项目：使用 Vue CLI 创建一个新的 Vue 3 项目，或者手动创建项目目录并安装 Vue 3。

使用 Vue CLI 创建项目：

npm install -g @vue/cli
vue create my-vue3-project
cd my-vue3-project
npm install
npm run serve

手动创建项目目录并安装 Vue 3：

mkdir my-vue3-project
cd my-vue3-project
npm init -y
npm install vue@next

创建第一个Vue3项目

项目初始化

创建一个新的 Vue 3 项目，可以通过 Vue CLI 创建：

npm install -g @vue/cli
vue create my-vue3-project
cd my-vue3-project
npm install
npm run serve

也可以使用脚手架直接创建：

npx @vue/cli create my-vue3-project
cd my-vue3-project
npm run serve

创建组件

组件是 Vue 中的一个重要概念，它可以使代码更模块化。下面是一个简单的 Vue 组件示例：

<template>
  <div class="app">
    <h1>{{ message }}</h1>
    <button @click="changeMessage">Change</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue 3!'
    }
  },
  methods: {
    changeMessage() {
      this.message = 'Hello, again!';
    }
  }
}
</script>

<style scoped>
.app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

使用Vue3的渲染功能

Vue 的渲染功能允许开发者将数据动态地渲染到 DOM 中。以下是一个简单的示例：

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

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ]
    }
  }
}
</script>

Vue3组件基础

组件的基本结构

一个 Vue 组件通常由以下几个部分组成：

模板：定义了组件的结构。
脚本：定义了组件的数据、方法和生命周期钩子。
样式：定义了组件的样式，可以使用内联样式或外部样式文件。

组件的基本结构示例如下：

<template>
  <div class="component">
    <h2>{{ title }}</h2>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Component Title',
      message: 'This is a component.'
    }
  }
}
</script>

<style scoped>
.component {
  font-family: Arial, sans-serif;
  color: #333;
}
</style>

属性传递

在 Vue 中，可以通过 props 向子组件传递数据。以下是一个简单的示例：

父组件：

<template>
  <div>
    <child-component :my-title="parentTitle" :my-message="parentMessage"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  data() {
    return {
      parentTitle: 'Parent Title',
      parentMessage: 'This is a message from the parent component.'
    }
  },
  components: {
    ChildComponent
  }
}
</script>

子组件：

<template>
  <div>
    <h2>{{ title }}</h2>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: {
    myTitle: String,
    myMessage: String
  }
}
</script>

插槽（slot）的使用

插槽（slot）允许你将父组件的内容插入到子组件的特定位置。以下是一个简单的示例：

父组件：

<template>
  <div>
    <child-component>
      <template v-slot:header>
        <h1>This is the header</h1>
      </template>
      <template v-slot:default>
        <p>This is the default slot</p>
      </template>
      <template v-slot:footer>
        <footer>This is the footer</footer>
      </template>
    </child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  }
}
</script>

子组件：

<template>
  <div>
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <slot></slot>
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

<script>
export default {
  // 组件逻辑
}
</script>

Vue3指令详解

v-if和v-show的使用

v-if 和 v-show 都用于控制元素的显示和隐藏，但它们的工作原理有所不同：

v-if：根据条件判断是否渲染元素。如果条件为假，则不会渲染元素。
v-show：根据条件判断是否显示元素。如果条件为假，则元素会被隐藏，但仍然存在于 DOM 中。

示例：

<template>
  <div>
    <p v-if="show">This is shown when show is true.</p>
    <p v-show="show">This is shown when show is true, even if it's hidden.</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true
    }
  }
}
</script>

v-bind和v-model的用法

v-bind 用于动态绑定元素属性，而 v-model 用于实现双向数据绑定。

v-bind 示例：

<template>
  <div>
    <img v-bind:class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="imageSrc" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageSrc: 'https://example.com/image.jpg'
    }
  }
}
</script>

v-model 示例：

<template>
  <div>
    <input v-model="message" />
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  }
}
</script>

指令的自定义

可以自定义 Vue 指令以扩展功能。以下是一个简单的自定义指令示例：

自定义指令：

export default {
  directives: {
    focus: {
      inserted: function(el) {
        el.focus();
      }
    }
  },
  template: `
    <input v-focus />
  `
}

使用自定义指令：

<template>
  <div>
    <input v-focus />
  </div>
</template>

<script>
export default {
  directives: {
    focus: {
      inserted: function(el) {
        el.focus();
      }
    }
  }
}
</script>

Vue3响应式原理

响应式系统的工作机制

Vue 通过代理和依赖收集来实现响应式系统。代理使得数据的变化可以触发视图的更新，依赖收集则追踪依赖哪些数据。

示例代码：

import { reactive } from 'vue';

const state = reactive({
  message: 'Hello, Vue 3!'
});

state.message = 'Hello, again!';

响应式API的使用

Vue 提供了一些 API 来操作响应式对象，比如 ref 和 reactive。

ref 示例：

import { ref } from 'vue';

const message = ref('Hello, Vue 3!');

message.value = 'Hello, again!';

reactive 示例：

import { reactive } from 'vue';

const state = reactive({
  message: 'Hello, Vue 3!'
});

state.message = 'Hello, again!';

深度监听和浅度监听的区别

Vue 中的 reactive 和 ref 默认是浅度监听，如果需要监听对象的属性变化，可以使用 watch 和 watchEffect。

浅度监听示例：

import { reactive, watchEffect } from 'vue';

const state = reactive({
  count: 0,
  nested: {
    innerCount: 0
  }
});

// 浅度监听
state.count = 1;
state.nested.innerCount = 1;

// 使用 watchEffect 进行深度监听
watchEffect(() => {
  console.log('State:', state.count);
});

// 深度监听示例
const deepState = reactive({
  count: 0,
  nested: {
    innerCount: 0
  }
});

// 使用 watchEffect 进行深度监听
watchEffect(() => {
  console.log('Deep state:', deepState.nested.innerCount);
});

deepState.nested.innerCount = 1;

Vue3路由与状态管理

Vue Router的基本使用

Vue Router 是 Vue.js 的官方路由库，用于实现单页面应用的导航功能。

安装 Vue Router：

npm install [email protected]

示例代码：

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
});

export default router;

Vuex的基本概念和用法

Vuex 是一个状态管理库，用于管理全局状态。它遵循 Flux 架构，提供了一个可预测的状态管理方式。

安装 Vuex：

npm install vuex@next

示例代码：

import { createStore } from 'vuex';

export default createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment');
    }
  },
  getters: {
    count: state => state.count
  }
});

状态管理的基本流程

在应用中使用 Vuex 管理状态的基本流程如下：

安装 Vuex：使用 npm 安装 Vuex。
创建 Store：创建一个 Vuex Store 来管理全局状态。
使用 Store：通过 store 对象来访问状态、触发动作和获取状态。

创建 Store 示例代码：

import { createStore } from 'vuex';

export default createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment');
    }
  },
  getters: {
    count: state => state.count
  }
});

在组件中使用 Store 示例代码：


<template>
  <div>
    <p>{{ count }}</p>
    <button @click="incrementCount">Increment</button>
  </div>
</template>

<script>
import { useStore } from 'vuex';
import { computed } from 'vue';

export default {
  setup() {
    const store = useStore();

    const count = computed(() => store.state.count);

    const incrementCount = () => {
      store.dispatch('increment');
    };

    return {
      count,
      incrementCount
    };
  }
}
</script>
``

通过以上步骤，你可以轻松地使用 Vue 3 进行前端开发。掌握了这些基础，你可以进一步深入学习 Vue 的高级用法和最佳实践。

點擊查看更多內容

為 TA 點贊

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

評論

評論

共同學習，寫下你的評論

評論加載中...

展開查看更多評論

作者其他優質文章

正在加載中

呼啦一陣風

手記
篇

粉絲

74

獲贊與收藏

323

關注作者，訂閱最新文章

閱讀免費教程

后端通用面試教程

41個小節 32074 358

網絡編程入門教程

20個小節 13213 249

Pandas 入門教程

25個小節 19596 369

推薦

評論

收藏

共同學習，寫下你的評論



感謝您的支持，我會繼續努力的～

掃碼打賞，你說多少就多少

贊賞金額會直接到老師賬戶

支付方式

打開微信掃一掃，即可進行掃碼打賞哦

今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與放棄機會

點擊
抽獎

慕課手記新用戶專享福利

恭喜你，你的運氣太好了，居然抽中了 100個積分！

恭喜你，抽中了價值元的專欄！

太棒了，直接落到你賬戶里！

積分商城里的羅技鼠標、機械鍵盤、
Kindle 閱讀器、小米平衡車
Apple iPad （10.2英寸）、大額優惠券
在等著你去兌換了噢

作者：

免費贈送

兌換碼：1111222211 復制

優惠券可用于購買實戰課、體系課
無門檻使用

先去看看，有什么好東西馬上兌換我愛學習，選課去


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

熱搜

最近搜索清空

Vue3入門教程：輕松掌握基礎組件和指令

Vue3简介

Vue3的主要特性

Vue3与Vue2的区别

Vue3的安装和环境搭建

创建第一个Vue3项目

项目初始化

创建组件

使用Vue3的渲染功能

Vue3组件基础

组件的基本结构

属性传递

插槽（slot）的使用

Vue3指令详解

v-if和v-show的使用

v-bind和v-model的用法

指令的自定义

Vue3响应式原理

响应式系统的工作机制

响应式API的使用

深度监听和浅度监听的区别

Vue3路由与状态管理

Vue Router的基本使用

Vuex的基本概念和用法

状态管理的基本流程

閱讀免費教程