Vue.js基础知识总结

最新推荐文章于 2024-08-28 20:00:56 发布

l7839

最新推荐文章于 2024-08-28 20:00:56 发布

阅读量1.5k

点赞数 47

文章标签： javascript vue.js

本文链接：https://blog.csdn.net/l7839/article/details/135130111

版权

1.Vue.js概念

Vue.js 是一款流行的 JavaScript 前端框架，它采用了 MVVM 模式，以数据驱动视图，提供了一些工具和库来简化开发流程。

2.Vue.js模板语法

在 Vue.js 的模板中，可以使用双大括号 {{}} 来进行插值，将数据动态地显示在页面上。例如：

<div>
  {{ message }}
</div>

上述代码中，message 是一个 Vue 实例中定义的数据属性，它会被动态地渲染到 <div> 元素中。

除了插值，Vue.js 还提供了一些指令，用于动态地绑定属性和控制元素的行为。

2.1 v-bind 指令

常用的指令之一是 v-bind，它可以将一个表达式的值动态地绑定到 HTML 元素的属性上。例如：

<img v-bind:src="imageSrc">

imageSrc 是一个 Vue 实例中定义的数据属性，它会被动态地绑定到 <img> 元素的 src 属性上。

2.2 v-if 指令

v-if 指令用于根据表达式的值来条件性地渲染元素。例如，可以使用 v-if 来判断一个元素是否需要显示：

<div v-if="isShow">
  显示内容
</div>

只有当 isShow 的值为真时，<div> 元素才会被渲染到页面上。

2.3 v-for 指令

v-for 指令用于循环渲染一组元素或者一个对象。例如，可以使用 v-for 渲染一个数组

<ul>
  <li v-for="item in itemList" :key="item.id">
    {{ item.name }}
  </li>
</ul>

itemList 是一个数组，v-for 会根据数组的长度循环渲染多个 <li> 元素，并使用 item 变量表示当前循环的元素。

2.4 v-on 指令

v-on 指令用于监听 DOM 事件并触发 Vue 实例中定义的方法。例如，可以使用 v-on 监听一个按钮的点击事件：

<button v-on:click="handleClick">
  点击按钮
</button>

当按钮被点击时，handleClick 方法会被触发。除了上述常用的指令，Vue.js 还提供了很多其他的指令，如 v-bind、v-model、v-show 和 v-text 等。这些指令可以让我们更加方便地处理各种场景下的 DOM 操作和数据绑定。

3.组件

Vue.js 采用了组件化开发的方式，将复杂的用户界面拆分成多个独立的组件，每个组件都有自己的数据、视图和行为。组件化开发可以提高代码的可维护性和复用性，使开发过程更加模块化和灵活。

在 Vue.js 中定义一个组件可以使用 Vue.component 方法，该方法接受两个参数：组件的名称和一个包含组件选项的对象。组件选项包括组件的模板、数据、方法等。

下面是一个简单的示例：

// 定义一个名为 'my-component' 的组件
Vue.component('my-component', {
  template: '<div>{{ message }}</div>',
  data() {
    return {
      message: 'Hello, Vue!'
    };
  }
});

我们使用 Vue.component 方法定义了一个名为 'my-component' 的组件，组件的模板是 <div>{{ message }}</div>，数据中有一个属性 message，初始值为 'Hello, Vue!'。

然后，在使用该组件的地方，可以直接在模板中使用组件标签：

<div id="app">
  <my-component></my-component>
</div>

最后，创建一个 Vue 实例，并将其挂载到指定的 DOM 元素上：

new Vue({
  el: '#app'
});

上述代码将会渲染一个包含文本 'Hello, Vue!' 的 <div> 元素。在组件中，还可以通过 props 属性来接受父组件传递的数据，使用自定义事件来实现子组件向父组件通信等。

4.计算属性和监听器

计算属性和监听器 Vue.js 提供了计算属性和监听器来处理复杂的业务逻辑和响应式数据更新。
计算属性是基于它们的依赖进行缓存的。只有在它的依赖发生改变时它们才会重新求值。这样可以避免不必要的计算和提高性能。

下面是一个计算属性的示例：
```
new Vue({
  el: '#app',
  data: {
    radius: 5
  },
  computed: {
    area: function () {
      return Math.PI * this.radius * this.radius;
    }
  }
});
```
我们定义了一个名为 area 的计算属性，它依赖于 radius 数据。当 radius 数据发生变化时，area 计算属性会重新计算并返回新的值。在模板中可以直接使用 area 属性来展示计算结果。
监听器，用来响应数据变化并执行相应的操作。我们可以通过 watch 选项监听数据的变化，并在数据变化时执行自定义的逻辑。下面是一个监听器的示例：

new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  },
  watch: {
    message: function (newValue, oldValue) {
      console.log('消息发生变化：' + newValue);
    }
  }
});

我们通过 watch 选项监听 message 数据的变化，在数据变化时会执行相应的函数逻辑。

5.生命周期

Vue.js 组件具有一系列的生命周期钩子函数，这些钩子函数允许我们在组件不同阶段执行相应的逻辑操作。以下是一些常用的生命周期钩子函数：

beforeCreate: 在实例初始化之后，数据观测和事件配置之前被调用。
created: 实例创建完成后被立即调用。在这一阶段，实例已完成以下配置：数据观测(data observer)、属性和方法的运算、watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
beforeMount: 在挂载开始之前被调用：相关的 render 函数首次被调用。
mounted: el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。
beforeUpdate: 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
updated: 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
beforeDestroy: 在实例销毁之前调用。实例仍然完全可用。
destroyed: 在实例销毁之后调用。该钩子被调用后，Vue 实例指示的所有东西都会解绑，所有事件监听器会被移除，所有子实例也会被销毁。

6.路由和状态管理

Vue.js 提供了 Vue Router 和 Vuex 来处理路由和状态管理。

6.1 Vue Router

Vue Router 是 Vue.js 官方的路由管理器。它允许我们通过定义路由、路由映射和导航来构建单页应用程序。使用 Vue Router，我们可以将不同的组件映射到不同的 URL，并实现路由间的跳转、参数传递等功能。

以下是一个简单的 Vue Router 的示例：

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

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

const router = new VueRouter({
  routes
});

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

我们首先导入 Vue Router 并使用 Vue.use() 方法将其注册为 Vue 插件。然后，我们定义了一些路由规则，并创建了一个 VueRouter 实例。最后，我们将该实例注入到根 Vue 实例中，并在模板中使用 <router-view> 组件来渲染匹配的组件。

6.2 Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它集中管理应用程序的状态，并提供了一些工具和 API 来简化状态的更新和通信。Vuex 的核心概念包括状态(state)、mutations、actions 和 getters。

以下是一个简单的 Vuex 的示例：

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: {
    doubleCount(state) {
      return state.count * 2;
    }
  }
});

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

我们首先导入 Vuex 并使用 Vue.use() 方法将其注册为 Vue 插件。然后，我们创建了一个 Vuex 的 store 实例，并定义了状态(state)、mutations、actions 和 getters。状态可以通过 this.$store.state 访问，mutations 可以用来同步地更新状态，actions 可以用来异步地更新状态，getters 可以用来派生计算状态。

7.过渡和动画

Vue.js 提供了过渡和动画效果的支持，可以让页面在状态改变时产生平滑的过渡效果或动画效果。

7.1 过渡

Vue.js 的过渡效果可以在元素插入、更新或删除时自动触发，通过 <transition> 组件来实现。你可以在元素上添加 v-if 或 v-show 指令来控制元素的显示或隐藏，并使用 <transition> 组件包裹该元素，然后在 <transition> 组件中定义过渡效果。

以下是一个简单的过渡效果的示例：

<template>
  <div>
    <button @click="show = !show">Toggle</button>
    <transition name="fade">
      <p v-if="show">Hello, Vue!</p>
    </transition>
  </div>
</template>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

<script>
export default {
  data() {
    return {
      show: false
    };
  }
};
</script>

我们通过点击按钮来切换 show 的值，从而控制 <p> 元素的显示或隐藏。通过在 <transition> 组件中定义 name 属性，并在样式中定义相应的过渡效果，我们可以实现淡入淡出的过渡效果。

7.2 动画

我们可以使用 <transition-group> 组件来实现列表中的动画效果，或者在单个元素上使用 <transition> 组件来实现自定义动画效果。以下是一个简单的动画效果的示例：

<template>
  <div>
    <button @click="addItem">Add Item</button>
    <transition-group name="list" tag="ul">
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </transition-group>
  </div>
</template>

<style>
.list-enter-active, .list-leave-active {
  transition: all 0.5s;
}
.list-enter, .list-leave-to {
  opacity: 0;
  transform: translateY(20px);
}
</style>

<script>
export default {
  data() {
    return {
      items: []
    };
  },
  methods: {
    addItem() {
      this.items.push({ id: Date.now(), name: 'Item' });
    }
  }
};
</script>

我们通过点击按钮来添加新的列表项，通过使用 <transition-group> 组件并设置 name 属性和 tag 属性为相应的标签，我们可以实现列表项的动态添加和删除的动画效果。

除了上述的基本过渡和动画效果，Vue.js 还支持更多的过渡和动画特性，如自定义过渡类名、JavaScript 钩子函数、过渡模式等。我们可以查阅 Vue.js 的官方文档来了解更多详细的用法和示例。此外，我们还可以使用第三方库如 Animate.css 或 TweenMax 来扩展和增强过渡和动画效果。