Vue.js学成总结

骑猪看晚霞

已于 2023-12-13 11:23:23 修改

阅读量875

点赞数 17

文章标签： vue.js 前端 javascript

于 2023-12-13 11:14:04 首次发布

本文链接：https://blog.csdn.net/2301_77150622/article/details/134966227

版权

一、Vue.js 的基础介绍

什么是 Vue.js？ Vue.js 是一款流行的 JavaScript 前端框架，用于构建交互式的 Web 应用程序。它采用了 MVVM（Model-View-ViewModel）的架构模式，通过数据驱动和组件化的方式，使开发者能够更高效地构建用户界面。
Vue.js 的特点

数据双向绑定：Vue.js 提供了简单而强大的数据绑定语法，可以实现数据的自动更新，减少了手动操作 DOM 的复杂性。
组件化开发：Vue.js 以组件为基础，将应用程序拆分为多个独立的可重用组件，提高了代码的复用性和可维护性。
轻量级：Vue.js 的核心库体积小巧，加载速度快，非常适合在移动端或需要快速渲染的场景中使用。
渐进式框架：Vue.js 设计为渐进式框架，可以逐步引入到项目中，也可以与其他库或已有项目无缝集成。
生态丰富：Vue.js 拥有庞大的生态系统，有许多插件和第三方库可以扩展其功能。

Vue.js 的安装你可以通过以下方式安装 Vue.js：

使用 CDN：在 HTML 文件中引入 Vue.js 的脚本文件。
使用 npm 或 yarn：在项目中使用包管理工具进行安装。

创建一个 Vue 程序下面是一个简单的例子，展示如何创建一个 Vue 程序：

<!DOCTYPE html>
<html>
<head>
  <title>Vue App</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
  <div id="app">
    <h1>{{ message }}</h1>
  </div>

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

在上述例子中，我们通过引入 Vue.js 的脚本文件，并在 HTML 中定义了一个 Vue 实例。该实例使用 el 属性指定了一个 DOM 元素作为 Vue 实例的挂载点，并使用 data 属性定义了一个数据对象，其中包含了一个名为 message 的属性。最后，我们使用双花括号语法 {{ message }} 将数据绑定到页面上。当数据发生变化时，页面上的内容也会自动更新。

二、基础语法指令如下：

v-bind v-bind 用于动态绑定属性或表达式到 HTML 元素上。它可以简写为冒号 ":"。例如，你可以使用 v-bind 来绑定一个变量到元素的 class 或 style 属性上。

<div v-bind:class="className"></div>

v-if、v-else v-if 指令用于根据条件来渲染元素。如果条件为真，元素会被渲染出来；如果条件为假，元素不会被渲染。你还可以使用 v-else 在同一级别上添加一个“否则”块。

<div v-if="isTrue"> 
条件为真时渲染的内容 
</div> 
<div v-else> 
条件为假时渲染的内容 
</div>

v-else-if v-else-if 用于在多个条件之间切换。它必须紧跟在 v-if 或 v-else-if 之后，并且在 v-else 之前。

<div v-if="conditionA"> 
条件 A 为真时渲染的内容 
</div> 
<div v-else-if="conditionB"> 
条件 B 为真时渲染的内容 
</div> 
<div v-else> 
其他情况下渲染的内容 
</div>

v-for v-for 指令用于遍历数组或对象，并将每个元素渲染成列表。你可以使用 v-for 来循环渲染元素，同时可以获得当前元素的索引。

<ul>
    <li v-for="(item, index) in items" :key="index"> 
        {{ index }} - {{ item }} 
    </li> 
</ul>

v-on v-on 指令用于绑定事件监听器。你可以使用它来监听 DOM 事件，并执行相应的方法。常见的事件有点击事件（click）、输入事件（input）等。

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

以上是一些常用的 Vue.js 基础语法指令，它们可以帮助你在 Vue.js 中实现动态数据绑定、条件渲染、循环渲染和事件处理等功能。

三、双向绑定、组件

1.什么是双向数据绑定

双向数据绑定是一种机制，用于在视图（用户界面）和数据模型之间实现自动的双向同步。它允许数据的变化能够自动反映到视图上，并且用户在视图上的操作也能够实时地更新数据模型。

2.什么是单双向数据绑定

表单双向数据绑定是指将表单元素与数据模型进行双向绑定，从而实现表单数据和数据模型之间的同步更新。在Vue.js中，可以使用v-model指令来实现表单元素的双向数据绑定。

(1) 单行文本：通过将输入框与数据模型使用v-model指令进行绑定，实现输入框内容和数据模型的双向同步更新。

例如：

<input type="text" v-model="message">

(2) 多行文本：同样使用v-model指令，将多行文本框与数据模型进行双向绑定，以实现多行文本框内容和数据模型的同步更新。

例如：

<textarea v-model="description"></textarea>

(3) 单复选框：使用v-model指令将单个复选框与布尔类型的数据属性进行双向绑定，实现单复选框的选择状态与数据模型的同步更新。

例如：

<input type="checkbox" v-model="isChecked">

(4) 多复选框：通过使用v-model指令结合数组，可以将多个复选框与数组类型的数据属性进行双向绑定，以实现多复选框的选择状态与数组数据的同步更新。

例如：

<input type="checkbox" v-for="option in options" 
v-model="selectedOptions" :value="option">

(5) 单选按钮：通过v-model指令，将单选按钮与数据模型进行双向绑定，使得选中的按钮对应的值能够与数据模型保持同步。

例如：

<input type="radio" id="option1" value="option1" v-model="selectedOption">
<label for="option1">Option 1</label>

<input type="radio" id="option2" value="option2" v-model="selectedOption">
<label for="option2">Option 2</label>

(6) 下拉框：使用v-model指令将下拉框与数据模型中的属性进行双向绑定，实现下拉框选择值与数据模型的同步更新。

例如：

<select v-model="selectedValue">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
</select>

通过以上方式，可以方便地实现表单元素与数据模型之间的双向数据绑定。无论是数据的变化还是用户操作，都能够自动反映到表单元素和数据模型之间。

四、组件

(1) 组件是 Vue.js 中的一个核心概念，它可以被看作是一个独立的、可复用的模块，用于封装一些特定的功能。组件可以包含 HTML 模板、样式和逻辑，并且可以在应用中多次使用。

(2) 在 Vue.js 中，组件的基本结构由三部分组成：模板（template）、逻辑（script）和样式（style）。模板定义了组件的 HTML 结构，逻辑定义了组件的行为和数据处理，而样式则定义了组件的外观。

创建一个组件需要两个步骤：

定义组件：使用 Vue.component() 方法来定义一个组件，并指定组件的名称、模板、逻辑等。
使用组件：在其他组件或 Vue 实例中使用已定义的组件。

例如，下面是一个简单的 Vue.js 组件示例：

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

<script>
export default {
  data() {
    return {
      title: 'Vue.js 组件',
      content: '这是一个简单的 Vue.js 组件示例。',
    };
  },
};
</script>

<style scoped>
h1 {
  color: blue;
}
</style>

在上面的示例中，我们定义了一个名为 MyComponent 的组件，它有一个标题和内容。其中，<template> 标签定义了组件的 HTML 结构，<script> 标签定义了组件的逻辑部分，<style> 标签定义了组件的样式。scoped 属性表示该样式只作用于当前组件。

要使用这个组件，可以在其他组件或 Vue 实例中引入并以标签的形式使用：

<template>
  <div>
    <my-component></my-component>
  </div>
</template>

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

export default {
  components: {
    MyComponent,
  },
};
</script>

(3) 在 Vue.js 中，你可以通过 props 来传递参数给组件。props 是组件的属性，可以从父组件传递数据给子组件。

在父组件中，可以通过在子组件标签上添加属性来传递数据。子组件可以通过 props 选项接收传递的数据，并在模板或逻辑中使用。

下面是一个示例：

<!-- 父组件 -->
<template>
  <div>
    <my-component :title="componentTitle"></my-component>
  </div>
</template>

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

export default {
  components: {
    MyComponent,
  },
  data() {
    return {
      componentTitle: 'Vue.js 组件',
    };
  },
};
</script>
html

<!-- 子组件 MyComponent -->
<template>
  <div>
    <h1>{{ title }}</h1>
  </div>
</template>

<script>
export default {
  props: ['title'],
};
</script>

在上面的示例中，父组件通过属性 componentTitle 的值传递给了子组件的 title 属性。子组件通过 props 选项声明接收的属性，并在模板中使用 title 属性来展示数据。

这样，父组件传递的标题就会显示在子组件中。

五、总结

Vue.js的总结：

响应式数据：Vue.js采用了基于依赖追踪的观察者机制，实现了数据的响应式更新。当数据发生改变时，相关的视图会自动更新。
组件化开发：Vue.js将用户界面划分为多个可重用的组件，每个组件包含自己的模板、逻辑和样式。通过组合不同的组件，可以构建复杂的应用程序。
虚拟DOM：Vue.js使用虚拟DOM技术来最小化页面重绘的次数，提高渲染性能。Vue.js通过比较虚拟DOM树的差异，只对需要更新的部分进行实际的DOM操作。
模板语法：Vue.js使用基于HTML的模板语法，使得开发者可以直接在模板中声明数据绑定、事件处理等逻辑。模板语法简洁明了，易于理解和维护。
数据绑定：Vue.js支持双向数据绑定，可以通过v-model指令实现表单元素和数据模型之间的双向同步。数据绑定使得数据的变化能够自动反映到视图上，并且用户在视图上的操作也能够实时地更新数据模型。
生命周期钩子：Vue.js提供了一系列的生命周期钩子函数，允许开发者在组件的不同阶段执行自定义的逻辑。这些钩子函数包括created、mounted、updated等，可以用于初始化数据、访问DOM元素以及与服务器进行交互等操作。
插件系统：Vue.js具有灵活的插件系统，允许开发者扩展其核心功能。社区中已经有很多第三方插件可供使用，方便开发者增加额外的功能或集成其他库。