快速入门Vue-CSDN博客

本文链接：https://blog.csdn.net/m0_73601916/article/details/142321767

Vue是什么

Vue.js（通常简称为Vue）是一个开源的JavaScript框架，用于构建用户界面和单页应用程序（SPA）。它由尤雨溪（Evan You）在2014年开发并发布。Vue的核心库只关注视图层，易于上手且便于与第三方库或既有项目整合。Vue的设计初衷是使开发者能够更容易地构建界面丰富的Web应用，同时保持应用的性能和可维护性。

Vue的主要特点：

响应式数据绑定：Vue通过“数据绑定”和“组件系统”两个核心特性简化了前端开发的复杂性。开发者只需在JavaScript中修改数据，视图就会自动更新。
组件化开发：Vue鼓励开发者将界面分割成可复用的组件，每个组件都包含了自己的模板、逻辑和样式，这样做不仅提高了开发效率，也使得代码更加模块化和易于维护。
易于学习：Vue的API设计得简洁明了，学习曲线相对较低，即使是前端新手也能较快地掌握并用于项目开发。
灵活的生态系统：Vue拥有庞大的社区和丰富的生态系统，包括Vue CLI（官方脚手架工具）、Vue Router（官方路由管理器）、Vuex（状态管理模式库）、Vue Test Utils（测试工具）等，为开发者提供了全方位的解决方案。
高效性能：Vue通过虚拟DOM技术优化了DOM操作，实现了高效的页面渲染和更新。

Vue的应用场景：

Vue.js可以应用于各种规模的项目中，从简单的个人博客到复杂的企业级应用。由于它的轻量级和灵活性，Vue特别适合于构建单页应用程序（SPA），如Web应用、管理界面、原型开发等。同时，Vue也可以与其他库或框架（如React、Angular）配合使用，以实现更丰富的功能。

结论：

Vue.js是一个功能强大且易于上手的JavaScript框架，它通过响应式数据绑定和组件化开发等特性，简化了前端开发的复杂性，提高了开发效率和应用的性能。随着Vue生态系统的不断完善和社区的日益壮大，Vue已成为前端开发者们不可或缺的工具之一。

为什么要学Vue

学习Vue（Vue.js）有许多原因，这些原因涵盖了前端开发的需求、Vue自身的优势以及行业趋势等多个方面。以下是一些主要的原因：

现代前端开发的需求：随着Web应用的日益复杂，传统的页面刷新方式已经无法满足用户对流畅性和即时性的需求。Vue等现代前端框架通过组件化、数据绑定和虚拟DOM等技术，使得构建快速响应、动态交互的Web应用变得更加容易和高效。
提高开发效率：Vue的组件化开发模式鼓励开发者将UI拆分成独立的、可复用的组件。这种方式不仅降低了代码的冗余度，还提高了代码的可维护性和复用性。同时，Vue提供了丰富的API和生态系统，如Vue CLI、Vue Router、Vuex等，这些工具可以进一步加速开发流程，提高开发效率。
易于学习和使用：Vue的API设计简洁明了，学习曲线相对较低。即使是前端新手，也能在较短时间内掌握Vue的基本用法，并将其应用于实际项目中。此外，Vue的文档也非常完善，提供了丰富的示例和教程，有助于开发者快速上手。
适应多种项目规模：Vue不仅适用于小型项目，也完全能够胜任大型企业级应用的开发。Vue的灵活性和可扩展性使得它可以根据项目的需求进行定制和优化，从而满足不同规模和复杂度的项目要求。
强大的社区支持：Vue拥有庞大的社区和活跃的开发者群体。这意味着你可以很容易地找到关于Vue的问题解答、教程、插件和库等资源。此外，Vue的官方团队也非常活跃，经常发布新的功能和更新，以满足开发者的需求。
与现有技术的兼容性：Vue可以很容易地与其他前端库和框架（如React、Angular）以及后端技术栈（如Node.js、Django、Spring等）进行集成。这使得Vue成为了一个非常灵活和适应性强的前端解决方案。
行业趋势和就业前景：随着Vue的普及和受欢迎程度的不断提高，越来越多的企业和项目开始采用Vue作为前端框架。因此，掌握Vue不仅有助于你更好地适应行业趋势和发展需求，还能为你的职业发展和就业前景带来积极的影响。

综上所述，学习Vue对于前端开发者来说是非常有价值和必要的。它不仅能够提高你的开发效率和技能水平，还能帮助你更好地适应行业趋势和发展需求。

Vue怎么使用

第一步，复制自己需要生成代码片段的代码；

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <div id="app">
    <h2>{{message}}</h2>
  </div>
  
  <script type="text/javascript" src="./js/vue.global.js"></script>
  <script>
    // 1.创建app
    const app = Vue.createApp({
      // data: option api
      data: function() {
        return {
          message: "Hello Vue"
        }
      },
    })

    // 2.挂载app
    app.mount("#app")
  </script>
</body>
</html>

第二步，snippet generator在该网站中生成代码片段；

第三步，在VSCode中配置代码片段；

打开左上角文件>>下面点击首选项>>配置代码片段

学习Vue之前要注意

2.1.4 注意事项

注意:

1) 所有的Vue方法和属性都必须在对应挂载根标签的内部使用

2) 所有Vue的数据都应该在date函数返回的对象中

3) 我们要遵循一个原则:由Vue管理的函数,一定不要写箭头函数,一旦写了箭头函数,this就不再是Vue实例了.

我们要更好的学习Vue，要熟悉MVVM模型：

MVVM是软件架构设计模式，用于构建用户界面应用。其由Model、View和ViewModel组成，实现数据模型与界面的分离，提升代码解耦性、可测试性和可维护性。MVVM支持双向数据绑定、事件驱动和命令绑定，简化视图与模型的交互。

Vue虽然没有完全遵循 MVVM 模型，但是 Vue 的设计也受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例。

MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。当然这些事 ViewModel 已经帮我们做了，它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑.

M: 模型(Model),数据模型，负责存储应用程序的数据。它独立于视图（View）和视图模型（ViewModel），可以在不同的视图间共享。对应data中的数据,

V: 视图(View): 模板用户界面，负责数据的展示。通常使用HTML、CSS和JavaScript（或特定框架的模板语言）来实现。

VM:视图模型(ViewModel):是View和Model之间的桥梁。它负责处理View和Model之间的交互，比如将Model的数据转换为View可以展示的格式，或者将用户在View上的操作转换为Model的数据更新。 Vue对象实例

还有基础的指令：

指令：

1.v-bind：属性名绑定属性简写为 “：属性名”

语法：<div v-bind="objectOfAttrs"></div>

2.v-text：插值语法

<div id="box">
  <h1 v-test="type"></h1>
  <h1>{{type}}</h1>
</div>

3.v-html :数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML ，你需要使用 v-html 指令

语法：

<div id="box">
 <p v-html="type"></p>
 <p>{{type}}</p>
</div>

4.类操作：：class 语法：:class=’xxx’

style操作：style={样式属性名:值，......} 语法： :style=”{样式属性名1:变量,样式属性名2:变量2,....}”;

5..v-if:

v-if=“boolean值”

true: 对应标签就会渲染, false: 不渲染

v-if

与 v-else

v-if

v-else-if …. v-else

v-show:控制标签显示隐藏, 控制标签display样式属性

6..v-for：

{{name}}

arr:["张三","李四","王五"]；

{{i}--{name}}

arr:["张三","李四","王五"]；

{{name}}

arr:["张三","李四","王五"]；

stuArr{

}

7.v-show：v-show指令: 根据表达式的值来显示或隐藏HTML元素,当v-show表达式的值为false时,元素将被隐藏,查看DOM时,会发现元素上多了一个行内样式style=”display:none”.

语法：

<div id="box">
 <h1 v-show="false"></h1>
</div>

v-if与v-show的比较:

首先，在用法上的区别：

v-show是不支持template；
v-show不可以和v-else一起使用；

其次，本质的区别：

v-show元素无论是否需要显示到浏览器上，它的DOM实际都是有存在的，只是通过CSS的display属性来进行切换；
v-if当条件为false时，其对应的原生压根不会被渲染到DOM中；

开发中如何进行选择呢？

如果我们的元素需要在显示和隐藏之间频繁的切换，那么使用v-show；
如果不会频繁的发生切换，那么使用v-if；

8..v-model

1.文本类型：和<>

表单提交是开发中非常常见的功能，也是和用户交互的重要手段：

比如用户在登录、注册时需要提交账号密码；
比如用户在检索、创建、更新信息时，需要提交一些数据

9..v-on:可以使用 v-on 指令 (简写为 @) 来监听 DOM 事件，并在事件触发时执行对应的 JavaScript。用法：v-on:click="methodName" 或 @click="handler"。

v-on:事件类型

1.鼠标事件：常用，单机事件