目录
vue2函数式组件
h函数
h函数有那些参数配置
在h函数中如何使用条件判断及循环语句
事件
函数式组件
slots() 和 children 对比
简单的例子
业务场景下的函数式组件
vue3函数式组件
h函数
基本使用
v-on
组件
渲染插槽
resolveComponent()
函数式组件
案例一
案例二
总结
概览
介绍
2.x 语法
3.x 语法
单文件组件 (SFC)
vue2函数式组件
没有管理任何状态,也没有监听任何传递给它的状态,也没有生命周期方法。实际上,它只是一个接受一些 prop 的函数。在这样的场景下,我们可以将组件标记为 functional
,这意味它无状态 (没有响应式数据),也没有实例 (没有 this
上下文)。一个函数式组件 就像这样:
h函数
h
函数有那些参数配置
export declare function h(
type: string,
props?: RawProps | null,
children?: RawChildren | RawSlots
): VNode;
type
类型:String | Object | Function
描述:HTML 标签名、组件、异步组件或函数式组件 (注意:Vue3 不支持组件名用字符串表示了,必须直接使用组件名)
props
Object
描述:与我们将在模板中使用的 attribute、prop 和事件相对应。可选html元素的 attribute ,如id name class,vue 的 props参数
children
类型:String | Object | Array
描述:children是子节点 VNode,使用 h() 生成,或者使用字符串来获取“文本 VNode”
render(h) {
// 如果使用原生的则
// return h('componentName', {
// 这个是挂载组件
return h('div', {
// 此处是给 SelectEdit 组件传值的(props传值)
props: {
value: 1,
type: 'on'
},
// class可以数组的形式也可以对象的形式
// class: ['speci-class'],
class: {
'speci-class': true
},
// 样式有-的注意小驼峰 或者使用 string 模式
style: {
color: 'red',
fontSize: '14px',
// 或者这样
'font-size': '14px'
},
// 普通的 HTML attribute
attrs: {
placeholder: '这是给原生html赋值placeholder属性'
},
// DOM property
domProps: {
innerHTML: 'DOM property',
// 这个参数等同于h函数的第三个参数
innerText: 'xxxxxxx'
},
// 这里是挂载方法的但不再支持如 `v-on:keyup.enter` 这样的修饰器
on: {
// 方法名可以自定义(组件内 $emit('xxxchange', {name: 'zs'}))
'xxxchange': val => {
this.name = val.name;
},
'click': val => {
this.name = val.name;
},
},
// 仅用于组件,用于监听原生事件,而不是组件内部使用
// `vm.$emit` 触发的事件。
nativeOn: {
click: this.nativeClickHandler
},
// 自定义指令。注意,你无法对 `binding` 中的 `oldValue`
directives: [
{
name: 'my-custom-directive',
value: '2',
expression: '1 + 1',
arg: 'foo',
modifiers: {
bar: true
}
}
],
// 作用域插槽的格式为
scopedSlots: {
default: props => createElement('span', props.text)
},
// 如果组件是其它组件的子组件,需为插槽指定名称
slot: 'name-of-slot',
// 其它特殊顶层 property
key: 'myKey',
ref: 'myRef',
// 如果你在渲染函数中给多个元素都应用了相同的 ref 名,
// 那么 `$refs.myRef` 会变成一个数组。
refInFor: true
}, '这里是显示文本')
}
}
在h
函数中如何使用条件判断及循环语句
v-for
在模板中的使用
在 h
函数中的使用
let arr = [1,2,3,4,5]
render(h){
return h(
'ul',
{},
[
arr.map(item => return(h('li',{},'item'))
]
)
}
v-if
在模板中的使用
let flag = true
在 h
函数中的使用
let flag = true
render(h){
return h(
'ul',
{},
flag ? '出现' : '隐藏'
)
}
事件
在模板中的使用
提交
在h
函数中的使用
render(h){
return h(
'ul',
{
on:{
click: () => {
// 处理函数
}
}
},
'提交按钮'
)
}
函数式组件
在普通组件中,没有被定义为 prop 的 attribute 会自动添加到组件的根元素上,将已有的同名 attribute 进行替换或与其进行智能合并。
然而函数式组件要求你显式定义该行为:
Vue.component('my-component', {
functional: true,
// Props 是可选的
props: {
// ...
},
// 为了弥补缺少的实例
// 提供第二个参数作为上下文
render: function (createElement, context) {
// 完全透传任何 attribute、事件监听器、子节点等。
return createElement('button', context.data, context.children)
}
})
context
中包含以下字段的对象:
props
:提供所有 prop 的对象
children
:VNode 子节点的数组
slots
:一个函数,返回了包含所有插槽的对象
scopedSlots
:(2.6.0+) 一个暴露传入的作用域插槽的对象。也以函数形式暴露普通插槽。
data
:传递给组件的整个数据对象,作为 createElement
的第二个参数传入组件
parent
:对父组件的引用
listeners
:(2.3.0+) 一个包含了所有父组件为当前组件注册的事件监听器的对象。这是 data.on
的一个别名。
injections
:(2.3.0+) 如果使用了 inject 选项,则该对象包含了应当被注入的 property。
注意:在 2.3.0 之前的版本中,如果一个函数式组件想要接收 prop,则 props
选项是必须的。在 2.3.0 或以上的版本中,你可以省略 props
选项,所有组件上的 attribute 都会被自动隐式解析为 prop。
当使用函数式组件时,该引用将会是 HTMLElement,因为他们是无状态的也是无实例的
在 2.5.0 及以上版本中,如果你使用了单文件组件,那么基于模板的函数式组件可以这样声明:
slots() 和 children 对比
可能想知道为什么同时需要 slots()
和 children
。slots().default
不是和 children
类似的吗?在一些场景中,是这样——但如果是如下的带有子节点的函数式组件呢?
first
second
对于这个组件,children
会给你两个段落标签,而 slots().default
只会传递第二个匿名段落标签,slots().foo
会传递第一个具名段落标签。同时拥有 children
和 slots()
,因此你可以选择让组件感知某个插槽机制,还是简单地通过传递 children
,移交给其它组件去处理。
简单的例子
假若我们封装一套按钮组件,通过后台返回的type进行渲染,首先可能想到的是 v-if
实现
success
error
warm
default
初看是没有问题的,但这样并不好扩展,若想扩展就难道一直 v-else-if
, 难顶
这里我们就可以用到函数式组件了,提前说明:
对比传统的 Vue.component 这样定义,我更喜欢用变量定义。
h 即是 createElement ,以下是尤雨溪在一个回复中提到的
这个单词通常用在 virtual-dom 的实现中。Hyperscript 本身是指 生成HTML 结构的 script 脚本,因为 HTML 是 hyper-text markup language 的缩写(超文本标记语言)
const typeButton = {
functional:true,
render(h , { props }){
const { type } = props
return {type}
}
}
这就是一个简单的函数式组件,根据传入的type不同,渲染出不同的样式的按钮
业务场景下的函数式组件
var EmptyList = { /* ... */ }
var TableList = { /* ... */ }
var OrderedList = { /* ... */ }
var UnorderedList = { /* ... */ }
Vue.component('smart-list', {
functional: true,
props: {
items: {
type: Array,
required: true
},
isOrdered: Boolean
},
render: function (createElement, context) {
function appropriateListComponent () {
var items = context.props.items
if (items.length === 0) return EmptyList
if (typeof items[0] === 'object') return TableList
if (context.props.isOrdered) return OrderedList
return UnorderedList
}
return createElement(
appropriateListComponent(),
context.data,
context.children
)
}
})
vue3函数式组件
区别vue3对外暴露了h函数 导入使用
h函数
基本使用
案例一
案例二
// 除了类型必填以外,其他的参数都是可选的
h('div')
h('div', { id: 'foo' })
// attribute 和 property 都能在 prop 中书写
// Vue 会自动将它们分配到正确的位置
h('div', { class: 'bar', innerHTML: 'hello' })
// 像 `.prop` 和 `.attr` 这样的的属性修饰符
// 可以分别通过 `.` 和 `^` 前缀来添加
h('div', { '.name': 'some-name', '^width': '100' })
// 类与样式可以像在模板中一样
// 用数组或对象的形式书写
h('div', { class: [foo, { bar }], style: { color: 'red' } })
// 事件监听器应以 onXxx 的形式书写
h('div', { onClick: () => {} })
// children 可以是一个字符串
h('div', { id: 'foo' }, 'hello')
// 没有 props 时可以省略不写
h('div', 'hello')
h('div', [h('span', 'hello')])
// children 数组可以同时包含 vnodes 与字符串
h('div', ['hello', h('span', 'hello')])
v-on
以 on
开头,并跟着大写字母的 props 会被当作事件监听器。比如,onClick
与模板中的 @click
等价。
h(
'button',
{
onClick(event) {
/* ... */
}
},
'click me'
)
{
/* ... */
}}
>
click me
组件
在给组件创建 vnode 时,传递给 h()
函数的第一个参数应当是组件的定义。这意味着使用渲染函数时不再需要注册组件了 —— 可以直接使用导入的组件:
import Foo from './Foo.vue'
import Bar from './Bar.jsx'
function render() {
return h('div', [h(Foo), h(Bar)])
}
不管是什么类型的文件,只要从中导入的是有效的 Vue 组件,h
就能正常运作。
如果一个组件是用名字注册的,不能直接导入 (例如,由一个库全局注册),可以使用 resolveComponent() 来解决这个问题。 与vue2不同 vue2 可以直接使用字符串
渲染插槽
export default {
props: ['message'],
setup(props, { slots }) {
return () => [
// 默认插槽:
//
h('div', slots.default()),
// 具名插槽:
//
h(
'div',
slots.footer({
text: props.message
})
)
]
}
}
resolveComponent()
按名称手动解析已注册的组件。
function resolveComponent(name: string): Component | string
备注:如果你可以直接引入组件就不需使用此方法。
为了能从正确的组件上下文进行解析,resolveComponent()
必须在setup()
或渲染函数内调用。
如果组件未找到,会抛出一个运行时警告,并返回组件名字符串。
const { h, resolveComponent } = Vue
export default {
setup() {
const ButtonCounter = resolveComponent('ButtonCounter')
return () => {
return h(ButtonCounter)
}
}
}
函数式组件
函数式组件是一种定义自身没有任何状态的组件的方式。它们很像纯函数:接收 props,返回 vnodes。函数式组件在渲染过程中不会创建组件实例 (也就是说,没有 this
),也不会触发常规的组件生命周期钩子。
我们用一个普通的函数而不是一个选项对象来创建函数式组件。该函数实际上就是该组件的渲染函数。
函数式组件的签名与 setup()
钩子相同:
function MyComponent(props, { slots, emit, attrs }) {
// ...
}
案例一
如果这个 props
选项没有被定义,那么被传入函数的 props
对象就会像 attrs
一样会包含所有 attribute。除非指定了 props
选项,否则每个 prop 的名字将不会基于驼峰命名法被一般化处理。
父组件里面
年后
案例二
渲染elemen plus 组件
import { h, resolveComponent } from "vue";
// Vue3 中函数式组件需要提供一个渲染函数
const CustomComponent = (props, context) => {
let dom =
typeof props.component == "string"
? resolveComponent(hyphenToPascal(props.component))
: "Input";
// 返回一个渲染函数,可以使用 h 函数创建虚拟节点
return h(dom, props, context.slots);
};
function hyphenToPascal(str) {
let arr = str.split("-");
let resStr = arr.reduce(function (prev, cur) {
let str = prev + cur.slice(0, 1).toUpperCase() + cur.slice(1);
return str;
});
// 转小驼峰这一行不需要
resStr = resStr.slice(0, 1).toUpperCase() + resStr.slice(1);
return resStr;
}
export default CustomComponent;
总结
概览
对变化的总体概述:
2.x 中函数式组件带来的性能提升在 3.x 中已经可以忽略不计,因此我们建议只使用有状态的组件
函数式组件只能由接收 props
和 context
(即:slots
、attrs
、emit
) 的普通函数创建
非兼容 :functional
attribute 已从单文件组件 (SFC) 的 中移除
非兼容 :{ functional: true }
选项已从通过函数创建的组件中移除
介绍
在 Vue 2 中,函数式组件主要有两个应用场景:
作为性能优化,因为它们的初始化速度比有状态组件快得多
返回多个根节点
然而,在 Vue 3 中,有状态组件的性能已经提高到它们之间的区别可以忽略不计的程度。此外,有状态组件现在也支持返回多个根节点。
因此,函数式组件剩下的唯一应用场景就是简单组件,比如创建动态标题的组件。否则,建议你像平常一样使用有状态组件。
2.x 语法
使用
组件,负责提供适当的标题 (即:h1
、h2
、h3
等等),在 2.x 中,这可以通过单文件组件编写:
// Vue 2 函数式组件示例
export default {
functional: true,
props: ['level'],
render(h, { props, data, children }) {
return h(`h${props.level}`, data, children)
}
}
或者,对于喜欢在单文件组件中使用 的用户:
3.x 语法
现在,在 Vue 3 中,所有的函数式组件都是用普通函数创建的。换句话说,不需要定义 { functional: true }
组件选项。
它们将接收两个参数:props
和 context
。context
参数是一个对象,包含组件的 attrs
、slots
和 emit
property。
此外,h
现在是全局导入的,而不是在 render
函数中隐式提供。
以前面提到的
组件为例,下面是它现在的样子。
import { h } from 'vue'
const DynamicHeading = (props, context) => {
return h(`h${props.level}`, context.attrs, context.slots)
}
DynamicHeading.props = ['level']
export default DynamicHeading
单文件组件 (SFC)
在 3.x 中,有状态组件和函数式组件之间的性能差异已经大大减少,并且在大多数用例中是微不足道的。因此,在单文件组件上使用 functional
的开发者的迁移路径是删除该 attribute,并将 props
的所有引用重命名为 $props
,以及将 attrs
重命名为 $attrs
。
以之前的
为例,下面是它现在的样子。
主要的区别在于:
从 中移除 functional
attribute
listeners
现在作为 $attrs
的一部分传递,可以将其删除
你可能感兴趣的:(vue.js,前端,javascript)
如何在简历中巧妙展现你的兴趣爱好
贵州数擎科技有限公司
面试 跳槽
大家好!我是[数擎AI],一位热爱探索新技术的前端开发者,在这里分享前端和Web3D、AI技术的干货与实战经验。如果你对技术有热情,欢迎关注我的文章,我们一起成长、进步!开发领域:前端开发|AI应用|Web3D|元宇宙技术栈:JavaScript、React、ThreeJs、WebGL、Go经验经验:6年+前端开发经验,专注于图形渲染和AI技术开源项目:智简未来、晓智元宇宙、数字孪生引擎在简历中展
【股票数据API接口46】如何获取股票指历史分时BOLL数据之Python、Java等多种主流语言实例代码演示通过股票数据接口获取数据
Athena二哈
python java 开发语言 股票数据接口 api
如今,量化分析在股市领域风靡一时,其核心要素在于数据,获取股票数据,是踏上量化分析之路的第一步。你可以选择亲手编写爬虫来抓取,但更便捷的方式,莫过于利用专业的股票数据API接口。自编爬虫虽零成本,却伴随着时间与精力的巨大消耗,且常因目标页面变动而失效。大家可以依据自己的实际情况来决定数据获取方式。接下来,我将分享200多个实测可用且免费的专业股票数据接口,并通过Python、JavaScript(
【股票数据API接口45】如何获取股票指历史分时MACD数据之Python、Java等多种主流语言实例代码演示通过股票数据接口获取数据
Athena二哈
python java 开发语言 api 股票数据接口
如今,量化分析在股市领域风靡一时,其核心要素在于数据,获取股票数据,是踏上量化分析之路的第一步。你可以选择亲手编写爬虫来抓取,但更便捷的方式,莫过于利用专业的股票数据API接口。自编爬虫虽零成本,却伴随着时间与精力的巨大消耗,且常因目标页面变动而失效。大家可以依据自己的实际情况来决定数据获取方式。接下来,我将分享200多个实测可用且免费的专业股票数据接口,并通过Python、JavaScript(
使用 Three.js 转换 GLSL 粒子效果着色器
贵州数擎科技有限公司
javascript 着色器 开发语言
大家好!我是[数擎AI],一位热爱探索新技术的前端开发者,在这里分享前端和Web3D、AI技术的干货与实战经验。如果你对技术有热情,欢迎关注我的文章,我们一起成长、进步!开发领域:前端开发|AI应用|Web3D|元宇宙技术栈:JavaScript、React、ThreeJs、WebGL、Go经验经验:6年+前端开发经验,专注于图形渲染和AI技术开源项目:AI简历、元宇宙、数字孪生在这篇博客中,我们
php 与 html 的混合编程
hjjdebug
# php
所谓混合编程,实际上是php文件输出html内容的过程,看起来像html文件包含php语句,但实际上是php文件输出html内容.结合一个小例子,体会一下php是如何把非php语句原样输出或不输出的.cat3.php,有如下代码显示.注意:文件后缀必须是.php文件,不能是.html文件,因为php文件可以输出html内容,而html文件却不能包含php语言,这是因为html是firefox等前端
面试之《前端开发者如何优化页面的加载时间?》
只会写Bug的程序员
面试 面试 前端
前端开发者可以从多个方面入手优化页面的加载时间,以下是一些常见且有效的方法:优化资源加载压缩资源文件:对HTML、CSS、JavaScript文件进行压缩,去除不必要的空格、注释等,减小文件体积,加快下载速度。例如使用uglify-js压缩JavaScript文件,cssnano压缩CSS文件。优化图片:对图片进行压缩处理,降低图片的分辨率、色彩深度或采用更高效的图片格式(如WebP)。同时,根据
Hutool - Script:脚本执行封装,以 JavaScript 为例
五行星辰
业务系统应用技术 javascript 开发语言 java 后端
一、简介在Java开发中,有时需要动态执行脚本代码,比如JavaScript脚本,来实现一些灵活的业务逻辑,如动态规则计算、数据处理等。Java本身提供了javax.script包来支持脚本执行,但使用起来较为繁琐。Hutool-Script模块对Java的脚本执行功能进行了封装,提供了更简洁易用的API,让开发者可以方便地执行各种脚本,这里主要介绍JavaScript脚本的执行。二、引入依赖如果
从Hello Vue到构建未来:探索渐进式框架的无限可能
skyksksksksks
综合个人杂记 vue.js 前端 开发语言 前端框架
一、当代码遇见人性:Vue的诞生故事2013年某个深夜,谷歌前员工尤雨溪在键盘前陷入沉思。当时的前端框架要么像Angular般庞大复杂,要么如React般需要哲学思考。他想创造一种更"人性化"的工具——就像用铅笔素描般自然,却能画出数字油画般精致的作品。于是,Vue.js这个融合东方设计美学的框架悄然诞生。这个轻量级的框架最初只有运行时库,却像一粒精心培育的种子。尤雨溪将"渐进式"理念注入DNA:
计算机毕业设计Java-ssm餐厅线上点菜系统源码+系统+数据库+lw文档
双双科技
java 数据库 开发语言
计算机毕业设计Java-ssm餐厅线上点菜系统源码+系统+数据库+lw文档计算机毕业设计Java-ssm餐厅线上点菜系统源码+系统+数据库+lw文档本源码技术栈:项目架构:B/S架构开发语言:Java语言开发软件:ideaeclipse前端技术:Layui、HTML、CSS、JS、JQuery等技术后端技术:JAVA运行环境:Win10、JDK1.8数据库:MySQL5.7/8.0源码地址:htt
使用Mapbox GL加载GeoJSON数据并创建热力图
技术驱动者
js
使用MapboxGL加载GeoJSON数据并创建热力图在Web地图应用程序中,将地理数据可视化是一种常见的需求。MapboxGL是一个强大的JavaScript库,可以帮助我们在浏览器中创建交互式地图。本文将介绍如何使用MapboxGL加载GeoJSON数据,并将其转化为热力图。热力图是一种通过颜色来表示密度分布的可视化方式。在地理数据可视化中,热力图常用于显示点数据的密集程度,以便更直观地理解数
前端杂学录(七)
真的不想学习啦
前端 前端 html5 javascript css
1.响应式布局方案1.媒体查询特点媒体查询是CSS的一部分,可以根据设备的特性(如宽度、高度、分辨率等)应用不同的样式。示例body{font-size:16px;}@media(max-width:768px){body{font-size:14px;}}@media(max-width:480px){body{font-size:12px;}}2.弹性布局(Flexbox)特点Flexbox是
Vue.js 实战:开发动态日历式待办事项管理页面」 「从零开始:用 Vue2 实现一个直观的任务日程管理系统」 「前端新手项目:基于 Vue.js 的待办事项与日程管理页面」 「Vue.js 教程:
南北极之间
web前端特效源码 前端 vue.js css 网页设计 javascript 日历 待办事项
【Cherry Studio】是什么?怎样使用?
南北极之间
学习
CherryStudio:可视化前端开发工具详解1.CherryStudio是什么?CherryStudio是一款可视化前端开发工具,它的核心理念是:可视化编程:抛弃或减少手写代码,通过拖拽、配置等可视化方式构建用户界面。组件化开发:将页面拆分成独立的、可复用的组件,提高开发效率和代码质量。所见即所得:实时预览设计效果,方便调整和优化。简单来说,CherryStudio就像一个前端开发的“乐高积木
Webpack、Vite区别知多少?
m0_74824044
面试 学习路线 阿里巴巴 webpack 前端 node.js
前端的项目打包,我们常用的构建工具有Webpack和Vite,那么Webpack和Vite是两种不同的前端构建工具,那么你们又是否了解它们的区别呢?我们在做项目时要如何选择呢?一、工具定义1、Webpack:是一个强大的静态模块打包工具,它可以将各种类型的文件,如JavaScript、CSS、图片等,作为模块进行打包,并生成最终的静态资源文件。Webpack使用各种loader和plugin来处理
验证码介绍及生成与验证(HTML + JavaScript实现)
学习&实践爱好者
JavaScrip技术 HTML5与CSS3 编程实践系列 javascript
验证码介绍及生成与验证(HTML+JavaScript实现)验证码验证码(全自动区分计算机和人类的图灵测试,CAPTCHA,CompletelyAutomatedPublicTuringtesttotellComputersandHumansApart)是一种用于区分用户是人类还是自动化程序的安全机制,通过生成人类易识别、机器难破解的测试题目实现身份验证。作用防止恶
前端或者后端通常用到数组使用方式
Mrzheng168
前端
第一个是:Array.from()将具有length属性或者可迭代的对象转化为数组Array.from('abcdef')//返回值['a1','b1','c1','d1','e1','f1']Array.from(newMap([['b1',1],['a1',2]]))Array.from(newSet([1,2,3]))第二个是:Array.reduce()遍历数组,将函数的返回值,存储到累加
Puppeteer.js 一个可以不动手操作浏览的插件
海上彼尚
node.js javascript 开发语言 ecmascript
目录Puppeteer.js简介安装Puppeteer基础使用1.启动浏览器并打开页面2.核心API详解浏览器对象(Browser)页面对象(Page)选择器常见用例用例1:生成网页截图用例2:生成PDF用例3:提交表单用例4:等待元素加载用例5:模拟移动设备高级功能1.拦截网络请求2.执行自定义JavaScript3.处理弹窗4.下载文件最佳实践总结Puppeteer.js简介Puppeteer
将Javascript打包成exe可执行文件
海上彼尚
node.js javascript 开发语言 node.js
目录什么是pkg?安装pkg基本使用步骤1:准备你的Node.js项目步骤2:通过命令行打包步骤3:运行生成的可执行文件配置package.json处理资源文件高级用法指定Node.js版本和平台打包整个项目处理环境变量常见问题问题1:动态导入模块失败问题2:文件路径错误问题3:缺少依赖示例:打包Express应用总结什么是pkg?pkg是一个命令行工具,能将Node.js项目及其依赖打包成一个单
深入剖析 Vue 的响应式原理:构建高效 Web 应用的基石
东锋1.3
vue.js vue.js 前端 javascript
深入剖析Vue的响应式原理:构建高效Web应用的基石在前端开发的广阔天地里,Vue.js凭借其简洁易用的特性和强大的功能,成为众多开发者的心头好。其中,响应式原理作为Vue的核心亮点之一,让数据与视图之间实现了高效的自动同步,极大地提升了开发体验和应用性能。今天,就让我们深入探究Vue响应式原理背后的奥秘。一、什么是响应式编程在前端领域,响应式编程是一种编程范式,它赋予程序对数据变化做出自动反应的
深入理解 Vue 的异步更新机制:原理、应用与最佳实践
东锋1.3
vue.js vue.js 前端 javascript
深入理解Vue的异步更新机制:原理、应用与最佳实践在前端开发领域,Vue.js凭借其简洁易用、性能卓越的特点,成为众多开发者构建用户界面的首选框架。其中,异步更新机制作为Vue的核心特性之一,对提升应用性能和优化开发体验起着至关重要的作用。本文将深入探讨Vue的异步更新机制,从其基础概念、工作原理,到实际应用中的注意事项与最佳实践,全方位剖析这一特性。Vue的响应式系统:异步更新的基石在深入了解异
java毕业设计家教管理系统mybatis+源码+调试部署+系统+数据库+lw
练练科技
数据库 java mybatis
java毕业设计家教管理系统mybatis+源码+调试部署+系统+数据库+lwjava毕业设计家教管理系统mybatis+源码+调试部署+系统+数据库+lw本源码技术栈:项目架构:B/S架构开发语言:Java语言开发软件:ideaeclipse前端技术:Layui、HTML、CSS、JS、JQuery等技术后端技术:JAVA运行环境:Win10、JDK1.8数据库:MySQL5.7/8.0源码地址
java毕业生设计宠物领养管理系统计算机源码+系统+mysql+调试部署+lw
你眼里的星星
java mysql 宠物
java毕业生设计宠物领养管理系统计算机源码+系统+mysql+调试部署+lwjava毕业生设计宠物领养管理系统计算机源码+系统+mysql+调试部署+lw本源码技术栈:项目架构:B/S架构开发语言:Java语言开发软件:ideaeclipse前端技术:Layui、HTML、CSS、JS、JQuery等技术后端技术:JAVA运行环境:Win10、JDK1.8数据库:MySQL5.7/8.0源码地址
太强了!测试 Claude 3.7 Sonnet 模型前端代码能力提示词及Claude Code 系统提示词
技术程序猿华锋
AIGC资讯 前端 人工智能
Claude3.7Sonnet测试模型的前端代码能力提示词;CreateasingleHTMLfilecontainingCSSandJavaScripttogenerateananimatedweathercard.Thecardshouldvisuallyrepresentthefollowingweatherconditionswithdistinctanimations:Wind:(e.g
ThreeJS入门(036):THREE.RawShaderMaterial 知识详解,示例代码
还是大剑师兰特
# ThreeJS中文API全解 大剑师 threejs教程 threejs示例
作者:还是大剑师兰特,曾为美国某知名大学计算机专业研究生,现为国内GIS领域高级前端工程师,CSDN知名博主,深耕openlayers、leaflet、mapbox、cesium,webgl,ThreeJS,canvas,echarts等技术开发,欢迎加微信(gis-dajianshi),一起交流。查看本专栏目录-本文是第036篇入门文章文章目录构造函数常用属性示例使用统一变量使用宏定义使用扩展使
<a>标签中href=“javascript:;“
Alkaid:
JS javascript
javascript:是表示在触发默认动作时,执行一段JavaScript代码,而javascript:;表示什么都不执行,跟href=”javascript:void(0)”是一样的,void是JavaScript的一个运算符,void(0)就是什么都不做的意思,这样点击时就没有任何反应,页面就不会跳转。
【Java】@JsonFormat和@DateTimeFormat注解区别
Alkaid:
SpringBoot Java java
注解@JsonFormat主要是后端到前端的时间格式的转换注解@DateTimeFormat主要是前端到后端的时间格式的转换
electron 的原理,使用场景,简单用法
学会了没
electron javascript 前端
一、核心原理架构组成Chromium渲染引擎:负责界面渲染,每个窗口都是一个独立的Chromium实例。Node.js运行时:提供对系统底层API的访问(如文件系统、网络等)。主进程与渲染进程:主进程:应用程序的入口,管理窗口生命周期和原生API(如菜单、对话框)。渲染进程:每个窗口对应一个渲染进程,运行前端代码,通过preload脚本安全地桥接Node.js功能。进程间通信(IPC)ipcMai
Maven+SSM+SpringBoot+Mybatis-Plus
五月茶
maven spring boot mybatis
SSM技术栈:spring6、springmvc、mybatis、springboot3、mybatis-plus、druid;前端:node、npm、vue快速掌握:全新SSM+SpringBoot+MyBatis-Plus实战精讲
【商城系统部署到上线】
启山智软 商城 源码
小程序 微信小程序 java
商城系统开发是一个复杂的过程,涉及多种技能。以下是一些关键技能:一、前端开发技能HTML/CSS页面结构搭建:HTML用于构建网页的基本结构,如头部、导航栏、商品展示区、购物车等各个功能区域的框架。开发者要熟练掌握各种HTML标签,以创建语义化和结构化良好的页面。样式设计与美化:CSS能够控制网页的布局、字体、颜色、背景等外观效果。通过CSS,可以使页面更加美观、易用,并且适应不同的屏幕尺寸(响应
什么是Restful风格以及它的四种具体实现形式
咕噜咕噜超。
Spring restful java 后端
一、背景在之前我们进行项目开发时,我们一般不注重区分前端向后端请求数据的方式,不管你前端传过来的是get请求还是post请求,即不管是哪一种请求,我们都可以用@RequestMapping注解来处理。但是如果在进行项目开发时,组里老大规定我们必须明确处理我们前端到底是哪一种请求,是get还是post?是put还是delete?那这时候其实我们就要以restful风格来处理我们的前端请求了。即res
jQuery 跨域访问的三种方式 No 'Access-Control-Allow-Origin' header is present on the reque
qiaolevip
每天进步一点点 学习永无止境 跨域 众观千象
XMLHttpRequest cannot load http://v.xxx.com. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:63342' is therefore not allowed access. test.html:1
mysql 分区查询优化
annan211
java 分区 优化 mysql
分区查询优化
引入分区可以给查询带来一定的优势,但同时也会引入一些bug.
分区最大的优点就是优化器可以根据分区函数来过滤掉一些分区,通过分区过滤可以让查询扫描更少的数据。
所以,对于访问分区表来说,很重要的一点是要在where 条件中带入分区,让优化器过滤掉无需访问的分区。
可以通过查看explain执行计划,是否携带 partitions
MYSQL存储过程中使用游标
chicony
Mysql存储过程
DELIMITER $$
DROP PROCEDURE IF EXISTS getUserInfo $$
CREATE PROCEDURE getUserInfo(in date_day datetime)-- -- 实例-- 存储过程名为:getUserInfo-- 参数为:date_day日期格式:2008-03-08-- BEGINdecla
mysql 和 sqlite 区别
Array_06
sqlite
转载:
http://www.cnblogs.com/ygm900/p/3460663.html
mysql 和 sqlite 区别
SQLITE是单机数据库。功能简约,小型化,追求最大磁盘效率
MYSQL是完善的服务器数据库。功能全面,综合化,追求最大并发效率
MYSQL、Sybase、Oracle等这些都是试用于服务器数据量大功能多需要安装,例如网站访问量比较大的。而sq
pinyin4j使用
oloz
pinyin4j
首先需要pinyin4j的jar包支持;jar包已上传至附件内
方法一:把汉字转换为拼音;例如:编程转换后则为biancheng
/**
* 将汉字转换为全拼
* @param src 你的需要转换的汉字
* @param isUPPERCASE 是否转换为大写的拼音; true:转换为大写;fal
微博发送私信
随意而生
微博
在前面文章中说了如和获取登陆时候所需要的cookie,现在只要拿到最后登陆所需要的cookie,然后抓包分析一下微博私信发送界面
http://weibo.com/message/history?uid=****&name=****
可以发现其发送提交的Post请求和其中的数据,
让后用程序模拟发送POST请求中的数据,带着cookie发送到私信的接入口,就可以实现发私信的功能了。
jsp
香水浓
jsp
JSP初始化
容器载入JSP文件后,它会在为请求提供任何服务前调用jspInit()方法。如果您需要执行自定义的JSP初始化任务,复写jspInit()方法就行了
JSP执行
这一阶段描述了JSP生命周期中一切与请求相关的交互行为,直到被销毁。
当JSP网页完成初始化后
在 Windows 上安装 SVN Subversion 服务端
AdyZhang
SVN
在 Windows 上安装 SVN Subversion 服务端2009-09-16高宏伟哈尔滨市道里区通达街291号
最佳阅读效果请访问原地址:http://blog.donews.com/dukejoe/archive/2009/09/16/1560917.aspx
现在的Subversion已经足够稳定,而且已经进入了它的黄金时段。我们看到大量的项目都在使
android开发中如何使用 alertDialog从listView中删除数据?
aijuans
android
我现在使用listView展示了很多的配置信息,我现在想在点击其中一条的时候填出 alertDialog,点击确认后就删除该条数据,( ArrayAdapter ,ArrayList,listView 全部删除),我知道在 下面的onItemLongClick 方法中 参数 arg2 是选中的序号,但是我不知道如何继续处理下去 1 2 3
jdk-6u26-linux-x64.bin 安装
baalwolf
linux
1.上传安装文件(jdk-6u26-linux-x64.bin)
2.修改权限
[root@localhost ~]# ls -l /usr/local/jdk-6u26-linux-x64.bin
3.执行安装文件
[root@localhost ~]# cd /usr/local
[root@localhost local]# ./jdk-6u26-linux-x64.bin&nbs
MongoDB经典面试题集锦
BigBird2012
mongodb
1.什么是NoSQL数据库?NoSQL和RDBMS有什么区别?在哪些情况下使用和不使用NoSQL数据库?
NoSQL是非关系型数据库,NoSQL = Not Only SQL。
关系型数据库采用的结构化的数据,NoSQL采用的是键值对的方式存储数据。
在处理非结构化/半结构化的大数据时;在水平方向上进行扩展时;随时应对动态增加的数据项时可以优先考虑使用NoSQL数据库。
在考虑数据库的成熟
JavaScript异步编程Promise模式的6个特性
bijian1013
JavaScript Promise
Promise是一个非常有价值的构造器,能够帮助你避免使用镶套匿名方法,而使用更具有可读性的方式组装异步代码。这里我们将介绍6个最简单的特性。
在我们开始正式介绍之前,我们想看看Javascript Promise的样子:
var p = new Promise(function(r
[Zookeeper学习笔记之八]Zookeeper源代码分析之Zookeeper.ZKWatchManager
bit1129
zookeeper
ClientWatchManager接口
//接口的唯一方法materialize用于确定那些Watcher需要被通知
//确定Watcher需要三方面的因素1.事件状态 2.事件类型 3.znode的path
public interface ClientWatchManager {
/**
* Return a set of watchers that should
【Scala十五】Scala核心九:隐式转换之二
bit1129
scala
隐式转换存在的必要性,
在Java Swing中,按钮点击事件的处理,转换为Scala的的写法如下:
val button = new JButton
button.addActionListener(
new ActionListener {
def actionPerformed(event: ActionEvent) {
Android JSON数据的解析与封装小Demo
ronin47
转自:http://www.open-open.com/lib/view/open1420529336406.html
package com.example.jsondemo;
import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;
impor
[设计]字体创意设计方法谈
brotherlamp
UI ui自学 ui视频 ui教程 ui资料
从古至今,文字在我们的生活中是必不可少的事物,我们不能想象没有文字的世界将会是怎样。在平面设计中,UI设计师在文字上所花的心思和功夫最多,因为文字能直观地表达UI设计师所的意念。在文字上的创造设计,直接反映出平面作品的主题。
如设计一幅戴尔笔记本电脑的广告海报,假设海报上没有出现“戴尔”两个文字,即使放上所有戴尔笔记本电脑的图片都不能让人们得知这些电脑是什么品牌。只要写上“戴尔笔
单调队列-用一个长度为k的窗在整数数列上移动,求窗里面所包含的数的最大值
bylijinnan
java 算法 面试题
import java.util.LinkedList;
/*
单调队列 滑动窗口
单调队列是这样的一个队列:队列里面的元素是有序的,是递增或者递减
题目:给定一个长度为N的整数数列a(i),i=0,1,...,N-1和窗长度k.
要求:f(i) = max{a(i-k+1),a(i-k+2),..., a(i)},i = 0,1,...,N-1
问题的另一种描述就
struts2处理一个form多个submit
chiangfai
struts2
web应用中,为完成不同工作,一个jsp的form标签可能有多个submit。如下代码:
<s:form action="submit" method="post" namespace="/my">
<s:textfield name="msg" label="叙述:">
shell查找上个月,陷阱及野路子
chenchao051
shell
date -d "-1 month" +%F
以上这段代码,假如在2012/10/31执行,结果并不会出现你预计的9月份,而是会出现八月份,原因是10月份有31天,9月份30天,所以-1 month在10月份看来要减去31天,所以直接到了8月31日这天,这不靠谱。
野路子解决:假设当天日期大于15号
mysql导出数据中文乱码问题
daizj
mysql 中文乱码 导数据
解决mysql导入导出数据乱码问题方法:
1、进入mysql,通过如下命令查看数据库编码方式:
mysql> show variables like 'character_set_%';
+--------------------------+----------------------------------------+
| Variable_name&nbs
SAE部署Smarty出现:Uncaught exception 'SmartyException' with message 'unable to write
dcj3sjt126com
PHP smarty sae
对于SAE出现的问题:Uncaught exception 'SmartyException' with message 'unable to write file...。
官方给出了详细的FAQ:http://sae.sina.com.cn/?m=faqs&catId=11#show_213
解决方案为:
01
$path
《教父》系列台词
dcj3sjt126com
Your love is also your weak point.
你的所爱同时也是你的弱点。
If anything in this life is certain, if history has taught us anything, it is
that you can kill anyone.
不顾家的人永远不可能成为一个真正的男人。 &
mongodb安装与使用
dyy_gusi
mongo
一.MongoDB安装和启动,widndows和linux基本相同
1.下载数据库,
linux:mongodb-linux-x86_64-ubuntu1404-3.0.3.tgz
2.解压文件,并且放置到合适的位置
tar -vxf mongodb-linux-x86_64-ubun
Git排除目录
geeksun
git
在Git的版本控制中,可能有些文件是不需要加入控制的,那我们在提交代码时就需要忽略这些文件,下面讲讲应该怎么给Git配置一些忽略规则。
有三种方法可以忽略掉这些文件,这三种方法都能达到目的,只不过适用情景不一样。
1. 针对单一工程排除文件
这种方式会让这个工程的所有修改者在克隆代码的同时,也能克隆到过滤规则,而不用自己再写一份,这就能保证所有修改者应用的都是同一
Ubuntu 创建开机自启动脚本的方法
hongtoushizi
ubuntu
转载自: http://rongjih.blog.163.com/blog/static/33574461201111504843245/
Ubuntu 创建开机自启动脚本的步骤如下:
1) 将你的启动脚本复制到 /etc/init.d目录下 以下假设你的脚本文件名为 test。
2) 设置脚本文件的权限 $ sudo chmod 755
第八章 流量复制/AB测试/协程
jinnianshilongnian
nginx lua coroutine
流量复制
在实际开发中经常涉及到项目的升级,而该升级不能简单的上线就完事了,需要验证该升级是否兼容老的上线,因此可能需要并行运行两个项目一段时间进行数据比对和校验,待没问题后再进行上线。这其实就需要进行流量复制,把流量复制到其他服务器上,一种方式是使用如tcpcopy引流;另外我们还可以使用nginx的HttpLuaModule模块中的ngx.location.capture_multi进行并发
电商系统商品表设计
lkl
DROP TABLE IF EXISTS `category`; -- 类目表
/*!40101 SET @saved_cs_client = @@character_set_client */;
/*!40101 SET character_set_client = utf8 */;
CREATE TABLE `category` (
`id` int(11) NOT NUL
修改phpMyAdmin导入SQL文件的大小限制
pda158
sql mysql
用phpMyAdmin导入mysql数据库时,我的10M的
数据库不能导入,提示mysql数据库最大只能导入2M。
phpMyAdmin数据库导入出错: You probably tried to upload too large file. Please refer to documentation for ways to workaround this limit.
Tomcat性能调优方案
Sobfist
apache jvm tomcat 应用服务器
一、操作系统调优
对于操作系统优化来说,是尽可能的增大可使用的内存容量、提高CPU的频率,保证文件系统的读写速率等。经过压力测试验证,在并发连接很多的情况下,CPU的处理能力越强,系统运行速度越快。。
【适用场景】 任何项目。
二、Java虚拟机调优
应该选择SUN的JVM,在满足项目需要的前提下,尽量选用版本较高的JVM,一般来说高版本产品在速度和效率上比低版本会有改进。
J
SQLServer学习笔记
vipbooks
数据结构 xml
1、create database school 创建数据库school
2、drop database school 删除数据库school
3、use school 连接到school数据库,使其成为当前数据库
4、create table class(classID int primary key identity not null)
创建一个名为class的表,其有一