Vue.js 学习笔记

文章目录

- 前言
- 一、Vue.js 基础概念
- - 1.1 Vue.js 简介
  - 1.2 Vue.js 的特点
  - 1.3 Vue.js 基础示例
- 二、Vue.js 常用指令
- - 2.1 双向数据绑定（`v-model`）
  - 2.2 条件渲染（`v-if` 和 `v-show`）
  - 2.3 列表渲染（`v-for`）
  - 2.4 事件处理（`v-on`）
  - 2.5 表单绑定（`v-model`）
- 三、Vue.js 组件化开发
- - 3.1 组件的概念
  - 3.2 创建组件
  - - 3.2.1 全局注册
    - 3.2.2 局部注册
  - 3.3 组件间通信
  - - 3.3.1 父子组件通信
  - 3.4 组件的生命周期
- 四、Vue.js 计算属性与侦听器
- - 4.1 计算属性
  - 4.2 侦听器
- 五、Vue.js 路由与状态管理
- - 5.1 Vue Router
  - 5.2 Vuex
- 六、总结

前言

在前端开发领域，Vue.js 以其轻量级、易上手和高性能的特点，赢得了众多开发者的青睐。作为一名前端小白，我也踏上了学习 Vue.js 的旅程。本文将分享我的学习笔记，涵盖 Vue.js 的基础概念、常用指令、组件化开发、计算属性与侦听器、路由和状态管理等知识点，并附上代码示例，希望能帮助到同样在学习 Vue.js 的你。

一、Vue.js 基础概念

1.1 Vue.js 简介

Vue.js 是一款用于构建用户界面的渐进式 JavaScript 框架。它采用直观的模板语法，降低了学习成本，并通过响应式数据绑定，实现了数据与视图的自动同步更新。Vue.js 的组件化开发模式，使代码结构更加清晰、可维护性强，非常适合构建大型应用。

1.2 Vue.js 的特点

易学易用：Vue.js 的 API 设计简洁明了，即使是初学者也能快速上手。
响应式数据绑定：通过双向绑定（v-model），数据与视图能够自动同步更新，减少了手动操作 DOM 的繁琐。
组件化开发：将 UI 界面拆分成多个独立的组件，提高了代码的复用性和可维护性。
生态丰富：Vue.js 拥有完善的生态系统，包括 Vue Router、Vuex 等官方维护的配套工具，方便构建单页应用（SPA）。

1.3 Vue.js 基础示例

下面是一个简单的 Vue.js 实例，展示了数据绑定和事件处理的基本用法：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue.js 基础示例</title><script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
</head>
<body><div id="app"><h1>{{ message }}</h1><button @click="changeMessage">点击修改消息</button></div><script>const app = Vue.createApp({data() {return {message: 'Hello, Vue.js!'};},methods: {changeMessage() {this.message = '消息已修改！';}}});app.mount('#app');</script>
</body>
</html>

在上述代码中，我们通过 data 函数定义了组件的数据 message，并通过 methods 定义了点击按钮时触发的方法 changeMessage。在模板中，使用 {{ message }} 实现了数据的插值显示，使用 @click 指令绑定了点击事件。

二、Vue.js 常用指令

2.1 双向数据绑定（`v-model`）

v-model 指令用于实现表单输入和应用状态之间的双向数据绑定。当输入框的值发生变化时，绑定的数据也会自动更新，反之亦然。

<div id="app"><input v-model="message" placeholder="编辑消息"><p>输入的消息是：{{ message }}</p>
</div><script>const app = Vue.createApp({data() {return {message: 'Hello, Vue!'};}});app.mount('#app');
</script>

2.2 条件渲染（`v-if` 和 `v-show`）

v-if 指令用于条件渲染，只有在条件为 true 时，元素才会被渲染到 DOM 中。而 v-show 指令则是通过 CSS 的 display 属性来控制元素的显示和隐藏，元素始终存在于 DOM 中。

<div id="app"><button @click="toggle">切换显示</button><p v-if="isVisible">现在你看到我了</p><p v-show="isVisible">我也能切换显示</p>
</div><script>const app = Vue.createApp({data() {return {isVisible: true};},methods: {toggle() {this.isVisible = !this.isVisible;}}});app.mount('#app');
</script>

2.3 列表渲染（`v-for`）

v-for 指令用于遍历数组或对象，并渲染列表。在使用 v-for 时，建议为每个列表项指定一个唯一的 key 属性，以提高渲染性能。

<div id="app"><ul><li v-for="(item, index) in items" :key="index">{{ item }}</li></ul>
</div><script>const app = Vue.createApp({data() {return {items: ['苹果', '香蕉', '橙子', '葡萄']};}});app.mount('#app');
</script>

2.4 事件处理（`v-on`）

v-on 指令用于监听 DOM 事件，并在事件触发时执行相应的 JavaScript 代码。在 Vue.js 中，事件处理函数可以定义在组件的 methods 中。

<div id="app"><button v-on:click="sayHello">点击我</button><p>你点击了 {{ count }} 次</p>
</div><script>const app = Vue.createApp({data() {return {count: 0};},methods: {sayHello() {this.count++;alert('你好，Vue.js！');}}});app.mount('#app');
</script>

2.5 表单绑定（`v-model`）

v-model 指令用于实现表单输入和应用状态之间的双向绑定。当输入框的值发生变化时，绑定的数据也会自动更新，反之亦然。

<div id="app"><input v-model="message" placeholder="输入消息"><p>你输入的消息是：{{ message }}</p>
</div><script>const app = Vue.createApp({data() {return {message: ''};}});app.mount('#app');
</script>

三、Vue.js 组件化开发

3.1 组件的概念

组件是 Vue.js 最强大的功能之一，它允许我们将 UI 拆分成独立、可复用的部分。通过组件化开发，我们可以将复杂的界面分解为多个简单的组件，提高代码的可维护性和复用性。

3.2 创建组件

3.2.1 全局注册

全局注册的组件可以在整个 Vue 应用中使用。我们可以通过 app.component 方法进行全局注册。

<div id="app"><my-component></my-component>
</div><script>const MyComponent = {template: '<p>这是一个全局注册的组件</p>'};const app = Vue.createApp({});app.component('my-component', MyComponent);app.mount('#app');
</script>

3.2.2 局部注册

局部注册的组件只能在当前组件中使用。我们可以通过 components 选项来局部注册组件。

<div id="app"><child-component></child-component>
</div><script>const ChildComponent = {template: '<p>这是一个局部注册的组件</p>'};const app = Vue.createApp({components: {'child-component': ChildComponent}});app.mount('#app');
</script>

3.3 组件间通信

3.3.1 父子组件通信

父子组件之间的通信可以通过 props 和 emit 实现。父组件可以通过 props 向子组件传递数据，子组件可以通过 emit 向父组件发送事件。

父组件：

<div id="app"><child-component :message="parentMessage" @update-message="updateMessage"></child-component>
</div><script>const ChildComponent = {props: ['message'],template: `<div><p>子组件收到的消息：{{ message }}</p><input v-model="childMessage" @input="sendMessage"></div>`,data() {return {childMessage: ''};},methods: {sendMessage() {this.$emit('update-message', this.childMessage);}}};const app = Vue.createApp({data() {return {parentMessage: '你好，子组件！'};},components: {'child-component': ChildComponent},methods: {updateMessage(newMessage) {this.parentMessage = newMessage;}}});app.mount('#app');
</script>

3.4 组件的生命周期

组件的生命周期是指组件从创建到销毁的整个过程。Vue.js 提供了一系列的生命周期钩子函数，我们可以在这些钩子函数中执行特定的逻辑。

<div id="app"><button @click="toggleComponent">切换组件</button><div v-if="showComponent"><my-component></my-component></div>
</div><script>const MyComponent = {template: '<p>这是一个生命周期示例组件</p>',data() {return {count: 0};},beforeCreate() {console.log('组件创建前');},created() {console.log('组件创建后');},beforeMount() {console.log('组件挂载前');},mounted() {console.log('组件挂载后');},beforeUpdate() {console.log('组件更新前');},updated() {console.log('组件更新后');},beforeUnmount() {console.log('组件卸载前');},unmounted() {console.log('组件卸载后');}};const app = Vue.createApp({data() {return {showComponent: true};},methods: {toggleComponent() {this.showComponent = !this.showComponent;}}});app.mount('#app');
</script>

四、Vue.js 计算属性与侦听器

4.1 计算属性

计算属性是基于其依赖项进行计算的属性。计算属性会根据依赖项的变化自动更新，非常适合用于需要根据数据进行复杂计算的场景。

<div id="app"><p>原消息：{{ message }}</p><p>计算后的消息：{{ computedMessage }}</p><button @click="changeMessage">修改消息</button>
</div><script>const app = Vue.createApp({data() {return {message: 'Hello, Vue.js!'};},computed: {computedMessage() {return this.message.toUpperCase();}},methods: {changeMessage() {this.message = '消息已修改！';}}});app.mount('#app');
</script>

4.2 侦听器

侦听器用于监听数据的变化，并在数据变化时执行特定的逻辑。侦听器可以通过 watch 选项来定义。

<div id="app"><p>输入的消息：{{ message }}</p><input v-model="message" placeholder="输入消息">
</div><script>const app = Vue.createApp({data() {return {message: ''};},watch: {message(newVal, oldVal) {console.log(`消息从 ${oldVal} 变为 ${newVal}`);}}});app.mount('#app');
</script>

五、Vue.js 路由与状态管理

5.1 Vue Router

Vue Router 是 Vue.js 的官方路由库，用于构建单页应用（SPA）。通过 Vue Router，我们可以实现页面的动态跳转和路由管理。

安装 Vue Router：

npm install vue-router

基本用法：

<div id="app"><router-link to="/home">首页</router-link><router-link to="/about">关于</router-link><router-view></router-view>
</div><script>import { createApp } from 'vue';import { createRouter, createWebHistory } from 'vue-router';const Home = { template: '<p>这是首页</p>' };const About = { template: '<p>这是关于页</p>' };const routes = [{ path: '/home', component: Home },{ path: '/about', component: About }];const router = createRouter({history: createWebHistory(),routes});const app = createApp({});app.use(router);app.mount('#app');
</script>

5.2 Vuex

Vuex 是 Vue.js 的官方状态管理库，用于集中管理应用的状态。通过 Vuex，我们可以实现组件之间的状态共享和状态管理。

安装 Vuex：

npm install vuex

基本用法：

<div id="app"><div>{{ count }}</div><button @click="increment">增加</button><button @click="decrement">减少</button>
</div><script>import { createApp } from 'vue';import { createStore } from 'vuex';const store = createStore({state: {count: 0},mutations: {increment(state) {state.count++;},decrement(state) {state.count--;}}});const app = createApp({});app.use(store);app.mount('#app');
</script>