当前位置：首页 > article >正文

Vue.js 学习笔记

article 2025/3/3 10:22:35

文章目录

- 前言
- 一、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>