Vue2学习之侦听器、计算属性、axios、Vue-cli及其目录结构

2023-10-28 04:36:09

Vue2侦听器

侦听器是Vue2中用于监听数据变化的机制，当数据发生变化时，侦听器会自动触发相应的处理函数，从而实现数据的响应式更新。Vue2提供了多种类型的侦听器，包括：

v-on:click：当元素被点击时触发。
v-on:input：当元素的值发生改变时触发。
v-on:change：当元素的值发生改变并失去焦点时触发。
v-on:blur：当元素失去焦点时触发。
v-on:focus：当元素获得焦点时触发。

这些侦听器可以让我们轻松地对用户交互做出响应，并动态更新应用程序的状态。

Vue2计算属性

计算属性是Vue2中用于派生数据的属性，它依赖于其他数据属性，当这些数据属性发生变化时，计算属性的值也会自动更新。计算属性的语法如下：

computed: {
  fullName() {
    return this.firstName + ' ' + this.lastName;
  }
}

在这个例子中，fullName是一个计算属性，它依赖于firstName和lastName这两个数据属性。当firstName或lastName发生变化时，fullName的值也会自动更新。

Vue2 axios

Axios是一个用于发送HTTP请求的库，它可以轻松地与服务器进行通信，获取或更新数据。Vue2中可以使用axios来获取远程数据，并将其显示在应用程序中。

import axios from 'axios';

axios.get('/api/users')
  .then((response) => {
    this.users = response.data;
  })
  .catch((error) => {
    console.error(error);
  });

在这个例子中，我们使用axios发送了一个GET请求到/api/users这个API接口，然后将获取到的数据存储在users这个数据属性中。

Vue-cli及其目录结构

Vue-cli是一个用于快速搭建Vue2应用程序的工具，它可以自动生成项目所需的目录结构和配置文件。Vue-cli的目录结构如下：

├── node_modules
├── package.json
├── src
│   ├── App.vue
│   ├── main.js
│   ├── components
│   │   ├── HelloWorld.vue
│   ├── views
│   │   ├── Home.vue
│   │   ├── About.vue
│   ├── store
│   │   ├── index.js
│   │   ├── mutations.js
│   │   ├── actions.js
│   │   ├── getters.js
│   ├── router
│   │   ├── index.js
│   │   ├── routes.js
├── .gitignore
├── .eslintrc.js
├── package-lock.json
└── README.md