写给前端初学者的Vue入门教程

最新推荐文章于 2024-04-19 10:18:52 发布

VIP文章刷题刷到手抽筋

最新推荐文章于 2024-04-19 10:18:52 发布

阅读量2.1k

点赞数

文章标签：前端 javascript vue

本文链接：https://blog.csdn.net/doomliu/article/details/124758375

版权

一、web应用开发

Vue是一款优秀的web应用开发框架，使用它可以让我们开发web应用时候更加高效。在学习Vue之前需要先了解一下web应用开发。

什么是web应用？当我们开发web应用时候，我们在写什么？

从用户角度，web应用是一个可以提供用户交互并呈现信息的软件。

用户在使用一个web应用的时候，可以通过点击、输入、滑动、语音等等与应用进行交互，控制应用。应用通过界面、音频方式给用户呈现信息，比如电商类应用，用户可以通过搜索和选择查看需要的商品信息；视频类应用，用户可以通过搜索和点击查看想要观看的影片；游戏类应用，用户可以通过滑动、点击等操作控制界面变化和游戏运作。

所以从用户角度，web应用要提供交互能力和信息展示。

从开发者角度，web应用程序是一种利用网络浏览器和网络技术在互联网上执行任务的计算机程序。

广义的web应用包括客户端和后端程序，这里我们特指网页前端程序。

传统的前端应用程序运行在浏览器中（这里暂不讨论跨端、小程序等领域）。

前端开发者实现一个web应用需要用到创建和改变界面（dom）的能力来给用户呈现预期的界面、网络通信能力（ajax、websocket）来控制和获取用户关心的数据。

因此，前端开发者开发web应用时候，就是在获取和控制数据，然后根据用户交互将信息展示在界面上。

二、前端框架

如果使用原生技术（html、js、css）开发web应用，会非常复杂，复杂度来源于：

需要进行大量dom操作。
代码复用，如何能够让通用的代码可以被复用，而不是在每次开发类似的功能时候都需要重新实现一遍。

这样就大大提升了开发的门槛，因为能很好地处理好上面的问题是不容易的。

如何解决上面两个问题呢？

首先看第一个问题，对于任意一个web应用，它的视图都是和数据对应的，当我们查看商品详情时候，我们需要先请求到对应商品的数据，然后将它的一系列属性（缩略图、名称、描述、价格、销量等等）展示到界面上，不同的商品数据不同，界面也就不同，但是界面的结构是一样的

我们不希望每次更换商品的时候都要进行一系列的dom操作，而希望声明数据和界面的关系，例如

<div>
  <img src={item.thumbnail} />
  <div>{
 {item.desc}}</div>
  <div>{
 {item.price}}</div>
  <div>{
 {item.sale}}</div>
</div>

我们希望当数据变更时候，界面能够自动更新渲染。

这样，我们只需要实现界面的结构和界面与数据的关系，然后再实现数据变化的逻辑，就可以完成一个功能了。

对于第二个问题，在大部分的web应用中，都会有一些通用的界面和逻辑，例如删除的二次确认弹窗

如果在一个应用内有很多删除的场景，比如在论坛类型的应用中，我们可能需要在首页删除自己的帖子，也需要在个人中心页面删除自己的帖子，我们希望删除的提示逻辑只实现一次，可以在首页和个人中心页面都能复用。这就是组件化解决的问题。

这个弹窗的取消和确定的按钮的样式相同，删除的逻辑也相同，我们把一段可复用的界面和逻辑的集合称为一个组件。一个提示弹窗是一个组件，一个按钮是一个组件，一个列表是一个组件，想上面提到的一个商品展示框也是一个组件。

我们通过给组件传入属性控制它的界面和行为，通过回调、事件等和它进行通信。

组件化还有另一个好处，当我们把一个应用拆分成一个个的组件时候，在开发时候只需要关心一个组件的内部逻辑和与外部的关系，能够让整个应用更易于维护和阅读。

综上，我们可以通过声明式渲染视图 + 组件化解决这两个问题。

目前主流的前端框架主要做了这两方面的工作，大大解放了生产力，让开发者可以更专注与业务逻辑而不用关心复杂的dom操作的实现和可能导致的bug，让开发者可以通过组件化实现通用代码复用和合理管理代码，减少代码量提升效率和质量。

下面通过几个Q&A加深对前端框架的理解：

什么是前端框架？：前端框架是规范了开发模式的js库，规范主要包括组件化，如何声明数据和视图的关系。

当开发者使用框架开发，是在写什么？主要是在写组件：通过写组件的视图实现界面，通过写组件的声明周期钩子函数实现业务逻辑。

为什么要用框架？框架简化了工作，能够降低开发大型应用的门槛。

框架做了哪些工作？根据数据和声明视图进行dom操作，进行实际的渲染，当数据更新后更新dom；根据开发者实现的组件构建整个界面。

有框架和无框架的区别（框架的好处）？声明式渲染避免了dom操作，只需要关心视图和数据的关系；框架组件化规范了项目组织方式，让代码更容易管理，而不会让代码纷杂混乱。

前端面试题库：灵题库-前端题库前端大厂面试题集https://www.lingtiku.com/

三、Vue基础

这里说明Vue基本用法和概念，更详细的内容查看官方文档。

1. 简单示例

使用vue开发应用，应用是由一个个的Vue组件组成的，我们用vue写应用就是在写一个个的Vue组件，一个vue组件定义了一个视图单元和这个视图对应的业务逻辑。

使用Vue开发应用，先要定义好组件，然后调用Vue的createApp将组件渲染。

Vue会根据传入的组件进行处理，构建组件树，渲染界面，执行逻辑。

先通过一个官网的例子看下Vue是如何让一个应用运行起来的：

<!DOCTYPE html>
<html>
<head>
    <title>vue-demo</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="counter"></div>
    <script>

        const Counter = {
            template: '<div> Counter: {
 { counter }}</div>',
            data() {
                return {
                    counter: 1
                }
            }
        }

        Vue.createApp(Counter).mount('#counter')


    </script>
</body>
</html>

效果如下：

可以看到，Vue通过createApp方法创建一个应用，并通过mount方法挂载到指定的dom节点上。

Vue的组件组件就是一个对象，可以看到这个组件包含template（组件的视图模板）和data（组件的数据），当然组件对象还包含其它的属性，后面会陆续接触到。

在渲染组件的时候，Vue会根据data数据替换模板中的变量，用变量实际的值渲染视图，示例中模板里面的"counter"变量就被替换成了组件data中的counter变量。

一般一个应用界面会有很多元素，我们在布局时候会把应用分成一个个的盒子，每个盒子里面还可能嵌套盒子，相应地，Vue组件可能有子组件，子组件可能还有子组件，形成一个树状的结构。

对于视图，最外层盒子包含着所有其他盒子，相应地，Vue组件树也有一个根组件。

这里的Counter是这个应用的根组件（目前只有一个组件）。

当执行Vue.createApp(Counter).mount('#counter');这句代码之后，Vue会创建应用，将组件解析并把对应的视图渲染到#counter节点上。后续数据变化后还会自动更新视图。

看一个数据改变，进而更新视图的示例

<!DOCTYPE html>
<html>
<head>
    <title>vue-demo</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="counter"></div>
    <script>
        const Counter = {
            template: '<div> Counter: {
 { counter }}</div>',
            data() {
                return {
                    counter: 1
                }
            },
            mounted() {
                setInterval((

最低0.47元/天解锁文章

刷题刷到手抽筋

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
写给前端初学者的Vue入门教程

一、web应用开发Vue是一款优秀的web应用开发框架，使用它可以让我们开发web应用时候更加高效。在学习Vue之前需要先了解一下web应用开发。什么是web应用？当我们开发web应用时候，我们在写什么？从用户角度，web应用是一个可以提供用户交互并呈现信息的软件。用户在使用一个web应用的时候，可以通过点击、输入、滑动、语音等等与应用进行交互，控制应用。应用通过界面、音频方式给用户呈现信息，比如电商类应用，用户可以通过搜索和选择查看需要的商品信息；视频类应用，用户可以通过搜索和
复制链接

扫一扫