Vue.js 3.0的变化

新特性

teleport组件
Vue鼓励我们将UI和相关的业务逻辑封装成一个组件，使组件可以嵌套在另一个组件内部，以构建一个组合应用程序。然而，，有些组件template模块的一部分逻辑不属于该组件，从技术角度来看，最好将这部分逻辑从该组件“移动”到其他位置，但又不能拆分组件。

<template>
  <header>
    <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />

    <div class="wrapper">
      <HelloWorld msg="You did it!" >
        <template v-slot:demo>
          <div class="inner">这里是插槽内容</div>
        </template>
      </HelloWorld>
      <!-- <el-button type="success">Success</el-button> -->
      <nav>
        <RouterLink to="/">Home</RouterLink>
        <RouterLink to="/about">About</RouterLink>
      </nav>
    </div>
  </header>

  <RouterView />
</template>

我们知道Vue项目中所有的.vue文件渲染的dom元素并不是挂载到标签下，而是挂载到

元素中的。组件提供一种“传送”的方法，允许将指定的dom元素移动到某个父节点下渲染，而不必使用全局状态或拆分为两个组件。

<template>
  <header>
    <teleport to="body">
      <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
    </teleport>


    <div class="wrapper">
      <HelloWorld msg="You did it!">
        <template v-slot:demo>
          <div class="inner">这里是插槽内容</div>
        </template>
      </HelloWorld>
      <!-- <el-button type="success">Success</el-button> -->
      <nav>
        <RouterLink to="/">Home</RouterLink>
        <RouterLink to="/about">About</RouterLink>
      </nav>
    </div>
  </header>

  <RouterView />
</template>

组件的to属性不但可以将html元素作为渲染元素，还可以指定id元素。

组合式API
组合式API是指将页面中可复用性的业务逻辑抽离，通过组合形式引入Vue.js组件中使用。仅此一项新特性，就可以使项目在可维护性和灵活性方面更加优越，尤其是当项目大到几百个组件时，共享和复用代码变得尤其重要。

setup组件选项

<!-- 父组件 -->
<template>
  <header>
    <div class="wrapper">
      <HelloWorld title="标题">
  </header>

</template>

<!-- HelloWorld组件 -->
<script lang="ts">
import { computed, getCurrentInstance, reactive, ref, toRefs, watch, watchEffect } from 'vue'

// defineProps<{
//   msg: string
// }>()


export default {
  name: 'HelloWorld',
  data() {
    return {
      msg: "Vue"
    }

  },
  props: {
    title: String
  },

  setup(props, ctx) {
    console.log(" ~ file: HelloWorld.vue:22 ~ setup ~ ctx:", ctx)
    console.log(" ~ file: HelloWorld.vue:22 ~ setup ~ props:", props)
    

    let expression = ref(false)
    setTimeout(() => {
      expression.value = true
    }, 1000)
    return { expression }
  },
}

</script>

Vue2中可以使用this直接获取props对象的属性，如this.title。Vue3并没有this对象，因此无法和Vue2一样使用this获取title，但setup函数在初始化时注入了props对象，因此在初始化时，可在setup函数内通过props.title获取对象的属性数据。
setup函数内部的this不是该实例的引用，因为setup函数是在解析其他组件选项之前被调用的，所以setup函数内部的this指向与其他选项的this完全不同，因此不能在setup函数中使用this。

触发组件选项
emits选项是setup函数的第二个参数，用于回调父组件的自定义方法或同步父组件的数据。

自定义事件
与props一样，emit提供了事件名大小写自动转换功能。如果用驼峰命名的子组件触发事件，那么可在父组件添加一个@my-event,（以短横线分隔命名）的监听器。

<!-- 父组件 -->
<script lang="ts">
import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
import { ref } from 'vue';

export default {
  setup(props, ctx) {
    const color = ref("red")

   const title = ref("原始title")

   let test=()=>{
    console.log(" ~ file: App.vue:15 ~ test ~ test:")

   }

    return { color,title,test }
  },
}

</script>

<template>
  <header>
    <div class="wrapper">
      <HelloWorld v-model:title="title" @myClick="test">
        <template v-slot:demo>
          <div class="inner">这里是插槽内容</div>
        </template>
      </HelloWorld>
    </div>
  </header>

  <RouterView />
</template>

<!-- HelloWorld -->
<script lang="ts">
import { computed, getCurrentInstance, reactive, ref, toRefs, watch, watchEffect } from 'vue'
export default {
  name: 'HelloWorld',
  data() {
    return {
      msg: "Vue"
    }

  },
  props: {
    title: String
  },

  emits:["update:title","myClick"],
  setup(props, ctx) {
    console.log(" ~ file: HelloWorld.vue:22 ~ setup ~ ctx:", ctx)
    console.log(" ~ file: HelloWorld.vue:22 ~ setup ~ props:", props)
    
    

    let expression = ref(false)
    setTimeout(() => {
      expression.value = true
      ctx.emit("update:title","test emits")
      ctx.emit("myClick")
    }, 1000)
    return { expression }
  },
}
</script>

1s后HelloWorld组件便会调用myClick方法，从而回调父组件的test方法。

验证抛出的事件
在emits对象语法中，property的值可以为null或验证函数。验证函数会接收传递给$emit调用的参数。验证函数应返回布尔值，以表示事件参数是否有效。

<script lang="ts">
import { computed, getCurrentInstance, reactive, ref, toRefs, watch, watchEffect } from 'vue'

export default {
  name: 'HelloWorld',
  data() {
    return {
      msg: "Vue"
    }

  },
  props: {
    title: String
  },
  emits:{
    myClick:(a: any) => {
      console.log(" ~ file: HelloWorld.vue:24 ~ a:", a)
      return true
    }
  },

  setup(props, ctx) {
    let expression = ref(false)
    setTimeout(() => {
      expression.value = true
      // ctx.emit("update:title","test emits")
      ctx.emit("myClick",1)
    }, 1000)
    return { expression }
  },
}

</script>

如果myClick函数返回false，那么控制台上输出的也是同样的结果，只不过会有一段警告信息。

v-model指令
在默认情况下，父组件的v-model指令使用modelValue作为props参数，并使用update:modelValue触发事件。可以通过向v-model传递参数来同步父组件的数据。

<!-- 父组件 -->
<script lang="ts">
import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
import { ref } from 'vue';

export default {
  setup(props, ctx) {
    const color = ref("red")

   const title = ref("原始title")

    return { color,title }
  },
}

</script>
<template>
  <header>
    <teleport to="body">
      <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
    </teleport>
    <div class="wrapper">
      <HelloWorld v-model:title="title">
        <template v-slot:demo>
          <div class="inner">这里是插槽内容</div>
        </template>
      </HelloWorld>
    </div>
  </header>
</template>

<!-- HelloWorld组件 -->
<script lang="ts">
import { computed, getCurrentInstance, reactive, ref, toRefs, watch, watchEffect } from 'vue'
export default {
  name: 'HelloWorld',
  data() {
    return {
      msg: "Vue"
    }

  },
  props: {
    title: String
  },

  emits:["update:title"],
  setup(props, ctx) {
    console.log(" ~ file: HelloWorld.vue:22 ~ setup ~ ctx:", ctx)
    console.log(" ~ file: HelloWorld.vue:22 ~ setup ~ props:", props)
    
    let expression = ref(false)
    setTimeout(() => {
      expression.value = true
      ctx.emit("update:title","test emits")
    }, 1000)
    return { expression }
  },
}
</script>
<template>
  <div class="greetings">
    <p>{{title}}</p>
  </div>
</template>

一开始title显示“原始title”，1s后便更新为"test emits"。

单文件组件组合式API

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

大前端-postcss安装使用指南黑夜照亮前行的路 postcss
PostCSS是一款强大的CSS处理工具，可以用来自动添加浏览器前缀、代码合并、代码压缩等，提升代码的可读性，并支持使用最新的CSS语法。以下是一份简化的PostCSS安装使用指南：一、安装PostCSS在你的项目目录中，通过npm（NodePackageManager）来安装PostCSS。打开命令行窗口，输入以下命令：bash复制代码npminstallpostcss--save-dev这将把
谷歌浏览器驱动Chromedriver（114-120版本）文件以及驱动下载教程 pigerr杨 Python python chrome drivers
ChromeDriver官方网站GitHub||GoogleChromeLabs/chrome-for-testingChromeDriver113-125_JSONChromeforTestingavailability123-125zip白月黑羽Python基础|进阶|Qt图形界面|Django|自动化测试|性能测试|JS语言|JS前端|原理与安装
虚拟 DOM 的优缺点有哪些咕噜签名分发前端 javascript 开发语言
虚拟DOM（VirtualDOM）技术作为现代前端开发中的重要组成部分，已经成为了众多流行前端框架的核心特性。它的引入为前端开发带来了诸多优势，同时也需要我们认真思考其潜在的考量。下面简单的介绍一下虚拟DOM技术的优势与缺点，深入探讨其在实际应用中的影响。提升性能虚拟DOM的最大优势之一是提升页面性能。通过比较前后两次虚拟DOM树的差异，最小化实际DOM操作，从而减少页面重渲染时的性能消耗。这种优
3、JavaWeb-Ajax/Axios-前端工程化-Element 所谓远行Misnearch #JavaWeb 前端 ajax elementui java 前端框架
P34Ajax介绍Ajax:AsynchroousJavaScriptAndXML，异步的JS和XMLJS网页动作，XML一种标记语言，存储数据，作用：数据交换：通过Ajax给服务器发送请求，并获取服务器响应的数据异步交互：在不重新加载整个页面的情况下，与服务器交换数据并实现更新部分网页的技术，例如：搜索联想、用户名是否可用的校验等等。同步与异步：同步：服务器在处理中客户端要处于等待状态，输入域名
java实体中返回前端的double类型四舍五入（格式化）婲落ヽ紅顏誶 java
根据业务，需要通过后端给前端返回部分double类型的数值，一般需要保留两位小数，使用jackson转换对象packagecom.ruoyi.common.core.config;importcom.fasterxml.jackson.core.JsonGenerator;importcom.fasterxml.jackson.databind.JsonSerializer;importcom.f
Django forms组件在飞行-米龙 Django django python 后端
【一】引入【1】实现登陆验证功能（1）需求分析登陆验证需要前后端交互，采用form表单提交数据对数据进行校验用户名必须以英文大写字母开头密码必须大于三位数反馈给用户错误的信息除了反馈错误的信息还有保留原始输入内容（2）后端代码使用user_info_dict字典每次刷新存储存储前端发送的信息存储后端进行验证的信息defhome(request):#每次后刷新这个信息字典user_info_dict
Web前端Html的表单任家伟前端 html
表单的关键字：form标签表示一个表单区域action=“后端地址”method=“提交数据方式:get/post”input单行输入框type=“text”文本name=“定义名称名字自定义”向后端提交的键readonly=“readonly”只读，不可修改，但是可以提交disabled=“disabled”禁用组件不可修改，不能提交type=“password”密码框type=“radio”单
Thinkphp - 详细实现网站系统登录功能，附带 Mysql 数据库设置、Web 前端展示界面、信息校验等（详细代码，即设计过程）王佳斌 +Thinkphp mysql 前端数据库
前言登录功能，是我们几乎开发每个系统都必须的模块。登录功能设计思路，主要包括几个方面。用户输入网址展示登录页面用户输入用户名，密码等点击登录进行信息校验校验通过之后，记录用户登录信息，跳转指定页面用户校验失败，提示失败信息页面目录具体功能实现为了快速搭建可用、美观的页面，我们采用一个比较成熟的前端框架Bootstrap。下面我们到Bootstrap的官网Bootsrap官网下载bootstrap。
程序员开发技术整理 laizhixue 学习前端框架
前端技术：vue-前端框架element-前端框架bootstrap-前端框架echarts-图标组件C#后端技术：webservice：soap架构：简单的通信协议，用于服务通信ORM框架：对象关系映射，如EF：对象实体模型，是ado.net中的应用技术soap服务通讯：xml通讯ado.net：OAuth2:登录授权认证：Token认证：JWT：jsonwebtokenJava后端技术：便捷工
【前端学习——js篇】7.函数缓存笔下无竹墨下有鱼前端学习前端学习 javascript
具体见：https://github.com/febobo/web-interview7.函数缓存函数缓存，就是将函数运算过的结果进行缓存本质上就是用空间（缓存存储）换时间（计算过程）常用于缓存数据计算结果和缓存对象。其实现主要通过闭包、柯里化和高阶函数。下面主要介绍下柯里化：①柯里化柯里化（currying)是一种函数式编程的概念，指的是将一个带有多个参数的函数转换成一系列只接受一个参数的函数的
Websocket服务监听收发消息 beiback Java 服务器问题 websocket 网络协议网络
目录1.pom依赖坐标2.项目配置端口和项目包名2.创建处理器3.注册处理器4.前端页面1.pom依赖坐标org.springframework.bootspring-boot-starter-websocket2.项目配置端口和项目包名application.propertiesserver.port=8088//路径规范：为应用的所有servlet提供一个统一的前缀，使URL结构更加清晰和一致
Netty服务器结合WebSocke协议监听和接收数据 beiback 服务器问题 Java 服务器运维 netty
目录1.pom依赖2.配置属性3.创建netty服务器4.建立监听和响应5.创建启动器6.前端static下页面7.前端js8.注意异常问题9.创建netty服务器--使用守护线程1.pom依赖io.nettynetty-all4.1.86.Final2.配置属性application.properties#启动端口server.port=8088server.servlet.context-pa
基于SSM+Vue企业销售培训系统企业人才培训系统企业课程培训管理系统企业文化培训班系统Java 计算机程序老哥
作者主页：计算机毕业设计老哥有问题可以主页问我一、开发介绍1.1开发环境开发语言：Java数据库：MySQL系统架构：B/S后端：SSM(Spring+SpringMVC+Mybatis)前端：Vue工具：IDEA或者Eclipse，JDK1.8，Maven二、系统介绍2.1图片展示注册登录页面：登陆.png前端页面功能：首页、培训班、在线学习、企业文化、交流论坛、试卷列表、系统公告、留言反馈、个
javascript实现SM2加密解密人生在勤，不索何获 javascript 前端 jquery
前提JavaWeb环境前端代码window.sm2=function(t){functioni(e){if(r[e])returnr[e].exports;varn=r[e]={i:e,l:!1,exports:{}};returnt[e].call(n.exports,n,n.exports,i),n.l=!0,n.exports}varr={};returni.m=t,i.c=r,i.d=fu
Vue：为什么要使用v-cloak 刻刻帝的海角 vue.js 前端 javascript
Vue.js是一种流行的JavaScript框架，它使我们能够构建交互性强大的用户界面。在Vue.js中，v-cloak是一个指令，用于解决在页面加载时出现的闪烁问题。本文将介绍如何使用v-cloak及代码来优化Vue.js应用程序的渲染效果。引言当我们使用Vue.js构建应用程序时，有时会遇到一个问题：在页面加载时，由于Vue.js需要一定的时间来解析和渲染模板，会导致页面上显示出未经处理的Mu
前端埋点解决方案 zhu_zhu_xia 前端
一、前言：基于神策数据的前端埋点解决方案JavaScript快速使用·神策分析使用手册[预览版]二、sdkgitlab下载地址https://github.com/sensorsdata/sa-sdk-javascript/releases或者npm安装npmisa-sdk-javascript三、入门3.1接入sdk以及配置(version1.17.2)，入口文件接入sdk以及添加配置(func
如何提出令人爱回答的好问题？兮若耶
我们经常会遇到这样的问题，如我适合做什么？这个名词怎么解释？大部分人面对这样的问题时，要么答非所问，要么无从下手。现在的很多事物都是速成的，只是好的问题并没有那么容易被提出来。而提不好的问题，可能会拿不到想要的信息等等。所以提出一个好问题很重要。01提问的功能我们参加各种聚会、会议时，能听到很多的比喻和新观点，而这些是在书上和网上找不到的。这些新的有用的东西，都在前端被实践着，暂时来不及把知识系统
谈谈对前端性能监控的理解和实践 Layla_c web jave python 前端
一、谈谈对前端性能监控的理解和实践前端性能监控是确保网页或应用高效、稳定运行的关键环节，它涉及对前端页面加载速度、资源消耗、错误率等指标的实时监控和预警。通过前端性能监控，开发者和运维团队能够及时发现并解决性能瓶颈，从而提升用户体验和系统稳定性。理解前端性能监控，首先要明确其重要性。在移动互联网时代，用户对网页和应用的响应速度有着极高的要求。如果页面加载缓慢或出现卡顿，用户可能会选择离开，这对企业
mineadmin使用docker启动方式 qq_38812523 docker php 容器
找个目录,git下来mineadmin代码,在根目录,创建文件名docker-compose.yml然后复制下面代码version:'3'services:#首先下载前端，https://gitee.com/mineadmin/mineadmin-vue#在后端根目录建立mine-ui目录，把前端文件复制过来。#容器内访问宿主机的地址用：host.docker.internal#宿主机也可以在ho
为什么需要使用版本控制工具（如Git）？它如何帮助管理前端开发项目？智伴科技 git
版本控制工具（如Git）在前端开发项目中扮演着重要的角色，主要有以下几方面的作用：1.**版本管理**：版本控制工具可以帮助开发团队管理项目的不同版本，记录每次代码变动的历史记录，方便追踪和回溯。开发人员可以通过版本控制工具轻松地查看、对比和恢复以前的版本。2.**协同合作**：多人开发同一个项目时，版本控制工具可以协助团队成员协同工作，避免代码冲突、重复工作和混乱。开发人员可以通过版本控制工具共
低代码与前端开发架构：重塑软件开发的未来快乐非自愿低代码架构前端
随着技术的不断进步和数字化转型的深入，软件开发领域正经历着一场革命性的变革。在这场变革中，低代码开发平台和前端开发架构扮演着越来越重要的角色。本文将探讨低代码与前端开发架构之间的关系，并分析它们如何共同推动软件开发的创新与发展。低代码开发平台的崛起低代码开发平台（Low-CodeDevelopmentPlatform,LCDP）是一种新型的软件开发方式，它允许开发者通过图形化界面、预构建的模块和模
接口测试之测试原则、测试用例、测试流程...... 程序员老鹰测试工具功能测试测试用例测试覆盖率系统安全
一、接口的介绍软件测试中，常说的接口有两种：图形用户接口（GUI，人与程序的接口）、应用程序编程接口（API）。接口（API）是系统与系统之间，模块与模块之间或者服务与服务之间相互调用的入口。它的本质：其实就是一种约定，在开发前期，我们约定接口会接收什么数据；在处理完成后，它又会返回什么数据。开发岗位分为前端和后端，他们相互配合完成工作，会协商接口的定义方法。一般后端定义接口，前端调用接口。前后端
【前端】CommonJS和ES Module Lucky小维前端前端
区别语法差异：CommonJS：使用require()导入模块，使用module.exports或exports导出模块。ESModule：使用import导入模块，使用export导出模块。编译时vs运行时：CommonJS是在运行时加载模块，模块代码是动态执行的。ESModule是在编译时静态解析模块依赖关系，以便更好地进行优化和静态分析。异步加载：CommonJS不支持异步加载模块，只能同步
如何快速上手Vue框架? 山间漫步人生路 vue.js 前端框架 vue.js
要快速上手Vue框架，可以按照以下步骤进行：一、准备工作了解Vue：Vue是一个构建用户界面的渐进式框架，核心库只关注视图层。环境准备：安装Node.js和npm，这是Vue开发的基础环境。二、安装Vue全局安装VueCLI：使用npm全局安装VueCLI，它是一个基于Vue.js进行快速开发的完整系统。npminstall-g@vue/cli三、创建Vue项目使用VueCLI创建新项目：vuec
基于python+vue高校毕业生离校管理系统flask-django-php-nodejs QQ511008285 python vue.js flask django node.js php
课题主要采用Uni-weixin、django架构技术，前端以小程序页面呈现给用户，结合后台java语言使页面更加完善，后台使用MySQL数据库进行数据存储。微信小程序主要包括学生、教务人员、宿管员、图书管理员、财务人员、离校申请、物流信息、钥匙归还、图片归还、欠费信息、催缴信息等功能，从而实现智能化的管理方式，提高工作效率。关键字：高校毕业生离校管理系统；django框架；MySQL数据库语言：
Vue项目使用process.env关键字及Vue.config.js配置解决前端跨域问题百思不得小李 JS实战记录 vue2实战记录 javascript 前端 vue.js
1.process.env是Node.js中的一个环境1.打开命令行查看环境：2.process.env与VueCLI项目VueCli有以下三种运行模式development模式用于vue-cli-serviceservetest模式用于vue-cli-servicetest:unitproduction模式用于vue-cli-servicebuild和vue-cli-servicetest:e2
浅谈前端路由history和hash的理解怂怂敲代码前端哈希算法算法
hash和history在前端面试中是很常考的一道题目，可能很多人对于history和hash的理解差异性就是，他们两者的url字段一个没有#号一个有#号，但是有没有想过为什么这样呢，有无#号又有什么差异呢，这篇文章谈一谈我对前端路由history和hash的理解。hash和history都可以用于前后端分离项目，且两者有各自的特点和各自的使用场景。一、前端路由原理1、SPASPA，即单页面应用(
[套路] 浏览器引入Vue.js场景-WangEditor富文本编辑器的使用 (永久免费) Grandpa_Rick 套路 front end vue.js 前端 javascript wangEditor
系列文章目录[套路]el-table多选属性实现单选效果[套路]基于服务内存实现的中文拼音混合查询[套路]Bypass滑块验证码目录系列文章目录前言一、实现1.1场景1.2Window对象简介1.3引入WangEditor1.4页面配置前言公司使用freemarker的老旧SpringBootWeb后台项目,前两年通过浏览器引入js的方式使用Vue简单升级了下,方便迭代功能.近期一个很简单的功能需
Yarn 管理的前端项目转换为使用 npm 577wq node.js 前端 npm node.js
如果你想将一个使用Yarn管理的前端项目转换为使用npm，你需要执行一些步骤来确保成功迁移。以下是一种可能的方法：步骤：备份项目：在执行任何更改之前，确保你对项目进行了备份。这样可以防止意外的数据丢失。删除yarn.lock文件：在项目根目录中，删除yarn.lock文件。这个文件记录了使用Yarn安装的确切的依赖版本信息。修改package.json文件：打开项目的package.json文件，
accessToken 星梦清河 java spring boot 经验分享 redis
1、介绍accessToken，通常是用于身份验证和授权的令牌,它可以用于前端和后端，具体使用方式取决于应用程序的架构和需求。前端应用accessToken通常用于向后端API发送请求时进行身份验证和授权。（1）前端应用程序会在用户登录成功后获取accessToken；（2）并将accessToken存储在本地;（3）然后在每次请求API时，将accessToken作为请求头或参数发送给后端；（4
辗转相处求最大公约数沐刃青蛟 C++漏洞
无言面对”江东父老“了，接触编程一年了，今天发现还不会辗转相除法求最大公约数。惭愧惭愧！为此，总结一下以方便日后忘了好查找。 1.输入要比较的两个数a,b 忽略：2.比较大小（因为后面要的是大的数对小的数做%操作） 3.辗转相除（用循环不停的取余，如a%b,直至b=0） 4.最后的a为两数的最大公约数 &
F5负载均衡会话保持技术及原理技术白皮书 bijian1013 F5 负载均衡
一.什么是会话保持？在大多数电子商务的应用系统或者需要进行用户身份认证的在线系统中，一个客户与服务器经常经过好几次的交互过程才能完成一笔交易或者是一个请求的完成。由于这几次交互过程是密切相关的，服务器在进行这些交互过程的某一个交互步骤时，往往需要了解上一次交互过程的处理结果，或者上几步的交互过程结果，服务器进行下
Object.equals方法：重载还是覆盖 Cwind java generics override overload
本文译自StackOverflow上对此问题的讨论。原问题链接在阅读Joshua Bloch的《Effective Java（第二版）》第8条“覆盖equals时请遵守通用约定”时对如下论述有疑问： “不要将equals声明中的Object对象替换为其他的类型。程序员编写出下面这样的equals方法并不鲜见，这会使程序员花上数个小时都搞不清它为什么不能正常工作：” pu
初始线程 15700786134
暑假学习的第一课是讲线程，任务是是界面上的一条线运动起来。既然是在界面上，那必定得先有一个界面，所以第一步就是，自己的类继承JAVA中的JFrame，在新建的类中写一个界面，代码如下： public class ShapeFr
Linux的tcpdump 被触发 tcpdump
用简单的话来定义tcpdump，就是：dump the traffic on a network，根据使用者的定义对网络上的数据包进行截获的包分析工具。 tcpdump可以将网络中传送的数据包的“头”完全截获下来提供分析。它支持针对网络层、协议、主机、网络或端口的过滤，并提供and、or、not等逻辑语句来帮助你去掉无用的信息。实用命令实例默认启动 tcpdump 普通情况下，直
安卓程序listview优化后还是卡顿肆无忌惮_ ListView
最近用eclipse开发一个安卓app，listview使用baseadapter，里面有一个ImageView和两个TextView。使用了Holder内部类进行优化了还是很卡顿。后来发现是图片资源的问题。把一张分辨率高的图片放在了drawable-mdpi文件夹下，当我在每个item中显示，他都要进行缩放，导致很卡顿。解决办法是把这个高分辨率图片放到drawable-xxhdpi下。 &nb
扩展easyUI tab控件，添加加载遮罩效果知了ing jquery
(function () { $.extend($.fn.tabs.methods, { //显示遮罩 loading: function (jq, msg) { return jq.each(function () { var panel = $(this).tabs(&
gradle上传jar到nexus 矮蛋蛋 gradle
原文地址： https://docs.gradle.org/current/userguide/maven_plugin.html configurations { deployerJars } dependencies { deployerJars "org.apache.maven.wagon
千万条数据外网导入数据库的解决方案。 alleni123 sql mysql
从某网上爬了数千万的数据，存在文本中。然后要导入mysql数据库。悲剧的是数据库和我存数据的服务器不在一个内网里面。。 ping了一下， 19ms的延迟。于是下面的代码是没用的。 ps = con.prepareStatement(sql); ps.setString(1, info.getYear())............; ps.exec
JAVA IO InputStreamReader和OutputStreamReader 百合不是茶 JAVA.io操作字符流
这是第三篇关于java.io的文章了，从开始对io的不了解-->熟悉--->模糊，是这几天来对文件操作中最大的感受，本来自己认为的熟悉了的，刚刚在回想起前面学的好像又不是很清晰了，模糊对我现在或许是最好的鼓励我会更加的去学加油！： JAVA的API提供了另外一种数据保存途径，使用字符流来保存的，字符流只能保存字符形式的流字节流和字符的难点：a,怎么将读到的数据
MO、MT解读 bijian1013 GSM
MO= Mobile originate，上行，即用户上发给SP的信息。MT= Mobile Terminate，下行，即SP端下发给用户的信息；上行:mo提交短信到短信中心下行:mt短信中心向特定的用户转发短信，你的短信是这样的，你所提交的短信，投递的地址是短信中心。短信中心收到你的短信后，存储转发，转发的时候就会根据你填写的接收方号码寻找路由，下发。在彩信领域是一样的道理。下行业务：由SP
五个JavaScript基础问题 bijian1013 JavaScript call apply this Hoisting
下面是五个关于前端相关的基础问题，但却很能体现JavaScript的基本功底。问题1：Scope作用范围考虑下面的代码： (function() { var a = b = 5; })(); console.log(b); 什么会被打印在控制台上？回答：上面的代码会打印 5。 &nbs
【Thrift二】Thrift Hello World bit1129 Hello world
本篇，不考虑细节问题和为什么，先照葫芦画瓢写一个Thrift版本的Hello World，了解Thrift RPC服务开发的基本流程 1. 在Intellij中创建一个Maven模块，加入对Thrift的依赖，同时还要加上slf4j依赖，如果不加slf4j依赖，在后面启动Thrift Server时会报错 <dependency>
【Avro一】Avro入门 bit1129 入门
本文的目的主要是总结下基于Avro Schema代码生成，然后进行序列化和反序列化开发的基本流程。需要指出的是，Avro并不要求一定得根据Schema文件生成代码，这对于动态类型语言很有用。 1. 添加Maven依赖 <?xml version="1.0" encoding="UTF-8"?> <proj
安装nginx+ngx_lua支持WAF防护功能 ronin47
需要的软件:LuaJIT-2.0.0.tar.gz nginx-1.4.4.tar.gz &nb
java-5.查找最小的K个元素-使用最大堆 bylijinnan java
import java.util.Arrays; import java.util.Random; public class MinKElement { /** * 5.最小的K个元素 * I would like to use MaxHeap. * using QuickSort is also OK */ public static void
TCP的TIME-WAIT bylijinnan socket
原文连接： http://vincent.bernat.im/en/blog/2014-tcp-time-wait-state-linux.html 以下为对原文的阅读笔记说明：主动关闭的一方称为local end，被动关闭的一方称为remote end 本地IP、本地端口、远端IP、远端端口这一“四元组”称为quadruplet，也称为socket 1、TIME_WA
jquery ajax 序列化表单 coder_xpf Jquery ajax 序列化
checkbox 如果不设定值，默认选中值为on；设定值之后，选中则为设定的值 <input type="checkbox" name="favor" id="favor" checked="checked"/> $("#favor&quo
Apache集群乱码和最高并发控制 cuisuqiang apache tomcat 并发集群乱码
都知道如果使用Http访问，那么在Connector中增加URIEncoding即可，其实使用AJP时也一样，增加useBodyEncodingForURI和URIEncoding即可。最大连接数也是一样的，增加maxThreads属性即可，如下，配置如下： <Connector maxThreads="300" port="8019" prot
websocket dalan_123 websocket
一、低延迟的客户端-服务器和服务器-客户端的连接很多时候所谓的http的请求、响应的模式，都是客户端加载一个网页，直到用户在进行下一次点击的时候，什么都不会发生。并且所有的http的通信都是客户端控制的，这时候就需要用户的互动或定期轮训的，以便从服务器端加载新的数据。通常采用的技术比如推送和comet（使用http长连接、无需安装浏览器安装插件的两种方式：基于ajax的长
菜鸟分析网络执法官 dcj3sjt126com 网络
最近在论坛上看到很多贴子在讨论网络执法官的问题。菜鸟我正好知道这回事情.人道"人之患好为人师" 手里忍不住,就写点东西吧. 我也很忙.又没有MM,又没有MONEY....晕倒有点跑题. OK,闲话少说,切如正题. 要了解网络执法官的原理. 就要先了解局域网的通信的原理. 前面我们看到了.在以太网上传输的都是具有以太网头的数据包.
Android相对布局属性全集 dcj3sjt126com android
RelativeLayout布局android:layout_marginTop="25dip" //顶部距离android:gravity="left" //空间布局位置android:layout_marginLeft="15dip //距离左边距 // 相对于给定ID控件android:layout_above 将该控件的底部置于给定ID的
Tomcat内存设置详解 eksliang jvm tomcat tomcat内存设置
Java内存溢出详解一、常见的Java内存溢出有以下三种： 1. java.lang.OutOfMemoryError: Java heap space ----JVM Heap（堆）溢出JVM在启动的时候会自动设置JVM Heap的值，其初始空间(即-Xms)是物理内存的1/64，最大空间(-Xmx)不可超过物理内存。可以利用JVM提
Java6 JVM参数选项 greatwqs java HotSpot jvm jvm参数 JVM Options
Java 6 JVM参数选项大全（中文版）作者：Ken Wu Email: [email protected] 转载本文档请注明原文链接 http://kenwublog.com/docs/java6-jvm-options-chinese-edition.htm！本文是基于最新的SUN官方文档Java SE 6 Hotspot VM Opt
weblogic创建JMC i5land weblogic jms
进入 weblogic控制太 1.创建持久化存储 --Services--Persistant Stores--new--Create FileStores--name随便起--target默认--Directory写入在本机建立的文件夹的路径--ok 2.创建JMS服务器 --Services--Messaging--JMS Servers--new--name随便起--Pers
基于 DHT 网络的磁力链接和BT种子的搜索引擎架构 justjavac DHT
上周开发了一个磁力链接和 BT 种子的搜索引擎 {Magnet & Torrent}，本文简单介绍一下主要的系统功能和用到的技术。系统包括几个独立的部分：使用 Python 的 Scrapy 框架开发的网络爬虫，用来爬取磁力链接和种子；使用 PHP CI 框架开发的简易网站；搜索引擎目前直接使用的 MySQL，将来可以考虑使
sql添加、删除表中的列 macroli sql
添加没有默认值：alter table Test add BazaarType char(1) 有默认值的添加列：alter table Test add BazaarType char(1) default(0) 删除没有默认值的列：alter table Test drop COLUMN BazaarType 删除有默认值的列：先删除约束（默认值）alter table Test DRO
PHP中二维数组的排序方法 abc123456789cba 排序二维数组 PHP
<?php/*** @package BugFree* @version $Id: FunctionsMain.inc.php,v 1.32 2005/09/24 11:38:37 wwccss Exp $*** Sort an two-dimension array by some level
hive优化之------控制hive任务中的map数和reduce数 superlxw1234 hive hive优化
一、控制hive任务中的map数: 1. 通常情况下，作业会通过input的目录产生一个或者多个map任务。主要的决定因素有： input的文件总个数，input的文件大小，集群设置的文件块大小(目前为128M, 可在hive中通过set dfs.block.size;命令查看到，该参数不能自定义修改)；2.
Spring Boot 1.2.4 发布 wiselyman spring boot
Spring Boot 1.2.4已于6.4日发布，repo.spring.io and Maven Central可以下载(推荐使用maven或者gradle构建下载)。这是一个维护版本，包含了一些修复small number of fixes,建议所有的用户升级。 Spring Boot 1.3的第一个里程碑版本将在几天后发布，包含许多

按字母分类： A B C D E F G H I J K L M N O P Q R S T U V W X Y Z 其他