Vue的一部分学习总结

最新推荐文章于 2024-09-29 17:29:37 发布

陈戎戎3985

最新推荐文章于 2024-09-29 17:29:37 发布

阅读量846

点赞数 18

文章标签： vue.js 学习前端

本文链接：https://blog.csdn.net/2301_77579337/article/details/135228854

版权

一.什么是Vue

Vue是一款流行的前端JavaScript框架，用于构建用户界面和单页应用程序。Vue由Evan You于2014年创建，它采用了响应式数据绑定和组件化开发的思想。

Vue的核心库只关注视图层，易于集成到其他项目或现有项目中。它具有以下特点：

响应式数据绑定：Vue通过响应式系统实现数据与视图之间的绑定，当数据变化时，视图会自动更新。
组件化开发：Vue支持以组件为基本单位构建应用，使得复杂的UI可以被拆分成独立、可复用的组件进行开发和维护。
简单易学：Vue的API设计简洁明了，学习曲线较为平缓，使得初学者也能快速上手。
灵活性：Vue提供了许多灵活的特性，如指令、计算属性、过滤器等，以满足不同需求的开发场景。
高效：Vue采用虚拟DOM和diff算法，能够高效地更新视图，提升了应用的性能。
生态丰富：Vue生态系统完整，包括Vuex（状态管理）、Vue Router（路由管理）、Vue CLI（脚手架工具）等，能够满足各种复杂应用的需求。

由于这些特点，Vue越来越受到前端开发者的欢迎和青睐，成为构建现代Web应用的首选框架之一。

二.Vue常用的指令

1.v-bind：用于动态绑定数据到HTML元素的属性。例如，<img v-bind:src="imageUrl">会将imageUrl的值绑定到src属性上。

<template>
  <!-- 动态绑定class样式 -->
  <div v-bind:class="{'active': isActive}"></div>

  <!-- 动态绑定style样式 -->
  <div v-bind:style="{color: textColor, fontSize: textSize + 'px'}"></div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
      textColor: 'red',
      textSize: 14
    }
  }
}
</script>

在上述示例中，v-bind:class指令会根据isActive的值来判断是否添加active类名。v-bind:style指令会根据textColor和textSize的值来动态设置color和font-size样式。

2.v-model：用于实现表单元素与数据的双向绑定。通过v-model指令，可以将输入框、复选框、单选框等表单元素的值与Vue实例中的数据进行同步。

<template>
  <!-- 使用v-model实现双向绑定 -->
  <input v-model="message">
  <span>{{ message }}</span>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    }
  }
}
</script>

在上述示例中，我们使用v-model指令将输入框的值与message数据进行双向绑定，当用户在输入框中输入内容时，message的值会随之变化，同时页面上的span元素也会动态地显示message的值。

3.v-if / v-else：用于条件性地渲染一块内容。可以根据表达式的真假来决定是否显示或隐藏元素。例如，<div v-if="isShow">显示内容</div>会根据isShow的值来决定是否渲染该<div>元素。

<template>
  <div>
    <p v-if="showText">显示的文本</p>
    <p v-else>隐藏的文本</p>
    <button @click="toggleText">切换</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showText: true
    }
  },
  methods: {
    toggleText() {
      this.showText = !this.showText
    }
  }
}
</script>

在上述示例中，我们使用v-if指令来判断是否显示<p>元素，当showText的值为true时，该元素会被渲染出来；当showText的值为false时，该元素不会被渲染。同时，我们也使用了v-else指令来渲染出另外一个<p>元素，当showText的值为false时，该元素会被渲染出来。

在页面中，我们还加入了一个按钮，并通过@click监听器绑定了一个toggleText方法，该方法会在按钮被点击时将showText的值取反，从而实现动态更新文本的显示与隐藏。

4.v-for：用于循环渲染列表数据。通过v-for指令，可以遍历数组或对象，并将每个元素或属性渲染为对应的HTML元素。

<template>
  <!-- 遍历数组 -->
  <ul>
    <li v-for="(item, index) in list" :key="index">
      {{ item }}
    </li>
  </ul>

  <!-- 遍历对象 -->
  <ul>
    <li v-for="(value, key) in obj" :key="key">
      {{ key }}: {{ value }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      list: ['apple', 'banana', 'orange'],
      obj: { name: 'Tom', age: 20, gender: 'male' }
    }
  }
}
</script>

在上述示例中，我们使用v-for指令分别遍历了数组和对象，并将它们的每个元素或属性渲染为对应的<li>元素。在遍历数组时，我们可以通过item和index获取当前元素和索引值；在遍历对象时，我们可以通过value和key获取当前属性的值和名称。

5.v-on：用于绑定事件监听器。通过v-on指令，可以在触发特定事件时执行相应的方法。例如，<button v-on:click="handleClick">点击按钮</button>会在按钮点击时调用handleClick方法。

<template>
  <!-- 监听点击事件 -->
  <button v-on:click="handleClick">点击按钮</button>

  <!-- 监听键盘事件 -->
  <input v-on:keyup.enter="handleKeyup">
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('Button clicked!')
    },
    handleKeyup() {
      console.log('Enter key pressed!')
    }
  }
}
</script>

在上述示例中，我们使用v-on:click指令监听了按钮的点击事件，并在handleClick方法中输出了一条日志；同时，我们也使用v-on:keyup.enter指令监听了输入框的回车事件，并在handleKeyup方法中输出了一条日志。

除了以上列举的指令外，Vue还提供了其他一些常用的指令，如v-text、v-html、v-cloak等，每个指令都有其特定的作用和用法。开发者可以根据具体需求选择合适的指令来操作和控制DOM元素。