《Vue.js实战》——基础篇(1)
目录
资源:🌟
一、初识Vue.js👋
Vue.js是什么?🙇
MVVM模式 ✍
Vue.js有什么不同 ☔
如何使用Vue.js? ☁
传统的前端开发模式 ☀
Vue.js的开发模式 🗻
二、数据绑定和第一个Vue应用 🗼
Vue实例和数据绑定 🗽
实例和数据 🗿
生命周期 🦁
插值与表达式 ⌛
过滤器 ☕
指令与事件 ⚡
语法糖 🍬
三、计算属性 🌄
什么是计算属性 🌈
计算属性的用法 🍄
计算属性缓存 🍉
资源:🌟
Vue 2.X 官网:Vue.js (vuejs.org)
深入理解Vue.js实战 (godbasin.com)
一、初识Vue.js👋
Vue.js是什么?🙇

MVVM模式 ✍
与知名前端框架 Angular、Ember 等一样,Vue.js 在设计上也使用 MVVM(Model-View-View Model)模式。 MVVM 模式是由经典的软件架构 MVC 衍生来的。当 View(视图层)变化时,会自动更新到 ViewModel(视图模型),反之亦然。View 和 ViewModel 之间通过双向绑定(data-binding)建立联系,如图所示:

在MVVM的架构下,View层和Model层并没有直接联系,而是通过ViewModel层进行交互。
ViewModel通常要实现一个observer观察者,当数据发生变化,ViewModel能够监听到数据的这种变化,然后通知到对应的视图做自动更新,而当用户操作视图,ViewModel也能监听到视图的变化,然后通知数据做改动,这实际上就实现了数据的双向绑定。
ViewModel层通过双向数据绑定将View层和Model层连接了起来,使得View层和Model层的同步工作完全是自动的。因此开发者只需关注业务逻辑,无需手动操作DOM,复杂的数据状态维护交给MVVM统一来管理。

Vue.js有什么不同 ☔
有关Vue与其他框架的区别可见官网描述:
对比其他框架 — Vue.js (vuejs.org)


如何使用Vue.js? ☁
每一个框架的产生都是为了解决某个具体的问题。在正式开始学习 Vue.js 前,我们先对传统 前端开发模式和 Vue.js 的开发模式做一个对比,以此了解 Vue.js 产生的背景和核心思想。
传统的前端开发模式 ☀

Vue.js的开发模式 🗻
Vue.js 是一个渐进式的 JavaScript 框架,根据项目需求,你可以选择从不同的维度来使用它。 如果你只是想体验 Vue.js 带来的快感,或者开发几个简单的 HTML 5 页面或小应用,你可以直接 通过 script 加载 CDN 文件,例如
对于制作原型或学习,你可以这样使用最新版本:
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
对于生产环境,我们推荐链接到一个明确的版本号和构建文件,以避免新版本造成的不可预期的破坏:
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
两种版本都可以,如果你不太了解各版本的差别,建议直接使用最新的稳定版本。当然,你 也可以将代码下载下来,通过自己的相对路径来引用。引入 Vue.js 框架后,在 body 底部使用 new Vue()的方式创建一个实例,这就是 Vue.js 最基本的开发模式。现在可以写入以下完整的代码来快 速体验 Vue。
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Vue 示例</title>
</head>
<body>
<div id="app"><ul><li v-for="book in books">{{ book.name }}</li></ul>
</div>
<script src="vue.min.js"></script>
<script>new Vue({el: '#app',data: {books: [{ name: '《Vue.js 实战》' },{ name: '《JavaScript 语言精粹》' },{ name: '《JavaScript 高级程序设计》' }]}})
</script>
</body>
</html>

二、数据绑定和第一个Vue应用 🗼
学习任何一种框架,从一个 Hello World 应用开始是最快了解该框架特性的途径,我们先从一 段简单的 HTML 代码开始,感受 Vue.js 最核心的功能。
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Vue 示例</title>
</head>
<body>
<div id="app"><input type="text" v-model="name" placeholder="你的名字"><h1>你好,{{ name }}</h1>
</div>
<script src="vue.min.js"></script>
<script>let app = new Vue({el: '#app',data: {name: ''}})
</script>
</body>
</html>
这是一段简单到不能再简单的代码,但却展示出了 Vue.js 最核心的功能:数据的双向绑定。 在输入框输入的内容会实时展示在页面的 h1 标签内,如图所示 :

Vue实例和数据绑定 🗽
实例和数据 🗿



生命周期 🦁


插值与表达式 ⌛




过滤器 ☕

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app">{{ date | formatDate }}
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>//在月份、日期、小时等小于 10 时前面补 0var padDate = function(value) {return value < 10 ? '0' + value : value;};var app = new Vue({el: '#app',data: {date: new Date()},filters: {formatDate: function (value) { // 这里的 value 就是需要过滤的数据var date = new Date(value);var year = date.getFullYear();var month = padDate(date.getMonth() + 1);var day = padDate(date.getDate());var hours = padDate(date.getHours());var minutes = padDate(date.getMinutes());var seconds = padDate(date.getSeconds());//将整理好的数据返回出去return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes+ ':' + seconds;}},mounted: function () {let _this = this; // 声明一个变量指向 Vue 实例 this,保证作用域一致this.timer = setInterval(function() {_this.date = new Date(); //修改数据 date}, 1000);},beforeDestroy: function () {if (this.timer) {clearInterval(this.timer); //在 Vue 实例销毁前,清除我们的定时器}}})
</script>
</body>
</html>


过滤器应当用于处理简单的文本转换,如果要实现更为复杂的数据变换,应该使用计算属性。
指令与事件 ⚡



<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app"><p v-if="show">这是一段文本</p><button v-on:click="handleClose">点击隐藏</button>
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>let app = new Vue({el: '#app',data: {show: true},methods: {handleClose: function () {this.show = false;}}})
</script>
</body>
</html>


在 button 按钮上,使用 v-on:click 给该元素绑定了一个点击事件,在普通元素上,v-on 可以监 听原生的 DOM 事件,除了 click 外,还有 dblclick、keyup、mousemove 等。表达式可以是一个方 法名,这些方法都写在 Vue 实例的 methods 属性内,并且是函数的形式,函数内的 this 指向的是当 前 Vue 实例本身,因此可以直接使用 this.xxx 的形式来访问或修改数据,如示例中的 this.show = false; 把数据 show 修改为了 false,所以点击按钮时,文本 p 元素就被移除了。 表达式除了方法名,也可以直接是一个内联语句,上例也可以改写为:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app"><p v-if="show">这是一段文本</p><button v-on:click="show = false">点击隐藏</button>
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>let app = new Vue({el: '#app',data: {show: true}})
</script>
</body>
</html>
如果绑定的事件要处理复杂的业务逻辑,建议还是在 methods 里声明一个方法,这样可读性更强也好维护。 Vue.js 将 methods 里的方法也代理了,所以也可以像访问 Vue 数据那样来调用方法:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app"><p v-if="show">这是一段文本</p><button v-on:click="handleClose">点击隐藏</button>
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>let app = new Vue({el: '#app',data: {show: true},methods: {handleClose: function () {this.close();},close: function () {this.show = false;}}})
</script>
</body>
</html>
在 handleClose 方法内,直接通过 this.close()调用了 close()函数。在上面示例中是多此一举的, 只是用于演示它的用法,在业务中会经常用到,例如以下几种用法都是正确的:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app"><p v-if="show">{{ content }}</p><button v-on:click="hideText">点击隐藏</button>
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>let app = new Vue({el: '#app',data: {show: true,content: '这是一段修改后的文本'},methods: {hideText: function() {this.show = false;}}});
</script>
</body>
</html>
在此基础上继续完成,“再点击一次按钮点击隐藏按钮变成点击恢复的按钮,并且恢复隐藏的内容”。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app"><p v-if="show">{{ content }}</p><button v-on:click="toggleText">{{ buttonText }}</button>
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>let app = new Vue({el: '#app',data: {show: true,content: '这是一段修改后的文本',buttonText: '点击隐藏'},methods: {toggleText: function() {this.show = !this.show;this.buttonText = this.show ? '点击隐藏' : '点击恢复';}}});
</script>
</body>
</html>


语法糖 🍬

三、计算属性 🌄
模板内的表达式常用于简单的运算,当其过长或逻辑复杂时,会难以维护,本章的计算属性 就是用于解决该问题的。
什么是计算属性 🌈

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app">{{ reversedText }}
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>var app = new Vue({el: '#app',data: {text: '123,456'},computed: {reversedText: function () {// 这里的 this 指向的是当前的 Vue 实例return this.text.split(',').reverse().join(',');}}})
</script>
</body>
</html>

所有的计算属性都以函数的形式写在 Vue 实例内的 computed 选项内,最终返回计算后的结果。
计算属性的用法 🍄
在一个计算属性里可以完成各种复杂的逻辑,包括运算、函数调用等,只要最终返回一个结 果就可以。除了上例简单的用法,计算属性还可以依赖多个 Vue 实例的数据,只要其中任一数据 变化,计算属性就会重新执行,视图也会更新。例如,下面的示例展示的是在购物车内两个包裹的 物品总价:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app">总价:{{ prices }}
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>let app = new Vue({el: '#app',data: {package1: [{name: 'iPhone 7',price: 7199,count: 2},{name: 'iPad',price: 2888,count: 1}],package2: [{name: 'apple',price: 3,count: 5},{name: 'banana',price: 2,count: 10}]},computed: {prices: function () {let prices = 0;for (let i = 0; i < this.package1.length; i++) {prices += this.package1[i].price * this.package1[i].count;}for (let i = 0; i < this.package2.length; i++) {prices += this.package2[i].price * this.package2[i].count;}return prices;}}})
</script>
</body>
</html>

当 package1 或 package2 中的商品有任何变化,比如购买数量变化或增删商品时,计算属性 prices 就会自动更新,视图中的总价也会自动变化。 每一个计算属性都包含一个 getter 和一个 setter,我们上面的两个示例都是计算属性的默认用 法,只是利用了 getter 来读取。在你需要时,也可以提供一个 setter 函数,当手动修改计算属性的 值就像修改一个普通数据那样时,就会触发 setter 函数,执行一些自定义的操作,例如:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app">姓名:{{ fullName }}
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>var app = new Vue({el: '#app',data: {firstName: 'Jack',lastName: 'Green'},computed: {fullName: {// getter,用于读取get: function () {return this.firstName + ' ' + this.lastName;},// setter,写入时触发set: function (newValue) {var names = newValue.split(' ');this.firstName = names[0];this.lastName = names[names.length - 1];}}}});
</script>
</body>
</html>

当执行 app.fullName = 'John Doe'; 时,setter就会被调用,数据 firstName 和 lastName 都会相对 更新,视图同样也会更新。 绝大多数情况下,我们只会用默认的getter方法来读取一个计算属性,在业务中很少用到setter, 所以在声明一个计算属性时,可以直接使用默认的写法,不必将 getter 和 setter 都声明。 计算属性除了上述简单的文本插值外,还经常用于动态地设置元素的样式名称 class 和内联样 式 style,在下章会介绍这方面的内容。当使用组件时,计算属性也经常用来动态传递 props,这也 会在第 7 章组件里详细介绍。 计算属性还有两个很实用的小技巧容易被忽略:一是计算属性可以依赖其他计算属性;二是 计算属性不仅可以依赖当前 Vue 实例的数据,还可以依赖其他实例的数据,例如:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app1"></div>
<div id="app2">{{ reversedText }}
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>var app1 = new Vue({el: '#app1',data: {text: '123,456'}});var app2 = new Vue({el: '#app2',computed: {reversedText: function () {// 这里依赖的是实例 app1 的数据 textreturn app1.text.split(',').reverse().join(',');}}})
</script>
</body>
</html>

这里我们创建了两个 Vue 实例 app1 和 app2,在 app2 的计算属性 reversedText 中,依赖的是 app1 的数据 text,所以当 text 变化时,实例 app2 的计算属性也会变化。这样的用法在后面章节介绍的组件和组件化里会用到,尤其是在多人协同开发时很常用,因为你写的一个组件所用得到的数据需要依赖他人的组件提供。随着后面对组件的深入会慢慢意识到这点,现在可以不用太过了解。
计算属性缓存 🍉
在上一章介绍指令与事件时,你可能发现调用 methods 里的方法也可以与计算属性起到同样的 作用,比如本章第一个示例可以用 methods 改写为:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app"><!-- 注意,这里的 reversedText 是方法,所以要带()-->{{ reversedText() }}
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>var app = new Vue({el: '#app',data: {text: '123,456'},methods: {reversedText: function () {// 这里的 this 指向的是当前 Vue 实例return this.text.split(',').reverse().join(',');}}})
</script>
</body>
</html>

没有使用计算属性,在 methods 里定义了一个方法实现了相同的效果,甚至该方法还可以接受参数,使用起来更灵活。既然使用 methods 就可以实现,那么为什么还需要计算属性呢?原因就是 计算属性是基于它的依赖缓存的。一个计算属性所依赖的数据发生变化时,它才会重新取值,所以 text 只要不改变,计算属性也就不更新,例如:
computed: { now: function () { return Date.now(); }
}
这里的 Date.now()不是响应式依赖,所以计算属性 now 不会更新。但是 methods 则不同,只要重新渲染,它就会被调用,因此函数也会被执行。 使用计算属性还是 methods 取决于你是否需要缓存,当遍历大数组和做大量计算时,应当使用 计算属性,除非你不希望得到缓存。
相关文章:
《Vue.js实战》——基础篇(1)
目录 资源:🌟 一、初识Vue.js👋 Vue.js是什么?🙇 MVVM模式 ✍ Vue.js有什么不同 ☔ 如何使用Vue.js? ☁ 传统的前端开发模式 ☀ Vue.js的开发模式 🗻 二、数据绑定和第一个Vue应用 Ὗ…...
R语言 列表中嵌套列名一致的多个数据框如何整合为一个数据框
在批量建模后容易得到list,list中的每个元素都是单个的tibble 或者 dataframe,如何将这些数据整合为一张表呢? 载入R包 library(broom) library(tidyverse) 模拟数据 models <- txhousing %>% group_by(city) %>% do(modlm(lo…...
PyQt5利用QTextEdit控件输入多行文本
1、总代码 #!/usr/bin/env python # -*- coding: utf-8 -*- import sys from PyQt5.QtWidgets import QApplication,QWidget from PyQt5 import QtCore, QtWidgetsclass Ui_Form(object):def setupUi(self, Form):Form.setObjectName("Form")Form.resize(320, 240)s…...
【数据结构】二叉树常见题目
文章目录 前言二叉树概念满二叉树完全二叉树二叉搜索树(二叉排序树)平衡⼆叉搜索树存储⽅式 二叉树OJ二叉树创建字符串二叉树的分层遍历1二叉树的分层遍历2给定一个二叉树, 找到该树中两个指定节点的最近公共祖先二叉树搜索树转换成排序双向链表二叉树展开为链表根据一棵树的前…...
树莓派使用 ENC28J60
前言 一些老的、Mini 的 ARM 开发板上没有预留网口,这样在调试升级内核或应用程序时很不方便。纵使有串口下载工具,但其速度也是慢地捉急。这种情况下,使用其它接口来扩展出一个网口无疑是一个比较好的方法。 ENC28J60 就是一个使用 SPI 接口…...
跟我学C++中级篇——模板友元的应用
一、友元 友元在以前分析过,而且一般编程是不推荐使用友元的,原因是友元破坏了类的封装性。但凡事总有例外,在某些情况下,用友元还是比较方便的,那么该用还得用,不能因噎废食。普通的友元,各种…...
软件测试基础篇——MySQL
MySQL 1、数据库技术概述 数据库database:存放和管理各种数据的仓库,操作的对象主要是【数据data】,科学的组织和存储数据,高效的获取和处理数据SQL:结构化查询语言,专为**关系型数据库而建立的操作语言&…...
FreeRTOS(二值信号量)
资料来源于硬件家园:资料汇总 - FreeRTOS实时操作系统课程(多任务管理) 目录 一、信号量的概念 1、信号量的基本概念 2、信号量的分类 二、二值信号量的定义与应用 1、二值信号量的定义 2、二值信号量的应用 三、二值信号量的运作机制 1、FreeRTOS任务间二值…...
leetcode面试题:动物收容所(考查对队列的理解和运用)
题目: 有家动物收容所只收容狗与猫,且严格遵守“先进先出”的原则。在收养该收容所的动物时,收养人只能收养所有动物中“最老”(由其进入收容所的时间长短而定)的动物,或者可以挑选猫或狗(同时…...
【Linux命令行与Shell脚本编程】第十八章 文本处理与编辑器基础
Linux命令行与Shell脚本编程 第十八章 文本处理与编辑器基础 文章目录 Linux命令行与Shell脚本编程第十八章 文本处理与编辑器基础 文本处理与编辑器基础8.1.文本处理8.1.1.sed编辑器8.1.1.1.在命令行中定义编辑器命令8.1.1.2.在命令行中使用多个编辑器命令8.1.1.3.从文件中读…...
2023牛客暑期多校训练营7
Beautiful Sequence 贪心,二进制,构造 Cyperation 模拟 ,数学 We Love Strings 分块,二进制枚举,二进制容斥dp Writing Books 签到 根据相邻两个异或值B,因为前小于等于后,故从高到低遍历B的每一…...
centos7升级glibc2.28
1 概述 centos7自带的glibc对于某些软件是太旧的,决定将glibc升级至2.28。 2 安装过程 2.1 下载glibc源码 mkdir -p /opt/third-party && cd /opt/third-party wget http://ftp.gnu.org/gnu/glibc/glibc-2.28.tar.gz tar -xf glibc-2.28.tar.gz cd glibc…...
腾讯云香港服务器租用_2核2G20M_2核4G30M
腾讯云香港服务器租用费用表,目前中国香港地域轻量应用服务器可选配置2核2G20M、2核2G30M、2核4G30M,操作系统可选Windows和Linux,不只是香港云服务器,新加坡、硅谷、法兰克福和东京服务器均有活动,腾讯云服务器网分享…...
十三、ESP32PS2摇杆(ADC)
1. 运行效果 在上下左右操作PS2摇杆的时候,会检测到数据 2. 滑动电阻...
网络安全的相关知识点
网络安全威胁类型: 1.窃听:广播式网络系统。 2.假冒 3.重放:重复一份报文或者报文的一部分,以便产生一个被授权的效果。 4.流量分析 5.数据完整性破坏 6.拒绝服务 7.资源的非授权使用 8.陷门和特洛伊木马:木马病毒有客…...
算法练习(6):牛客在线编程06 递归/回溯
package jz.bm;import java.io.PushbackInputStream; import java.lang.reflect.Array; import java.util.ArrayList; import java.util.Arrays;public class bm6 {/*** BM55 没有重复项数字的全排列*/ArrayList<ArrayList<Integer>> res new ArrayList<>()…...
C#使用OpenCv(OpenCVSharp)图像局部二值化处理实例
本文实例演示C#语言中如何使用OpenCv(OpenCVSharp)对图像进行局部二值化处理。 目录 图像二值化原理 局部二值化 自适应阈值 实例 效果...
MySQL多表关联查询
目录 1. inner join: 2. left join: 3. right join: 4.自连接 5.交叉连接: 6、联合查询 7、子查询 1. inner join: 代表选择的是两个表的交差部分。 内连接就是表间的主键与外键相连,只取得键值一致…...
flutter开发实战-CustomClipper裁剪长图帧动画效果
flutter开发实战-CustomClipper裁剪长图帧动画效果 在开发过程中,经常遇到帧动画的每一帧图显示在超长图上,需要处理这种帧动画效果。我这里使用的是CustomClipper 一、CustomClipper CustomClipper继承于Listenable abstract class CustomClipper e…...
CSS 中的优先级规则是怎样的?
聚沙成塔每天进步一点点 ⭐ 专栏简介⭐内联样式(Inline Styles)⭐ID 选择器(ID Selectors)⭐类选择器、属性选择器和伪类选择器(Class, Attribute, and Pseudo-class Selectors)⭐元素选择器和伪元素选择器…...
大型活动交通拥堵治理的视觉算法应用
大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动(如演唱会、马拉松赛事、高考中考等)期间,城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例,暖城商圈曾因观众集中离场导致周边…...
Docker 运行 Kafka 带 SASL 认证教程
Docker 运行 Kafka 带 SASL 认证教程 Docker 运行 Kafka 带 SASL 认证教程一、说明二、环境准备三、编写 Docker Compose 和 jaas文件docker-compose.yml代码说明:server_jaas.conf 四、启动服务五、验证服务六、连接kafka服务七、总结 Docker 运行 Kafka 带 SASL 认…...
java调用dll出现unsatisfiedLinkError以及JNA和JNI的区别
UnsatisfiedLinkError 在对接硬件设备中,我们会遇到使用 java 调用 dll文件 的情况,此时大概率出现UnsatisfiedLinkError链接错误,原因可能有如下几种 类名错误包名错误方法名参数错误使用 JNI 协议调用,结果 dll 未实现 JNI 协…...
dedecms 织梦自定义表单留言增加ajax验证码功能
增加ajax功能模块,用户不点击提交按钮,只要输入框失去焦点,就会提前提示验证码是否正确。 一,模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...
多模态商品数据接口:融合图像、语音与文字的下一代商品详情体验
一、多模态商品数据接口的技术架构 (一)多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如,当用户上传一张“蓝色连衣裙”的图片时,接口可自动提取图像中的颜色(RGB值&…...
el-switch文字内置
el-switch文字内置 效果 vue <div style"color:#ffffff;font-size:14px;float:left;margin-bottom:5px;margin-right:5px;">自动加载</div> <el-switch v-model"value" active-color"#3E99FB" inactive-color"#DCDFE6"…...
大数据学习(132)-HIve数据分析
🍋🍋大数据学习🍋🍋 🔥系列专栏: 👑哲学语录: 用力所能及,改变世界。 💖如果觉得博主的文章还不错的话,请点赞👍收藏⭐️留言Ǵ…...
保姆级教程:在无网络无显卡的Windows电脑的vscode本地部署deepseek
文章目录 1 前言2 部署流程2.1 准备工作2.2 Ollama2.2.1 使用有网络的电脑下载Ollama2.2.2 安装Ollama(有网络的电脑)2.2.3 安装Ollama(无网络的电脑)2.2.4 安装验证2.2.5 修改大模型安装位置2.2.6 下载Deepseek模型 2.3 将deepse…...
CVE-2020-17519源码分析与漏洞复现(Flink 任意文件读取)
漏洞概览 漏洞名称:Apache Flink REST API 任意文件读取漏洞CVE编号:CVE-2020-17519CVSS评分:7.5影响版本:Apache Flink 1.11.0、1.11.1、1.11.2修复版本:≥ 1.11.3 或 ≥ 1.12.0漏洞类型:路径遍历&#x…...
MFC 抛体运动模拟:常见问题解决与界面美化
在 MFC 中开发抛体运动模拟程序时,我们常遇到 轨迹残留、无效刷新、视觉单调、物理逻辑瑕疵 等问题。本文将针对这些痛点,详细解析原因并提供解决方案,同时兼顾界面美化,让模拟效果更专业、更高效。 问题一:历史轨迹与小球残影残留 现象 小球运动后,历史位置的 “残影”…...
