初识Vue框架

在前端开发中，实现简单的功能我们一般使用原生的JS去写代码，但是由于在我们去开发一个复杂的项目时，原生的JS就有很多的不方便之处，写出来的代码就不是特别的优雅，看得人眼花缭乱。所以在市面上，我们可以看到有很多的前端框架涌现而出，而最受前端开发者青睐的，不过就是大名鼎鼎的React框架和Vue框架，而之前我对React框架进行了初学（# 初识React框架），想着也对Vue框架也进行同步的学习，所以本文将带领大家对Vue的初步了解，如果有什么不对的地方，还请大家批评指正（这会是我往脑子里塞知识的最佳途径）。OK，让我们先从一个示例对比Vue和原生JS的实现方式开始吧！

原生JS实现计数器加减

大家都知道，在使用原生JS实现某些操作时，我们需要手动操作DOM元素来更新显示的数值，来看看代码示例吧

• 代码实例：

js

代码解读

复制代码

<div>原生JS的计数器</div> <h2 id="h2">0</h2> <button id="minus">-1</button> <button id="add">+1</button> <script> //获取元素 let minus=document.getElementById("minus"); let add=document.getElementById("add"); let h2=document.getElementById("h2"); let count=0 // 函数 minus.addEventListener("click",()=>{ count--; h2.innerText = count; }); add.addEventListener("click",()=>{ count++; h2.innerText = count; }); </script>

在上述代码中，明显的需要我们先要使用document.getElementById方法获取了三个DOM元素（正所谓要用什么就先得到什么，你都不得到她，你怎么去用她呢），然后通过addEventListener方法给minus和add按钮添加了点击事件监听器，以至于当我们点击的时候会触发相应的操作——改变count的值，更新h2元素的innerText属性，显示新的计数值。

• 运行结果

Vue实现计数器加减

相比之下，通过Vue来实现计数器加减更加简洁高效，代码看起来更加的优雅。来看看代码示例吧

• 代码实例：
  • html头部先引入Vue的CDN链接

  html

  代码解读

  复制代码

  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  • 在html的body部分的代码

  html

  代码解读

  复制代码

  <div id="app"></div> <script> const { createApp }=Vue createApp({ template:` <h2 id="h2">{{count}}</h2> <button id="minus" @click="minus">-1</button> <button id="add" @click="add">+1</button>`, data :function(){ return {//响应式 count:10 } }, methods:{ minus(){ this.count-- }, add(){ this.count++ } } }).mount('#app') </script>

从上述代码与原生JS的代码对比中，可以发现，Vue实现的代码更加的简洁高效和优雅，而且内容板块清晰，易于维护。

• 我们在template中定义了HTML模板字符串，
• 在data中返回一个对象，该对象中的属性是响应式的，
• 再在methods中定义了两个方法minus和add，
• 最后利用 createApp().mount('#app') 将创建的Vue应用实例挂载到ID为app的DOM元素上

这样Vue就会接管这个元素并根据模板和数据渲染界面。而createApp 函数是Vue 3 提供的，用来创建一个新的 Vue 应用实例。这个函数接收一个配置对象，其中包含模板、数据和方法。

• 运行结果

Vue

什么是Vue？

Vue 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

我们也可以去Vue官方文档中看看：Vue官方文档

怎么用Vue？

我们有多种方式去使用Vue：

• 使用CDM引入：在HTMl文件中通过引入Vue的CDM链接就可以使用了，就是我上面那个示例中使用的<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
• 也可以通过npm安装：在项目目录下运行npm create vue@latest命令（前提是你已经下载了node.js哦）， 再根据提示可选功能，进行选择，通过输入cd +你的项目名称进入项目目录后，输入npm install或npm i 进行安装依赖，最后运行起来 npm run dev。

项目结构

我这边创建了一个名为vue-base的项目文件：

1. public：这里是你的项目公开区域，任何东西都可以放在这里，比如你的网站图标（favicon.ico）和其他静态资源。
2. src：这是你的创作空间，所有的代码都在这里编写。App.vue是你的应用入口组件，main.js是你的应用主脚本，其他文件则负责配置和管理你的项目。
3. index.html：这是你的应用主页，虽然在Vue.js项目中它可能看起来很空，但它是所有内容的起点。
4. package-lock.json：这是一个自动生成的文件，记录了你在安装依赖时的具体版本信息。它可以确保每次安装依赖时都能得到相同的版本，避免因版本差异导致的问题。
5. package.json：这是你的项目说明书，包含了项目名称、版本、作者等基本信息，以及项目所依赖的包及其版本号。你可以把它想象成是你项目的身份证和购物清单。

在vue中实战一下

还是用之前的示例来写，实现计数器的加减，以下代码是写在App.vue里的

vue

代码解读

复制代码

<template> <div> <h1>{{ count }}</h1> <button @click="minus">-1</button> <button @click="add">+1</button> </div> </template> <script setup> import {ref} from 'vue' let count =ref(0) const minus=()=>{ count.value-- } const add =()=>{ count.value++ } </script> <style lang="css" scoped> </style>

<template>是模板部分，里用来写HTML的：

• <div>：一个容器元素，用于包裹整个组件的内容。
• <h1>{{ count }}</h1>：显示当前计数器的值。{{ count }}是一个插值表达式，表示将count变量的值插入到HTML中。
• <button @click="minus">-1</button> 和 <button @click="add">+1</button>：两个按钮，分别用于减少和增加计数器的值。@click是一个事件监听器，当点击按钮时会触发相应的函数。

<script setup>是脚本部分，也就是我们写js的地方：

• import { ref } from 'vue'：从Vue框架中导入ref函数，用于创建响应式引用。
• let count = ref(0)：使用ref创建了一个名为count的响应式引用，初始值为0。由于ref返回的是一个对象，所以我们通过.value属性来访问或修改其内部的值。
• const minus = () => { count.value-- }：当调用时会使count的值减一。
• const add = () => { count.value++ }：当调用时会使count的值加一。

<style scoped>是样式部分，也就是我们编写css样式的地方：

但是这里我并没有去编写，现在只是充当一个了解。 而其中的scoped属性意味着这些样式仅对当前组件生效，不会影响到其他组件。

• 运行结果

总结

通过原生JS代码和Vue的代码，我们能很清楚的看出，Vue的简洁高效，代码也是看的很优雅，没有像原生JS一样，写在一坨，尤其是在编译中大型项目的时候，使用Vue框架比原生JS方便好多，也好看好多，而且Vue里面有很多内置方法，很好用很好用很好用，不过前提是你对这个方法的熟悉。后续我也会持续学习，一起加油

原文链接：https://juejin.cn/post/7387613689563709452