Sup星月★然
Sup星月★然

Vue学习

Vue学习

  • 1. Vue概述
  • 2. 快速入门
  • 3. Vue 指令
    • 2.3.1 v-bind 和 v-model
    • 2.3.2 v-on
    • 2.3.3 v-if 和 v-show
    • 2.3.4 v-for
  • 4. 案例
  • 5. 生命周期

1. Vue概述

Vue 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，容易与其它库或已有项目整合。vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

2. 快速入门

  • 1） 在VS Code 中创建文件 Vue-入门.html，并在同级目录中创建js文件夹，将 vue.js 文件拷贝到 js 目录。

  • 2）在 Vue-入门.html 中引入 vue.js 文件

  • 3）在html区域编写视图，其中{{}}是插值表达式，是用来将vue对象中定义的model展示到页面上的。

    
    
    
        
        {{message}}

  • 4） 定义vue对象，代码如下：

    其中，有三个属性：

    • el: 用来指定哪些标签受 Vue 管理。 该属性取值 #app 中的 app 需要是受管理的标签的id属性值
    • data: 用来定义数据模型
    • methods: 用来定义函数。这个我们在后面就会用到。

    浏览器打开效果如图所示：
    Vue学习_第1张图片
    整体代码如下：

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-快速入门title>
    <script src="js/vue.js">script>
head>
<body>

    <div id="app">
        <input type="text" v-model="message">
        {{message}}
    div>

body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
            message: "Hello Vue"
        }
    })
script>
html>

3. Vue 指令

上述案例中出现了属性v-model，这个就是vue的指令。
指令：HTML 标签上带有 v- 前缀的特殊属性，不同指令具有不同含义。例如：v-if，v-for…
在vue中，通过大量的指令来实现数据绑定到视图，如下表所示：

指令 作用
v-bind 为HTML标签绑定属性值，如设置 href , css样式等
v-model 在表单元素上创建双向数据绑定
v-on 为HTML标签绑定事件
v-if
v-else-if 条件性的渲染某元素，判定为true时渲染,否则不渲染
v-else
v-show 根据条件展示某元素，区别在于切换的是display属性的值
v-for 列表渲染，遍历容器的元素或者对象的属性

2.3.1 v-bind 和 v-model

  • v-bind: 为HTML标签绑定属性值，如设置 href , css样式等。当vue对象中的数据模型发生变化时，标签的属性值会随之发生变化。
    接下来我们通过代码来演示：

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令title>
    <script src="js/vue.js">script>
head>
<body>
    <div id="aa">
        <a v-bind:href="url">链接1a>
        <a :href="url">链接2a>
        <input type="text" v-model="url">
    div>
    
body>
<script>
    new Vue({
        el: "#aa",
        data: {
            url: "https://www.baidu.com"
        }
    })
script>
html>

    注意：v-bind: 可简写为: ，html属性前面有:表示采用的vue的属性绑定！

  • v-model： 在表单元素上创建双向数据绑定。什么是双向？

    • vue对象的data属性中的数据变化，视图展示会一起变化
    • 视图数据发生变化，vue对象的data属性中的数据也会随着变化。

    视图数据为什么会发生变化呢？只有表单项标签！所以双向绑定一定是使用在表单项标签上的。
    双向绑定的作用：可以获取表单的数据的值，然后提交给服务器

2.3.2 v-on

v-on: 用来给html标签绑定事件的。需要注意的是如下2点：

  • v-on语法给标签的事件绑定的函数，必须是vue对象种声明的函数
  • v-on语法绑定事件时，事件名相比较js中的事件名，没有on

例如：在js中，事件绑定demo函数：

vue中，事件绑定demo函数：

我们通过代码来演示：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令title>
    <script src="js/vue.js">script>
head>
<body>
    <div id="aa2">
        <input type="button" value="点我一下" v-on:click="handle()">
        <input type="button" value="点我一下" @click="handle()">
    div>
    
body>
<script>
    new Vue({
        el: "#aa2",
        data: {
            
        },
        methods: {
            handle: function(){
                alert("你点了我一下...");
            }
        }
    })
script>
html>

同样，v-on也存在简写方式，即v-on: 可以替换成@。

2.3.3 v-if 和 v-show

我们直接通过代码来演示效果。

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-v-if与v-showtitle>
    <script src="js/vue.js">script>
head>
<body>
    <div id="app">
        
        年龄<input type="text" v-model="age">经判定,为:
        <span>年轻人(35及以下)span>
        <span>中年人(35-60)span>
        <span>老年人(60及以上)span>

        <br><br>
    div>
body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           age: 20
        },
        methods: {
            
        }
    })
script>
html>

其中采用了双向绑定到age属性，意味着我们可以通过表单输入框来改变age的值。
需求：
当我们改变年龄时，动态判断年龄的值，呈现对应年龄的文字描述。
可通过 v-if 指令编写如下代码：

年龄<input type="text" v-model="age">经判定,为:
<span v-if="age <= 35">年轻人(35及以下)span>
<span v-else-if="age > 35 && age < 60">中年人(35-60)span>
<span v-else>老年人(60及以上)span>

浏览器打开测试效果如下图：
Vue学习_第2张图片
如果我们修改 v-if 指令为 v-show 指令，代码如下：

年龄<input type="text" v-model="age">经判定,为:
<span v-show="age <= 35">年轻人(35及以下)span>
<span v-show="age > 35 && age < 60">中年人(35-60)span>
<span v-show="age >= 60">老年人(60及以上)span>

打开浏览器，可以发现，浏览器呈现的效果是一样的，但是浏览器中html源码不一样。
Vue学习_第3张图片
总结：
v-if指令，不满足条件的标签代码直接没了，而v-show指令中，不满足条件的代码依然存在，只是添加了css样式来控制标签不去显示。

2.3.4 v-for

从名字我们就能看出，这个指令是用来遍历的。其语法格式如下：

<标签 v-for="变量名 in 集合模型数据">
    {{变量名}}

需要注意的是：需要循环的那个标签，v-for 指令就写在那个标签上。
有时我们遍历时需要使用索引，那么 v-for 指令遍历的语法格式如下：

<标签 v-for="(变量名,索引变量) in 集合模型数据">
    
   {{索引变量 + 1}} {{变量名}}

不多说，直接代码演示：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-v-fortitle>
    <script src="js/vue.js">script>
head>
<body>
	<div id="app">
	     <div v-for="addr in addrs">{{addr}}div>
	     <hr>
	     <div v-for="(addr,index) in addrs">{{index + 1}} : {{addr}}div>
	div>
body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           addrs:["北京", "上海", "西安", "成都", "深圳"]
        },
        methods: {
            
        }
    })
script>
html>

Vue学习_第4张图片

4. 案例

需求：通过 Vue 完成表格数据的渲染展示。
Vue学习_第5张图片
提前准备如下代码：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-案例title>
    <script src="js/vue.js">script>
head>
<body>
    
    <div id="app"> 
        <table border="1" cellspacing="0" width="60%">
            <tr>
                <th>编号th>
                <th>姓名th>
                <th>年龄th>
                <th>性别th>
                <th>成绩th>
                <th>等级th>
            tr>
        table>
    div>

body>

<script>
    new Vue({
        el: "#app",
        data: {
            users: [{
                name: "Tom",
                age: 20,
                gender: 1,
                score: 78
            },{
                name: "Rose",
                age: 18,
                gender: 2,
                score: 86
            },{
                name: "Jerry",
                age: 26,
                gender: 1,
                score: 90
            },{
                name: "Tony",
                age: 30,
                gender: 1,
                score: 52
            }]
        },
        methods: {
            
        },
    })
script>
html>

思路：

  • 使用v-for的带索引方式添加到表格的标签上
  • 使用{{}}插值表达式展示内容到单元格
  • 使用索引+1来作为编号
  • 使用v-if来判断，改变性别和等级这2列的值

需求实现代码：

 <tr align="center" v-for="(user,index) in users">
     <td>{{index + 1}}td>
     <td>{{user.name}}td>
     <td>{{user.age}}td>
     <td>
         <span v-if="user.gender == 1">男span>
         <span v-if="user.gender == 2">女span>
     td>
     <td>{{user.score}}td>
     <td>
         <span v-if="user.score >= 85">优秀span>
         <span v-else-if="user.score >= 60">及格span>
         <span style="color: red;" v-else>不及格span>
     td>
tr>

在这里插入图片描述

5. 生命周期

vue的生命周期：指的是vue对象从创建到销毁的过程。
vue的生命周期包含8个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法，这些生命周期方法也被称为钩子方法。其完整的生命周期如下图所示：

状态 阶段周期
beforeCreate 创建前
created 创建后
beforeMount 挂载前
mounted 挂载完成
beforeUpdate 更新前
updated 更新后
beforeDestroy 销毁前
destroyed 销毁后

其中我们需要重点关注的是 mounted ,其他的了解即可。
Vue学习_第6张图片
Vue学习_第7张图片
mounted：挂载完成，Vue初始化成功，HTML页面渲染成功。我们一般用于页面初始化自动的ajax请求后台数据。
编写mounted声明周期的钩子函数，与methods同级，代码如下：

<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           
        },
        methods: {
            
        },
        mounted () {
            alert("vue挂载完成,发送请求到服务端");
        }
    })
script>
完结

你可能感兴趣的:(前端,vue,前端,html)

  • 小程序学习笔记：优化商铺列表页面的下拉刷新功能 you4580 学习笔记小程序
    在前端开发中，下拉刷新功能能显著提升用户体验，让用户方便地获取最新数据。今天就来和大家分享在开发商铺列表页面时，如何实现并优化下拉刷新功能，同时美化相关窗口样式。本文以微信小程序开发为例进行讲解。开启下拉刷新功能在微信小程序里，开启下拉刷新很简单。找到商铺列表页面的.json配置文件，添加enablePullDownRefresh配置节点，把它的值从默认的false改成true，就能开启下拉刷新效
  • 推客小程序系统开发全攻略：从设计到落地的完整实践 wx_ywyy6798 推客系统短剧短剧系统推客推客系统开发推客小程序推客小程序开发
    移动互联网时代，社交电商已成为不可忽视的商业形态，其中推客（分销）系统凭借其裂变式传播特性，成为众多企业流量变现的核心工具。本文将全面剖析推客小程序系统的开发全流程，从产品设计到技术实现，再到运营优化，为开发者提供一站式解决方案。一、系统架构设计：构建稳固基石一个完整的推客小程序系统需要前后端协同工作，采用分层架构设计是保证系统可扩展性的关键。前端展示层主要负责用户界面交互，采用组件化开发模式提升
  • 从零开始：网页设计与制作基础全攻略
    提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、HTML——网页大厦的基石二、CSS——网页的美妆大师三、过渡和动画——让网页动起来四、原型设计与开发工具——设计师的左膀右臂五、案例分析——排雷避坑六、完整项目开发流程——步步为营前言在网页设计与制作的奇妙世界里，每一个页面都是设计师思想与技术碰撞的结晶。今天，咱们就来唠唠这其中的门道，不管你是初出茅庐的新手，还是想
  • vue3中slot（插槽）的详细使用 会飞的鱼先生 vue.js前端javascript
    在Vue3中，slot（插槽）是一种强大的组件内容分发机制，它允许父组件向子组件传递内容，从而使组件的使用更加灵活。以下是关于Vue3中slot的详细介绍一、默认插槽这是最基本的插槽形式。子组件中使用定义一个插槽，父组件可以将内容放置在子组件标签对之间来填充这个插槽。子组件代码示例childTest.vue父组件代码示例parentTest.vue1111importchildTestfrom'.
  • react-别名路径配置 前端小趴菜05 react.js前端前端框架
    在前端开发中，别名路径配置（AliasPathConfiguration）是一种通过配置工具或框架，将特定的路径别名映射到实际文件路径的方法。这样可以简化文件引用路径，提高代码的可读性和维护性。为什么要进行别名路径配置？在我们做项目的时候一定会引入文件，如果要引入的文件层级太深的话肯定会出现很多'../../../../../'，会增加一些不必要的麻烦。所以我们通过@替代src路径，方便开发过程中
  • 前端如何动态执行JavaScript代码？ 程序员小寒 前端javascript开发语言
    今天来聊一聊javascript如何动态执行js代码，我总结了以下四种方法。第一种方式：evaleval函数会将传入的字符串作为js代码执行，并且返回最后一个表达式的值。eval('console.log(1)')//1eval的特点：同步执行；执行环境为当前作用域。leta=1;functiontest(){leta=2;eval('console.log(a)');//2}test();使用e
  • Vue部署Nginx之后，后台请求404 zhou_Tian VueNginxnginxvue.js运维
    部署到Nginx后，配置在vue中的针对某些请求（比如后端请求）的代理会失效（表现为这部分请求会404错误，但是项目css等静态资源都能正常访问），这时需要对Nginx配置相应的请求代理。比如我们Vue项目的vue.config.js配置如下：期望能将/api/为前缀的请求全都代理到http://10.3.0.145:8008/，本地以开发模式运行一切正常，但发布到Nginx后这个代理好像就失效了
  • 【Docker】docker的数据持久化 一直奔跑在路上 Dockerdockerjava容器
    在Docker中，容器的文件系统是临时的。如果容器被删除或重新创建，所有未保存的数据都会丢失。为了解决这个问题，我们可以使用以下两种方式来持久化数据：方式一：使用BindMounts实现数据持久化BindMounts允许你将宿主机文件系统中的目录或文件挂载到容器内的某个目录。这种方式非常直接，适合在开发和测试环境中使用。案例：运行一个Nginx容器，并将宿主机上的html目录挂载到容器内的/usr
  • 前端使用Axios时的跨域问题 itanly 前端
    跨域问题的本质跨域问题源于浏览器的同源策略（Same-OriginPolicy），该策略限制了不同源（协议、域名、端口任一不同）之间的资源交互。Axios作为HTTP客户端，在浏览器环境中受此策略约束。后端配置CORS最标准的解决方案是后端配置CORS（跨域资源共享）。以下是Node.jsExpress框架的示例配置：constexpress=require('express');constcor
  • 【Electron】vue+electron应用设置菜单 姑老爷呀 electronvue.jsjavascript
    一、前言本文主要介绍electron应用如何自定义菜单，以及在哪些地方可以使用Menu模块。一般情况menu只是设置给mac系统的，因为windows系统在应用做了无边框之后，是不会显示应用菜单的（这里Linux暂时不考虑）。点击查看Menu详情二、适用场景及实施1.应用内菜单自定义这个菜单是指的这里这里主要用到Menu的两个Api，分别是Menu.buildFromTemplate(templa
  • Mac10.7.5 XCode4.5.2 ios6编译VLC1.1.0 woohyuknrg iOS
    参考了这篇博文：http://blog.csdn.net/madongchunqiu/article/details/7625083，根据后面的问答修改了一些脚本内容，以及编译时遇到的问题说明只针对真机编译，前几步跟上面博文一样：1.到http://www.videolan.org/vlc/download-ios.html下载3个压缩文件2.创建目录（比如/VLC)，并将3个源代码包解压在目录内
  • 从零构建现代JavaScript技术栈：Node.js与Yarn基础配置指南 施想钧
    从零构建现代JavaScript技术栈：Node.js与Yarn基础配置指南js-stack-from-scratchverekia/js-stack-from-scratch:是一个从零开始构建现代JavaScript开发栈的教程，包括工具、技术和实践。适合JavaScript开发人员、前端开发人员和初学者，以及对构建现代Web应用程序感兴趣的人员。项目地址:https://gitcode.co
  • 视频断点续播全栈实现：基于HTML5前端与Spring Boot后端 独立开发者阿乐 原创前端音视频RESTAPIAPISpringBootJavaScriptvideo元素
    文章目录视频断点续播功能实现方案核心思路前端实现HTML结构JavaScript实现SpringBoot后端实现1.依赖配置(pom.xml)2.实体类3.存储库接口4.服务层5.控制器实现要点视频断点续播功能构思图流程说明用户交互：前端核心功能：后端处理：数据存储：我的个人网站：乐乐主题创作室视频断点续播功能实现方案核心思路实现视频断点续播需要前后端配合，主要包括：前端记录播放进度后端存储进度信
  • vue中父子组件通过prop传递函数，子组件调用函数本质 咔咔咔索菲斯 vue.js前端javascript
    在Vue中，通过prop将函数从父组件传递到子组件后，子组件调用的本质是父组件上的原始函数，而非新函数。具体原理如下：1.函数传递的本质：引用传递-JavaScript中，函数作为引用类型，传递的是内存地址（引用）而非副本。-父组件通过prop传递函数时，实际是将函数的引用传给子组件，两者指向同一函数对象。2.示例验证exportdefault{methods:{parentFunction(){
  • webpack配置 panda4919 webpack前端node.js
    一.基础配置：1.为什么需要打包：开发时，我们会使用框架（React、Vue），ES6模块化语法，Less/Sass等css预处理器等语法进行开发。这样的代码要想在浏览器运行必须经过编译成浏览器能识别的JS、Css等语法，才能运行。所以我们需要打包工具帮我们做完这些事。除此之外，打包工具还能压缩代码、做兼容性处理、提升代码性能等。2.有哪些打包工具：GruntGulpParcelWebpackRo
  • 基于flask+vue框架的法律咨询公司管理信息系统的分析与设计[开题+论文+程序]-计算机毕设 zhihao508 flaskvue.js课程设计
    本系统（程序+源码+数据库+调试部署+开发环境）带论文文档1万字以上，文末可获取，系统界面在最后面。系统程序文件列表开题报告内容研究背景随着社会的快速发展和法律意识的普遍增强，法律咨询服务需求日益增长，成为现代社会不可或缺的服务之一。传统法律咨询模式受限于时间、地域及信息不对称等问题，难以满足广大客户高效、便捷的服务需求。与此同时，法律咨询公司内部管理也面临挑战，如客户信息管理混乱、律师资源分配不
  • 基于vue框架的宠物店管理系统的设计与实现4czn0（程序+源码+数据库+调试部署+开发环境）系统界面在最后面。 小光学长 数据库
    系统程序文件列表项目功能：用户,商品分类,服务类型,商品信息,商品订单,宠物服务,服务预约,服务评价,商品咨询开题报告内容基于Vue框架的宠物店管理系统的设计与实现开题报告一、引言随着宠物行业的蓬勃发展，宠物店作为宠物产品与服务的重要提供者，其管理效率和服务质量直接关系到顾客的满意度和店铺的竞争力。传统的管理方式往往依赖于手工记录和纸质文档，这种方式不仅效率低下，而且容易出错，难以满足现代宠物店日
  • 基于vue框架的CIA报价平台的设计与实现1xv02（程序+源码+数据库+调试部署+开发环境）系统界面在最后面。
    系统程序文件列表项目功能：用户,供应商,产品分类,产品信息,在线咨询,资质申请开题报告内容基于Vue框架的CIA报价平台的设计与实现开题报告一、选题背景随着市场竞争的日益激烈，企业对于成本控制与效率提升的需求愈发迫切。在采购与供应链管理领域，传统的手工报价方式不仅耗时耗力，还难以保证报价的准确性和时效性，给企业的运营带来了不小的挑战。特别是针对复杂多变的采购需求，如何快速、准确地生成报价，同时有效
  • 服务端渲染SSR：原理、实践与未来趋势 GISer_Jinger 前端javascriptvue.js
    深入解析服务器端渲染（SSR）：原理、实践与未来趋势在当今追求极致用户体验的Web开发领域，服务器端渲染（SSR）已成为解决性能与SEO难题的关键技术。本文将带你深入理解SSR的核心机制、应用场景及前沿实践。一、SSR的本质与工作原理SSR（Server-SideRendering）指在服务器端生成完整HTML页面并发送至浏览器的技术。与客户端渲染（CSR）不同，SSR的核心流程如下：请求解析：用
  • 【代码审计】安全审核常见漏洞修复策略 秋说 Java代码审计网络安全代码审计
    文章目录1.异常信息泄露修复建议不推荐用法推荐用法2.文件上传漏洞错误示例（缺乏校验）安全示例（含格式/扩展名校验）3.SQL注入漏洞（MyBatis${}）示例修复建议4.生成组件间接依赖生成依赖树建议5.间接依赖组件的漏洞什么是间接依赖后端修复1后端修复2前端修复1前端修复26.XSS（跨站脚本攻击）错误示例（存在风险）安全示例（自动转义）修复建议7.接口未鉴权修复建议8.路径遍历漏洞错误示例
  • Flask + GPT 实践 红鼻子时代 flask项目flaskgptpython
    一、前言本篇文章会介绍从零开始构建一个基于Flask+GPT的小项目的过程。总共有四个版本的迭代，包括：1、调用GPT接口并渲染到前端页面；2、使用Flask提供的session来实现登录和登出功能；3、用SQLAlchemy管理数据库，实现用户注册和登录；4、记录和分页查看用户与GPT的对话历史。二、项目环境与依赖Python版本：建议3.7+Flask：最常用的PythonWeb框架之一ope
  • vue 防抖节流 浮桥 scsstypescriptvue.js
    //防抖一定时间内事件只执行一次exportfunction_debounce(fn,delay){vardelay=delay||200;vartimer;returnfunction(){varth=this;varargs=arguments;if(timer){clearTimeout(timer);}timer=setTimeout(function(){timer=null;fn.ap
  • uni-app subPackages 分包加载：优化应用性能的利器 阿珊和她的猫 uni-app状态模式
    前端开发工程师、技术日更博主、已过CET6阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》、《前端求职突破计划》蓝桥云课签约作者、上架课程《Vue.js和Egg.js开发企业级健康管理项目》、《带你从入门到实战全面掌握uni-app》文章目录subPackages配置注意事项优点使用场景在uni-app中，sub
  • 【C#】两个list根据某个元素比较差集 weixin_30594001 c#
    1.今天突然跟前端有一点小小的分歧，传输数据和数据库里的数据做比对，该前端做处理还是后端，(并不是都不愿意做，相反，都愿意在自己那端处理==)2.最后终于归结我这了，好久之前做过list比对，记得刚写代码的时候，两个list比对？那就无限foreach呗，当然实现是能实现，这就很影响比对效果和代码的整洁度了。3.接下来，我回忆起来了我之前写过的一个比较方法，拿出来记录一下//重写比较方法publi
  • java+vue+SpringBoo智慧旅游系统（程序+数据库+报告+部署教程+答辩指导）
    源代码+数据库+LW文档（1万字以上）+开题报告+答辩稿ppt+部署教程+代码讲解+代码时间修改工具技术实现开发语言：后端：Java前端：vue框架：springboot数据库：mysql开发工具JDK版本：JDK1.8数据库：mysql数据库工具：Navicat开发软件：idea主要角色及功能介绍本次系统的用例图做出了十分明确的功能划分，在设计时可以有很好的设计思路进行设计和延展。（1）管理员用
  • vue防抖节流 一个努力搬砖的小白 vue防抖节流vue.js
    防抖：用户在短时间内多次触发事件时，只取最后一次触发结果节流：用户在短时间内多次触发事件时，将次数压缩一次，取决于定时器设定的时间创建common.js文件//防抖lettimeout=nullexportconsttestFun=(fun,time=500)=>{if(timeout){clearTimeout(timeout)//规定时间内若定时器存在则清除}timeout=setTimeou
  • Vue 防抖节流函数与指令 qq_36193912 Vuevue.jsjavascriptecmascript
    直接上代码：/***防抖*@param{*}func*@param{*}wait*@returns*/functiondebounce(func,wait=300){lettimeout;returnfunction(...args){constcontext=this;clearTimeout(timeout);timeout=setTimeout(()=>{func.apply(context
  • vue3 el-table 列增加 自定义排序逻辑 海天胜景 vue.jsjavascriptelementui
    在Vue3中使用ElementPlus的组件时，如果你想增加自定义排序逻辑，可以通过以下几个步骤实现：1.使用default-sort属性首先，你可以在组件上使用default-sort属性来指定默认的排序规则。例如，如果你想默认按照某一列升序排序，可以这样做：2.使用sort-method或sort-comparator属性对于自定义排序逻辑，你可以使用sort-method或sort-comp
  • uni-app开发app保持登录状态 前端与小赵 uni-app前端移动端
    在uni-app中实现用户登录一次后在token过期前一直免登录的功能，可以通过以下几个关键步骤实现：本地持久化存储Token、使用请求与响应拦截器自动处理Token刷新、以及在App.vue中结合pages.json设置登录状态跳转逻辑。✅一、pages.json配置说明pages.json是uni-app的全局配置文件，用于定义页面路径、窗口样式、启动页等。虽然它不直接支持登录状态判断，但可以
  • 前端base64遇到的坑：window.btoa中文报错的修复方案 前端
    问题是这样的：同事在使用的过程中发现一个问题：点击确定按钮后，有个报错提示。如下截图所示：报错文本是：invalidcharactererrorfailedtoexecutebtoaonwindowthestringtobeencodedcontainscharactersoutsideofthelatin1range详情：前端base64遇到的坑：window.btoa中文报错的修复方案
  • Java实现的基于模板的网页结构化信息精准抽取组件：HtmlExtractor yangshangchuan 信息抽取HtmlExtractor精准抽取信息采集
    HtmlExtractor是一个Java实现的基于模板的网页结构化信息精准抽取组件，本身并不包含爬虫功能，但可被爬虫或其他程序调用以便更精准地对网页结构化信息进行抽取。   HtmlExtractor是为大规模分布式环境设计的，采用主从架构，主节点负责维护抽取规则，从节点向主节点请求抽取规则，当抽取规则发生变化，主节点主动通知从节点，从而能实现抽取规则变化之后的实时动态生效。 如
  • java编程思想 -- 多态 百合不是茶 java多态详解
    一: 向上转型和向下转型 面向对象中的转型只会发生在有继承关系的子类和父类中（接口的实现也包括在这里）。父类：人    子类：男人向上转型： Person p = new Man() ; //向上转型不需要强制类型转化向下转型： Man man =
  • [自动数据处理]稳扎稳打,逐步形成自有ADP系统体系 comsci dp
          对于国内的IT行业来讲,虽然我们已经有了"两弹一星",在局部领域形成了自己独有的技术特征,并初步摆脱了国外的控制...但是前面的路还很长....       首先是我们的自动数据处理系统还无法处理很多高级工程...中等规模的拓扑分析系统也没有完成,更加复杂的
  • storm 自定义 日志文件 商人shang stormclusterlogback
    Storm中的日志级级别默认为INFO，并且，日志文件是根据worker号来进行区分的，这样，同一个log文件中的信息不一定是一个业务的，这样就会有以下两个需求出现： 1. 想要进行一些调试信息的输出 2. 调试信息或者业务日志信息想要输出到一些固定的文件中   不要怕，不要烦恼，其实Storm已经提供了这样的支持，可以通过自定义logback 下的 cluster.xml 来输
  • Extjs3 SpringMVC使用 @RequestBody 标签问题记录 21jhf
    springMVC使用 @RequestBody(required = false) UserVO userInfo 传递json对象数据，往往会出现http 415，400,500等错误，总结一下需要使用ajax提交json数据才行，ajax提交使用proxy，参数为jsonData，不能为params；另外，需要设置Content-type属性为json，代码如下： （由于使用了父类aaa
  • 一些排错方法 文强chu 方法
    1、java.lang.IllegalStateException: Class invariant violation at org.apache.log4j.LogManager.getLoggerRepository(LogManager.java:199)at org.apache.log4j.LogManager.getLogger(LogManager.java:228) at o
  • Swing中文件恢复我觉得很难 小桔子 swing
           我那个草了！老大怎么回事，怎么做项目评估的？只会说相信你可以做的，试一下，有的是时间！        用java开发一个图文处理工具，类似word，任意位置插入、拖动、删除图片以及文本等。文本框、流程图等，数据保存数据库，其余可保存pdf格式。ok,姐姐千辛万苦，
  • php 文件操作 aichenglong PHP读取文件写入文件
    1 写入文件 @$fp=fopen("$DOCUMENT_ROOT/order.txt", "ab"); if(!$fp){ echo "open file error" ; exit; } $outputstring="date:"." \t tire:".$tire."
  • MySQL的btree索引和hash索引的区别 AILIKES 数据结构mysql算法
    Hash 索引结构的特殊性，其 检索效率非常高，索引的检索可以一次定位，不像B-Tree 索引需要从根节点到枝节点，最后才能访问到页节点这样多次的IO访问，所以 Hash 索引的查询效率要远高于 B-Tree 索引。     可能很多人又有疑问了，既然 Hash 索引的效率要比 B-Tree 高很多，为什么大家不都用 Hash 索引而还要使用 B-Tree 索引呢
  • JAVA的抽象--- 接口 --实现 百合不是茶
    抽象 接口 实现接口   //抽象 类 ,方法   //定义一个公共抽象的类 ,并在类中定义一个抽象的方法体 抽象的定义使用abstract   abstract class A 定义一个抽象类 例如： //定义一个基类 public abstract class A{     //抽象类不能用来实例化，只能用来继承 //
  • JS变量作用域实例 bijian1013 作用域
    <script> var scope='hello'; function a(){ console.log(scope); //undefined var scope='world'; console.log(scope); //world console.log(b);
  • TDD实践（二） bijian1013 javaTDD
    实践题目：分解质因数 Step1： 单元测试： package com.bijian.study.factor.test; import java.util.Arrays; import junit.framework.Assert; import org.junit.Before; import org.junit.Test; import com.bijian.
  • [MongoDB学习笔记一]MongoDB主从复制 bit1129 mongodb
    MongoDB称为分布式数据库，主要原因是1.基于副本集的数据备份， 2.基于切片的数据扩容。副本集解决数据的读写性能问题，切片解决了MongoDB的数据扩容问题。   事实上，MongoDB提供了主从复制和副本复制两种备份方式，在MongoDB的主从复制和副本复制集群环境中，只有一台作为主服务器，另外一台或者多台服务器作为从服务器。 本文介绍MongoDB的主从复制模式，需要指明
  • 【HBase五】Java API操作HBase bit1129 hbase
    import java.io.IOException; import org.apache.hadoop.conf.Configuration; import org.apache.hadoop.hbase.HBaseConfiguration; import org.apache.hadoop.hbase.HColumnDescriptor; import org.apache.ha
  • python调用zabbix api接口实时展示数据 ronin47
    zabbix api接口来进行展示。经过思考之后，计划获取如下内容：     1、  获得认证密钥     2、  获取zabbix所有的主机组     3、  获取单个组下的所有主机     4、  获取某个主机下的所有监控项  
  • jsp取得绝对路径 byalias 绝对路径
    在JavaWeb开发中，常使用绝对路径的方式来引入JavaScript和CSS文件，这样可以避免因为目录变动导致引入文件找不到的情况，常用的做法如下： 一、使用${pageContext.request.contextPath} 　　代码” ${pageContext.request.contextPath}”的作用是取出部署的应用程序名，这样不管如何部署，所用路径都是正确的。
  • Java定时任务调度：用ExecutorService取代Timer bylijinnan java
    《Java并发编程实战》一书提到的用ExecutorService取代Java Timer有几个理由，我认为其中最重要的理由是： 如果TimerTask抛出未检查的异常，Timer将会产生无法预料的行为。Timer线程并不捕获异常，所以 TimerTask抛出的未检查的异常会终止timer线程。这种情况下，Timer也不会再重新恢复线程的执行了;它错误的认为整个Timer都被取消了。此时，已经被
  • SQL 优化原则 chicony sql
    一、问题的提出 　在应用系统开发初期，由于开发数据库数据比较少，对于查询SQL语句，复杂视图的的编写等体会不出SQL语句各种写法的性能优劣，但是如果将应用系统提交实际应用后，随着数据库中数据的增加，系统的响应速度就成为目前系统需要解决的最主要的问题之一。系统优化中一个很重要的方面就是SQL语句的优化。对于海量数据，劣质SQL语句和优质SQL语句之间的速度差别可以达到上百倍，可见对于一个系统
  • java 线程弹球小游戏 CrazyMizzz java游戏
    最近java学到线程，于是做了一个线程弹球的小游戏，不过还没完善 这里是提纲 1.线程弹球游戏实现 1.实现界面需要使用哪些API类 JFrame JPanel JButton FlowLayout Graphics2D Thread Color ActionListener ActionEvent MouseListener Mouse
  • hadoop jps出现process information unavailable提示解决办法 daizj hadoopjps
    hadoop jps出现process information unavailable提示解决办法   jps时出现如下信息： 3019 -- process information unavailable3053 -- process information unavailable2985 -- process information unavailable2917 --
  • PHP图片水印缩放类实现 dcj3sjt126com PHP
    <?php class Image{ private $path; function __construct($path='./'){ $this->path=rtrim($path,'/').'/'; } //水印函数，参数：背景图，水印图，位置，前缀,TMD透明度 public function water($b,$l,$pos
  • IOS控件学习：UILabel常用属性与用法 dcj3sjt126com iosUILabel
    参考网站： http://shijue.me/show_text/521c396a8ddf876566000007 http://www.tuicool.com/articles/zquENb http://blog.csdn.net/a451493485/article/details/9454695 http://wiki.eoe.cn/page/iOS_pptl_artile_281
  • 完全手动建立maven骨架 eksliang javaeclipseWeb
    建一个 JAVA 项目 ： mvn archetype:create -DgroupId=com.demo -DartifactId=App [-Dversion=0.0.1-SNAPSHOT] [-Dpackaging=jar] 建一个 web 项目 ： mvn archetype:create -DgroupId=com.demo -DartifactId=web-a
  • 配置清单 gengzg 配置
    1、修改grub启动的内核版本 vi /boot/grub/grub.conf 将default 0改为1 拷贝mt7601Usta.ko到/lib文件夹 拷贝RT2870STA.dat到 /etc/Wireless/RT2870STA/文件夹 拷贝wifiscan到bin文件夹，chmod 775 /bin/wifiscan 拷贝wifiget.sh到bin文件夹，chm
  • Windows端口被占用处理方法 huqiji windows
    以下文章主要以80端口号为例，如果想知道其他的端口号也可以使用该方法..........................1、在windows下如何查看80端口占用情况?是被哪个进程占用?如何终止等.        这里主要是用到windows下的DOS工具,点击"开始"--"运行",输入&
  • 开源ckplayer 网页播放器， 跨平台(html5, mobile)，flv, f4v, mp4, rtmp协议. webm, ogg, m3u8 ！ 天梯梦 mobile
    CKplayer，其全称为超酷flv播放器，它是一款用于网页上播放视频的软件，支持的格式有：http协议上的flv,f4v,mp4格式，同时支持rtmp视频流格 式播放，此播放器的特点在于用户可以自己定义播放器的风格，诸如播放/暂停按钮，静音按钮，全屏按钮都是以外部图片接口形式调用，用户根据自己的需要制作 出播放器风格所需要使用的各个按钮图片然后替换掉原始风格里相应的图片就可以制作出自己的风格了，
  • 简单工厂设计模式 hm4123660 java工厂设计模式简单工厂模式
           简单工厂模式（Simple Factory Pattern）属于类的创新型模式，又叫静态工厂方法模式。是通过专门定义一个类来负责创建其他类的实例，被创建的实例通常都具有共同的父类。简单工厂模式是由一个工厂对象决定创建出哪一种产品类的实例。简单工厂模式是工厂模式家族中最简单实用的模式，可以理解为是不同工厂模式的一个特殊实现。
  • maven笔记 zhb8015 maven
    跳过测试阶段： mvn package -DskipTests 临时性跳过测试代码的编译： mvn package -Dmaven.test.skip=true   maven.test.skip同时控制maven-compiler-plugin和maven-surefire-plugin两个插件的行为，即跳过编译，又跳过测试。   指定测试类 mvn test
  • 非mapreduce生成Hfile，然后导入hbase当中 Stark_Summer maphbasereduceHfilepath实例
    最近一个群友的boss让研究hbase，让hbase的入库速度达到5w+/s，这可愁死了，4台个人电脑组成的集群，多线程入库调了好久，速度也才1w左右，都没有达到理想的那种速度，然后就想到了这种方式，但是网上多是用mapreduce来实现入库，而现在的需求是实时入库，不生成文件了，所以就只能自己用代码实现了，但是网上查了很多资料都没有查到，最后在一个网友的指引下，看了源码，最后找到了生成Hfile
  • jsp web tomcat 编码问题 王新春 tomcatjsppageEncode
    今天配置jsp项目在tomcat上，windows上正常，而linux上显示乱码，最后定位原因为tomcat 的server.xml 文件的配置，添加 URIEncoding 属性： <Connector port="8080" protocol="HTTP/1.1" connectionTi
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他