Vue.js课程总结

Later.H

已于 2024-01-02 11:18:52 修改

阅读量918

点赞数 23

文章标签： vue.js 前端 javascript

于 2024-01-02 11:10:58 首次发布

本文链接：https://blog.csdn.net/m0_74309293/article/details/135283036

版权

1.Vue CLi由三个主要的工具组成，分别是:

一、Vue.js是什么？

Vue.js是一款流行的JavaScript前端框架，以其简洁易用和高效性能而受到广泛喜爱。它采用MVVM架构模式，通过数据的响应式机制实现了数据与视图的自动同步更新，提供了更加便捷的开发方式。Vue.js拥有丰富的生态系统和强大的功能，包括组件化、虚拟DOM、指令系统等，可以提高开发效率和代码复用率。同时，Vue.js也具备灵活性和可扩展性，可以与其他库或已有项目进行无缝整合。作为轻量级框架，Vue.js的文件体积小、性能出色，适用于构建中小型单页面应用程序，并在业界得到了广泛应用和认可。

官网：Vue.js - 渐进式 JavaScript 框架 | Vue.js
Vue作者：尤雨溪/中国无锡

二、MVVM的介绍

MVVM（Model-View-ViewModel）是一种软件架构模式，用于分离用户界面、业务逻辑和数据的关注点。
在MVVM中，Model代表数据层，负责处理数据的存储和操作。View代表用户界面，负责展示数据给用户，并接收用户的输入。ViewModel充当View和Model之间的中介，负责处理业务逻辑、数据转换和视图状态管理等。
MVVM的核心概念是数据绑定。ViewModel通过数据绑定机制将Model中的数据与View进行绑定，当数据发生变化时，View会自动更新，用户的交互操作也会自动反映到ViewModel和Model上，实现了数据的双向绑定。
MVVM的优势在于解耦和可维护性。通过将View和Model的关联通过ViewModel进行连接，实现了各组件的解耦，使得代码更易于理解、测试和维护。MVVM也提供了更好的可扩展性和重用性，使得开发过程更加高效。
Vue.js就是一个典型的MVVM框架，它通过数据绑定和组件化的方式，使开发者可以更轻松地构建复杂的用户界面，并且提供了一系列工具和特性来帮助开发者管理视图状态和处理业务逻辑。

三、Vue.js的部分常用指令

1、v-bind

v-bind指令用于动态地绑定元素的属性或表达式，它可以接受一个参数，用来指定要绑定的属性名称。

<div id="app">
  <img v-bind:src="imageSrc">
</div>

<script>
  var app = new Vue({
    el: '#app',
    data: {
      imageSrc: 'path/to/image.jpg'
    }
  });
</script>

在这个例子中，v-bind:src="imageSrc"指令将Vue实例中的imageSrc属性绑定到<img>元素的src属性上，使其显示指定路径的图片。

2、v-model

v-model指令用于实现表单元素与Vue实例数据的双向绑定。

<div id="app">
  <input type="text" v-model="message">
  <p>{{ message }}</p>
</div>

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

在这个例子中，v-model="message"指令将输入框的值与Vue实例中的message属性进行双向绑定，当输入框的值发生变化时，message属性也会自动更新，同时在下方的<p>元素中显示出来。

3、v-for

v-for指令用于循环遍历数组或对象，并生成相应的DOM元素。

<div id="app">
  <ul>
    <li v-for="item in items">{{ item }}</li>
  </ul>
</div>

<script>
  var app = new Vue({
    el: '#app',
    data: {
      items: ['Apple', 'Banana', 'Orange']
    }
  });
</script>

在这个例子中，v-for="item in items"指令将Vue实例中的items数组进行遍历，并为每个数组项生成一个<li>元素，循环输出水果列表。

四、组件

1、组件的简介

组件是Vue.js最强大的功能之一，组件可以扩展HTML元素，也可以封装可重用的代码，组件系统让开发人员可以用独立可复用的小组件来构建大型应用。

2、为什么要用组件

方便重复使用
减少代码重复冗余
便于多人协同开发
有助于提高开发效率
提升整个项目的可维护性

3、组件使用实例

<!-- 在 HTML 中使用组件 -->
<template>
  <div>
    <h1>欢迎使用组件！</h1>
    <my-component></my-component> <!-- 使用自定义组件 -->
  </div>
</template>

<!-- 定义组件 -->
<script>
  // 导入 Vue
  import Vue from 'vue';

  // 创建一个全局组件
  Vue.component('my-component', {
    template: '<p>这是一个自定义组件</p>'
  });

  // 创建 Vue 实例
  new Vue({
    el: '#app'
  });
</script>

在上面的示例中，我们首先在 HTML 模板中使用了一个自定义组件 <my-component></my-component>。然后，在 JavaScript 部分，我们定义了一个全局组件 my-component，并指定了它的模板。最后，我们创建了一个 Vue 实例，并将其绑定到 #app 元素上。

除了全局组件，我们还可以定义局部组件，只在特定的 Vue 实例或父组件内部使用。这可以通过在 components 选项中注册组件来实现：

// 创建局部组件
new Vue({
  el: '#app',
  components: {
    'my-component': {
      template: '<p>这是一个局部组件</p>'
    }
  }
});

在上面的代码中，我们将 'my-component' 注册为局部组件，并在对应的 Vue 实例中使用。

五、Vue项目化CLi

1.Vue CLi由三个主要的工具组成，分别是:

1、CLI

CLI是一个npm包，通过Vue.js命令提供核心功能。它可以轻松构建一个新项目，同时，如果你希望通过可视化界面来构建（创建）项目的话，你可以运行vue ui命令行来打开可视化界面。

2.CLI Service

CLI Service是一个开发依赖项，安装在脚手架项目当中，可以帮助开发项目、打包项目和检查项目的一些相关配置。

CLI Service 提供了一系列命令，例如 npm run serve 用于启动开发服务器，npm run build 用于构建生产环境代码。

3、CLI插件

CLI插件也是npm的包，可以为项目提供一些额外的功能，在开发的过程中，可以通过命令行vue add添加CLI插件，比如路由插件(vue-router)、vuex插件等等。

六、总结

Vue.js是一款流行的JavaScript前端框架，它采用MVVM架构模式实现了数据与视图的自动同步更新，提供了更加便捷的开发方式。Vue.js具备灵活性和可扩展性，可以与其他库或已有项目进行无缝整合。常用指令包括v-bind、v-model和v-for等。组件是Vue.js最强大的功能之一，可以扩展HTML元素，封装可重用的代码，提高开发效率和整个项目的可维护性。Vue CLI由CLI、CLI Service和CLI插件组成，可以轻松构建新项目，并为项目提供一些额外的功能。Vue.js在前端开发中得到了广泛应用和认可，是值得学习和掌握的技术之一。

Later.H

关注

23
点赞
踩
16

收藏

觉得还不错? 一键收藏
1
评论
Vue.js课程总结

MVVM（Model-View-ViewModel）是一种软件架构模式，用于分离用户界面、业务逻辑和数据的关注点。在MVVM中，Model代表数据层，负责处理数据的存储和操作。View代表用户界面，负责展示数据给用户，并接收用户的输入。ViewModel充当View和Model之间的中介，负责处理业务逻辑、数据转换和视图状态管理等。MVVM的核心概念是数据绑定。
复制链接

扫一扫