个人技术博客——Vue.js的那些事

[222200433魏毓延]

这个作业属于哪个课程	2401_CS_SE_FZU
这个作业要求在哪里	软件工程实践总结&个人技术博客
这个作业的目标	编写软件工程实践总结和个人技术博客
其他参考文献	Vue.js官方文档

目录

• 一、前言
• 二、Vue.js 数据绑定
• 2.1 双向数据绑定
• 2.2 条件渲染
• 2.3 列表渲染
• 三、Vue.js 计算属性与侦听器
• 3.1 计算属性
• 3.2 侦听器
• 四、Vue.js 路由
• 4.1 定义路由
• 4.2 在根实例中使用路由
• 4.3 路由跳转
• 4.4 全局路由守卫
• 五、Vue.js 状态管理 - Vuex
• 5.1 创建 Vuex Store
• 5.2 使用 Vuex 数据
• 六、Vue.js 性能优化
• 6.1 异步组件加载
• 6.2 代码分割
• 6.3 缓存组件
• 七、总结
• 八、参考文档

一、前言

学期开始时，我给自己定的目标是学习python爬虫，实现回家抢票系统的，但由于秉持程序员是一块砖，哪里需要往哪里搬，团队需要实现前端页面，因此更改学习计划，从0开始学习vue框架。

二、Vue.js 数据绑定

2.1 双向数据绑定

Vue.js的核心特性之一是数据绑定，尤其是双向数据绑定。可以使用 v-model 指令实现HTML表单元素的双向绑定

<input v-model="message" />
<p>The message is: {{ message }}</p>

这将实现输入框和message数据属性之间的双向绑定

2.2 条件渲染

使用v-if和v-show来控制元素的显示和隐藏

• v-if：条件渲染，元素只有在条件为true时才会被渲染

  <div v-if="isVisible">This is visible</div>
  

• v-show：条件渲染，元素始终存在于DOM中，但v-show会通过display样式来控制元素是否显示

  <div v-show="isVisible">This is visible</div>
  

2.3 列表渲染

使用v-for指令来渲染数组或对象列表

<ul>
  <li v-for="(item, index) in items" :key="index">{{ item }}</li>
</ul>

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

3.1 计算属性

计算属性是基于它们的依赖进行缓存的，这意味着只有在相关依赖发生变化时，它们才会重新计算

new Vue({
  el: '#app',
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    }
  }
});

3.2 侦听器

侦听器用于观察 Vue 实例上的数据变动，并在数据变化时执行特定的逻辑

new Vue({
  el: '#app',
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  watch: {
    firstName(newValue) {
      console.log(`First name changed to: ${newValue}`);
    }
  }
});

四、Vue.js 路由

4.1 定义路由

import Vue from 'vue';
import Router from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';

Vue.use(Router);

const router = new Router({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
});

4.2 在根实例中使用路由

new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
});

4.3 路由跳转

你可以使用router-link组件来进行路由跳转

<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>

4.4 全局路由守卫

Vue Router提供了路由守卫，可以在路由进入、离开或更新时执行一些逻辑

router.beforeEach((to, from, next) => {
  // 判断是否需要验证
  if (to.meta.requiresAuth && !isAuthenticated()) {
    next('/login');
  } else {
    next();
  }
});

五、Vue.js 状态管理 - Vuex

5.1 创建 Vuex Store

Vuex 的核心概念是store，它是存储所有组件的状态

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment');
      }, 1000);
    }
  },
  getters: {
    count: state => state.count
  }
});

new Vue({
  el: '#app',
  store,
  template: '<App/>',
  components: { App }
});

5.2 使用 Vuex 数据

在组件中使用 Vuex 的state、mutations和actions

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
    <button @click="incrementAsync">Increment Async</button>
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.state.count;
    }
  },
  methods: {
    increment() {
      this.$store.commit('increment');
    },
    incrementAsync() {
      this.$store.dispatch('incrementAsync');
    }
  }
};
</script>

六、Vue.js 性能优化

6.1 异步组件加载

使用异步组件加载可以优化应用的性能，特别是当应用包含大量组件时

const AsyncComponent = () => import('./components/AsyncComponent.vue');

6.2 代码分割

利用Webpack动态导入实现代码分割，从而减少初次加载的包大小

const Home = () => import('./views/Home.vue');
const About = () => import('./views/About.vue');

6.3 缓存组件

通过<keep-alive>包裹需要缓存的组件，避免重复渲染，提高性能

<keep-alive>
  <component :is="currentComponent"></component>
</keep-alive>

七、总结

Vue.js 是一款高效且灵活的框架，提供了许多功能来帮助开发者构建现代化的 web 应用。从简单的双向数据绑定到复杂的状态管理和路由管理，Vue.js 能够满足各种开发需求。掌握 Vue.js 的核心概念，可以帮助开发者高效地开发出结构清晰、易于维护的应用。

八、参考文档

Vue.js官方文档