网站地图怎么做html/直通车关键词优化口诀

网站地图怎么做html,直通车关键词优化口诀,毕业设计网站开发选题依据,互动吧网站模板一、Vue中自定义指令 1.认识自定义指令 在Vue的模板语法中我们学习过各种各样的指令:v-show、v-for、v-model等等,除了使用这些指令之外,Vue也允许我们来 自定义自己的指令。 注意:在Vue中,代码的复用和抽象主要还是…

一、Vue中自定义指令

1.认识自定义指令

在Vue的模板语法中我们学习过各种各样的指令:v-showv-forv-model等等,除了使用这些指令之外,Vue也允许我们来 自定义自己的指令

  • 注意:在Vue中,代码的复用和抽象主要还是通过组件
  • 通常在某些情况下,你需要对DOM元素进行底层操作,这个时候就会用到自定义指令

自定义指令分为两种:

  • 自定义局部指令:组件中通过 directives 选项,只能在当前组件中使用;

  • 自定义全局指令:app的 directive 方法,可以在任意组件中被使用;

比如我们来做一个非常简单的案例:当某个元素挂载完成后可以自动获取焦点

  • 实现方式一:如果我们使用默认的实现方式;

  • 实现方式二:自定义一个 v-focus 的局部指令;

  • 实现方式三:自定义一个 v-focus 的全局指令;

1.1默认实现

<script setup>
import { onMounted, useTemplateRef } from "vue";const inputRef = useTemplateRef('inputRef');onMounted(() => {if (inputRef.value) {inputRef.value.focus();}console.log(inputRef.value);
})
</script><template><div class="app"><input type="text" ref="inputRef"></div>
</template><style scoped></style>

1.2自定义局部指令

  • 这个自定义指令实现非常简单,我们只需要在组件选项中使用 directives 即可;

  • 它是一个对象,在对象中编写我们自定义指令的名称(注意:这里不需要加v-);

  • 自定义指令有一个生命周期,是在组件挂载后调用的 mounted,我们可以在其中完成操作;

<script setup>
// 任何以 v 开头的驼峰式命名的变量都可以当作自定义指令使用
const vFocus = (el) => {el.focus();
};
</script><template><div class="app"><input type="text" v-focus /></div>
</template><style scoped></style>

1.3自定义全局指令

自定义一个全局的v-focus指令可以让我们在任何地方直接使用

import { createApp } from 'vue'
import App from './App.vue'const app = createApp(App);
app.directive('focus', {mounted(el) {el.focus()}
})
app.mount('#app');

2.指令的生命周期

一个指令定义的对象,Vue提供了如下的几个钩子函数(都是可选的):

◼ created:在绑定元素的 attribute 或事件监听器被应用之前调用;

◼ beforeMount:当指令第一次绑定到元素并且在挂载父组件之前调用;

◼ mounted:在绑定元素的父组件被挂载后调用;

◼ beforeUpdate:在更新包含组件的 VNode 之前调用;

◼ updated:在包含组件的 VNode 及其子组件的 VNode 更新后调用;

◼ beforeUnmount:在卸载绑定元素的父组件之前调用;

◼ unmounted:当指令与元素解除绑定且父组件已卸载时,只调用一次;

3.指令的参数和修饰符

如果我们指令需要接受一些参数或者修饰符应该如何操作呢?

  • foo是参数的名称;

  • bar是修饰符的名称;

  • 后面是传入的具体的值;

在我们的生命周期中,我们可以通过 bindings 获取到对应的内容

<script setup>const vFocus = {mounted(el, binding) {console.log('binding:', binding)/*{arg: "foo"dir: {mounted: ƒ}instance: Proxy(Object) {__v_skip: true}modifiers: {bar: true}oldValue: undefinedvalue: "admin"}*/el.focus()}
}
</script><template><div class="app"><input type="text" v-focus:foo.bar="'admin'" /></div>
</template>

4.自定义指令练习

自定义指令案例:时间戳的显示需求:

  • 在开发中,大多数情况下从服务器获取到的都是时间戳

  • 我们需要将时间戳转换成具体格式化的时间来展示;

  • 在Vue2中我们可以通过过滤器来完成;

  • 在Vue3中我们可以通过 计算属性(computed) 或者 自定义一个方法(methods) 来完成;

  • 其实我们还可以通过一个自定义的指令来完成;

我们来实现一个可以自动对时间格式化的指令v-format-time

  • 这里我封装了一个函数,在首页中我们只需要调用这个函数并且传入app即可;

directives/v-format-time.js

import dayjs from "dayjs";export default function (app) {app.directive("format-time", {mounted(el, binding) {let format = 'YYYY-MM-DD';if (binding.value) {format = binding.value;}let timestamp = parseInt(el.textContent);if (!timestamp) return;if (timestamp.length === 10) {timestamp = timestamp * 1000;}// 对时间戳格式化el.textContent = dayjs(timestamp).format(format);}});
}

directives/index.js

import vFormatTime from './v-format-time.js';export default function (app) {vFormatTime(app);
}

main.js

import { createApp } from 'vue'
import App from './App.vue'
import directives from '@/directives'const app = createApp(App);
// 全局指令
directives(app);app.mount('#app');

二、Vue内置组件Teleport

1.认识Teleport

在组件化开发中,我们封装一个组件A,在另外一个组件B中使用:

  • 那么组件A中template的元素,会被挂载到组件B中template的某个位置;

  • 最终我们的应用程序会形成一颗DOM树结构

但是某些情况下,我们希望组件不是挂载在这个组件树上的,可能是移动到Vue app之外的其他位置:

  • 比如移动到body元素上,或者我们有其他的div#app之外的元素上;

  • 这个时候我们就可以通过teleport来完成;

Teleport是什么呢?

它是一个Vue提供的内置组件,类似于react的Portals

teleport翻译过来是心灵传输、远距离运输的意思; 它有两个属性:

  • to:指定将其中的内容移动到的目标元素,可以使用选择器;
  • disabled:是否禁用 teleport 的功能;
<template>
<div class="hello"><teleport to="body"><div class="hello"><h2>Hello World</h2></div></teleport>
</div>
</template>

在这里插入图片描述

2.和组件结合使用

当然,teleport也可以和组件结合一起来使用:

我们可以在 teleport 中使用组件,并且也可以给他传入一些数据;

<template>
<div class="app"><h2>app</h2><teleport to="body"><HelloWorld message="Hello World" /></teleport>
</div>
</template>

3.多个Teleport一起使用

如果我们将多个teleport应用到同一个目标上(to的值相同),那么这些目标会进行合并:

<template>
<div class="app"><h2>app</h2><div class="content"><h3>content</h3></div><teleport to=".content"><HelloWorld message="Hello World" /></teleport><teleport to=".content"><HelloWorld message="abc" /></teleport>
</div>
</template>

三、Vue内置组件Suspense

注意:目前(2024-08-01)Suspense显示的是一个实验性的特性,API随时可能会修改。

Suspense是一个内置的全局组件,该组件有两个插槽:

  • default:如果default可以显示,那么显示default的内容;

  • fallback:如果default无法显示,那么会显示fallback插槽的内容;

<script setup>
import { defineAsyncComponent } from "vue";const AsyncHome = defineAsyncComponent(() => import("./AsyncHome.vue"))
</script><template>
<div class="app"><h2>app</h2><suspense><template #default><AsyncHome /></template><template #fallback><div>loading...</div></template></suspense>
</div>
</template><style scoped></style>

suspense用于加载异步组件

四、Vue中安装插件的方式

1.认识Vue插件

通常我们向Vue全局添加一些功能时,会采用插件的模式,它有两种编写方式

  • 对象类型:一个对象,但是必须包含一个 install 的函数,该函数会在安装插件时执行;

  • 函数类型:一个function,这个函数会在安装插件时自动执行

插件可以完成的功能没有限制,比如下面的几种都是可以的:

  • 添加全局方法或者 property,通过把它们添加到 config.globalProperties 上实现;
  • 添加全局资源:指令/过滤器/过渡等;
  • 通过全局 mixin 来添加一些组件选项;
  • 一个库,提供自己的 API,同时提供上面提到的一个或多个功能;

2.插件的编写方式

对象类型写法

export default {name: 'plugin_01',install(app) {console.log('plugin_01 install');}
}

函数类型写法

export default function (app, options) {console.log('plugin_02 install', app, options);
}

五、Vue中渲染函数的使用

1.认识h函数

Vue推荐在绝大数情况下使用模板来创建你的HTML,然后一些特殊的场景,你真的需要JavaScript的完全编程的能力,这个时候你可以使用 渲染函数 ,它比模板更接近编译器;

前面我们讲解过VNode和VDOM的概念:

  • Vue在生成真实的DOM之前,会将我们的节点转换成VNode,而VNode组合在一起形成一颗树结构,就是虚拟DOM (VDOM);

  • 事实上,我们之前编写的 template 中的HTML 最终也是使用渲染函数生成对应的VNode;

  • 那么,如果你想充分的利用JavaScript的编程能力,我们可以自己来编写 createVNode 函数,生成对应的VNode;

那么我们应该怎么来做呢?使用 h()函数

  • h() 函数是一个用于创建 vnode 的一个函数;

  • 其实更准确的命名是 createVNode() 函数,但是为了简便在Vue将之简化为 h() 函数;

2.h函数的使用

h()函数 如何使用呢?它接受三个参数:

{String | Object | Function} tag

一个 HTML 标签名、一个组件、一个异步组件、或一个函数式组件,必需的

eg: ‘div’

{Object} props

与 attribute、prop 和时间相对应的对象,我们会在模板中使用,可选的

eg: {}

{String | Array | Object} children

子 VNodes,使用 h() 构建,或使用字符串获取 文本 Vnode 或者有插槽的对象可选的

eg:

['Some text comes first',h('h1', 'A headline'),h(MyComponent, {someprop: 'foobar'})
]

注意:

  • 如果没有props,那么通常可以将children作为第二个参数传入;

  • 如果会产生歧义,可以将null作为第二个参数传入,将children作为第三个参数传入;

3.使用示例

h函数可以在两个地方使用:

  • render函数选项中;
  • setup函数选项中(setup本身需要是一个函数类型,函数再返回h函数创建的VNode);

render函数中

import { h } from 'vue'export default {data() {return {msg: 'Hello Vue 3.0 + Vite'}},render() {return h("div", { className: "app" }, [h("h2", { className: "title" }, "我是标题123"),h("p", { className: "content" }, "我是内容, 哈哈哈"),])}
}

setup函数

<script>
import { h } from "vue";export default {data() {return {msg: 'Hello Vue 3.0 + Vite'}},setup() {return () => h("div", { className: "app" }, [h("h2", { className: "title" }, "我是标题123"),h("p", { className: "content" }, "我是内容, 哈哈哈"),])}
}
</script>

setup script写法

<script setup>
import { h } from 'vue'const render = () => h("div", { className: "app" }, [h("h2", { className: "title" }, "我是标题123"),h("p", { className: "content" }, "我是内容, 哈哈哈"),
])
</script><template><render></render>
</template>

4.h函数计数器案例

<script setup>
import { h, ref } from 'vue'const count = ref(0);const render = () => h("div", { className: "app" }, [h("h2", { className: "title" }, count.value),h("button", { className: "btn", onClick: () => count.value++ }, "+"),h("button", { className: "btn", onClick: () => count.value-- }, "-"),
])
</script><template><render></render>
</template>

六、Vue中编写jsx的语法

如果我们希望在项目中使用jsx,那么我们需要添加对jsx的支持:

  • jsx我们通常会通过Babel来进行转换(React编写的jsx就是通过babel转换的);
  • 对于Vue来说,我们只需要在Babel中配置对应的插件即可;

安装Babel支持Vue的jsx插件:

npm install @vue/babel-plugin-jsx -D

如果是Vite环境,需要安装插件:

npm install @vitejs/plugin-vue-jsx -D

在babel.config.js配置文件中配置插件:

module.export = {"presets": ["@vue/cli-plugin-ba"]"plugins": ["@vue/babel-plugin-jsx"]
}

jsx计数器案例

<script lang="jsx">
export default {data() {return {count: 0}},render() {return (<div><h1>{ this.count }</h1><button onClick={() => this.count++}>+</button><button onClick={() => this.count--}>-</button></div>)}
}
</script>

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

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

相关文章

基于CPLD电力/轨道交通3U机箱开关量输出板(DO)

板卡简介&#xff1a; 本板为开关量输出板&#xff08;DO&#xff09;&#xff0c;采用固态继电器用于电平输出或负载驱动&#xff0c;典型输出高电平为DC110V&#xff0c;低电平为0V。 性能规格&#xff1a; 电源&#xff1a;DC5V&#xff0c;DC3.3V&#xff0c;DC15V&#…

【C++经典例题】反转字符串中单词的字符顺序:两种实现方法详解

&#x1f493; 博客主页&#xff1a;倔强的石头的CSDN主页 &#x1f4dd;Gitee主页&#xff1a;倔强的石头的gitee主页 ⏩ 文章专栏&#xff1a;C经典例题 期待您的关注 目录 问题描述 基于快慢指针的解法 基于索引的解法 两种方法的比较 问题描述 在处理字符串相关的问题…

Java基础语法练习45(网络编程)

目录 一、网络的相关概念 1.网络通信 2.网络 3.ip 地址 4.ipv4 地址分类 5.域名 6.网络通信协议 7.TCP 和 UDP 二、InetAddress类 1.相关方法 2.代码示例如下&#xff1a; 三、Socket 1.基本介绍 四、TCP 网络通信编程 1.基本介绍 2.应用示例&#xff1a; 2.1…

【Json—RPC框架】:宏定义不受命名空间限制,续行符的错误使用造成的bug

为什么不受命名空间的限制&#xff1f; 宏处理在预处理阶段&#xff0c; 预处理在编译之前&#xff0c;编译才进行语法分析&#xff0c;语义分析。命名空间也只能限制这部分。 在Json-RPC框架的实现中&#xff0c;遇到如下问题。一开始以为是在实现日志宏的时候&#xff0c;有…

四川省包含哪些水系

背景&#xff1a; 想知道四川省包含哪些水系&#xff0c;以及各个水系的分布&#xff0c;起点、流经省市、终点等 {label: "嘉陵江",value: "嘉陵江",},{label: "渠江",value: "渠江",},{label: "涪江",value: "涪江&q…

子序列问题写法

子序列问题可以按照动态规划的思想去写。 子序列问题类型 子序列 是由数组派生而来的序列&#xff0c;删除&#xff08;或不删除&#xff09;数组中的元素而不改变其余元素的顺序。 例如&#xff0c;[3,6,2,7] 是数组 [0,3,1,6,2,2,7] 的子序列。 写法思路 创建两层for循环…

C++ primer plus 使用类下

目录 前言 一 转换函数 总结 前言 接着上一章的内容 一 转换函数 接着我们上一章节的内容&#xff0c;我们知道我们类里面有一个自动转换利用这个运算符&#xff0c;这样就可以使得对象可以接受这个值 那么有没有可以使一个普通类型去接收一个对象呢&#xff1f; 答案是…

详解布隆过滤器及其模拟实现

目录 布隆过滤器 引入 概念 工作原理 模拟实现布隆过滤器 哈希函数集 布隆过滤器基本框架 add函数&#xff08;添加到布隆过滤器中&#xff09; contains函数&#xff08;判断是否存在该值&#xff09; 完整代码 布隆过滤器的删除 布隆过滤器的误判率 布隆过滤器的…

巧用 VSCode 与 AI 编码提升 Vue 前端开发效率

在当今快节奏的软件开发领域&#xff0c;提升开发效率是每个开发者都追求的目标。对于 Vue 前端开发而言&#xff0c;Visual Studio Code&#xff08;VSCode&#xff09;已经成为了众多开发者的首选编辑器。而随着人工智能技术的发展&#xff0c;各类 AI 编码扩展工具如雨后春笋…

5分钟快速申请一个EDU教育邮箱

感谢CSDN作者 CodeDevMaster 于 2023-10-16 13:22:40 发布作品《5分钟快速申请一个EDU教育邮箱》 本文内容为作者方法的实践与复刻&#xff0c;同时 现在是2025/03/17&#xff0c;执行的细节有部分变动&#xff0c;所以完整展示一波。 祝各位好运&#xff0c;同时本案例中展示…

开源通义万相本地部署方案,文生视频、图生视频、视频生成大模型,支持消费级显卡!

开源通义万相本地部署方案&#xff0c;文生视频、图生视频、视频生成大模型&#xff0c;支持消费级显卡&#xff01; 万相2.1开源 近日&#xff0c;大模型万相2.1&#xff08;Wan&#xff09;重磅开源&#xff0c;此次开源采用Apache2.0协议&#xff0c;14B和1.3B两个参数规格…

qt+opengl 播放yuv视频

一、实现效果 二、pro文件 Qt widgets opengl 三、主要代码 #include "glwidget.h"GLWidget::GLWidget(QWidget *parent) : QOpenGLWidget(parent) {connect(&m_timer, &QTimer::timeout, this,[&](){this->update();});m_timer.start(1000/33); }v…

并发基础—三大问题:可见性、原子性、有序性

文章目录 可见性原子性有序性&#xff08;指令重排&#xff09;经典的指令重排案例&#xff1a;单例模式的双重检查锁volatile和synchronize都可以保证有序性并发压测工具Jcstress证明指令重排会在多线程下出现问题&#xff08;了解&#xff09;CPU缓存分为三个级别&#xff1a…

PyTorch 入门学习

目录 PyTorch 定义 核心作用 应用场景 Pytorch 基本语法 1. 张量的创建 2. 张量的类型转换 3. 张量数值计算 4. 张量运算函数 5. 张量索引操作 6. 张量形状操作 7. 张量拼接操作 8. 自动微分模块 9. 案例-线性回归案例 PyTorch 定义 PyTorch 是一个基于 Python 深…

Spring Cloud 中的服务注册与发现: Eureka详解

1. 背景 1.1 问题描述 我们如果通过 RestTamplate 进行远程调用时&#xff0c;URL 是写死的&#xff0c;例如&#xff1a; String url "http://127.0.0.1:9090/product/" orderInfo.getProductId(); 当机器更换或者新增机器时&#xff0c;这个 URL 就需要相应地变…

网页制作15-Javascipt时间特效の记录网页停留时间

01效果图&#xff1a; 02运用&#xff1a; window.setTimeout&#xff08;&#xff09;刷新function&#xff08;&#xff09;函数document.forms&#xff08;&#xff09;&#xff1a;表单if条件语句window.alert&#xff08;&#xff09;窗口警示 03、操作代码&#xff1a;…

C++ std::list超详细指南:基础实践(手搓list)

目录 一.核心特性 1.双向循环链表结构 2.头文件&#xff1a;#include 3.时间复杂度 4.内存特性 二.构造函数 三.list iterator的使用 1.学习list iterator之前我们要知道iterator的区分 ​编辑 2.begin()end() 3.rbegin()rend() 四.list关键接口 1.empty() 2. size…

996引擎 - 红点系统

996引擎 - 红点系统 总结NPC 红点(TXT红点)Lua 红点1. Red_Point.lua2. UI_Ex.lua参考资料以下内容是在三端 lua 环境下测试的 总结 红点系统分几个部分组成。 M2中设置变量推送。 配置红点表。 Envir\Data\cfg_redpoint.xls 2.1. UI元素中找到ID填写 ids 列。 主界面挂载…

PySide(PyQt),使用types.MethodType动态定义事件

以PySide(PyQt)的图片项为例&#xff0c;比如一个视窗的场景底图是一个QGraphicsPixmapItem&#xff0c;需要修改它的鼠标滚轮事件&#xff0c;以实现鼠标滚轮缩放显示的功能。为了达到这个目的&#xff0c;可以重新定义一个QGraphicsPixmapItem类&#xff0c;并重写它的wheelE…

【eNSP实战】三层交换机使用ACL实现网络安全

拓图 要求&#xff1a; vlan1可以访问Internetvlan2和vlan3不能访问Internet和vlan1vlan2和vlan3之间可以互相访问PC配置如图所示&#xff0c;这里不展示 LSW1接口vlan配置 vlan batch 10 20 30 # interface Vlanif1ip address 192.168.40.2 255.255.255.0 # interface Vla…