Vue从入门到精通

最新推荐文章于 2024-05-13 22:30:10 发布

老谢要认真学习

最新推荐文章于 2024-05-13 22:30:10 发布

阅读量1.3k

点赞数 4

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_46555046/article/details/131087980

版权

Vue从入门到精通

一、Vue基础知识

1.1 Vue的概念和特点

1.1.1 Vue的概念和特点

Vue.js 是一款轻量级的 JavaScript 框架，主要用于构建用户界面。Vue.js 的核心库只关注视图层，易于与其他第三方库或既有项目整合，因此也被称为“渐进式框架”。Vue.js 的主要特点包括：

- **响应式数据绑定**：Vue.js 可以自动追踪数据的变化，并在视图中进行更新，不需要手动操作 DOM。
- **组件化开发**：Vue.js 将 UI 拆分成一系列可复用的组件，使得代码更加模块化、易于维护。
- **简单易学**：Vue.js 的 API 简单易懂，学习成本较低。
- **高效性能**：Vue.js 采用虚拟 DOM 技术，能够最小化 DOM 操作，提高页面渲染效率。
- **灵活性**：Vue.js 支持插件和自定义指令，可以扩展其功能。

除此之外，Vue.js 还有许多其他特点，如过渡动画、指令、计算属性等，这些特点使得 Vue.js 成为一款优秀的前端框架。

1.2 Vue的安装和使用

1.2.1 Vue的安装

Vue.js 可以直接通过 CDN 引入，也可以通过 npm 安装。在使用 Vue.js 时，我们需要引入 Vue.js 的 JavaScript 文件，以及 Vue.js 的 CSS 文件。

在 HTML 文件中，我们可以通过以下方式引入 Vue.js：

<!-- 引入 Vue.js 的 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<!-- 引入 Vue.js 的 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vue/dist/vue.css">

在使用 npm 安装 Vue.js 后，我们可以通过以下方式引入 Vue.js：

// 引入 Vue.js
import Vue from 'vue'

1.2.2 Vue的使用

Vue.js 的核心是一个允许我们扩展 HTML 语法的 JavaScript 库。通过 Vue.js，我们可以使用类似于 HTML 的模板语法来声明式地将数据渲染进 DOM 中。

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Vue.js 示例</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>

  <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello, Vue!'
      }
    })
  </script>
</body>
</html>

在这个示例中，我们使用 Vue.js 将数据 message 渲染进了 id 为 app 的 div 元素中。我们通过实例化一个 Vue 对象，并将其挂载到 id 为 app 的元素上，来实现这个功能。在 Vue 对象的 data 中，我们定义了一个属性 message，并将其初始化为 ‘Hello, Vue!’。在模板中，我们使用双括号语法将 message 渲染到了页面上。

通过这个示例，我们可以看到 Vue.js 的基本用法，以及如何将数据渲染到页面上。

1.3 Vue的模板语法和指令

1.3.1 模板语法

Vue.js 的模板语法是将 Vue 实例中的数据绑定到 HTML 中的一种方式。Vue.js 使用了基于 HTML 的模板语法，可以将 DOM 模板转换为渲染函数。Vue.js 的模板语法中，使用双大括号 {{ }} 来绑定数据，也可以使用 v-bind 指令来绑定数据。

示例代码：

<div id="app">
  <p>{{ message }}</p>
  <input v-bind:value="message">
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

在上面的示例代码中，我们使用了双大括号来绑定 Vue 实例中的 message 数据到 HTML 中的 p 标签中。同时，我们使用了 v-bind 指令将 Vue 实例中的 message 数据绑定到 input 标签的 value 属性中。

1.3.2 指令

Vue.js 的指令是一种特殊的 HTML 属性，它们带有前缀 v-，用于在模板中声明式地应用特殊的行为。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

常用的指令有 v-if、v-for、v-bind、v-on 等。其中，v-if 指令用于条件渲染，v-for 指令用于循环渲染，v-bind 指令用于绑定数据，v-on 指令用于绑定事件。

示例代码：

<div id="app">
  <p v-if="showMessage">{{ message }}</p>
  <ul>
    <li v-for="item in list">{{ item }}</li>
  </ul>
  <input v-bind:value="message" v-on:input="updateMessage">
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
    showMessage: true,
    list: ['Apple', 'Banana', 'Orange']
  },
  methods: {
    updateMessage: function(event) {
      this.message = event.target.value;
    }
  }
})

在上面的示例代码中，我们使用了 v-if 指令来条件渲染 p 标签，只有 showMessage 为 true 时才会渲染该标签。我们还使用了 v-for 指令来循环渲染 list 中的每一个元素到 li 标签中。最后，我们使用了 v-bind 指令将 Vue 实例中的 message 数据绑定到 input 标签的 value 属性中，并使用 v-on 指令将 input 事件绑定到 Vue 实例的 updateMessage 方法上。

1.4 Vue的组件化开发

在Vue中，组件是一个可复用的Vue实例，可以在一个父实例中创建多个子组件。组件化开发可以将一个复杂的应用程序拆分成多个独立的、可复用的组件，每个组件都有自己的功能和状态。通过组件化开发，可以提高应用程序的可维护性和可重用性。

下面是一个简单的组件示例：

<template>
  <div>
    <h3>{{ title }}</h3>
    <p>{{ content }}</p>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  props: {
    title: String,
    content: String
  }
}
</script>

在上面的示例中，我们创建了一个名为MyComponent的组件，它有两个属性title和content，分别用于显示组件的标题和内容。在<template>标签中，我们定义了组件的模板，使用了Vue的模板语法来绑定数据。在<script>标签中，我们导出了组件的定义，并在props选项中定义了组件的属性。通过这种方式，我们可以将组件的属性传递给组件实例，并在组件模板中使用它们。

在使用组件时，我们可以在父组件中通过引用子组件的方式来使用它。例如：

<template>
  <div>
    <my-component title="Hello" content="World"></my-component>
  </div>
</template>

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

export default {
  name: 'App',
  components: {
    MyComponent
  }
}
</script>

在上面的示例中，我们在父组件中引入了MyComponent组件，并将其注册到父组件中。然后，我们可以在父组件的模板中使用<my-component>标签来引用子组件，并传递组件的属性。这样，我们就可以在父组件中使用子组件了。

通过组件化开发，我们可以将一个复杂的应用程序拆分成多个独立的、可复用的组件，每个组件都有自己的功能和状态。这种开发方式可以提高应用程序的可维护性和可重用性，使开发更加高效和灵活。

二、Vue进阶知识

2.1 Vue的生命周期

2.1.1 Vue生命周期钩子函数

Vue的生命周期分为8个阶段，每个阶段都有对应的生命周期钩子函数。在组件创建、更新、销毁时，这些钩子函数会自动触发并执行相应的操作。下面是Vue的生命周期钩子函数：

钩子函数	说明
beforeCreate	组件实例刚被创建，数据观测(data observer)和事件机制都未形成
created	组件实例已经创建完成，数据观测(data observer)和事件机制已经形成，但是DOM还未生成，$el属性还不存在
beforeMount	组件模板已经编译完成，但是还未挂载到页面中
mounted	组件已经挂载到页面中，此时可以进行DOM操作，$el属性存在
beforeUpdate	组件更新前触发，此时数据还未更新
updated	组件更新后触发，此时数据已经更新完成
beforeDestroy	组件销毁前触发，此时组件实例仍然存在
destroyed	组件销毁后触发，此时组件实例已经被完全销毁

在使用Vue时，可以根据需要在这些钩子函数中编写相应的代码来实现自己的业务逻辑。例如，在mounted钩子函数中可以进行一些初始化操作，如请求数据、初始化插件等；在beforeDestroy钩子函数中可以进行一些清理操作，如清除定时器、取消订阅等。

2.2 Vue的计算属性和侦听器

2.2.1 计算属性的基本用法

计算属性是Vue中一个非常重要的概念，它能够根据已有的数据计算出新的数据，并且可以缓存计算结果，避免重复计算。计算属性的基本用法非常简单，只需要在Vue实例中定义一个computed对象，然后将需要计算的属性作为对象的属性即可。

例如，我们有一个商品列表，每个商品有名称、价格和数量三个属性，我们需要计算每个商品的总价。我们可以定义一个计算属性来实现这个功能，具体代码如下：

var vm = new Vue({
  el: '#app',
  data: {
    goodsList: [
      {name: '商品1', price: 10, quantity: 2},
      {name: '商品2', price: 20, quantity: 1},
      {name: '商品3', price: 30, quantity: 3}
    ]
  },
  computed: {
    totalPrices: function () {
      var total = 0;
      for (var i = 0; i < this.goodsList.length; i++) {
        total += this.goodsList[i].price * this.goodsList[i].quantity;
      }
      return total;
    }
  }
})

在上面的代码中，我们定义了一个computed对象，其中totalPrices是我们需要计算的属性，它的值是一个函数，该函数会遍历商品列表，计算出每个商品的总价，并返回所有商品总价的和。

2.2.2 侦听器的基本用法

侦听器是Vue中另一个非常重要的概念，它能够监听一个数据的变化，并在数据变化时执行相应的操作。侦听器的基本用法也非常简单，只需要在Vue实例中定义一个watch对象，然后将需要监听的数据作为对象的属性即可。

例如，我们有一个输入框和一个显示框，我们需要在输入框中输入内容时，实时将输入的内容显示在显示框中。我们可以定义一个侦听器来实现这个功能，具体代码如下：

var vm = new Vue({
  el: '#app',
  data: {
    inputText: '',
    displayText: ''
  },
  watch: {
    inputText: function (newVal, oldVal) {
      this.displayText = newVal;
    }
  }
})

在上面的代码中，我们定义了一个watch对象，其中inputText是我们需要监听的数据，它的值是一个函数，该函数会在inputText发生变化时被调用，将新的输入内容赋值给displayText，从而实现实时显示输入内容的功能。

2.3 Vue的自定义指令和过滤器

2.3.1 自定义指令

自定义指令是 Vue.js 中一个非常强大的功能，可以用来扩展 HTML 的功能。在 Vue.js 中，自定义指令有两种注册方式：全局注册和局部注册。

全局注册的方式是通过 Vue.directive() 函数来实现的，可以在整个应用程序中使用自定义指令。

局部注册的方式是通过 directives 选项来实现的，只能在当前组件中使用自定义指令。

下面是一个自定义指令的示例：

<template>
  <div v-highlight="'yellow'">Hello, Vue.js!</div>
</template>

<script>
Vue.directive('highlight', {
  bind: function (el, binding) {
    el.style.backgroundColor = binding.value;
  }
});
</script>

在上面的示例中，我们定义了一个名为 highlight 的自定义指令，并将其绑定到一个 div 元素上。当该元素被渲染时，自定义指令会被执行，将该元素的背景色设置为 yellow。

2.3.2 过滤器

过滤器是 Vue.js 中用于格式化数据的一种功能，可以在模板中使用过滤器来对数据进行处理。Vue.js 内置了一些常用的过滤器，如 currency、uppercase、lowercase 等，同时也可以自定义过滤器。

下面是一个自定义过滤器的示例：

<template>
  <div>{{ message | reverse }}</div>
</template>

<script>
Vue.filter('reverse', function (value) {
  return value.split('').reverse().join('');
});
</script>

在上面的示例中，我们定义了一个名为 reverse 的自定义过滤器，并将其应用到一个字符串变量 message 上。当该变量被渲染时，自定义过滤器会被执行，将该变量的字符顺序反转后再进行渲染。

2.4 Vue的动画和过渡效果

2.4.1 Vue过渡的基本用法

Vue提供了transition组件来实现元素的过渡效果。在使用transition组件时，需要将要过渡的元素包裹在transition组件内，并设置name属性来指定过渡的名称。过渡的名称可以自定义，但需要在CSS中定义对应的过渡效果。

具体来说，可以在CSS中定义以下四种过渡类名：

- v-enter：元素进入过渡的开始状态，该类名在元素插入DOM之前生效。
- v-enter-active：元素进入过渡的结束状态，该类名在元素插入DOM之前生效。
- v-leave：元素离开过渡的开始状态，该类名在元素移除DOM之前生效。
- v-leave-active：元素离开过渡的结束状态，该类名在元素移除DOM之前生效。

在CSS中定义好过渡类名后，就可以在transition组件中使用了。例如：

<transition name="fade">
  <p v-if="show">Hello, Vue!</p>
</transition>

上述代码中，transition组件的name属性设置为"fade"，表示这个过渡的名称是"fade"。在p元素显示或隐藏时，会触发过渡效果。需要注意的是，这里的v-if指令用于控制p元素的显示和隐藏，如果使用v-show指令，过渡效果会失效。

2.4.2 Vue过渡的高级用法

除了基本用法外，Vue的过渡效果还支持以下高级用法：

- 自定义过渡类名：可以通过设置enter-class、enter-active-class、leave-class、leave-active-class等属性来自定义过渡类名。
- JavaScript钩子函数：可以通过设置enter-to、leave-to、enter-cancelled、leave-cancelled等属性来指定JavaScript钩子函数，以实现更加复杂的过渡效果。
- 多个元素的过渡：可以通过设置mode属性来实现多个元素的过渡效果。mode属性有以下几种取值：in-out、out-in、default。其中，in-out表示新元素先过渡进入，然后当前元素过渡离开；out-in表示当前元素先过渡离开，然后新元素过渡进入；default表示新元素和当前元素同时过渡。

例如，以下代码实现了一个自定义的过渡效果：

<transition
  enter-active-class="animated bounceIn"
  leave-active-class="animated bounceOut"
>
  <p v-if="show">Hello, Vue!</p>
</transition>

在这个例子中，使用了animate.css库中的bounceIn和bounceOut动画类名，实现了一个弹跳的过渡效果。

三、Vue高级应用

3.1 Vue的路由管理

3.1.1 Vue Router的基本使用

Vue Router是Vue.js官方的路由管理工具，它能够帮助我们实现单页面应用（SPA）中的路由功能。在使用Vue Router之前，我们需要先安装它。可以通过npm安装，也可以通过CDN引入。安装完成后，我们需要在Vue项目中引入Vue Router并配置它。

下面是一个简单的Vue Router的配置示例：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

Vue.use(VueRouter)

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

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

在上面的代码中，我们首先引入了Vue Router并使用Vue.use()方法安装它。然后定义了两个路由，分别对应了两个组件Home和About。最后创建了一个VueRouter实例，并将路由配置传入其中。其中mode属性指定了路由的模式，这里使用的是history模式，base属性指定了应用的基路径。

3.1.2 Vue Router的高级用法

除了基本的路由配置外，Vue Router还提供了许多高级用法，例如：

- 动态路由匹配：可以通过动态路由匹配实现根据不同参数渲染不同的组件。
- 嵌套路由：可以在一个组件中嵌套多个子组件，每个子组件对应一个路由。
- 路由组件传参：可以通过路由参数或者query参数向路由组件传递数据。
- 导航守卫：可以在路由跳转前或跳转后执行一些操作，例如验证用户身份、修改页面标题等。

这些高级用法可以让我们更加灵活地使用Vue Router，实现更加复杂的路由功能。

3.1.3 Vue Router的实战应用

下面是一个简单的实战应用示例：一个电商网站，包含首页、商品列表页、商品详情页和购物车页四个页面。我们可以通过Vue Router实现这个网站的路由功能。

首先在路由配置中定义四个路由：

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/products',
    name: 'products',
    component: Products
  },
  {
    path: '/products/:id',
    name: 'product',
    component: Product
  },
  {
    path: '/cart',
    name: 'cart',
    component: Cart
  }
]

其中/products/:id表示动态路由匹配，可以根据不同的商品ID渲染不同的商品详情页。

然后在页面中使用router-link和router-view来实现页面之间的跳转和渲染：

<template>
  <div>
    <router-link to="/">首页</router-link>
    <router-link to="/products">商品列表</router-link>
    <router-link to="/cart">购物车</router-link>
    <router-view></router-view>
  </div>
</template>

通过上述配置和代码，我们就可以实现一个简单的电商网站，用户可以在不同的页面之间进行跳转和浏览商品信息。

3.2 Vue的状态管理

3.2.1 Vuex状态管理模式

Vuex是Vue.js的官方状态管理库，它可以帮助我们更好地管理应用程序的状态。Vuex使用集中式存储管理应用程序的所有组件的状态，并以可预测的方式进行修改。

Vuex包含四个核心概念：State、Getter、Mutation和Action。State是存储状态的地方，Getter用于获取状态，Mutation用于修改状态，Action用于提交Mutation。这些概念共同构成了Vuex的状态管理模式。

下面是一个简单的示例，展示了如何在Vuex中定义和使用State、Getter、Mutation和Action：

// 定义State
const state = {
  count: 0
}

// 定义Getter
const getters = {
  getCount: state => state.count
}

// 定义Mutation
const mutations = {
  increment: state => state.count++,
  decrement: state => state.count--
}

// 定义Action
const actions = {
  increment: ({ commit }) => commit('increment'),
  decrement: ({ commit }) => commit('decrement')
}

// 创建Vuex Store
const store = new Vuex.Store({
  state,
  getters,
  mutations,
  actions
})

// 在组件中使用Vuex
<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'

export default {
  computed: {
    ...mapGetters([
      'getCount'
    ])
  },
  methods: {
    ...mapActions([
      'increment',
      'decrement'
    ])
  }
}
</script>

在上面的示例中，我们定义了一个名为count的State，一个名为getCount的Getter，两个名为increment和decrement的Mutation，以及两个名为increment和decrement的Action。我们使用mapGetters和mapActions辅助函数将它们映射到组件中，以便我们可以在组件中使用它们。

当我们点击“Increment”按钮时，会触发increment Action，该Action会提交increment Mutation，从而将count增加1。当我们点击“Decrement”按钮时，会触发decrement Action，该Action会提交decrement Mutation，从而将count减少1。组件中的getCount Getter会获取当前的count值，并将其显示在页面上。

通过Vuex的状态管理模式，我们可以更好地组织和管理应用程序的状态，使代码更加清晰和易于维护。

3.3 Vue的服务端渲染

3.3.1 服务端渲染的概念

服务端渲染（Server Side Rendering，SSR）是指将Vue应用程序在服务器端渲染成HTML字符串，然后将其发送到客户端，客户端再进行渲染。相比于传统的客户端渲染，服务端渲染可以提高首屏加载速度、SEO友好等优点。

3.3.2 Vue服务端渲染的使用

Vue提供了一个官方的SSR解决方案，即Vue SSR。使用Vue SSR需要在服务器端安装Vue SSR插件，并在服务器端创建一个Vue实例，然后将Vue实例渲染成HTML字符串，最后将HTML字符串发送到客户端。客户端在接收到HTML字符串后，再将其转换为Vue实例，完成客户端渲染。

3.3.3 Vue服务端渲染的优缺点

Vue服务端渲染的优点主要包括：提高首屏加载速度、SEO友好、更好的用户体验等。缺点则包括：开发成本较高、服务器负载较大、前后端分离工作量较大等。

表格形式的优缺点比较：

优点	缺点
提高首屏加载速度	开发成本较高
SEO友好	服务器负载较大
更好的用户体验	前后端分离工作量较大

3.4 Vue的性能优化技巧

3.4.1 使用v-if和v-show的区别

v-if和v-show都可以用来控制元素的显示和隐藏，但是它们的实现方式不同。v-if是通过将元素从DOM树中移除来实现隐藏，而v-show则是通过修改元素的CSS属性display来实现隐藏。因此，当一个元素需要频繁的显示和隐藏时，使用v-show会比v-if更加高效，因为v-show只需要修改CSS属性，而不需要频繁地操作DOM树。

3.4.2 避免频繁的计算属性

计算属性是Vue中非常常用的一个特性，但是如果计算属性的计算量过大，会导致应用的性能下降。因此，在编写计算属性时，应该尽量避免频繁的计算，可以使用缓存或者将计算放到异步任务中。

3.4.3 使用v-for时指定key属性

在使用v-for指令渲染列表时，每个列表项都应该指定一个唯一的key属性。这样可以帮助Vue更好地跟踪每个列表项的状态，从而提高渲染效率。如果不指定key属性，Vue会使用默认的追踪机制，这可能会导致渲染错误或性能下降。

3.4.4 使用异步组件

在应用中使用异步组件可以提高应用的性能，因为异步组件只有在需要时才会被加载，从而减少了页面的加载时间。可以使用Vue的异步组件特性来实现异步加载组件，例如使用Vue的异步组件工厂函数或使用Vue的异步组件语法糖。

3.4.5 避免不必要的watcher

在Vue中，每个数据属性都会对应一个Watcher对象，Watcher对象会监听数据属性的变化并触发相应的更新。如果一个数据属性被多个Watcher对象监听，那么这个数据属性的变化会触发多次更新，从而导致性能下降。因此，在编写Vue应用时，应该尽量避免不必要的Watcher对象，可以使用computed属性代替watcher，或者使用Vue提供的watch选项的immediate属性来避免不必要的Watcher对象。