动画vue amp

JavaScript简介&引入方式

JcvaScript是一门跨平台、面向对象的脚本语言,来控制网页行为的,它能使网页可交互 W3C标准:网页主要由三部分组成 结构:html 表现:css JavaScript JavaScript和java是完全同的语言,不论是概念还是设计。但是基础语法类似。 JavaScript(简称:JS)在1 ......
JavaScript 方式 简介 amp

Vue路由-Router

官网学习地址:https://router.vuejs.org/zh/guide/essentials/named-routes.html 以下介绍了:Router的使用;子路由;路由重定向;编程式导航 环境: 1、已安装VS Code,等插件 2、前端项目管理页面,已安装 cli-plugin-r ......
路由 Router Vue

Vue环境安装

前言: 前端项目需要工程化管理,可以使用Vue脚手架工具简化项目创建过程;专注于代码,不用关心项目创建和配置细节。 一、Vue脚手架工具 官网:https://cli.vuejs.org/zh/ 用于快速生成 Vue 项目基础架构; 1、安装 vue-cli 在支持npm环境下,win端cmd命令: ......
环境 Vue

vue3 directive自定义指令

import store from '../store'// 新建jsexport default { install(app) { // 权限控制, 没有相关的权限, 则删除模块 app.directive('permission', { mounted(el, val) { if(el && ! ......
指令 directive vue3 vue

第三十一篇 vue - 逻辑复用 - 插件

插件 插件 (Plugins) 是一种能为 Vue 添加全局功能的工具代码。下面是如何安装一个插件的示例 import { createApp } from 'vue' const app = createApp({}) app.use(myPlugin, { /* 可选的选项 */ }) 一个插件 ......
插件 逻辑 vue

第三十篇 vue - 逻辑复用 - 自定义指令

自定义指令 除了 Vue 内置的一系列指令 (比如 v-model 或 v-show) 之外,Vue 还允许你注册自定义的指令 (Custom Directives)。 我们已经介绍了两种在 Vue 中重用代码的方式:组件和组合式函数。组件是主要的构建模块,而组合式函数则侧重于有状态的逻辑。另一方面 ......
指令 逻辑 vue

第二十九篇 vue - 逻辑复用 - 组合式函数

什么是 组合式函数 在 Vue 应用的概念中,“组合式函数”(Composables) 是一个利用 Vue 的组合式 API 来封装和复用有状态逻辑的函数 当构建前端应用时,我们常常需要复用公共任务的逻辑。例如为了在不同地方格式化时间,我们可能会抽取一个可复用的日期格式化函数。这个函数封装了无状态的 ......
函数 逻辑 vue

多态&包&final&权限修饰符&代码块

今日内容 多态 包 final 权限修饰符 代码块 学习目标 [ ] 能够说出使用多态的前提条件 [ ] 理解多态的向上转型 [ ] 理解多态的向下转型 [ ] 能够知道多态的使用场景 [ ] 包的作用 [ ] public和private权限修饰符的作用 [ ] 描述final修饰的类的特点 [ ......
amp 权限 代码 final

ant-design-vue datePicker日期组件中文格式月份与星期显示英文

根据官网的写法,在app.vue文件引入国际化设置组件 <template> <a-config-provider :locale="locale"> <App /> </a-config-provider> </template> <script> import zhCN from 'ant-de ......

vue之表单处理

vue之表单处理(一) 实验介绍基本用法文本多行文本单选按钮复选框多个复选框选择框 实验介绍 在日常的开发中,表单随处都被使用到,如:登录,问题反馈功能等。对表单的数据收集和绑定也是很常规的工作。在一般开发中处理表单,需要通过操作 DOM 来实现,是一个相对繁琐且低效率的工作。然而在 Vue 项目中 ......
表单 vue

使用vue四种方法写一个计算器

第一种:使用computed计算属性 1.创建项目,引入vue <script type="text/javascript" src="js/vue.js" ></script> 2.实例化vue <div id="app"> </div><script> var vm = new Vue({ el ......
计算器 方法 vue

《前端构建工具(webpack&vite)- 李立超》笔记

1. 构建工具简介 1.1 模块化 最初我们都使用script标签来引入js,但当一个页面引入的js文件越来越多时,就产生了几个难以避免的问题: 全局变量污染。 变量重名。 js之间的依赖关系复杂,无法保证顺序。 而模块化规范就是为解决以上问题,模块内部的变量实现了在其他模块内共享。而且可以指定哪些 ......
前端 webpack 笔记 工具 vite

Vue选项-实例生命周期

Vue选项-实例生命周期 VUE家族系列: Vue快速上门(1)-基础知识 Vue快速上门(2)-模板语法 Vue快速上门(3)-组件与复用 01、基本概念 1.1、先了解下MVVM VUE是基于MVVM思想实现的,❓那什么是MVVM呢?—— MVVM,是Model-View-ViewModel的缩 ......
周期 实例 生命 Vue

Vue——node-ops.ts

前言 node-ops.ts位于src/platforms/web/runtime/node-ops.ts,主要封装了 DOM 操作的 API; 内容 import VNode from 'core/vdom/vnode' import { namespaceMap } from 'web/util ......
node-ops node Vue ops ts

vue3面包屑导航栏

import {useRoute, useRouter} from "vue-router"; import {computed, ref, watch, watchEffect,nextTick} from "vue"; const router = useRouter() const route ......
面包屑 面包 vue3 vue

vue3+elementPlus 深色主题切换

首先安装需要的两个依赖 npm i @vueuse/core npm install element-plus --save 在main.js中引入css文件,自定义深色背景颜色 可以看ElementPlus官方网站 //引入elementUI import ElementPlus from 'el ......
深色 elementPlus 主题 vue3 vue

HTTP协议之基本认证&HTTP中长连接与短连接

HTTP协议之基本认证 常见认证方式 BASIC认证(基本认证) DIGEST认证(摘要认证) SSL客户端认证 FormBase认证(基于表单认证) DIGEST认证 什么是DIGEST认证 为弥补BASIC认证存在的弱点,从HTTP/1.1起就有了DIGEST认证 DIGEST认证同样使用质询/ ......
HTTP amp

HTTP报文结构分析&HTTP请求方法剖析

HTTP报文结构分析 HTTP的报文头大体可以分为四类,分别是: 通用报文头,请求报文头,响应报文头和实体报文头 在HTTP/1.1里一共规范了47种报文头字段 通用报文头 请求报文头 响应报文头 实体报文头 ACCEPT 作用:浏览器端可以接受的媒体类型 Accept:text/html代表浏览器 ......
报文 HTTP 结构 方法 amp

HTTP协议特点&详解UR与URL的区别与联系

HTTP协议特点 支持客户/服务器模式 客户/服务器模式工作的方式是由客户端向服务器发送请求,服务器端响应请求,并进行相应服务 简单快速 客户向服务器请求服务时,只需传送请求方法和路径 请求方法常用的有GET,HEAD,POST。每种方法规定了客户与服务器练习的类型不同 由于HTTP协议简单,使得H ......
特点 HTTP amp URL

defineExporse vue3中一个由子组件导出数据,让父组件调用的方法。

子组件 <script setup> import { ref, reactive } from 'vue' const isFlag = ref(false) const data = reactive({ name: 'tom', age: 18 }) //把数据导出 defineExpose( ......
组件 defineExporse 方法 数据 vue3

macos:用homebrew安装node/安装vue-cli( node v18.15.0/ Homebrew 4.0.10-119)

一,用brew安装node liuhongdi@liuhongdideMacBook-Pro Homebrew % brew install node@18 ==> Downloading https://formulae.brew.sh/api/formula.jws.json #=#=# ==> ......
node homebrew Homebrew vue-cli macos

vue:路由守卫

路由守卫 作用:对路由进行权限控制 配置路由守卫应在暴露前配置 分类:全局守卫、独享守卫、组件内守卫 首先先给需要鉴权的路由设置好meta配置项。 meta配置项:是vue-router中的一个对象,主要用于存储路由的元数据(meta data)信息。这些元数据信息可以是一些描述性的内容,比如页面的 ......
路由 vue

webpack 从零开始搭建 vue-cli

🔱webpack 从零开始搭建 vue-cli🔱 1、Webpack 🐱‍🏍 1.1 webpack 是什么?做了啥? Webpack 是一个模块打包工具。在开发中,它把一堆文件中每个都作为一个模块处理,找出它们间的依赖关系,并打包成待发布的静态资源。 主要做了: . 模块化 . 处理不同格 ......
webpack vue-cli vue cli

[vue3]npm创建环境

1. npm安装 vue cli [root@Python 20230401VUE3]# npm install -g @vue/cli 2. 查看 vue版本 [root@Python 20230401VUE3]# vue --version @vue/cli 5.0.8 3. 创建项目 [roo ......
环境 vue3 vue npm

第二十二篇 vue - 深入组件 - 异步组件 - defineAsyncComponent

基本用法 defineAsyncComponent 在大型项目中,我们可能需要拆分应用为更小的块,并仅在需要时再从服务器加载相关组件。Vue 提供了 defineAsyncComponent 方法来实现此功能 import { defineAsyncComponent } from 'vue' co ......
组件 defineAsyncComponent vue

第二十三篇 vue - 深入组件 - 内置组件 - Transition

动画组件 Transition 和 TransitionGroup Vue 提供了两个可以帮助你制作基于状态变化的过渡和动画内置组件 1、<Transition> 会在一个元素或组件进入和离开 DOM 时应用动画 2、<TransitionGroup> 会在一个 v-for 列表中的元素或组件被插入 ......
组件 Transition vue

第二十四篇 vue - 深入组件 - 内置组件 - TransitionGroup

TransitionGroup <TransitionGroup> 是一个内置组件,用于对 v-for 列表中的元素或组件的插入、移除和顺序改变添加动画效果 和 的区别 <TransitionGroup> 支持和 <Transition> 基本相同的 props、CSS 过渡 class 和 Jav ......
组件 TransitionGroup vue

第二十五篇 vue - 深入组件 - 内置组件 - keepAlive

keepAlive <KeepAlive> 是一个内置组件,它的功能是在多个组件间动态切换时缓存被移除的组件实例 在平常开发中,有部分组件没有必要多次初始化,这时,我们需要将组件进行持久化,使组件的状态维持不变,在下一次展示时,也不会进行重新初始化组件 kee-alive 是 Vue 内置的一个组件 ......
组件 keepAlive vue

第二十六篇 vue - 深入组件 - 内置组件 - Teleport

Teleport <Teleport> 是一个内置组件,它可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去 基本用法 有时我们可能会遇到这样的场景:一个组件模板的一部分在逻辑上从属于该组件,但从整个应用视图的角度来看,它在 DOM 中应该被渲染在整个 Vue 应用外部的其他 ......
组件 Teleport vue

第二十七篇 vue - 深入组件 - 内置组件 - Suspense

Suspense <Suspense> 是一个内置组件,用来在组件树中协调对异步依赖的处理。它让我们可以在组件树上层等待下层的多个嵌套异步依赖项解析完成,并可以在等待时渲染一个加载状态 <Suspense> 是一项实验性功能。它不一定会最终成为稳定功能,并且在稳定之前相关 API 也可能会发生变化 ......
组件 Suspense vue