vue学习的预备知识为学好vue打好基础

目录

    • Vue是什么 ？
    • 如何使用Vue ？
    • Vue Api
      • Vue入口api
      • Vue实例api
      • Vue函数api
    • 无构建过程的渐进式增强静态HTML
    • Vue模块化构建工具
    • npm
    • yarn
    • Webpack
    • vue-cli
    • Vite

Vue是什么 ？

文章基于Vue3叙述。

Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。 1

  1. Js框架：Vue是一套Javascript框架用于构建页面
  2. 声明式渲染：Vue 基于标准 HTML 拓展了一套模板语法，使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。
  3. 响应性：Vue 会自动跟踪 JavaScript 状态并在其发生变化时响应式地更新 DOM。
  4. 渐进式框架：Vue 的设计非常注重灵活性和“可以被逐步集成”，引入即用。

如何使用Vue ？

本文均基于选项式 API，对于组合式api可以自行了解

在这里插入图片描述

Vue官方提供了多种Vue使用方式，最常见的还是无需构建的纯HTML，和单页面（SPA）与单文件组件（SFC）的构建使用方式。

再最新的Vue3中提供了两种vue语法，分别是：选项式 API 和组合式 API。其主要不同集中在script

  • 选项式api
<script>
export default {// reactive statedata() {return {count: 0}},// functions that mutate state and trigger updatesmethods: {increment() {this.count++}},// lifecycle hooksmounted() {console.log(`The initial count is ${this.count}.`)}
}
</script><template><button @click="increment">Count is: {{ count }}</button>
</template>
  • 组合式api
<script setup>
import { ref, onMounted } from 'vue'// 响应式状态
const count = ref(0)// 用来修改状态、触发更新的函数
function increment() {count.value++
}// 生命周期钩子
onMounted(() => {console.log(`The initial count is ${count.value}.`)
})
</script><template><button @click="increment">Count is: {{ count }}</button>
</template>

可见组合式api最贴切原生js。

了解大致的不同就可以选择一种学习了，另外对于vue的使用使用构建工具会稍微复杂一些还需要学习其他知识。

Vue对HTML,CSS,JS的扩展，Vue框架是前端开发更容易得力功能的扩展，具体如下：

  1. 每个 Vue 应用都是通过 createApp 函数创建一个新的 应用实例：
import { createApp } from 'vue'const app = createApp({/* 根组件选项 */
})
  1. Vue实例挂在到html
// 部分内容省略
// html
<div id="app"></div>// js
app.mount('#app')

应用根组件的内容将会被渲染在容器元素里面。容器元素自己将不会被视为应用的一部分。

在这里插入图片描述
3. vue实例暴露配置

应用实例会暴露一个 .config 对象允许我们配置一些应用级的选项

app.config.errorHandler = (err) => {/* 处理错误 */
}
  1. vue扩展html模板组件

vue提供了自己的语法实现声明式与响应式，这个模板可以在html的任何地方被使用，由于无构建vue使用没有单文件组件，却提供了template语法以类似innerHtml的方式以js方式构建模板，且提供app.component()全局注册。

app.component('TodoDeleteButton', TodoDeleteButton)
  1. vue扩展html支持多实例

应用实例并不只限于一个。createApp API 允许你在同一个页面中创建多个共存的 Vue 应用，而且每个应用都拥有自己的用于配置和全局资源的作用域。

const app1 = createApp({/* ... */
})
app1.mount('#container-1')const app2 = createApp({/* ... */
})
app2.mount('#container-2')
  1. vue扩展js实用功能

在使用vue式所有js都要写在vue实例中，不然就是原生的js，在vue中的js实现了一个vue实例的对象，严格遵循ES6规范。

<script type="module">
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'createApp({data() {return {message: 'Hello Vue!'}}
}).mount('#app')

在上述代码中{ data(){} }是一个对象，data()是类的方法，createApp通过传入的配置类创建了一个vue实例。

该方式也叫vue的选项式api。类的方法被用作定义vue的实例的具体方法，后续简称api。

经过上述描述已经学会使用data()和{{}}模板显示简单数据，下一节来介绍更多api，更灵活运用vue。

Vue Api

vue是vue配置类对js的封装实现了vue的声明式和响应式功能，也是vue的基础，学会vue api更灵活使用vue。

api大全

官网入口在这里：应用实例 API

在这里插入图片描述

Vue入口api

在cdn中是Vue，通过Vue引入createApp方法

const { createApp } = VuecreateApp({data() {return {message: 'Hello Vue!'}}
}).mount('#app')

在es6模块也引入createApp方法

<script type="module">
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'createApp({data() {return {message: 'Hello Vue!'}}
}).mount('#app')

入口api用于创建vue实例

version指代vue版本

import { version } from 'vue'console.log(version)

Vue实例api

app.mount()将应用实例挂载在一个容器元素中，是页面使用vue的基础

app.component()全局注册组件，用于vue模板语法

app.use()vue实例扩展插件，整合其他js框架的接口

app.config每个应用实例都会暴露一个 config 对象，其中包含了对这个应用的配置设定

app.config.errorHandler用于为应用内抛出的未捕获错误指定一个全局处理函数

app.config.globalProperties一个用于注册能够被应用内所有组件实例访问到的全局属性的对象

在这里插入图片描述

Vue函数api

  • data()定义数据初始值的api，所有会用到的顶层数据属性都应该提前在这个对象中声明。
data() {return {message: 'Hello Vue!'}
}
  • props用于声明一个组件的 props

该属性用于组件通讯详情

  • computed用于声明要在组件实例上暴露的计算属性

  • methods用于声明方法的api，所有的方法都要在接口实现

  • watch用于声明在数据更改时调用的侦听回调

  • emitsvue子组件与父组件共享数据(自定义事件)

  • template用于声明组件的字符串模板，vue提供的类innerHtml方法用于打造vue的模板语法，用来替代单文件组件（无构建过程使用方式）

template声明在最外层代表会取代挂载的DOM也就是mount('#app')挂载的结构。一般用于组件注册处代替单文件组件。

  • render用于编程式地创建组件虚拟 DOM 树的函数。

  • 声明周期及钩子函数，如下

在这里插入图片描述

从组件初始化到销毁过程的函数。后续详细介绍。

  • name用于显式声明组件展示时的名称。

  • components用于注册对当前组件实例可用的组件

  • this泛指组件实例，暴露实例可访问属性

在这里插入图片描述

在这里插入图片描述

无构建过程的渐进式增强静态HTML

不建议使用该种方式，模块化开发时趋势，使用node及相关构建工具是行业趋势。

使用上述方式使用vue需要了解什么式CDN2。有了CDN后才可以获取这个资源从而使用这个框架，例如使用vue框架式，vue就是一个javascript库（就是vue.js），引入后才可以使用这个框架来构建vue项目。

除了使用cdn外还可以直接将资源（vue.js）下载到本地直接使用，但是要注意及时更新。

CDN引入方式：

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

cdn方式使用vue是有一定缺陷的，如下

在这里插入图片描述
单文件组件就是以.vue结尾的文件，内含vue语法，构建过程会将vue组件解析为html，css，js等文件，没有构建

如下所示就是html中使用vue的案例：

<!DOCTYPE html>
<html><head><meta><title>vue-test</title><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script></head><body><h1>Vue-Example</h1><div id="app">{{ message }}</div></body><script>const { createApp } = VuecreateApp({data() {return {message: 'Hello Vue!'}}}).mount('#app')</script>
</html>

现在大多数浏览器已经支持ES6语法，通过javascript也可以引入cdn，如下所示：

<!DOCTYPE html>
<html><head><meta><title>vue-test</title></head><body><h1>Vue-Example</h1><div id="app">{{ message }}</div></body><script type="module">import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'createApp({data() {return {message: 'Hello Vue!'}}}).mount('#app')</script>
</html>

注意<script type="module">的module开启es6模块化开发

推荐使用es6模块引入，模块化开发式趋势，旧的<script>标签不够灵活。

在前面说到无构建过程使用vue是无法使用vue单文件组件的，如下

<!DOCTYPE html>
<html><head><meta><title>vue-test</title></head><body><h1>Vue-Example</h1><div id="app">{{ message }}</div><H1></H1></body><script type="module">import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'import Hi from './component/hello.vue'createApp({data() {return {message: 'Hello Vue!'}},components:{Hi}}).mount('#app')</script>
</html>

在这里插入图片描述

在这里插入图片描述

基于http的工作方式在构建式vue开发叙述。

现代浏览器大多都支持ES6语法，主流都走向了以node为基础的模块化开发，此处基于CDN引入的方式不再过多介绍。

Vue模块化构建工具

npm

node是使javascript脱离浏览器运行的环境。npm是在node环境下管理js公共模块包的包管理工具。

什么是 npm —— 写给初学者的编程教程

在这里插入图片描述

在这里插入图片描述

npm中文文档

npm

  • npm init 创建一个 package.json 文件
  • npm install安装一个包

node

了解了node和npm后可以知道，vue的模块开发需要两个环境，第一是脱离浏览运行的ES6环境就是node，第二需要npm来进行包管理。

yarn

Yarn是facebook发布的一款取代npm的包管理工具。

在这里插入图片描述

npm是node内置包管理工具，因此使用yarn也需要借助npm安装。

yarn中文网

npm install --global yarn

在这里插入图片描述
在这里插入图片描述
yarn run运行定义在package.json的script配置的脚本

yarn-cli

yarn官网

Webpack

webpack是基于node开发项目的包管理工具，用于管理ES6项目，可以是前端也可以是后端项目，js项目均可，也提供了对vue的支持，是一个全能的用于现代 JavaScript 应用程序的 静态模块打包工具。

webpack中文网

webpack中文文档

使用npm init命令可以构建一个简单的js模块，但是使用框架类似于vue框架简单的结构不再满足，使用webpack工具管理大型项目有助于提高效率。

在这里插入图片描述

前端开发这要学好哈，小编是后端，学学vue工作需要，就不再过多深入了，主要介绍vue官方提供的工具，看后两节。

vue-cli

vue-cli官网

vue-cli是基于webpack的vue项目构建工具

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

参考官方网站安装脚手架，vue-cli提供了两种创建项目的方式：

# 基于【命令行】的方式创建
vue create [项目名称]# 基于vue UI【可视化面板】方式创建
vue ui
  1. 在终端下运行 vue ui 命令，自动在浏览器中打开创建项目的可视化面板

在这里插入图片描述

  1. 在详情页面填写项目名称：

在这里插入图片描述

  1. 在预设页面选择手动配置项目

在这里插入图片描述

  1. 在功能页面勾选需要安装的功能（Choose Vue Version、Babel、CSS 预处理器、使用配置文件）

在这里插入图片描述

  1. 在配置页面勾选 vue 的版本和需要的预处理器

在这里插入图片描述

  1. 将刚才所有的配置保存为预设（模板），方便下一次创建项目时直接复用之前的配置

在这里插入图片描述

  1. 项目创建完成后，自动进入项目仪表盘

在这里插入图片描述

vue ui实际也是使用vue命令行创建。

随着vue3的发展vue官方提供vue全套的开发及构建工具vite，更方便的构建vue项目。推荐使用vite移步下一节。

Vite

vue3速成教程

vite中文官方文档

vite学习笔记

会使用vite创建vue项目就可以上手开发啦。

  1. 引用自vue官网 ↩︎

  2. CDN的全称是Content Delivery Network，即内容分发网络。CDN是构建在现有网络基础之上的智能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术。 ↩︎

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

十大USDT交易平台大全XEX交易所

十大USDT交易平台大全XEX交易所

USDT是一种基于比特币区块链网络的加密代币&#xff0c;主要运用于数字货币交易平台&#xff0c;以稳定币为主。USDT的核心价值在于其与真实货币的固定兑换比率1:1&#xff0c;所以被称为Tether。随着加密货币市场的不断壮大&#xff0c;越来越多的交易平台开始支持USDT&#x…
阅读更多...
2024深圳杯（东北三省）数学建模C题完整论文讲解（含完整python代码及所有残骸音爆位置求解结果）

2024深圳杯（东北三省）数学建模C题完整论文讲解（含完整python代码及所有残骸音爆位置求解结果）

大家好呀&#xff0c;从发布赛题一直到现在&#xff0c;总算完成了2024深圳杯&#xff08;东北三省数学建模联赛&#xff09;A题多个火箭残骸的准确定位完整的成品论文。 本论文可以保证原创&#xff0c;保证高质量。绝不是随便引用一大堆模型和代码复制粘贴进来完全没有应用糊…
阅读更多...
【vscode环境配置系列】vscode远程debug配置

【vscode环境配置系列】vscode远程debug配置

VSCODE debug环境配置 插件安装配置文件debug 插件安装 安装C/C, C/C Runner 配置文件 在项目下建立.vscode文件夹&#xff0c;然后分别建立c_cpp_properties.json&#xff0c; launch.json&#xff0c;tasks.json&#xff0c;内容如下&#xff1a; c_cpp_properties.json:…
阅读更多...
如何解决pycharm创建项目报错 Error occurred when installing package ‘requests‘. Details.

如何解决pycharm创建项目报错 Error occurred when installing package ‘requests‘. Details.

&#x1f42f; 如何解决PyCharm创建项目时的包安装错误&#xff1a;‘requests’ &#x1f6e0;️ 文章目录 &#x1f42f; 如何解决PyCharm创建项目时的包安装错误&#xff1a;requests &#x1f6e0;️摘要引言正文&#x1f4d8; **问题分析**&#x1f680; **更换Python版本…
阅读更多...
如何利用快解析软件搭建映射端口

如何利用快解析软件搭建映射端口

端口映射&#xff0c;就是将内网中主机的一个端口映射到外网主机的一个端口&#xff0c;提供相应的服务&#xff0c;当用户访问外网IP的这个端口时&#xff0c;服务器自动将请求映射到对应局域网内部的机器上。如何才能实现端口映射&#xff1f;今天小编给大家介绍两种方法&…
阅读更多...
fetch请求后端返回文件流，并下载。

fetch请求后端返回文件流，并下载。

前端&#xff1a; <script src"~/layui/layui.js"></script> <script src"~/Content/js/common/js/vue.min.js"></script> <script src"~/Content/js/common/js/jquery-1.10.2.min.js"></script><styl…
阅读更多...
QT学习篇—qt软件安装

QT学习篇—qt软件安装

qt下载网址http://download.qt.io/new_archive/qt/ QT官网Qt | Tools for Each Stage of Software Development LifecycleAll the essential Qt tools for all stages of Software Development Lifecycle: planning, design, development, testing, and deployment.https:…
阅读更多...
虚拟机扩容-根目录挂载sda1的空间不足

虚拟机扩容-根目录挂载sda1的空间不足

提醒&#xff01;不管成不成功&#xff0c;一定要先备份一份虚拟机&#xff01;&#xff01;&#xff01;&#xff01;&#xff01; 走过路过点个关注吧&#xff0c;想到500粉丝&#xff0c;哭。一、查看分区情况 df -h可以看到/dev/sda1已经被占满了 2.关闭虚拟机&#xff…
阅读更多...
TinyShell后门通信模型剖析

TinyShell后门通信模型剖析

TinyShell后门通信模型剖析 通过对TinyShell后门的外联通信函数进行剖析&#xff0c;梳理其通信过程如下&#xff1a; 调用gettimeofday函数及getpid函数获取当前时间tv及进程pid&#xff0c;将tv和pid作为SHA1算法的输入&#xff0c;生成得到20字节的IV1数据调用gettimeofda…
阅读更多...
OpenHarmony实战开发-使用通用事件、焦点事件

OpenHarmony实战开发-使用通用事件、焦点事件

基本概念 焦点 指向当前应用界面上唯一的一个可交互元素&#xff0c;当用户使用键盘、电视遥控器、车机摇杆/旋钮等非指向性输入设备与应用程序进行间接交互时&#xff0c;基于焦点的导航和交互是重要的输入手段。 默认焦点 应用打开或切换页面后&#xff0c;若当前页上存在…
阅读更多...
工业异常检测

工业异常检测

工业异常检测在业界和学界都一直是热门&#xff0c;近期其更是迎来了全新突破&#xff1a;与大模型相结合&#xff01;让异常检测变得更快更准更简单&#xff01; 比如模型AnomalyGPT&#xff0c;它克服了以往的局限&#xff0c;能够让大模型充分理解工业场景图像&#xff0c;判…
阅读更多...
SpringMVC基础篇（四）

SpringMVC基础篇（四）

文章目录 1.视图1.基本介绍1.视图介绍2.为什么需要自定义视图 2.自定义视图实例1.思路分析2.代码实例1.view.jsp2.接口3.配置自定义视图解析器springDispatcherServlet-servlet.xml4.自定义视图MyView.java5.view_result.jsp6.结果展示 3.自定义视图执行流程4.自定义视图执行流…
阅读更多...
比较美观即将跳转html源码

比较美观即将跳转html源码

源码介绍 比较美观即将跳转html源码&#xff0c;源码由HTMLCSSJS组成&#xff0c;记事本打开源码文件可以进行内容文字之类的修改&#xff0c;双击html文件可以本地运行效果&#xff0c;也可以上传到服务器里面 源码截图 比较美观的一个跳转界面&#xff0c;修改方法如上&…
阅读更多...
Vitis HLS 学习笔记--AXI4 主接口

Vitis HLS 学习笔记--AXI4 主接口

目录 1. 简介 2. 认识MAXI 3. MAXI突发操作 3.1 全局/本地存储器 3.2 MAXI优势与特点 3.3 查看MAXI报告 3.3.1 HW Interfaces 3.3.2 M_AXI Burst Information 3.4 MAXI 资源消耗 4. 理解 Volatile 4.1 标准C/C中的 volatile 4.2 HLS 中的 volatile 5. 总结 1. 简介…
阅读更多...
idea中使用GlassFish服务器启动项目

idea中使用GlassFish服务器启动项目

idea中使用GlassFish服务器进行测试 1.项目背景 当前在研究openMDM项目, 不过该项目不是springboot项目, 并且是使用GlassFish进行war部署的, 但是需要在idea中进行项目的二次开发,故需要进行idea启动项目并且进行开发和调试 2.GlassFish是什么 GlassFish是一个web服务器, …
阅读更多...
ROS学习笔记（14）拉普拉斯变换和PID

ROS学习笔记（14）拉普拉斯变换和PID

0.前提 近些时间在对睿抗的ROS仿真赛进行小组安排&#xff0c;对小组成员进行了一些安排&#xff0c;也要求他们以本次比赛写下自己的比赛经历博客&#xff0c;他们的培训由我来安排和负责&#xff0c;因此我得加吧油&#xff0c;起码保证我的进度得快过他们&#xff0c;才能安…
阅读更多...
图像处理技术与应用（三）

图像处理技术与应用（三）

图像处理技术与应用入门 图像信息 切片 from skimage import io # 使用 io.imread() 函数来读取图像 img io.imread(cc.jpg) ] roi img[100:5000, 500:1780] # 显示ROI区域 io.imshow(roi) io.show() # 显示图像 红色文字段定义感兴趣的区域&#xff08;ROI&#xff09…
阅读更多...
ArcGIS基础：便捷分享图层包和地图包

ArcGIS基础：便捷分享图层包和地图包

1、分享图层包&#xff1a; 首先&#xff0c;选中要分享的数据&#xff0c;右键创建图层包&#xff0c;修改保存路径。 找到项目描述那一栏&#xff0c;将摘要、标签、描述都填写分享图层包的相关内容。 一切设置好之后&#xff0c;点击右上角的【分析】按钮。 点击分析之后…
阅读更多...
【PyTorch与深度学习】2、PyTorch张量的运算API（上）

【PyTorch与深度学习】2、PyTorch张量的运算API（上）

课程地址 最近做实验发现自己还是基础框架上掌握得不好&#xff0c;于是开始重学一遍PyTorch框架&#xff0c;这个是课程笔记&#xff0c;这个课还是讲的简略&#xff0c;我半小时的课听了一个半小时。 1. 张量 1.1 张量操作 &#xff08;1&#xff09;chunk&#xff1a;将一…
阅读更多...
蓝桥杯ctf2024 部分wp

蓝桥杯ctf2024 部分wp

数据分析 1. packet 密码破解 1. cc 逆向分析 1. 欢乐时光 XXTEA #include<stdio.h> #include<stdint.h> #define DELTA 0x9e3779b9 #define MX (((z>>5^y<<2)(y>>3^z<<4))^((sum^y)(key[(p&3)^e]^z))) void btea(unsigned int* v…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023