54李佳
54李佳

前端框架Vue.js的学习笔记(一)

Vue.js学习

前端框架目前是比较多的，主流的有 Angular、 React、Vue，前端框架上手都很容易，学习成本比较低，我这里选择学习Vue ，是因为我对Vue也有一定的理解 学习起来就更快更容易。Vue的介绍嘛，官网走一波 Vue官方教程。但是Vue对IE8及以下的版本不兼容。

Vue的安装

  • 直接下载，然后在你的页面通过
  • NPM 安装 npm install vue
  • Vue提供的命令行工具（CLI）快速搭建脚手架。

Vue的简单实例


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    <script src="./node_modules/vue/dist/vue.js">script>
head>
<body>
    <div id="app">
       <h1> {{message}}h1>
       <input type="text" v-model="message">
       <input type="checkbox" v-model="show">
       <p v-if="show">{{message}}p>
       <ol>
           <li v-for="value in list">
               {{value}}
           li>
       ol>
       <button @click="reverseMessage">反转信息button>
       <a :href="url">百度一下a>
       <p>{{reverseMessages}}p>
    div>

    <script>
        var app=new Vue({
            el:"#app",
            data:{
                message:"this is vuejs",
                show:false,
                list:[12,16,19],
                url:"http://www.baidu.com"
            },
            methods:{
                reverseMessage: function () {
                    this.message=this.message.split('').reverse().join('');
                }
            },
            computed:{
                reverseMessages:function(){

                    return this.message.split('').reverse().join('');

                }
            },
            created:function(){
                console.log(this.show)
            },
            
        })
    script>
body>
html>

生命周期钩子函数


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="./node_modules/vue/dist/vue.js">script>
    <title>Documenttitle>
head>
<body>
    
    <div id="app">
        <h1>Vue生命周期钩子函数h1>
        <input v-model="a" placeholder="edit me">
    div>
    <script>
    var vm=new Vue({
        el:"#app",
        data:{
            a:1
        },
        //在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
        beforeCreate:function(){
            console.log("--beforeCreate--")
            this.a=2;//数据赋值不成功
        },
        //在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。
        //然而，挂载阶段还没开始，$el 属性目前不可见。
        created:function(){
            console.log("--created--")
            console.log(this.a)
            this.a=2;//
        },
        // 数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。
        beforeUpdate:function(el){
            console.log("--beforeUpdate--")
            console.log(this.a)
            console.log(this.$el)

        },
        //由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
        // 当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。
        //然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。
        updated:function(el){
            console.log("--updated--")
            console.log(this.a)
            console.log(this.$data.a)
        },
        //实例销毁之前调用。在这一步，实例仍然完全可用。
        beforeDestroy:function(){
            console.log("--beforeDestroy--")
        },
        //Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁
        destroyed:function(){
            console.log("--destroyed--")
        }
    })
    
    script>
    
body>
html>

模板语法

文本

<span v-once>Message: {{ msg }}span>

Mustache 标签将会被替代为对应数据对象上 msg 属性的值。无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新。如果添加了v-once指令，那么当数据改变时 插值处将不会更新。

指令

  • v-html指令： 可以将插值处以html输出

  • v-show ：根据参数真假值切换display css属性达到显示或隐藏

  • v-if：根据参数真假值渲染或不渲染元素

  • v-else: 前面必须有v-if 或 v-else-if 使用

    <div v-if="Math.random() > 0.5"> 
    Now you see me
div> 
<div v-else>  
    Now you don't 
div>

  • v-for 循环

    <div v-for="(item, index) in items">
{{item.text}}--{{index}}
div>

  • v-on 绑定事件 缩写@+事件名

    • .stop - 调用 event.stopPropagation()。

    • .prevent - 调用 event.preventDefault()。

    • .capture - 添加事件侦听器时使用 capture 模式。

    • .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。

    • .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。

    • .native - 监听组件根元素的原生事件。

    • .once - 只触发一次回调。

    • .left - (2.2.0) 只当点击鼠标左键时触发。

    • .right - (2.2.0) 只当点击鼠标右键时触发。

    • .middle - (2.2.0) 只当点击鼠标中键时触发。

    • .passive - (2.3.0) 以 { passive: true } 模式添加侦听器

      
<button v-on:click="doThis">button>


<button v-on:[event]="doThis">button>



<button v-on:click="doThat('hello', $event)">button>
<script>
 var vm=new Vue({
        el:"#app",
        data:{
            a:1
        },
        methods:{
             doThat:function(str,el){
                console.log(str,el)
            }
        }
 })
script>


<button @click="doThis">button>


<button @[event]="doThis">button>


<button @click.stop="doThis">button>


<button @click.prevent="doThis">button>


<form @submit.prevent>form>


<button @click.stop.prevent="doThis">button>


<input @keyup.enter="onEnter">


<input @keyup.13="onEnter">


<button v-on:click.once="doThis">button>


<button v-on="{ mousedown: doThis, mouseup: doThat }">button>

  • v-bind 动态的绑定一个或多个特性 缩写:

    
<img v-bind:src="imageSrc">


<button v-bind:[key]="value">button>


<img :src="imageSrc">


<button :[key]="value">button>


<img :src="'/path/to/images/' + fileName">


<div :class="{ red: isRed }">div>

<div :class="[classA, classB]">div>
<div :class="[classA, { classB: isB, classC: isC }]">


<div :style="{ fontSize: size + 'px' }">div>
<div :style="[styleObjectA, styleObjectB]">div>
    <script>
        //计算属性
    computed:{
            styleObjectA:function(){
                return {"fontSize":"40px"}
            },
            styleObjectB:function(){
                return {"color":"red"}
            }
        }
    script>


<div v-bind="{ id: someProp, 'other-attr': otherProp }">div>


<div v-bind:text-content.prop="text">div>


<my-component :prop="someThing">my-component>


<child-component v-bind="$props">child-component>


<svg><a :xlink:special="foo">a>svg>

  • v-model 在表单控件或者组件上创建双向绑定 只能在下面的控件上使用

    • select
    • textarea
    • components
     
    <div id="app">
        <h1>Vue生命周期钩子函数h1>
        <input v-model="msg" placeholder="edit me">
        
        <span>{{msg}}span>
        
    div>
    <script>
    var vm=new Vue({
        el:"#app",
        data:{
            msg:"this is msg"
        }
    })
script>

  • v-slot 缩写 #

  • v-pre 跳过大量没有指令的节点会加快编译。

  • v-cloak 这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

    [v-cloak] {
  display: none;
}

    <div v-cloak>
  {{ message }}
div>

延申阅读

Vue表单控件数据双向绑定（二）
Vue组件创建和父子组件通信（三）

你可能感兴趣的:(Vue学习笔记)

  • vue学习笔记——关于对Vue3 ref(), toRef(), toRefs(), unref(), isRef(), reactive()方法的理解。 chen_sir_sh vue学习笔记javascript前端vue
    VUE3出现了很多新的API，下面是自己的一些理解进行的总结。欢迎大家一起交流补充。ref()使用ref创建一个数据类型，ref有value这个属性constname1={age:"14",name:"bob1"};constname2=ref({name:"bob2"});//使用ref创建一个数据类型相对于reactive，ref有value属性name2.value="bob3"consol
  • Vue学习笔记 一 涔溪 vuevue.js学习笔记
    Vue学习笔记1、Vue基础指令1.1什么是Vue?Vue.js是一套响应式的JavaScript开发库。Vue.js自问世以来所受关注度不断提高，在现在的市场上，Vue.js是非常流行的JavaScript技术开发框架之一。Vue是一款国产前端框架，它的作者尤雨溪（EvanYou）是一位美籍华人，2014年2月，尤雨溪开源了一个前端开发库Vue.js，2015年发布1.0.0版本，2016年4月
  • VUE学习笔记—Vue运行时渲染 前端姑娘 VUEvue.js前端javascript
    前言有一个需求：能不能让用户自制组件，从而达到定制渲染某个区域的目的。在线DOME预览大致说一下项目的背景：我们做了一个拖拉拽生成界面的系统，通过拖拽内置的组件供用户定制自己的界面，但毕竟内置的组件有限，可定制性不高，那么给用户开放一个自定义代码组件，让用户自己通过写template+js+css的方式自由定制岂不是妙哉。那么该怎么实现呢？我们先来看一vue官方的介绍很多时候我们貌似已经忽略了渐进
  • Vue学习笔记-组件通信 赵客缦胡缨v吴钩霜雪明
    最近公司需要开发酒店客房管理的OTA系统，我们使用vue.js2.0+ElementUI开发时，就遇到了问题:一个页面有很多表单,我试图将表单写成一个单文件组件,但是表单(子组件)里的数据和页面(父组件)按钮交互的时候,vue组件之间的通信让我感到崩溃:点击importdialogfrom'./components/dialog.vue'exportdefault{data(){return{sh
  • vue学习笔记:v-model指令的修饰符 子非余不知渔之乐 web前端vue学习笔记vue
    v-model指令的修饰符有三个，分别是：1.number作用：自动将用户的输入值转为数值类型。示例：2.trim作用：自动忽略输入内容的首尾空白字符示例：3.lazy作用：双向绑定时，当光标离开时才更新对应的变量示例：
  • vue学习笔记 北京理工大学软件工程 vue.js学习笔记
    通常，使用VueCLI（Vue的命令行工具）来创建Vue.js项目会自动生成package.json文件。如果你没有使用VueCLI或者其他类似工具，那么可能需要手动创建这个文件。以下是一些建议的步骤，帮助你解决这个问题：确认你使用的是VueCLI：确保你使用的是VueCLI来创建项目。你可以通过运行vue--version来检查VueCLI是否已经安装以及安装的版本。使用VueCLI创建项目：如
  • 【Vue学习笔记】尚硅谷Vue2.0+Vue3.0全套教程丨vue.js从入门到精通 丁咚Dingdong 学习笔记前端Vue2.xVue3.0Vue
    尚硅谷Vue2.0+Vue3.0全套教程丨vue.js从入门到精通Vue2.0部分1.Vue核心部分1.1Vue简介1.1.1Vue是什么？1.1.2Vue作者1.1.3Vue的特点1.1.4Vue学习的JavaScript前备知识点1.1.5Vue使用指南1.1.6搭建Vue开发环境1.2初识Vue1.2.1Hello小实例1.2.2分析Hello案例1.3Vue模板语法1.4数据绑定1.5el
  • Vue学习笔记（三）常用指令、生命周期 老李笔记 vuevue指令vue生命周期vue常用指令
    Vue学习笔记（三）常用指令vue指令：html标签上带有v-前缀的特殊属性，不同的指令具有不同的含义，可以实现不同的功能。常用指令：指令作用v-for列表渲染，遍历容器的元素或者对象的属性v-bind为html标签绑定属性值，如设置href，css样式等v-if/v-else-if/v-else条件性的渲染某元素，判定为true时渲染，否则不渲染v-show根据条件展示某元素，区别在于切换的是d
  • vue学习笔记 张豆豆94 【HBuilder学习篇】前端uni-appvue
    组件通信prop是用于父组件向子组件传递数据。$ref是父组件调用子组件的属性和方法。$emit是子组件告知父组件调用父组件的方法并可以从子组件传递参数到父组件。父组件（使用公共组件的地方）这是父组件importMyComponentfrom'@/components/my-component/my-component.vue';exportdefault{components:{MyCompon
  • vue学习笔记——计算属性传参 小怪兽_v 学习
    首先，计算属性，它是被当做属性来用的，一般不给它传参，直接接收它返回的值,但是有时候开发过程中不得不去传参来获取特定的值，可是直接往计算属性中传参根本没用，所以最后考虑到一个折中的办法，那就是返回一个回调函数,此时调用计算属性时给它传递的参数就到了回调函数中：computed:{showZT_top(){return(index)=>{returnindex*2}}}但是这样也是有弊端的，以返回函
  • VUE学习笔记 父子组件传值 刀钝刃乏
    父组件通过props向下传递数据给子组件；子组件通过events给父组件发送消息。子组件向父组件传值子组件使用this$emit（'自定义事件名',要传送的数据）向父组件传递数据。1.template模块里面直接使用this$emit（'自定义事件名',要传送的数据）2.事件里面使用this$emit，使代码结构更清晰//这是子组件editData.vue$emit('saveEdit',this
  • Vue学习笔记5--前端工程化 UtilMan
    前端工程化完整的基础篇笔记PDF下载，完全手打有用的话请给个赞呗Thanks♪(･ω･)ﾉ模块化相关规范概述传统开发问题命名冲突文件依赖模块化含义：把单独的一个功能封装到一个模块（文件）中,模块之间相互隔离，可以通过特定的接口公开内部成员，也可以依赖别的模块好处：方便代码重用，提升开发效率，方便后期维护浏览器端模块化规范AMD（Require.js）CMD（Sea.js）服务器端模块化规范Comm
  • vue学习笔记 -SkyBlue-
    Vue1.webpack4配置文件consthtmlWebpackPlugin=require('html-webpack-plugin');constVueLoaderPlugin=require('vue-loader/lib/plugin');//打包提取cssconstExtractTextPlugin=require("extract-text-webpack-plugin");//混淆
  • Vue学习笔记：计算属性 HadesNyx vue.js学习笔记
    计算属性入门进阶二次进阶三次进阶四次进阶结界五次进阶六次进阶七次进阶八次进阶九次进阶终章彩蛋入门Vue.js中，计算属性示例：exportdefault{data(){return{firstName:'John',lastName:'Doe'};},computed:{//计算属性：全名fullName(){returnthis.firstName+''+this.lastName;}}}在这个
  • Vue学习笔记之组件基础 Three Big Stones vue.js学习笔记
    1、组件的定义一般将Vue组件定义在一个单独的.vue文件中，称做单文件组件；当然也可以将组件直接定义在js文件中，如下js代码，定义一个组件BlogPost，通过props定义对外暴露属性title，父组件传递title，子组件根据title渲染html内容。exportdefault{props:['title'],template:`{{title}}`}2、组件的使用首先需要引用组件，语法
  • vue学习笔记之项目工程化开发 我真卷不动啦。。。 vue学习笔记学习笔记
    一：介绍及使用：二：脚手架目录文件介绍：三：项目运行流程：3.1main.js文件和App.vue文件之间的关系：main.js文件：main.js是Vue项目的主入口文件，负责初始化Vue应用并挂载根组件。在main.js中，首先会引入Vue库，并创建一个Vue实例。通过newVue()可以传入一个配置对象，其中可以指定挂载的DOM元素、路由、状态管理等。在创建Vue实例时，通过render函数
  • Vue学习笔记 沈姐姐~ vuevue.js学习前端
    目录1.Object.defineProperty()2.计算属性3.监视属性4.computed和watch的区别5.双向数据绑定6._el和data的俩种写法7.事件修饰符8.键盘事件9.条件渲染10.列表过滤11.过滤器12.常用指令13.生命周期14.组件15.ref属性16.props配置17.mixin属性18.vue中的插件19.WebStorage20.消息的发布与订阅20.Vue
  • Vue学习笔记之模板引用 Three Big Stones vue.js学习笔记
    1、添加模板引用对DOM元素添加引用，语法格式，则在DOM元素挂载成功后，可以通过this.$refs.input的语法形式访问引用的input元素。2、v-for中的模板引用对列表元素添加引用，语法格式{{item}}，则在DOM元素挂载成功后，可以通过this.$refs.items的语法形式访问所有的li元素。3、函数模板引用可以对DOM元素添加函数模板引用，则在组件每次更新时自动触发函数执
  • 【前端】Vue学习笔记 myaijarvis 前端vuevue
    loader版本"less":"^4.0.0","less-loader":"^7.0.0",(8以下均可)常见问题组件不显示1.template中的内容必须包含在一个div中。2.组件名称渲染时不可为HTML标签，例如header、footer等等如需使用，只要和标签名不一样就行，比如Header、Footer等等快捷键1.vdatadata(){return{key:value}},2.vco
  • Vue学习笔记14 --自定义hook函数/toRef/provide/inject等 jxncxgx Vue前端vue.js学习笔记
    9.自定义hook函数什么是hook？——本质是一个函数，把setup函数中使用的CompositionAPI进行了封装。类似于vue2.x中的mixin。自定义hook的优势:复用代码,让setup中的逻辑更清楚易懂。10.toRef作用：创建一个ref对象，其value值指向另一个对象中的某个属性。语法：constname=toRef(person,'name')应用:要将响应式对象中的某个属
  • Vue 学习笔记 -- 5. vue-router lingchen0522 Vue学习之路vue.js前端
    Vue学习笔记–5.vue-router5.vue-router一个路由（route）就是一组映射关系（key-value），多个路由需要路由器（router）进行管理。前端路由：key是路径，value是组件。5.1基本使用安装vue-router，命令：npmivue-router引入并应用插件：importrouterfrom'./router'Vue.use(vueRouter)编写rou
  • vue学习笔记 zyl熬夜之路 vue笔记vue.js学习笔记
    vue学习笔记vue框架介绍Vue.js（读音/vju：/，发音类似于view）是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue采用自底向上增量开发的设计。Vue的核心库只关注视图层，并且非常容易学习，也非常容易与其他库或已有项目整合。Vue完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。Vue.js还提供了MVVM数据绑定和一个可组合的组件系统，具有简单、
  • Vue学习笔记六 神里の凌华 vue.js学习javascript
    前端工程化一、模块化相关规范1.模块化概述传统开发模式的主要问题①命名冲突②文件依赖通过模块化解决上述问题模块化就是把单独的一个功能封装到一个模块（文件）中，模块之间相互隔离，但是可以通过特定的接口公开内部成员，也可以依赖别的模块模块化开发的好处：方便代码的重用，从而提升开发效率，并且方便后期的维护2.浏览器端模块化规范1.AMDRequire.js(http://www.requirejs.cn
  • Vue学习笔记：将数组数据使用Excel表格导出 前端互助会 Vue学习笔记vueexcel前端
    Vue学习笔记：将数组数据使用Excel表格导出需求：数组数据使用Excel导出第一步：下载依赖命令行：npmixlsx第二步：建立下载公共jssrc下建立文件夹utils后建立data2Excel.js第三步：将公共js导入页面import{dataConversionUtil}from'@/utils/data2Excel'第四步：数组数据组装Excel表格表头loadExcel(){vard
  • Vue学习笔记（一） fancy努力闯关 为毕设拼命vue.js学习javascriptecmascript
    备注：为了毕设紧急学习的个人笔记，不是为了总结分享···es6模块化每个js都是独立的模块，import导入其他模块成员，export向外共享模块成员【附上b站vue视频的具体位置】铺垫知识-03.ES6模块化-默认导...P230-00:16·模块化语法1.默认导出：exportdefault，里面的才是能从外头访问到的成员→每个模块只能有一次exportdefault！！！2.默认导入：i
  • Vue 学习笔记 称霸幼儿园18 Vuevue.js学习javascript
    Vue学习笔记1前端工程化与webpack1.1前端工程化1.1.1实际的开发模块化（js的模块化、css的模块化、资源的模块化）组件化（复用现有的UI结构、样式、行为）规范化（目录结构的划分、编码规范化、接口规范化、文档规范化、Git分支管理）自动化（自动化构建、自动部署、自动化测试）1.1.2什么是前端工程化前端工程化指的是：在企业级的前端项目开发中，把前端开发所需要的工具、技术、流程、经验等
  • Vue学习笔记（一）JS导入导出 老李笔记 js导入导出vue学习笔记
    Vue学习笔记（一）JS导入导出js文件-导出、批量导出、默认导出showMessage.jsexportfunctionsimpleMessage(msg){console.log(msg);}exportfunctioncomplexMessage(msg){console.log(newDate()+":"+msg);}//批量导出//export{simpleMessage,complex
  • Vue组件之间的样式冲突问题【Vue学习笔记12】 扶得一人醉如苏沐晨
    1.组件之间的样式冲突问题默认情况下，写在.vue组件中的样式会全局生效，因此很容易造成多个组件之间的样式冲突问题。导致组件之间样式冲突的根本原因是：（1）单页面应用程序中，所有组件的DOM结构，都是基于唯一的index.html页面进行呈现的；（2）每个组件中的样式，都会影响整个index.html页面中的DOM元素。1.1思考：如何解决组件样式冲突的问题为每个组件分配唯一的自定义属性，在编写组
  • Vue学习笔记13-- Vue3之计算属性与监视 jxncxgx Vue前端vue.js学习笔记
    7、计算属性与监视1.computed函数与Vue2.x中computed配置功能一致写法import{computed}from'vue'setup(){...//计算属性——简写letfullName=computed(()=>{returnperson.firstName+'-'+person.lastName})//计算属性——完整letfullName=computed({get(){r
  • 【Vue学习笔记_14】Vue CLI 2&3 脚手架 BugFrog1024 Vue前端javascriptvue前端
    【Vue学习笔记_14】VueCLI2&3脚手架VueCLI初识VueCLI2初始化项目ESLint规范Runtime-only和Runtime+Compiler的区别目录结构解析VueCLI3VueCLI3与VueCLI2的区别初始化项目目录结构解析VueCLI3配置文件的查看和修改配套可执行代码示例=>GitHubVueCLI初识需求：使用Vue开发大型项目时，我们需要考虑代码目录结构、项目结
  • jQuery 键盘事件keydown ,keypress ,keyup介绍 107x jsjquerykeydownkeypresskeyup
    本文章总结了下些关于jQuery 键盘事件keydown ,keypress ,keyup介绍，有需要了解的朋友可参考。 一、首先需要知道的是： 1、keydown() keydown事件会在键盘按下时触发. 2、keyup()  代码如下 复制代码 $('input').keyup(funciton(){      
  • AngularJS中的Promise bijian1013 JavaScriptAngularJSPromise
    一.Promise         Promise是一个接口，它用来处理的对象具有这样的特点：在未来某一时刻（主要是异步调用）会从服务端返回或者被填充属性。其核心是，promise是一个带有then()函数的对象。         为了展示它的优点，下面来看一个例子，其中需要获取用户当前的配置文件： var cu
  • c++ 用数组实现栈类 CrazyMizzz 数据结构C++
    #include<iostream> #include<cassert> using namespace std; template<class T, int SIZE = 50> class Stack{ private: T list[SIZE];//数组存放栈的元素 int top;//栈顶位置 public: Stack(
  • java和c语言的雷同 麦田的设计者 java递归scaner
    软件启动时的初始化代码，加载用户信息2015年5月27号 从头学java二 1、语言的三种基本结构：顺序、选择、循环。废话不多说，需要指出一下几点：      a、return语句的功能除了作为函数返回值以外，还起到结束本函数的功能，return后的语句 不会再继续执行。      b、for循环相比于whi
  • LINUX环境并发服务器的三种实现模型 被触发 linux
    服务器设计技术有很多，按使用的协议来分有TCP服务器和UDP服务器。按处理方式来分有循环服务器和并发服务器。 1  循环服务器与并发服务器模型 在网络程序里面，一般来说都是许多客户对应一个服务器，为了处理客户的请求，对服务端的程序就提出了特殊的要求。 目前最常用的服务器模型有： ·循环服务器：服务器在同一时刻只能响应一个客户端的请求 ·并发服务器：服
  • Oracle数据库查询指令 肆无忌惮_ oracle数据库
    20140920   单表查询 -- 查询************************************************************************************************************ -- 使用scott用户登录   -- 查看emp表   desc emp  
  • ext右下角浮动窗口 知了ing JavaScriptext
    第一种 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/
  • 浅谈REDIS数据库的键值设计 矮蛋蛋 redis
    http://www.cnblogs.com/aidandan/ 原文地址：http://www.hoterran.info/redis_kv_design 丰富的数据结构使得redis的设计非常的有趣。不像关系型数据库那样，DEV和DBA需要深度沟通，review每行sql语句，也不像memcached那样，不需要DBA的参与。redis的DBA需要熟悉数据结构，并能了解使用场景。
  • maven编译可执行jar包 alleni123 maven
    http://stackoverflow.com/questions/574594/how-can-i-create-an-executable-jar-with-dependencies-using-maven <build> <plugins> <plugin> <artifactId>maven-asse
  • 人力资源在现代企业中的作用 百合不是茶 HR 企业管理
    //人力资源在在企业中的作用人力资源为什么会存在，人力资源究竟是干什么的 人力资源管理是对管理模式一次大的创新，人力资源兴起的原因有以下点： 工业时代的国际化竞争，现代市场的风险管控等等。所以人力资源 在现代经济竞争中的优势明显的存在，人力资源在集团类公司中存在着 明显的优势(鸿海集团)，有一次笔者亲自去体验过红海集团的招聘，只 知道人力资源是管理企业招聘的 当时我被招聘上了，当时给我们培训 的人
  • Linux自启动设置详解 bijian1013 linux
    linux有自己一套完整的启动体系，抓住了linux启动的脉络，linux的启动过程将不再神秘。 阅读之前建议先看一下附图。 本文中假设inittab中设置的init tree为： /etc/rc.d/rc0.d /etc/rc.d/rc1.d /etc/rc.d/rc2.d /etc/rc.d/rc3.d /etc/rc.d/rc4.d /etc/rc.d/rc5.d /etc
  • Spring Aop Schema实现 bijian1013 javaspringAOP
    本例使用的是Spring2.5 1.Aop配置文件spring-aop.xml <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmln
  • 【Gson七】Gson预定义类型适配器 bit1129 gson
    Gson提供了丰富的预定义类型适配器，在对象和JSON串之间进行序列化和反序列化时，指定对象和字符串之间的转换方式，   DateTypeAdapter   public final class DateTypeAdapter extends TypeAdapter<Date> { public static final TypeAdapterFacto
  • 【Spark八十八】Spark Streaming累加器操作（updateStateByKey) bit1129 update
    在实时计算的实际应用中，有时除了需要关心一个时间间隔内的数据，有时还可能会对整个实时计算的所有时间间隔内产生的相关数据进行统计。 比如： 对Nginx的access.log实时监控请求404时，有时除了需要统计某个时间间隔内出现的次数，有时还需要统计一整天出现了多少次404，也就是说404监控横跨多个时间间隔。   Spark Streaming的解决方案是累加器，工作原理是，定义
  • linux系统下通过shell脚本快速找到哪个进程在写文件 ronin47
    一个文件正在被进程写 我想查看这个进程 文件一直在增大 找不到谁在写 使用lsof也没找到 这个问题挺有普遍性的，解决方法应该很多，这里我给大家提个比较直观的方法。 linux下每个文件都会在某个块设备上存放，当然也都有相应的inode, 那么透过vfs.write我们就可以知道谁在不停的写入特定的设备上的inode。 幸运的是systemtap的安装包里带了inodewatch.stp，位
  • java-两种方法求第一个最长的可重复子串 bylijinnan java算法
    import java.util.Arrays; import java.util.Collections; import java.util.List; public class MaxPrefix { public static void main(String[] args) { String str="abbdabcdabcx";
  • Netty源码学习-ServerBootstrap启动及事件处理过程 bylijinnan javanetty
    Netty是采用了Reactor模式的多线程版本，建议先看下面这篇文章了解一下Reactor模式： http://bylijinnan.iteye.com/blog/1992325 Netty的启动及事件处理的流程，基本上是按照上面这篇文章来走的 文章里面提到的操作，每一步都能在Netty里面找到对应的代码 其中Reactor里面的Acceptor就对应Netty的ServerBo
  • servelt filter listener 的生命周期 cngolon filterlistenerservelt生命周期
    1. servlet    当第一次请求一个servlet资源时，servlet容器创建这个servlet实例，并调用他的 init(ServletConfig config)做一些初始化的工作，然后调用它的service方法处理请求。当第二次请求这个servlet资源时，servlet容器就不在创建实例，而是直接调用它的service方法处理请求，也就是说
  • jmpopups获取input元素值 ctrain JavaScript
    jmpopups 获取弹出层form表单 首先，我有一个div，里面包含了一个表单，默认是隐藏的，使用jmpopups时，会弹出这个隐藏的div，其实jmpopups是将我们的代码生成一份拷贝。 当我直接获取这个form表单中的文本框时，使用方法：$('#form input[name=test1]').val()；这样是获取不到的。 我们必须到jmpopups生成的代码中去查找这个值，$(
  • vi查找替换命令详解 daizj linux正则表达式替换查找vim
    一、查找 查找命令 /pattern<Enter> ：向下查找pattern匹配字符串 ?pattern<Enter>：向上查找pattern匹配字符串 使用了查找命令之后，使用如下两个键快速查找： n：按照同一方向继续查找 N：按照反方向查找 字符串匹配 pattern是需要匹配的字符串，例如： 1:  /abc<En
  • 对网站中的js,css文件进行打包 dcj3sjt126com PHP打包
    一，为什么要用smarty进行打包 apache中也有给js,css这样的静态文件进行打包压缩的模块，但是本文所说的不是以这种方式进行的打包，而是和smarty结合的方式来把网站中的js,css文件进行打包。 为什么要进行打包呢，主要目的是为了合理的管理自己的代码 。现在有好多网站，你查看一下网站的源码的话，你会发现网站的头部有大量的JS文件和CSS文件，网站的尾部也有可能有大量的J
  • php Yii: 出现undefined offset 或者 undefined index解决方案 dcj3sjt126com undefined
    在开发Yii 时，在程序中定义了如下方式：        if($this->menuoption[2] === 'test')，那么在运行程序时会报：undefined offset:2，这样的错误主要是由于php.ini 里的错误等级太高了，在windows下错误等级
  • linux 文件格式（1） sed工具 eksliang linuxlinux sed工具sed工具linux sed详解
    转载请出自出处： http://eksliang.iteye.com/blog/2106082 简介       sed 是一种在线编辑器，它一次处理一行内容。处理时，把当前处理的行存储在临时缓冲区中，称为“模式空间”（pattern space），接着用sed命令处理缓冲区中的内容，处理完成后，把缓冲区的内容送往屏幕。接着处理下一行，这样不断重复，直到文件末尾
  • Android应用程序获取系统权限 gqdy365 android
    引用 如何使Android应用程序获取系统权限         第一个方法简单点，不过需要在Android系统源码的环境下用make来编译：         1. 在应用程序的AndroidManifest.xml中的manifest节点
  • HoverTree开发日志之验证码 hvt .netC#asp.nethovertreewebform
    HoverTree是一个ASP.NET的开源CMS，目前包含文章系统，图库和留言板功能。代码完全开放，文章内容页生成了静态的HTM页面，留言板提供留言审核功能，文章可以发布HTML源代码，图片上传同时生成高品质缩略图。推出之后得到许多网友的支持，再此表示感谢！留言板不断收到许多有益留言，但同时也有不少广告，因此决定在提交留言页面增加验证码功能。ASP.NET验证码在网上找，如果不是很多，就是特别多
  • JSON API：用 JSON 构建 API 的标准指南中文版 justjavac json
    译文地址：https://github.com/justjavac/json-api-zh_CN 如果你和你的团队曾经争论过使用什么方式构建合理 JSON 响应格式， 那么 JSON API 就是你的 anti-bikeshedding 武器。 通过遵循共同的约定，可以提高开发效率，利用更普遍的工具，可以是你更加专注于开发重点：你的程序。 基于 JSON API 的客户端还能够充分利用缓存，
  • 数据结构随记_2 lx.asymmetric 数据结构笔记
    第三章 栈与队列 一．简答题 1. 在一个循环队列中，队首指针指向队首元素的  前一个    位置。  2.在具有n个单元的循环队列中，队满时共有  n-1  个元素。  3. 向栈中压入元素的操作是先  移动栈顶指针&n
  • Linux下的监控工具dstat 网络接口 linux
    1) 工具说明dstat是一个用来替换 vmstat,iostat netstat,nfsstat和ifstat这些命令的工具, 是一个全能系统信息统计工具. 与sysstat相比, dstat拥有一个彩色的界面, 在手动观察性能状况时, 数据比较显眼容易观察; 而且dstat支持即时刷新, 譬如输入dstat 3, 即每三秒收集一次, 但最新的数据都会每秒刷新显示. 和sysstat相同的是,
  • C 语言初级入门--二维数组和指针 1140566087 二维数组c/c++指针
    /* 二维数组的定义和二维数组元素的引用 二维数组的定义： 当数组中的每个元素带有两个下标时，称这样的数组为二维数组； (逻辑上把数组看成一个具有行和列的表格或一个矩阵); 语法： 类型名 数组名[常量表达式1][常量表达式2] 二维数组的引用： 引用二维数组元素时必须带有两个下标，引用形式如下： 例如： int a[3][4];  引用：
  • 10点睛Spring4.1-Application Event wiselyman application
    10.1 Application Event Spring使用Application Event给bean之间的消息通讯提供了手段 应按照如下部分实现bean之间的消息通讯 继承ApplicationEvent类实现自己的事件 实现继承ApplicationListener接口实现监听事件 使用ApplicationContext发布消息
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他