Vue.js 技术盘点: 组件、状态管理与路由

sdfcr

已于 2024-01-03 16:32:16 修改

阅读量965

点赞数 22

文章标签： vue.js javascript vscode 学习 es6 前端前端框架

于 2024-01-03 15:43:21 首次发布

本文链接：https://blog.csdn.net/m0_74035719/article/details/135362660

版权

一.VUE的基础概念

1.什么是Vue

Vue（通常被称为Vue.js）是一款用于构建用户界面的渐进式JavaScript框架。它专注于实现简单、灵活的视图层，使开发者更容易构建交互性强、可复用的组件

二.Vue基本使用操作

1.Vue实例

Vue 应用的基础是 Vue 实例。创建一个 Vue 实例的步骤如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue Instance</title>
</head>
<body>

<div id="app">
  {{ message }}
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello, Vue!'
    }
  });
</script>

</body>
</html>

在上述代码中，我们创建了一个 Vue 实例，并通过 el 选项指定了其挂载点，然后使用 data 选项定义了一个数据属性 message，最后在模板中使用双花括号插值语法显示数据

2.指令

Vue 提供了一些内置指令，用于在模板中添加动态行为。常见的指令有：

v-bind：将元素属性与 Vue 实例的数据进行绑定。

<img v-bind:src="imageURL" alt="Vue Logo">

v-model：在表单元素上创建双向数据绑定。

<input v-model="message">

v-for：循环渲染列表。

<ul>
  <li v-for="item in items">{{ item }}</li>
</ul>

3.组件

Vue 中的组件是可复用的 Vue 实例，可以拥有自己的模板、数据、方法等。组件使得代码更加模块化，便于维护和复用。以下是关于 Vue 组件的一些基本概念：

1.创建组件

在 Vue 中，可以通过 Vue.component 方法来创建全局组件。例如：

// 定义一个名为 "my-component" 的新组件
Vue.component('my-component', {
  template: '<div>A custom component!</div>'
});

2.使用组件

在模板中使用组件非常简单，只需在模板中引用组件的标签即可：

<my-component></my-component>

3.组件的数据

每个组件实例都可以拥有自己的数据。组件的数据必须是一个函数，因为每个组件实例需要维护独立的状态。例如：

Vue.component('my-component', {
  data() {
    return {
      message: 'Hello from my component!'
    };
  },
  template: '<div>{{ message }}</div>'
});

4.父子组件通信

父子组件之间可以通过 props 和 events 进行通信。父组件通过 props 向子组件传递数据，而子组件通过 events 向父组件发送消息。

<!-- 子组件 -->
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="sendMessage">Send Message to Parent</button>
  </div>
</template>

<script>
export default {
  props: ['parentMessage'],
  data() {
    return {
      message: 'Hello from child component!'
    };
  },
  methods: {
    sendMessage() {
      this.$emit('messageToParent', this.message);
    }
  }
};
</script>

<!-- 父组件 -->
<template>
  <div>
    <p>{{ receivedMessage }}</p>
    <my-component :parentMessage="parentMessage" @messageToParent="handleMessage"></my-component>
  </div>
</template>

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

export default {
  data() {
    return {
      parentMessage: 'Hello from parent component!',
      receivedMessage: ''
    };
  },
  components: {
    'my-component': MyComponent
  },
  methods: {
    handleMessage(message) {
      this.receivedMessage = message;
    }
  }
};
</script>

这是一个简单的父子组件通信的例子，父组件通过 props 将数据传递给子组件，子组件通过 $emit 发送事件给父组件。

三. 生命周期钩子

Vue 组件有一系列的生命周期钩子，允许我们在组件的不同阶段执行自定义逻辑。常见的生命周期钩子有：

beforeCreate：在实例初始化之后，数据观测和事件配置之前调用。
created：在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测，属性和方法的运算，watch/event 事件回调。
mounted：el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。
updated：数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之后。
beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。

四.路由

Vue 路由用于构建单页应用，通过 vue-router 插件实现。安装和基本使用如下：

npm install vue-router

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'

Vue.use(VueRouter);

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

const router = new VueRouter({
  routes
});

new Vue({
  render: h => h(App),
  router
}).$mount('#app');

在上述代码中，我们创建了两个组件 Home 和 About，并定义了路由规则。然后在 main.js 中配置了 VueRouter，将路由挂载到根实例中。

五.vue脚手架项目环境配置

1.安装Vue CLI

如果尚未安装Vue CLI，可以使用以下命令进行安装：

npm install -g @vue/cli

或者使用yarn：

yarn global add @vue/cli

2.创建新项目

在命令行中使用Vue CLI创建新项目：

vue create my-vue-project

在这个命令中，my-vue-project是你的项目名称，你可以根据需要进行修改。

3.选择配置

运行上述命令后，Vue CLI会询问你想要使用的配置。你可以选择默认配置，也可以手动选择特定的配置项，或者选择手动配置以后再根据需要进行修改。

4.等待安装依赖

Vue CLI会自动下载并安装项目的依赖，这可能需要一些时间。

5.进入项目目录

完成安装后，进入新创建的项目目录

cd my-vue-project

6.运行项目

使用以下命令启动开发服务器

npm run serve

或者使用yarn：

yarn serve

该命令会启动开发服务器，并在浏览器中打开你的Vue应用。你可以在代码中进行修改，保存后，应用会自动更新。

六.计算属性和监听属性

在Vue中，计算属性可以依赖于其他属性，并且会在依赖的属性发生变化时自动更新。这是Vue响应式系统的一部分，它会追踪属性的变化并触发相应的更新。

下面是一个示例，演示了计算属性如何监听其他属性的变化

<template>
  <div>
    <p>原始价格: {{ originalPrice }}</p>
    <p>折扣: {{ discount }}</p>
    <p>打折后价格: {{ discountedPrice }}</p>

    <label>输入折扣（0-1之间）:
      <input v-model="discountInput" />
    </label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      originalPrice: 100, // 初始价格
      discountInput: 0.8, // 默认折扣
    };
  },
  computed: {
    // 计算属性，依赖于原始价格和折扣输入
    discount() {
      return this.discountInput * 100; // 将折扣转换为百分比
    },
    discountedPrice() {
      // 计算折扣后的价格
      return this.originalPrice * this.discountInput;
    },
  },
  watch: {
    // 监听discountInput的变化
    discountInput(newValue, oldValue) {
      console.log(`折扣输入发生变化：从 ${oldValue} 到 ${newValue}`);
    },
  },
};
</script>

在上述例子中，discountInput是一个输入框，用户可以通过输入折扣值（0-1之间）来改变折扣。计算属性discount和discountedPrice依赖于discountInput，当discountInput发生变化时，这两个计算属性会自动更新。

此外，还使用了watch选项，通过watch来监听discountInput的变化，可以在变化时执行一些自定义的操作。

总结：计算属性是Vue中一种非常方便的特性，它能够根据相关属性的变化自动计算新的值，而无需手动触发。