likes
comments
collection
share

开启前端设计新时代——Vue小白入门指令使用

作者站长头像
站长
· 阅读数 28

前言

在当今这个快速迭代的互联网时代，前端技术的发展日新月异，为用户提供更加丰富、流畅的交互体验成为每一个Web开发者的追求。正是在这样的背景下，Vue.js应运而生，迅速崛起成为前端开发领域的明星框架之一。

正文

vue介绍

Vue（读音 /vjuː/，类似于“view”）是一个轻量级且强大的JavaScript框架，它旨在通过最简化的API设计，让开发者能够以声明式的方式构建用户界面。自2014年问世以来，Vue凭借其易上手、灵活高效的特点，吸引了全球范围内无数开发者的青睐，无论是小型项目快速原型制作，还是大型企业级应用的开发维护，Vue都能游刃有余。

Vue的核心设计理念是“让数据驱动视图”，它通过一个直观的模板语法将数据绑定到DOM，并自动追踪依赖变化，确保用户界面总是反映最新的数据状态。这种模式极大地简化了状态管理与界面更新的复杂度，使开发者能够更专注于业务逻辑的实现。

此外，Vue提倡组件化开发思想，鼓励将用户界面拆分成可复用的组件，每个组件都有自己的视图和逻辑，这不仅提升了代码的重用率，也便于团队协作和项目的长期维护。结合其强大的生态系统，如Vue Router用于路由管理、Vuex处理全局状态、Vue CLI简化项目搭建流程等，Vue提供了一整套解决方案，帮助开发者高效构建现代Web应用。

vue特点

  1. 数据驱动与响应式系统：Vue采用数据驱动的方式，允许开发者通过声明式地定义数据模型，自动保持视图与数据同步。当数据变化时，Vue能智能地计算出重新渲染组件的最小代价并应用到DOM上，这一过程得益于其高效的响应式机制。
  2. 组件化架构：Vue鼓励采用组件化的方式来构建界面，每个组件都包含模板、逻辑和样式，这不仅提高了代码的可复用性和可维护性，也让复杂的UI结构变得易于管理。
  3. 虚拟DOM：Vue使用虚拟DOM来提高页面的更新效率。虚拟DOM是一个轻量级的内存中表示，Vue在此基础上计算出实际DOM的最小变更集，从而减少不必要的DOM操作，提升性能。
  4. 易学易用：Vue有着极其简洁的API设计，使得开发者能够快速上手并投入到实际开发中。即便是对于新手来说，Vue的学习曲线也相对平缓。
  5. 工具链支持：Vue生态丰富，提供了如Vue CLI这样的现代化工具链支持，帮助开发者快速搭建项目、进行代码 linting、热模块替换等高级功能，同时也无缝对接Webpack、Babel等前端构建工具。
  6. 灵活性与集成性：Vue既可以作为一个库被逐步引入到现有项目中，增强部分交互体验，也能够作为一套完整的框架来驱动复杂的单页应用（SPA）。它对其他库和已有项目保持着高度的开放性和友好性，易于集成。
  7. 服务端渲染与SEO：Vue支持服务器端渲染（SSR），这对于需要良好搜索引擎优化的应用来说至关重要，它能够预先渲染页面的内容，使得爬虫能够抓取完整的信息。
  8. 强大的社区与生态系统：Vue拥有一个活跃的开发者社区，不断产出高质量的插件、组件库和最佳实践，如Vuex用于状态管理，Vue Router用于路由管理，Vue Test Utils和Jest等用于测试。

Vue的使用

关于vue的细节使用，我们可以到其官网cn.vuejs.org/guide/intro…，查看其具体使用方法，当然也可以跟着我开始探寻vue之美

我们打开文件夹，在终端输入

npm create vue@latest

开启前端设计新时代——Vue小白入门指令使用

接着我们输入项目名称

在这里我们先全选否，但是这些功能我们开发功能是需要用到的，后续我的文章中都会讲解

开启前端设计新时代——Vue小白入门指令使用

第一行cd 文件名是讲你的终端位置移动到该文件夹下

再运行第二行npm install下载相关依赖文件

第三行npm run dev是在本地运行该项目

开启前端设计新时代——Vue小白入门指令使用

本地便会分配一个接口给该项目进行调试

进入该接口，便会得到初始化的vue项目

开启前端设计新时代——Vue小白入门指令使用

而这个初始界面正是通过src文件夹下的App.vue和main.js展现的。

接下来我们通过一个小demo来讲解vue的界面展示方法

我们先写一个非常简单的加减数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <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>
</body>
</html>

开启前端设计新时代——Vue小白入门指令使用 点击+1则数字+1，点击-1则数字-1

开启前端设计新时代——Vue小白入门指令使用

而Vue 3鼓励组件化编程，允许开发者将界面拆分为可复用的小部件，每个组件包含自己的模板、逻辑和样式。这极大提高了代码的复用性和可维护性，而HTML本身并不直接支持组件的概念。

那么我们使用vue来写一下这个页面

先将src文件夹里的componet和assets文件夹先删掉，里面是初始化页面的一些组件

然后将main.js里的第一行删掉

import { createApp } from 'vue'是从Vue库中导入createApp方法。createApp是Vue 3引入的一个新方法，用于创建Vue应用的实例

import App from './App.vue'是从当前目录下的App.vue文件导入一个名为App的Vue组件。.vue文件是Vue单文件组件的格式，它允许我们将HTML模板、JavaScript逻辑和CSS样式封装在一个文件中，便于组织和管理。App.vue通常是Vue应用的主组件，包含了应用的基本结构和布局。

createApp(App).mount('#app')是使用上面导入的createApp方法创建了一个Vue应用实例，并通过调用该实例的mount方法将其挂载到HTML文档中的一个具有指定ID的元素上——在这个例子中，这个ID是app。换句话说，这行代码会查找页面上ID为app的DOM元素，并将Vue应用渲染到这个元素内。

接着我们去到App.vue中写主组件

再次之前，先将里面的代码都删除，然后我们在vscode中下载Visual Studio Code + Vue - Official 扩展方便自己的vue编程

然后我们输入快捷指令vb3s便会出来一个Vue3组合式初始化代码

<template>
  <div>

  </div>
</template>

<script setup>

</script>

<style lang="scss" scoped>

</style>

这就是我们熟悉的三件套模块了

我们先将页面写到template模块

<template>
    <h2 id="h2">0</h2>
    <button id="minus">-1</button>
    <button id="add">+1</button>
</template>

Vue提供了指令（如v-if, v-for, v-bind, v-on等），使得在模板中添加逻辑变得简单直观，无需编写大量的JavaScript代码。

我们可以在button标签中直接加入点击事件

<template>
    <h2 id="h2">{{0}}</h2>
    <button id="minus" @click="minus">-1</button>
    <button id="add" @click="add">+1</button>
</template>

用@click="函数名"就会在点击该标签后运行该函数

函数我们在下方的<script>标签里写

<script setup>
  let count = 0
  const minus = () => {
    count.value--
  }
  const add = () => {
    count.value++
  }
</script>

但是我们发现这个count并不会变化，而这里我们就需要用到另一个特性

响应式

Vue 3通过其响应式系统（如使用ref和reactive），实现了数据与视图之间的自动同步。这意味着当数据发生变化时，Vue会自动更新相关的DOM元素，而不需要手动操作DOM

我们先引入ref包，然后给count添加ref属性

<script setup>
import { ref } from 'vue'
  let count = ref(1)
  const minus = () => {
    count.value--
  }
  const add = () => {
    count.value++
  }
</script>

总结

Vue 3不仅仅是一个用来渲染视图的工具，它是一套完整的解决方案，旨在简化复杂的Web应用开发，提高开发效率和用户体验，这是传统HTML难以比拟的。

求点赞评论收藏，有问题随时私信博主！

转载自:https://juejin.cn/post/7386102969258262537
评论
请登录