邂逅Vue.js开发

news2024/11/23 10:45:14

1、认识Vue

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面渐进式 JavaScript框架

  • 全称是Vue.js或者Vuejs
  • 它基于标准 HTMLCSS JavaScript 构建,并提供了一套声明式的、组件化的编程模型;
  • 帮助你高效地开发用户界面,无论任务是简单还是复杂;

什么是渐进式框架呢?

表示我们可以在项目中一点点来引入和使用Vue,而不一定需要全部使用Vue来开发整个项目;

 

2、目前需要学习Vue3吗?

2020年的919日,万众期待的Vue3终于发布了正式版,命名为One Piece”

  • 更好的性能;
  • 更小的包体积;
  • 更好的TypeScript集成;
  • 更优秀的API设计

那么现在是否是学习vue3的时间呢?

  • 答案是肯定的
  • Vue3目前已经是稳定的版本,并且Vue3202227日已经成为默认安装版本;
  • 目前社区也经过一定时间的沉淀,更加的完善了,包括AntDesignVueElement-Plus都提供了对Vue3的支持,所以很多公司目前新的项目都已经在使用Vue3来进行开发了。
  • 并且在面试的时候,几乎都会问到各种各样Vue3相关的问题;

3、如何使用Vue

Vue的本质,就是一个JavaScript的库:

  • 刚开始我们不需要把它想象的非常复杂;
  • 我们就把它理解成一个已经帮助我们封装好的库;
  • 在项目中可以引入并且使用它即可。

那么安装和使用Vue这个JavaScript库有哪些方式呢?

  • 方式一:在页面中通过CDN的方式来引入;
  • 方式二:下载VueJavaScript文件,并且自己手动引入;
  • 方式三:通过npm包管理工具安装使用它
  • 方式四:直接通过Vue CLI创建项目,并且使用它;

4、方式一:CDN引入

Vue的CDN引入:

<script src="https://unpkg.com/vue@next"></script> 

<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>

    <h2>哈哈哈</h2>
    <p>我是内容, 呵呵呵呵</p>

    <div id="app"></div>

    <!-- CDN地址 -->
    <script src="https://unpkg.com/vue@next"></script>
    <script>
        // 使用Vue
        const app = Vue.createApp({
            template: `<h2>Hello World</h2><span>呵呵呵</span>`
        })
        // 挂载
        app.mount("#app")

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

5、方式二:下载和引入

下载Vue的源码,可以直接打开CDN的链接:

  • 打开链接,复制其中所有的代码;
  • 创建一个新的文件,比如vue.js,将代码复制到其中

通过script标签,引入刚才的文件:

<script src="../js/vue.js"></script>

<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"></div>

    <script src="./lib/vue.js"></script>
    <script>

        // 1.创建app
        const app = Vue.createApp({
            template: `<h1>Hello Vue</h1>`
        })

        // 2.挂载app
        app.mount("#app")

    </script>

</body>
</html>

6、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"></div>

    <script src="./lib/vue.js"></script>
    <script>
        const app = Vue.createApp({
            // 插值语法: {{title}}
            template: `<h2>{{ message }}</h2>`,
            data: function () {
                return {
                    title: "Hello World",
                    message: "你好啊, Vue3"
                }
            }
        })
        app.mount("#app")
    </script>
</body>
</html>

案例二:列表数据

<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"></div>

    <script src="./lib/vue.js"></script>
    <script>
        const app = Vue.createApp({
            template: `
              <h2>电影列表</h2>
              <ul>
              <li v-for="item in movies">{{ item }}</li>
              </ul>
            `,
            data: function () {
                return {
                    message: "你好啊, 李银河",
                    movies: ["大话西游", "星际穿越", "盗梦空间", "少年派", "飞驰人生"]
                }
            }
        })
        app.mount("#app")
    </script>
</body>
</html>

案例三计数器功能实现

<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>当前计数: {{counter}}</h2>
        <button @click="increment">+1</button>
        <button @click="decrement">-1</button>
    </div>

    <script src="./lib/vue.js"></script>
    <script>
        const app = Vue.createApp({
            data: function () {
                return {
                    counter: 0
                }
            },
            methods: {
                increment: function () {
                    this.counter++
                },
                decrement: function () {
                    this.counter--
                }
            }
        })
        app.mount("#app")
    </script>
</body>
</html>

原生实现计数器方式

<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>

    <h2>当前计数: <span class="counter"></span></h2>
    <button class="add">+1</button>
    <button class="sub">-1</button>

    <script>
        // 1.获取dom
        const h2El = document.querySelector("h2")
        const counterEl = document.querySelector(".counter")
        const addBtnEl = document.querySelector(".add")
        const subBtnEl = document.querySelector(".sub")

        // 2.定义一个变量记录数据
        let counter = 100
        counterEl.textContent = counter

        // 2.监听按钮的点击
        addBtnEl.onclick = function () {
            counter++
            counterEl.textContent = counter
        }
        subBtnEl.onclick = function () {
            counter--
            counterEl.textContent = counter
        }

    </script>

</body>
</html>

7、声明式和命令式

  • 原生开发和Vue开发的模式和特点,我们会发现是完全不同的,这里其实涉及到两种不同的编程范式
    • 命令式编程声明式编程
    • 命令式编程关注的是 “how to do自己完成整个how的过程;
    • 声明式编程关注的是 what to do,由框架(机器)完成 “how的过程;
  • 在原生的实现过程中,我们是如何操作的呢?
    • 我们每完成一个操作,都需要通过JavaScript编写一条代码,来给浏览器一个指令;
    • 这样的编写代码的过程,我们称之为命令式编程
    • 在早期的原生JavaScriptjQuery开发的过程中,我们都是通过这种命令式的方式在编写代码的;
  • Vue的实现过程中,我们是如何操作的呢?
    • 我们会在createApp传入的对象中声明需要的内容,模板template、数据data、方法methods;
    • 这样的编写代码的过程,我们称之为是声明式编程
    • 目前VueReactAngular、小程序的编程模式,我们称之为声明式编程

8、MVVM模型

  • MVCMVVM都是一种软件的体系结构
    • MVCModel View –Controller的简称,是在前期被使用非常框架的架构模式,比如iOS、前端;
    • MVVMModel-View-ViewModel的简称,是目前非常流行的架构模式;
  • 通常情况下,我们也经常称Vue是一个MVVM的框架。
    • Vue官方其实有说明,Vue虽然并没有完全遵守MVVM的模型,但是整个设计是受到它的启发的。

 

9、data属性

  • data属性是传入一个函数,并且该函数需要返回一个对象:
    • Vue2.x的时候,也可以传入一个对象(虽然官方推荐是一个函数);
    • Vue3.x的时候,必须传入一个函数,否则就会直接在浏览器中报错;
  • data中返回的对象会被Vue的响应式系统劫持,之后对该对象的修改或者访问都会在劫持中被处理:
    • 所以我们在template或者app通过 {{counter}} 访问counter,可以从对象中获取到数据
    • 所以我们修改counter的值时,app中的 {{counter}}也会发生改变
<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>
    <button @click="changeMessage">改变message</button>
  </div>
  
  <script src="./lib/vue.js"></script>
  <script>
    const app = Vue.createApp({
      // data: option api
      data: function() {
        return {
          message: "Hello Data"
        }
      },
      // methods: option api
      methods: {
        changeMessage: function() {
          this.message = "你好, 师姐!"
        }
      }
    })

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

10、methods属性

  • methods属性是一个对象,通常我们会在这个对象中定义很多的方法:
    • 这些方法可以被绑定到 模板中;
    • 在该方法中,我们可以使用this关键字来直接访问到data中返回的对象的属性;
  • 对于有经验的同学,在这里我提一个问题,官方文档有这么一段描述:
    • 问题一:为什么不能使用箭头函数(官方文档有给出解释)?
    • 问题二:不使用箭头函数的情况下,this到底指向的是什么?(可以作为一道面试题)

<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>当前计数: {{counter}}</h2>
        <button @click="increment">+1</button>
    </div>

    <script src="./lib/vue.js"></script>
    <script>

        console.log(this)

        const app = Vue.createApp({
            data: function () {
                return {
                    counter: 0
                }
            },

            // methods: option api
            methods: {
                // 方式一:
                increment: function () {
                    this.counter++
                },
                // 方式二:es6写法
                // increment() {}

                // 强调: methods中函数不能写成箭头函数
                // increment: () => {
                //   console.log(this)
                // }
            }
        })

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

 

11、问题

问题一:不能使用箭头函数?

  • 我们在methods中要使用data返回对象中的数据:
    • 那么这个this是必须有值的,并且应该可以通过this获取到data返回对象中的数据
  • 那么我们这个this能不能是window呢?
    • 不可以是window,因为window中我们无法获取到data返回对象中的数据;
    • 但是如果我们使用箭头函数,那么这个this就会是window了;
  • 为什么是window呢?
    • 这里涉及到箭头函数使用this的查找规则,它会在自己的上层作用于中来查找this
    • 最终刚好找到的是script作用于中的this,所以就是window

问题二:this到底指向什么?

事实上Vue的源码当中就是对methods中的所有函数进行了遍历,并且通过bind绑定了this

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/165217.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

学习笔记 一天学完JavaScript基础语法(全)

JavaScript 文章目录JavaScript第一章——初始JavaScript1.1 浏览器执行 JS 简介1.2 JS的组成1.2.1 ECMAScript1.2.2 DOM ——文档对象模型1.2.3 BOM ——浏览器对象模型1.3 JS的写法1.3.1 行内式写法1.3.2 内嵌式写法1.3.3 外部js文件1.4 注释1.5 变量1.5.1 变量声明1.5.2 变量…

【源码解析】Nacos配置中心的源码解析

POM文件添加依赖 <dependency><groupId>com.alibaba.cloud</groupId><artifactId>spring-cloud-starter-alibaba-nacos-config</artifactId> </dependency>在依赖中查看自动装配文件spring.factories org.springframework.cloud.bootstr…

String类详解

在Java编程中&#xff0c;除Object类外&#xff0c;最常用的类就是String类了。本文将从String类源码出发&#xff0c;对String类进行一个全面的分析&#xff0c;以帮忙我们更好的理解和使用String类。 String类概述 Java 使用 String 类代表字符串。Java 中的所有字符串字面…

已解决MemoryError

已解决Python读取20GB超大文件报错&#xff1a;MemoryError 文章目录报错问题报错翻译报错原因解决方法1解决方法2&#xff08;推荐使用&#xff09;帮忙解决报错问题 日常数据分析工作中&#xff0c;难免碰到数据量特别大的情况&#xff0c;动不动就2、3千万行&#xff0c;…

Linux——网络配置篇

1、前情提要&#xff1a; 今晚在配置Linux &#xff08;CentOS7完整版&#xff09;的时候 明明已经配好了网络环境&#xff0c;重启虚拟机后&#xff0c;又出现了Ping不通 主机、Ping不通网关&#xff0c;外网的情况 &#xff08;NAT&#xff09;。 让我很费解的一个情况是&am…

数据结构与算法基础(王卓)(8):线性表的应用

PPT&#xff1a;第二章P173&#xff1b; 并集集合&#xff1a;线性表的合并&#xff08;无需有序&#xff0c;不能重复&#xff09; 线性表&#xff1a; Status Union(Sqlist& A, Sqlist& B)//并集 {int len_A A.length;int len_B B.length;for (int i 1; i < …

SpringCloud学习(1)

SpringCloud学习 软件架构演进之路 对于单体架构&#xff0c;我们根据设计期和开发实现期的不同模式和划分结构&#xff0c;可以分为&#xff1a; 简单单体模式&#xff1a; 代码层面没有拆分&#xff0c;所有的业务逻辑都在一个项目&#xff08;Project&#xff09;里打包…

​力扣解法汇总2293. 极大极小游戏

目录链接&#xff1a; 力扣编程题-解法汇总_分享记录-CSDN博客 GitHub同步刷题项目&#xff1a; https://github.com/September26/java-algorithms 原题链接&#xff1a; 力扣 描述&#xff1a; 给你一个下标从 0 开始的整数数组 nums &#xff0c;其长度是 2 的幂。 对 n…

伪随机码序列

伪随机码又称伪随机序列&#xff0c;是用确定性方法产生的在一段周期内具有类似白噪声的随机特性的二&#xff08;或多&#xff09;进制数据序列。 伪随机序列在码分复用、码分多址和扩频通信中都有重要应用。常用的伪随机序列有m序列、M序列和Gold序列。 作为地址码和扩频码…

pycharm中commit/push撤销+分支合并

一、现在想撤销到打印3怎么操作&#xff1f; 1复制修订号 2鼠标右键 3去项目下执行git bash here&#xff0c;再输入git push -f 4此时&#xff0c;github中的push就已经回退成功&#xff1b;再进行一次新代码的commit和push&#xff0c;master分支的颜色就变成黄色了&#x…

Windows中安装 MySQL8.0.30 数据库

下载安装文件 访问MySQL官网下载安装文件https://downloads.mysql.com/archives/community/。 如下图所示&#xff0c;点击页面中的“DOWNLOAD”按钮。 然后&#xff0c;会出现如下所示页面&#xff0c;点击页面底部的“No thanks, just start my download”&#xff0c;就可…

Vue3商店后台管理系统设计文稿篇(四)

记录使用vscode构建Vue3商店后台管理系统&#xff0c;这是第四篇&#xff0c;主要记录使用git与vscode将代码同步提交到GitHub上面 文章目录一、Git与Github建立连接二、配置开发工具三、实用Git命令仓库相关命令分支相关命令正文内容&#xff1a; 一、Git与Github建立连接 使…

从0到1【建站:AWS+Ubuntu+Python+Django+uwsgi+nginx+ssl】

目录一、创建服务器1、进入AWS官网2、启动实例3、创建新密钥对4、选择密钥对5、网络设置6、配置存储7、启动实例8、查看实例9、配置安全组二、连接服务器1、在AWS官网进行连接2、使用Xshell7进行连接3、设置允许root登录三、域名解析1、进行腾讯云官网2、管理域名解析3、绑定公…

xilinx ZYNQ 7000 XADC 片上模拟转数字模块

上图所示&#xff0c;XADC 属于 PL部分的资源 XADC是一种硬逻辑实现&#xff0c;位于PL功率域。PS- xadc接口是PS的一部分&#xff0c;可以被PS APU访问&#xff0c;而不需要对PL进行编程。PL必须上电才能配置PS-XADC接口、使用PL- jtag或DRP接口以及操作XADC。 上面的机构图能…

通关算法题之 ⌈回溯算法⌋

回溯算法 子集组合排列 78. 子集 给你一个整数数组 nums&#xff0c;数组中的元素互不相同 &#xff0c;返回该数组所有可能的子集&#xff08;幂集&#xff09;。解集不能包含重复的子集&#xff0c;你可以按任意顺序 返回解集。 输入&#xff1a;nums [1,2,3] 输出&…

LeetCode 5. 最长回文子串

&#x1f308;&#x1f308;&#x1f604;&#x1f604; 欢迎来到茶色岛独家岛屿&#xff0c;本期将为大家揭晓LeetCode 5. 最长回文子串&#xff0c;做好准备了么&#xff0c;那么开始吧。 &#x1f332;&#x1f332;&#x1f434;&#x1f434; 一、题目名称 LeetCode 5…

1590_AURIX_TC275_PMU_Flash的操作

全部学习汇总&#xff1a; GreyZhang/g_TC275: happy hacking for TC275! (github.com) 这里提到的这个复位读取操作&#xff0c;复位的对象其实是当前的操作&#xff0c;也就是命令序列。主要是命令序列的最后一个命令还没有被接收到&#xff0c;都可以被这个命令中断。在复位…

目标检测:特征金字塔网络(Feature Pyramid Network)

目标检测&#xff1a;特征金字塔网络&#xff08;Feature Pyramid Network&#xff09;概述核心思想概述 由于在目标检测任务中&#xff0c;对与大目标的检测&#xff0c;需要feature map每个点的感受野大一点&#xff08;高层语义特征&#xff09;&#xff0c;对于小目标&…

GPIO 八种工作模式及其硬件框图

参考资料: STM32F1xx 官方资料:《STM32中文参考手册V10》- 第 8 章通用和复用功能 IO(GPIO 和 AFIO) GPIO 是通用输入/输出端口的简称,是 STM32 可控制的引脚。GPIO 的引脚与外部硬件设备连接,可实现与外部通讯、控制外部硬件或者采集外部硬件数据的功能。 STM32 的八种 …

图像融合笔记(一):RFN-Nest

RFN-NestAbstractIntroductionRelated worksThe proposed fusion frameworkThe architecture of the fusion networkTwo-stage training strategy论文&#xff1a; RFN-Nest: An end-to-end residual fusion network for infrared and visible images代码&#xff1a; https://…