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

news2024/12/28 20:38:48

目录

    • 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 state
  data() {
    return {
      count: 0
    }
  },

  // functions that mutate state and trigger updates
  methods: {
    increment() {
      this.count++
    }
  },

  // lifecycle hooks
  mounted() {
    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 } = Vue

createApp({
  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 } = Vue
        
        createApp({
          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.coloradmin.cn/o/1630025.html

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

相关文章

基于Springboot的考研资讯平台

基于Springboot的考研资讯平台

基于SpringbootVue的考研资讯平台的设计与实现 开发语言&#xff1a;Java数据库&#xff1a;MySQL技术&#xff1a;SpringbootMybatis工具&#xff1a;IDEA、Maven、Navicat 系统展示 用户登录 首页 考研资讯 报考指南 资料信息 论坛信息 后台登录 考研资讯管理 学生管理 资…
阅读更多...
将静态资源解析成组件使用的库

将静态资源解析成组件使用的库

vite版本的vite-plugin-svgr vite-plugin-svgr - npm 使用
阅读更多...
实现SpringMVC底层机制（三）

实现SpringMVC底层机制（三）

文章目录 1.封装请求数据1.将方法的httpservletrequest和httpservletresponse参数封装到参数数组进行反射调用1.修改SunDispatcherServlet.java的executeDispatch方法2.debug测试 2.封装http请求参数1.需求分析2.自定义注解RequestsParam3.修改MonsterService接口&#xff0c;添…
阅读更多...
Python PyTorch 获取 MNIST 数据

Python PyTorch 获取 MNIST 数据

Python PyTorch 获取 MNIST 数据 1 PyTorch 获取 MNIST 数据2 PyTorch 保存 MNIST 数据3 PyTorch 显示 MNIST 数据 1 PyTorch 获取 MNIST 数据 import torch import numpy as np import matplotlib.pyplot as plt # type: ignore from torchvision import datasets, transform…
阅读更多...
Rust 实战练习 - 12. Axum Web 简单demo

Rust 实战练习 - 12. Axum Web 简单demo

Rust Web 历程 Rust 的异步框架tokio非他莫属&#xff0c;而web框架一直是悬而未决&#xff0c;说到底还是因为没有官方成熟的方案指引&#xff0c;大家各玩各的&#xff0c;互不兼容&#xff0c;白白浪费精力。 这个事情一直等到半官方组织tokio推出axum有了改善。但是市场上…
阅读更多...
【神经网络结构可视化】PlotNeuralNet的安装、测试及创建自己的神经网络结构可视化图形

【神经网络结构可视化】PlotNeuralNet的安装、测试及创建自己的神经网络结构可视化图形

文章目录 前提准备1、下载MikTeX2、下载Git bash3、下载PlotNeuralNet 进行测试1、解压PlotNeuralNet-master.zip2、打开Git bash3、 在my_project中查看生成的pdf文件 创建自己的神经网络结构可视化图形 前提准备 1、下载MikTeX 下载链接&#xff1a; MikTeX ( https://mikt…
阅读更多...
RestfulApi RestTemplate代码规范介绍

RestfulApi RestTemplate代码规范介绍

1.介绍 1.1 RestfulApi Restful API 是一种设计风格&#xff0c;代表了使用 HTTP 协议构建 web 服务的一种架构原则。REST&#xff08;Representational State Transfer&#xff09;的核心思想是&#xff0c;通过 URL 定位资源&#xff0c;使用 HTTP 方法&#xff08;GET, POS…
阅读更多...
【多维动态规划】Leetcode 62. 不同路径【中等】

【多维动态规划】Leetcode 62. 不同路径【中等】

不同路径 一个机器人位于一个 m x n 网格的左上角 &#xff08;起始点在下图中标记为 “Start” &#xff09;。 机器人每次只能向下或者向右移动一步。机器人试图达到网格的右下角&#xff08;在下图中标记为 “Finish” &#xff09;。 问总共有多少条不同的路径&#xff1…
阅读更多...
Vue3+Vite开发的项目进行加密打包

Vue3+Vite开发的项目进行加密打包

本文主要介绍Vue3+Vite开发的项目如何进行加密打包。 目录 一、vite简介二、混淆工具三、使用方法1. 安装插件：2. 配置插件：3. 运行构建：4. 自定义混淆选项：5. 排除文件：下面是Vue 3+Vite开发的项目进行加密打包的方法。 一、vite简介 Vite 是一个由 Evan You 创造的现代…
阅读更多...
【Python从入门到进阶】53、Scrapy日志信息及日志级别

【Python从入门到进阶】53、Scrapy日志信息及日志级别

接上篇《52、CrawlSpider链接提取器的使用》 上一篇我们学习了基于规则进行跟踪和自动爬取网页数据的“特殊爬虫”CrawlSpider。本篇我们来学习Scrapy的日志信息及日志级别。 一、引言 1、日志在Scrapy中的重要性 在Scrapy框架中&#xff0c;日志扮演着至关重要的角色。日志…
阅读更多...
JAVA面试八股文之JVM

JAVA面试八股文之JVM

JVM JVM由那些部分组成&#xff0c;运行流程是什么&#xff1f;你能详细说一下 JVM 运行时数据区吗&#xff1f;详细介绍一下程序计数器的作用&#xff1f;你能给我详细的介绍Java堆吗?什么是虚拟机栈&#xff1f;栈内存溢出情况&#xff1f;堆栈的区别是什么吗&#xff1f;解…
阅读更多...
2024 年最好的免费数据恢复软件，您可以尝试的几个数据恢复软件

2024 年最好的免费数据恢复软件，您可以尝试的几个数据恢复软件

由于系统崩溃而丢失数据可能会给用户带来麻烦。我们将重要的宝贵数据和个人数据保存在我们的 PC、笔记本电脑和其他数字设备上。您可能会因分区丢失、意外删除文件和文件夹、格式化硬盘驱动器而丢失数据。数据丢失是不幸的&#xff0c;如果您不小心从系统中删除了文件或数据&am…
阅读更多...
护眼台灯是不是智商税，专业护眼台灯的四大好处需牢记！

护眼台灯是不是智商税，专业护眼台灯的四大好处需牢记！

在现代社会&#xff0c;电子产品的普及和长时间的屏幕使用已经成为日常生活的一部分&#xff0c;这无疑对我们的视力健康提出了挑战。为了保护眼睛&#xff0c;市场上出现了各种声称能够减轻眼睛疲劳、预防近视等功效的护眼台灯。然而&#xff0c;关于护眼台灯是否真的具有这些…
阅读更多...
C#基础：WPF中常见控件的布局基础

C#基础：WPF中常见控件的布局基础

一、用ViewBox实现放缩控件不变 二、布局代码 <Window x:Class"WpfApp1.MainWindow"xmlns"http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x"http://schemas.microsoft.com/winfx/2006/xaml"Title"MainWindow"…
阅读更多...
传统过程自动化工厂的智能扩展

传统过程自动化工厂的智能扩展

一 通过NOA概念&#xff0c;公开、安全地迈向未来 随着数字化转型在过程自动化工业中的不断深入&#xff0c;许多公司都面临着同一挑战——如何平衡创新和传统。放眼望去&#xff0c;过程自动化工业和信息技术似乎在以不同的速度发展。虽然过程自动化工厂通过使用传统的自动化…
阅读更多...
自动化爬虫工具：you-get安装与使用

自动化爬虫工具：you-get安装与使用

Windows下的安装命令&#xff1a; pip install you-get linux下的安装命令&#xff1a; pip3 install you-get 下载完成后&#xff0c;我们可以看到如下的警告&#xff0c;意思就是这个工具并未被添加到环境变量中&#xff0c;如果我们想在命令行中直接调用&#xff0c;需要…
阅读更多...
Docker Machine 入门实践@FreeBSD

Docker Machine 入门实践@FreeBSD

在这篇文档里&#xff0c;我们安装了docker machine&#xff1a;FreeBSD安装Docker记录-CSDN博客 在这篇文档里&#xff0c;我们启动虚拟主机myvm并进入虚拟主机&#xff1a;boot2docker实践FreeBSD-CSDN博客 现在开始更深入的进行 docker的实战演练。参考Docker Machine官方…
阅读更多...
Git--多人协作

Git--多人协作

目录 一、多人协作一二、多人协作二三、 远程分⽀删除后&#xff0c;本地git branch -a依然能看到的解决办法 一、多人协作一 ⽬前&#xff0c;我们所完成的⼯作如下&#xff1a; 1.基本完成Git的所有本地库的相关操作&#xff0c;git基本操作&#xff0c;分⽀理解&#xff0c;…
阅读更多...
Java面试八股文-2024

Java面试八股文-2024

面试指南 TMD&#xff0c;一个后端为什么要了解那么多的知识&#xff0c;真是服了。啥啥都得了解 MySQL MySQL索引可能在以下几种情况下失效&#xff1a; 不遵循最左匹配原则&#xff1a;在联合索引中&#xff0c;如果没有使用索引的最左前缀&#xff0c;即查询条件中没有包含…
阅读更多...
RK3568平台开发系列讲解（Linux系统篇）芯片手册的使用：GPIO的寄存器说明

RK3568平台开发系列讲解（Linux系统篇）芯片手册的使用：GPIO的寄存器说明

🚀返回专栏总目录 文章目录 一、查找复用寄存器二、查找方向寄存器三、查找数据寄存器沉淀、分享、成长，让自己和他人都能有所收获！😄 📢寄存器GPIO 进行配置， 一般情况下需要对 GPIO 的复用寄存器， 方向寄存器， 数据寄存器进行配置。 GPIO0_B0 配置为例： 一、查…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023