阿牛大牛中
阿牛大牛中

Vue笔记三——计算属性(computed)

文章目录

  • 计算属性
    • 什么是计算属性？
    • 计算属性的复杂操作
    • 计算属性的setter和getter
    • 计算属性的缓存

计算属性

什么是计算属性？

  • 我们知道，在模板中可以直接通过插值语法显示一些data中的数据。
  • 但是在某些情况，我们可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示
    • 比如我们又firstName和lastName两个变量，我们需要显示完整的名称。
    • 但是如果多个地方都需要显示完整的名称，我们就需要写多个{ {firstName}}{ {lastName}}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01-计算属性的基本使用</title>
</head>

<body>
    <div id="app">
        <h2>{
     {
     firstName + ' ' + lastName}}</h2>
        <h2>{
     {
     firstName}} {
     {
     lastName}}</h2>
        <h2>{
     {
     getFullName()}}</h2>

    </div>

    <script src="../js/vue.js"></script>

    <script>
        const app = new Vue({
     
            el: '#app',
            data: {
     
                firstName: 'Lebron',
                lastName: 'James'
            },
            methods: {
     
                getFullName() {
     
                    return this.firstName + ' ' + this.lastName;
                }
            }
        })
    </script>
</body>

</html>
  • 我们可以将上面的代码换成计算属性：
    • OK，我们发现计算属性是写在实例computed选项中的。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01-计算属性的基本使用</title>
</head>

<body>
    <div id="app">
        <h2>{
     {
     firstName + ' ' + lastName}}</h2>
        <h2>{
     {
     firstName}} {
     {
     lastName}}</h2>
        <h2>{
     {
     getFullName()}}</h2>
        <h2>{
     {
     fullName}}</h2>

    </div>

    <script src="../js/vue.js"></script>

    <script>
        const app = new Vue({
     
            el: '#app',
            data: {
     
                firstName: 'Lebron',
                lastName: 'James'
            },
            // computed：计算属性()
            computed: {
     
                fullName: function() {
     
                    return this.firstName + ' ' + this.lastName;
                }
            },
            methods: {
     
                getFullName() {
     
                    return this.firstName + ' ' + this.lastName;
                }
            }
        })
    </script>
</body>

</html>

Vue笔记三——计算属性(computed)_第1张图片

计算属性的复杂操作

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>02-计算属性的复杂操作</title>
</head>

<body>
    <div id="app">
        <h2>总价格：{
     {
     totalPrice}}</h2>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
     
            el: '#app',
            data: {
     
                books: [{
     
                    id: 110,
                    name: '深入理解计算机原理',
                    price: 119
                }, {
     
                    id: 111,
                    name: '斗罗大陆之绝世唐门',
                    price: 643
                }, {
     
                    id: 112,
                    name: 'JavaScript从入门到精通',
                    price: 99
                }, {
     
                    id: 113,
                    name: '高等数学',
                    price: 37
                }]
            },
            computed: {
     
                totalPrice: function() {
     
                    let result = 0;
                    for (let i = 0; i < this.books.length; i++) {
     
                        result += this.books[i].price;
                    }
                    return result;
                }
            }
        })
    </script>
</body>

</html>

Vue笔记三——计算属性(computed)_第2张图片

计算属性的setter和getter

  • 我们上面用到的计算属性看起来像个函数，但实际上应该当成一个属性。（使用的时候千万不要加小括号）
computed: {
     
  fullName: function() {
     
      return this.firstName + ' ' + this.lastName;
  }
}
  • 实际上，因为计算属性的set方法一般都不用，只有get所以简化了：
fullName: {
     
    // 一般情况set都没有，只有get
    set: function() {
     

    },
    get: function() {
     
        return this.firstName + ' ' + this.lastName;
    }
}

计算属性的缓存

  • 我们可能会考虑这样一个问题：
    • methods和computed看起来都可以实现我们的功能
    • 那么为什么要多一个计算属性这个东西呢？
    • 原因：计算属性会进行缓存，如果多次使用，计算属性只会调用一次。
  • 我们看下面的代码，将methods与computed进行比较。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>04-计算属性和methods的对比</title>
</head>

<body>
    <div id="app">
        <!-- 1.直接拼接，过于繁琐 -->
        <h2>{
     {
     firstName}} {
     {
     lastName}}</h2>
        <!-- 2.通过定义methods -->
        <h2>{
     {
     getFullName()}}</h2>
        <h2>{
     {
     getFullName()}}</h2>
        <h2>{
     {
     getFullName()}}</h2>
        <h2>{
     {
     getFullName()}}</h2>
        <h2>{
     {
     getFullName()}}</h2>
        <!-- 3.通过定义computed -->
        <h2>{
     {
     fullName}}</h2>
        <h2>{
     {
     fullName}}</h2>
        <h2>{
     {
     fullName}}</h2>
        <h2>{
     {
     fullName}}</h2>
        <h2>{
     {
     fullName}}</h2>
        <h2>{
     {
     fullName}}</h2>

    </div>

    <script src="../js/vue.js"></script>

    <script>
        const app = new Vue({
     
            el: '#app',
            data: {
     
                firstName: 'Lebron',
                lastName: 'James'
            },
            // computed：计算属性()
            computed: {
     
                fullName: function() {
     
                    console.log('通过computed');
                    return this.firstName + ' ' + this.lastName;
                }
            },
            methods: {
     
                getFullName() {
     
                    console.log('通过methods');
                    return this.firstName + ' ' + this.lastName;
                }
            }
        })
    </script>
</body>

</html>

Vue笔记三——计算属性(computed)_第3张图片

相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。

我们为什么需要缓存？假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代。

你可能感兴趣的:(vue)

  • 华为OD技术面试真题 - 技术面】- 前端八股文真题题库（8) 算法大师 华为od面试前端华为OD机试E卷javascriptjavapython
    华为OD面试真题精选专栏：华为OD面试真题精选目录:2024华为OD面试手撕代码真题目录以及八股文真题目录文章目录华为OD面试真题精选1.vue中key的作用？为什么不能用index作为key作用为什么不能用index作为key示例说明2.Vue2和Vue3?defineProperty和Proxy?Vue2的`Object.defineProperty()`Vue3的`Proxy`比较和应用场景
  • Vue.js：构建现代动态用户界面的强大工具 KBkongbaiKB vue.jsuiflutter
    在当今数字化时代，前端开发领域蓬勃发展，而Vue.js作为其中一颗耀眼的明星，正引领着一场关于高效、灵活和创新的前端开发革命。它以其独特的设计理念和卓越的性能表现，为开发者提供了一种全新的开发范式，使得构建交互性强、用户体验佳的网页应用变得更加便捷且富有创造力。一、Vue.js的核心概念与架构渐进式框架理念Vue.js秉持渐进式框架的理念，这一特性使其在各类项目中都具有极高的适应性。无论是简单的个
  • vue3开发uniapp转字节小程序注意事项 奔跑的代码！ vue3.0uniAppuni-app小程序vue
    vue3开发uniapp转字节小程序注意事项1.provide-inject跨层通信不支持问题2.不能自定义头部，需要去申请3.不能使用moment日期插件4.不要再组件中使用onShow、onLoad等生命周期5.picker-view、picker-view-column抖音小程序无法选中问题开发相关地址1.抖音开放平台2.开发者平台项目本身是vue3+ts+uniapp写的微信小程序，因产品
  • Vue _总结 北执南念 工作中开发总结Vuevue.js前端javascript
    文章目录一Vue介绍1什么是Vue.js2MVVM二第一个例子1引入vue2html中用法3创建vue实例对象三Vue基本语法1v-text2v-bind3v-on4v-model5v-if6v-for7计算属性8组件化全局注册本地注册9生命周期10员工程序使用vue.js重构list.htmladd.htmlupdate.html四使用vue-cli搭建Vue项目1node.js的安装设置npm
  • element的form校验问题 lydxwj 框架插件vuevue.jsjavascript前端
    环境：elementui：V2.13.1vue：2.X问题：表单项必填校验，内容为空时没问题，填写内容后不实时移除必填提示信息新增的动态表单项，不能实时校验，执行form.validate会进行校验分析：form标签上面增加rules来进行校验，el-form-item标签上面需要加prop属性，由于键中存在横杠所以在el-form-item中的表单项进行双向绑定值时是v-model="formD
  • 搭建规范化的vue2项目 lydxwj vuevueEslintPrettier
    项目包含的库Vue2+Vuex+Router+Eslint+Prettier环境vue：2.6.14eslint：7.32.0prettier：2.4.1eslint-plugin-prettier：4.0.0eslint-plugin-vue：8.0.3@vue/cli：5.0.8步骤全局安装cli工具npminstall-g@vue/cli运行创建项目命令vueui运行vuecreatexxx
  • 【开题报告】基于Springboot+vue智能停车场管理系统（程序+源码+论文) 计算机毕业设计 计算机程序_设计 springbootvue.js课程设计
    本系统（程序+源码）带文档lw万字以上文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景随着城市化进程的加速，车辆数量急剧增加，停车难问题已成为各大城市面临的严峻挑战。传统的停车场管理方式存在效率低下、资源浪费、用户体验差等问题，无法满足现代城市对高效、便捷停车服务的需求。智能停车场管理系统作为一种创新的解决方案，通过集成先进的物联网技术、云计算技术和大数据分析技
  • 深入理解Vue中的Component：构建灵活且可复用的前端模块 Earth explosion 前端vue.jsjavascript
    在前端开发的世界里，随着应用程序的规模和复杂度不断增加，如何有效地组织和管理代码成为了一个关键问题。Vue.js作为一款流行的前端框架，通过其强大的组件系统为开发者提供了一种优雅且高效的解决方案。本文将深入探讨Vue中的Component（组件），包括其基本概念、创建方式、通信机制以及实际应用场景，帮助开发者更好地理解和运用这一核心特性。一、什么是Vue组件在Vue.js中，组件是可复用的Vue实
  • DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之功能优化，基础加载状态,Table8基础加载状态 宝码香车 #DeepSeekvue.jsjavascriptecmascript前端DeepSeek
    前言：哈喽，大家好，今天给大家分享一篇文章！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦目录DeepSeek助力Vue3开发：打造丝滑的表格（Table）之功能优化，基础加载状态页面效果整理后主要代码调用TableView8.vue测试代码正常跑通，附其他基本代码编写路由src\router\index.js编写展示入口src\Ap
  • vue管理布局左侧菜单栏NavMenu liuyang___ vue.jsjavascript前端
    我们接着上回的写，我们写一下左侧的菜单logo系统首页系统首页系统首页信息管理系统首页系统首页这就是左侧的代码，我加了一点样式，因为正常的都是上面有一个logo，下面再写菜单栏，我们写一下这个el-menu首先写一个el-menu，这个显然就是一级菜单，然后在里面写el-menu-item写出几项就可以了，然后我们再继续写二级菜单，就是el-submenu，这个东西吧，你可以在里面直接谢日el-m
  • H5播放Rtmp之vue-video-player播放播放 视频播放器html5
    一、简介我们看到了HLS播放视频实时性非常差，好的在6-7s，差点的就要10-12s了，也就是人走了，估计视频上还能看到，这对观感效果造成了很大的影响！但是好处就是它是基于http协议文件下载的，所以不需要任何插件，到处播放，处处兼容，所以rtmp和hls在web端的特点如下：HLS(1)使用http协议，兼容所有浏览器。(2)延时非常大，不太适合实时视频源，适合文件点播或历史录像直播。RTMP(
  • Vue 3 组件库测试驱动开发 (TDD)：Jest + Vue Test Utils 单元测试实战 - 保障组件质量与长期维护性 Neo Evolution 前端学习vue.js驱动开发tdd前端框架单元测试笔记前端
    引言欢迎再次回到Vue3+现代前端工程化系列技术博客！在昨天的第八篇博客中，我们学习了如何利用Storybook自动化生成专业级的组件文档，极大地提升了组件库的可维护性和易用性。今天，我们将聚焦于组件库开发的质量保障环节，深入探讨Vue3组件的单元测试，并实践测试驱动开发(Test-DrivenDevelopment,TDD)理念，构建高质量、可长期维护的Vue组件库。在软件工程领域，测试是保证代
  • Manus：颠覆 AI 代理的新时代
    ReactHook深入浅出CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读Manus，这款突破性的AI代理，近期在科技界掀起了巨大波澜。它由中国AI初创公司Monica开发，并于2025年3月初正式亮相。在联合创始人兼首席科学家Yichao“Peak”Ji的演示视频中，Manus展现了其强大的自动化执行能力。这个AI代理的名字来源于拉丁语“Manus”，意为“手”，寓意它能充当用
  • uni-app基础拓展 阿常11 uni-app移动应用开发uni-app前端javascript
    3.1生命周期uni-app生命周期分为应用生命周期、页面生命周期和组件生命周期。3.1.1应用生命周期onLaunch：当uni-app初始化完成时触发（只触发一次）onShow：当uni-app启动，或从后台进入前台显示时触发onHide：当uni-app从前台进入到后台时触发onError：当uni-app报错时触发onUniNViewMessage：对nvuew页面发送的数据监听onUnh
  • electron + vue3 + vite 渲染进程到主进程的单向通信 狼性书生 electron-forgeelectronjavascript前端
    用示例讲解下渲染进程到主进程的单向通信初始版本项目结构可参考项目：https://github.com/ylpxzx/electron-forge-project/tree/init_project渲染进程到主进程（单向）以Electron官方文档给出的”渲染进程触发动作修改主进程窗口标题“为例完整项目示例：https://github.com/ylpxzx/electron-forge-proj
  • 从零用java实现 小红书 springboot vue uniapp （2）主页优化 顽疲 java仿写小红书javaspringbootvue.js
    前言移动端演示http://8.146.211.120:8081/#/前面的文章我们基本完成了主页的布局今天我们具体的去进行实现并且分享我开发时遇到的问题首先先看效果java仿小红书主页实现效果为1.顶端全屏切换2.上划加载更多3.下拉当前页整体刷新顶端全屏切换我们选择gui-switch-navigation结合swiperswiper-item进行实现关键代码.................
  • Java微服务SpringCloud+Uniapp+Vue3+Element Plus开源商城BizSpring BizSpring源码商城 javaspringcloud教育电商小程序uni-app
    BizSpring开源地址Githubhttps://github.com/BizSpringSource/bizspring-vue3-opensource.gitGiteehttps://gitee.com/BizSpring/bizspring-vue3-opensource.gitBizSpring核心开源框架名称框架核心框架springboot、springcloud、springclo
  • 巨坑之Can‘t resolve ‘./App.vue‘ in ‘/app/src‘ Yan_an_n 坑npmvue.js前端
    问题报错：前因后果：项目本地打包的时候都没有问题，但是在公司部署的jenkins里打包就出现了如上问题，尝试将文件APP.vue的路径修改，本地打包成功，但是jenkins打包仍然有问题，后来问了有经验的前端才知道问题原因：main.js文件内引入app.vue是importAppfrom'./App'importrouterfrom'./router'import*asaxiosfrom'./a
  • vue项目中使用容器el-container无法铺满屏幕 白小水i vue.js前端javascript
    step1.让body，html铺满整个屏幕body,#app{height:100vh;margin:0;padding:0;width:100vw;}step2.让container容器铺满屏幕.el-container{padding:0;margin:0;height:100vh;width:100vw;}
  • vue2+el-table 封装表格组件,基本够用了，带自动滚动 mokn javascriptvue.js前端
    标题@[TOC](vue2+el-mentUI封装的多功能表格组件，带自动滚动)欢迎使用Markdown编辑器表格组件页面//添加选择表格功能//判断是否显示单元格按钮{{scope.row[scope.column.property]}}重置{{scope.row[scope.column.property]}}exportdefault{name:"CustomTable",props:{//
  • mounted() 钩子函数 码农 小王 vue.jsjavascript前端
    ‌在Vue中，mounted()钩子函数用于在组件挂载到DOM之后执行操作，此时所有的模板已经渲染完毕，可以安全地操作DOM元素。‌一.mounted()钩子的作用和用途mounted()钩子函数是在Vue实例被挂载到DOM之后调用的。这意味着在这个阶段，所有的模板已经渲染完毕，可以安全地操作DOM元素。它常用于以下场景：‌操作已经渲染的DOM元素‌：可以在这个阶段对DOM进行各种操作，如修改样式
  • Vue3项目引用TS语法实例 灬ManongLai VuejavascriptVue3TSvue使用TS使用TSVue3使用TS
    基础语法定义data//script标签上**lang="ts"**import{defineComponent,reactive,ref,toRefs}from'vue';//定义一个类型type或者接口interface来约束datatypeTodo={id:number,name:string,completed:boolean}exportdefaultdefineComponent({/
  • Open WebUI 集成企业微信认证开发文档 大刘讲IT 企业微信web人工智能
    OpenWebUI集成企业微信认证开发文档1.系统架构1.1技术栈前端:Vue3+TypeScript后端:FastAPI数据库:PostgreSQL缓存:Redis认证:企业微信OAuth2.01.2系统模块前端应用认证模块会话管理企业微信OAuth数据持久化PostgreSQL2.数据库设计--用户表CREATETABLEusers(idSERIALPRIMARYKEY,wecom_useri
  • vue3+vite插件开发 糖糖老师436 前端程序员javascriptreact.js前端
    现在可以实现vue2的类似this.$api.xxx去调用接口,但是vue2源码使用的是flow来实现,并且搭配typeScript不太友好(由于装饰器语法过于复杂,这里不讨论vue2+装饰器来使用typeScript),故vue2项目没有开发webpack插件去实现代码补全这篇文章主要介绍的是vue3+ts+vite来开发时的代码补全情况在使用vue/react+ts开发时,我们把api挂载到全
  • vue项目纯前端把PDF转成图片并下载 David+Zhao VUEbase64npm前端vue.jspdfcanvaspdfjs-distpdfjspdf转图片
    项目需求是把一个pdf转成图片，并在最后添加上二维码，然后下载下来。经过一番研究以后，作此记录。主要用到了pdfjs-dist这个包，我用的是2.16.105版本。废话不多说，直接上代码。先下载node_modules包npmipdfjs-dist-S然后在vue页面中引入：import*aspdfjsLibfrom"pdfjs-dist/legacy/build/pdf.js";import*a
  • nuxt、vue树形图d3.js 小一梦 vueNuxtjavascriptvue.js前端nuxt.js
    直接上代码//安装npmid3--saveimport*asd3from"d3";exportdefault{props:{data:Object,nodeWidth:{type:Number,default:340,},nodeHeight:{type:Number,default:40,},active:{type:String,default:"",},},data(){return{id:
  • 基于vue3，el-upload实现多文件切片上传 未来希望可以惊艳到自己 前端javascriptvue.js
    基于vue3，el-upload实现多文件切片上传原理：将大文件拆分，通过异步的方式发送给服务端。1.将文件切片functionsliceFile(){constchunkSize=10*1024*1024//设置切片的大小，这里为10MchunkCount.value=Math.ceil(selectedFile.value.size/chunkSize)//计算文件切片总数chunkCount
  • 商城（技术栈vue+vuecli+vant+axios） 前端阳光 前端vuevue
    1.细节配置加粗样式配置Fastclick，在main中引入并使用即可//1.引入fastclickimportFastClickfrom"fastclick";if('addEventListener'indocument){document.addEventListener('DOMContentLoaded',function(){FastClick.attach(document.body
  • vue3之拆若依--记实现后台管理首页(左侧菜单栏、头部信息区域...) 小白小白从不日白 Vue3vue.js前端javascript
    效果图前期准备启动若依在本地启动若依后台，跑在自己本地：这里对于如何下载若依相关的前后端代码请参考若依官网：RuoYi若依官方网站|后台管理系统|权限管理系统|快速开发框架|企业管理系统|开源框架|微服务框架|前后端分离框架|开源后台系统|RuoYi|RuoYi-Vue|RuoYi-Cloud|RuoYi框架|RuoYi开源|RuoYi视频|若依视频|RuoYi开发文档|若依开发文档|Java开源
  • 怎么在Vue3项目中引入Vant组件库并使用？ 小陆不会敲代码 Vuejavascript前端学习前端框架vue.js
    文章目录前言一、项目中使用步骤1.安装：2.样式的导入（2种方法）2.1main.ts全局导入（平常自己的项目用的这个全局）2.2按需引入组件样式(简单介绍一下)1.安装插件2.配置插件3.组件按需使用：App.vue总结前言在Vue3项目中，Vant是一个轻量、可靠的移动端Vue组件库，它基于Vue3开发，提供了一套丰富的UI组件，非常适合用于构建移动端的应用。以下是如何在Vue3项目中引入和使
  • ASM系列六 利用TreeApi 添加和移除类成员 lijingyao8206 jvm动态代理ASM字节码技术TreeAPI
        同生成的做法一样，添加和移除类成员只要去修改fields和methods中的元素即可。这里我们拿一个简单的类做例子，下面这个Task类，我们来移除isNeedRemove方法，并且添加一个int 类型的addedField属性。   package asm.core; /** * Created by yunshen.ljy on 2015/6/
  • Springmvc-权限设计 bee1314 springWebjsp
    万丈高楼平地起。 权限管理对于管理系统而言已经是标配中的标配了吧，对于我等俗人更是不能免俗。同时就目前的项目状况而言，我们还不需要那么高大上的开源的解决方案，如Spring Security，Shiro。小伙伴一致决定我们还是从基本的功能迭代起来吧。 目标： 1.实现权限的管理（CRUD） 2.实现部门管理 （CRUD) 3.实现人员的管理 （CRUD） 4.实现部门和权限
  • 算法竞赛入门经典（第二版）第2章习题 CrazyMizzz c算法
    2.4.1 输出技巧 #include <stdio.h> int main() { int i, n; scanf("%d", &n); for (i = 1; i <= n; i++) printf("%d\n", i); return 0; } 习题2-2 水仙花数(daffodil
  • struts2中jsp自动跳转到Action 麦田的设计者 jspwebxmlstruts2自动跳转
    1、在struts2的开发中，经常需要用户点击网页后就直接跳转到一个Action，执行Action里面的方法，利用mvc分层思想执行相应操作在界面上得到动态数据。毕竟用户不可能在地址栏里输入一个Action（不是专业人士）   2、＜jsp:forward page="xxx.action" /＞ ，这个标签可以实现跳转，page的路径是相对地址,不同与jsp和j
  • php 操作webservice实例 IT独行者 PHPwebservice
    首先大家要简单了解了何谓webservice，接下来就做两个非常简单的例子，webservice还是逃不开server端与client端。我测试的环境为：apache2.2.11 php5.2.10做这个测试之前，要确认你的php配置文件中已经将soap扩展打开，即extension=php_soap.dll; OK 现在我们来体验webservice //server端 serve
  • Windows下使用Vagrant安装linux系统 _wy_ windowsvagrant
    准备工作： 下载安装 VirtualBox ：https://www.virtualbox.org/ 下载安装 Vagrant ：http://www.vagrantup.com/ 下载需要使用的 box ： 官方提供的范例：http://files.vagrantup.com/precise32.box 还可以在 http://www.vagrantbox.es/ 
  • 更改linux的文件拥有者及用户组(chown和chgrp) 无量 clinuxchgrpchown
    本文（转） http://blog.163.com/yanenshun@126/blog/static/128388169201203011157308/ http://ydlmlh.iteye.com/blog/1435157 一、基本使用： 使用chown命令可以修改文件或目录所属的用户：        命令
  • linux下抓包工具 矮蛋蛋 linux
    原文地址： http://blog.chinaunix.net/uid-23670869-id-2610683.html tcpdump -nn -vv -X udp port 8888 上面命令是抓取udp包、端口为8888 netstat -tln 命令是用来查看linux的端口使用情况 13 . 列出所有的网络连接 lsof -i 14. 列出所有tcp 网络连接信息 l
  • 我觉得mybatis是垃圾！：“每一个用mybatis的男纸，你伤不起” alafqq mybatis
    最近看了  每一个用mybatis的男纸，你伤不起 原文地址 ：http://www.iteye.com/topic/1073938 发表一下个人看法。欢迎大神拍砖； 个人一直使用的是Ibatis框架，公司对其进行过小小的改良； 最近换了公司，要使用新的框架。听说mybatis不错；就对其进行了部分的研究； 发现多了一个mapper层；个人感觉就是个dao；
  • 解决java数据交换之谜 百合不是茶 数据交换
    交换两个数字的方法有以下三种 ，其中第一种最常用   /* 输出最小的一个数 */ public class jiaohuan1 { public static void main(String[] args) { int a =4; int b = 3; if(a<b){ // 第一种交换方式 int tmep =
  • 渐变显示 bijian1013 JavaScript
    <style type="text/css"> #wxf { FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#97FF98); height: 25px; } </style>
  • 探索JUnit4扩展：断言语法assertThat bijian1013 java单元测试assertThat
    一.概述         JUnit 设计的目的就是有效地抓住编程人员写代码的意图，然后快速检查他们的代码是否与他们的意图相匹配。 JUnit 发展至今，版本不停的翻新，但是所有版本都一致致力于解决一个问题，那就是如何发现编程人员的代码意图，并且如何使得编程人员更加容易地表达他们的代码意图。JUnit 4.4 也是为了如何能够
  • 【Gson三】Gson解析{"data":{"IM":["MSN","QQ","Gtalk"]}} bit1129 gson
      如何把如下简单的JSON字符串反序列化为Java的POJO对象? {"data":{"IM":["MSN","QQ","Gtalk"]}}   下面的POJO类Model无法完成正确的解析：   import com.google.gson.Gson;
  • 【Kafka九】Kafka High Level API vs. Low Level API bit1129 kafka
    1. Kafka提供了两种Consumer API High Level Consumer API Low Level Consumer API(Kafka诡异的称之为Simple Consumer API，实际上非常复杂) 在选用哪种Consumer API时，首先要弄清楚这两种API的工作原理，能做什么不能做什么，能做的话怎么做的以及用的时候，有哪些可能的问题  
  • 在nginx中集成lua脚本：添加自定义Http头，封IP等 ronin47 nginx lua
    Lua是一个可以嵌入到Nginx配置文件中的动态脚本语言，从而可以在Nginx请求处理的任何阶段执行各种Lua代码。刚开始我们只是用Lua 把请求路由到后端服务器，但是它对我们架构的作用超出了我们的预期。下面就讲讲我们所做的工作。 强制搜索引擎只索引mixlr.com Google把子域名当作完全独立的网站，我们不希望爬虫抓取子域名的页面，降低我们的Page rank。 location /{
  • java-归并排序 bylijinnan java
    import java.util.Arrays; public class MergeSort { public static void main(String[] args) { int[] a={20,1,3,8,5,9,4,25}; mergeSort(a,0,a.length-1); System.out.println(Arrays.to
  • Netty源码学习-CompositeChannelBuffer bylijinnan javanetty
    CompositeChannelBuffer体现了Netty的“Transparent Zero Copy” 查看API（ http://docs.jboss.org/netty/3.2/api/org/jboss/netty/buffer/package-summary.html#package_description） 可以看到，所谓“Transparent Zero Copy”是通
  • Android中给Activity添加返回键 hotsunshine Activity
    // this need android:minSdkVersion="11" getActionBar().setDisplayHomeAsUpEnabled(true); @Override public boolean onOptionsItemSelected(MenuItem item) {
  • 静态页面传参 ctrain 静态
    $(document).ready(function () { var request = { QueryString : function (val) { var uri = window.location.search; var re = new RegExp("" + val + "=([^&?]*)", &
  • Windows中查找某个目录下的所有文件中包含某个字符串的命令 daizj windows查找某个目录下的所有文件包含某个字符串
    findstr可以完成这个工作。   [html]  view plain copy   >findstr /s /i "string" *.*   上面的命令表示，当前目录以及当前目录的所有子目录下的所有文件中查找"string&qu
  • 改善程序代码质量的一些技巧 dcj3sjt126com 编程PHP重构
    有很多理由都能说明为什么我们应该写出清晰、可读性好的程序。最重要的一点，程序你只写一次，但以后会无数次的阅读。当你第二天回头来看你的代码 时，你就要开始阅读它了。当你把代码拿给其他人看时，他必须阅读你的代码。因此，在编写时多花一点时间，你会在阅读它时节省大量的时间。让我们看一些基本的编程技巧：    尽量保持方法简短    尽管很多人都遵
  • SharedPreferences对数据的存储 dcj3sjt126com
    SharedPreferences简介：                                                   &nbs
  • linux复习笔记之bash shell (2) bash基础 eksliang bashbash shell
    转载请出自出处： http://eksliang.iteye.com/blog/2104329 1.影响显示结果的语系变量（locale）  1.1locale这个命令就是查看当前系统支持多少种语系，命令使用如下： [root@localhost shell]# locale LANG=en_US.UTF-8 LC_CTYPE="en_US.UTF-8"
  • Android零碎知识总结 gqdy365 android
    1、CopyOnWriteArrayList add(E) 和remove(int index)都是对新的数组进行修改和新增。所以在多线程操作时不会出现java.util.ConcurrentModificationException错误。 所以最后得出结论：CopyOnWriteArrayList适合使用在读操作远远大于写操作的场景里，比如缓存。发生修改时候做copy，新老版本分离，保证读的高
  • HoverTree.Model.ArticleSelect类的作用 hvt Web.netC#hovertreeasp.net
    ArticleSelect类在命名空间HoverTree.Model中可以认为是文章查询条件类，用于存放查询文章时的条件，例如HvtId就是文章的id。HvtIsShow就是文章的显示属性，当为-1是，该条件不产生作用，当为0时，查询不公开显示的文章，当为1时查询公开显示的文章。HvtIsHome则为是否在首页显示。HoverTree系统源码完全开放，开发环境为Visual Studio 2013
  • PHP 判断是否使用代理 PHP Proxy Detector 天梯梦 proxy
    1. php 类 I found this class looking for something else actually but I remembered I needed some while ago something similar and I never found one. I'm sure it will help a lot of developers who try to
  • apache的math库中的回归——regression（翻译） lvdccyb Mathapache
    这个Math库，虽然不向weka那样专业的ML库，但是用户友好，易用。 多元线性回归，协方差和相关性（皮尔逊和斯皮尔曼），分布测试（假设检验，t，卡方，G），统计。   数学库中还包含，Cholesky，LU，SVD，QR，特征根分解，真不错。   基本覆盖了：线代，统计，矩阵， 最优化理论 曲线拟合 常微分方程 遗传算法（GA）， 还有3维的运算。。。
  • 基础数据结构和算法十三：Undirected Graphs (2) sunwinner Algorithm
      Design pattern for graph processing. Since we consider a large number of graph-processing algorithms, our initial design goal is to decouple our implementations from the graph representation
  • 云计算平台最重要的五项技术 sumapp 云计算云平台智城云
    云计算平台最重要的五项技术 1、云服务器 云服务器提供简单高效，处理能力可弹性伸缩的计算服务，支持国内领先的云计算技术和大规模分布存储技术，使您的系统更稳定、数据更安全、传输更快速、部署更灵活。 特性 机型丰富 通过高性能服务器虚拟化为云服务器，提供丰富配置类型虚拟机，极大简化数据存储、数据库搭建、web服务器搭建等工作； 仅需要几分钟，根据CP
  • 《京东技术解密》有奖试读获奖名单公布 ITeye管理员 活动
    ITeye携手博文视点举办的12月技术图书有奖试读活动已圆满结束，非常感谢广大用户对本次活动的关注与参与。  12月试读活动回顾： http://webmaster.iteye.com/blog/2164754 本次技术图书试读活动获奖名单及相应作品如下： 一等奖（两名） Microhardest：http://microhardest.ite
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他