watson_pillow

vue学习笔记-- component组件的使用和传值

定义

为了拆分vue实例的代码量，能够让我们以不同的组件，来划分不同的功能模块，将来需要功能，就可以去调用对应的组件；

组件化和模块化的区别：
1、模块化：是从代码逻辑的角度进行划分的；
2、组件化：是从UI界面的角度进行划分的；方便ui组件的重用；

方式1

使用过程：

使用vue.extend 来创建全局的vue组件（通过template属性，指定了组件要展示的html结构）
使用vue.component(‘组件的名称’,创建出来的组件模板对象)
使用组件，以html标签的的形式，引入到页面中(如果模板的命名为驼峰方式，在使用时需要修改为-连接；如myCom my-com)；

<body>
	
		<m_com>m_com>
	div>
body>

<script type="text/javascript">
	var com1 = Vue.extend({
		template:'h3模板组件
'
	})
	Vue.component('m_com',com1);

	var vm = new Vue({
		el:'.app'
	})
script>

同样可以将定义的两步合并：

	Vue.component('m_com',Vue.extend({
		template:'h3模板组件
'
	}));
	//第一个参数，引用的标签的名称
	//第二个参数，创建的组件，

方式2

以上形式的缩略：

Vue.component('m_com',{
	template:'h3模板组件
'
});

注意：
根元素必须只有一个：

Vue.component('m_com',{
	template:'h3模板组件
h2
'
});

最外层的div如果舍弃的话，将会报错

方式3

在被控制的app的外面使用template元素，定义组件的模板结构

<body>
	
		<m_com>m_com>
	div>
	<template id="temp1">
		<div>
			<h1>外围定义的组件结构h1>
			<h2>可以使用h2>
		div>
	template>

body>

<script type="text/javascript">
	Vue.component('m_com',{
		template:'#temp1'
	});
	var vm = new Vue({
		el:'.app'
	})
script>

私有组件

在vue实例内部定义私有组件

	var vm = new Vue({
		el:'.app',
		components:{
			//定义实例内部私有组件
			com4:{
				template:'私有组件
'
			}
		}
	})

template的值同样也可以是在app实例外部的template标签的id。

组件中的数据

组件可以有自己的data数据
组件中的data不能为对象，必须为一个方法
组件中的data必须返回一个对象
组件中的数据使用方式和实例中的一样

<body>
	
		<m_com>m_com>
	div>
	<template id="temp1">
		<div>
			<h1>外围定义的组件结构h1>
			<h2>{{msg}}h2>
		div>
	template>
body>

<script type="text/javascript">
	Vue.component('m_com',{
		template:'#temp1',
		data:function(){
			return {
				msg:"组件中的data"
			}
		}
	});
	var vm = new Vue({
		el:'.app',
	})
script>

data中数据为了不影响其他组件使用的对象数据，所以将数据以函数返回对象的方式实现。
例如计数组件：

	<template id="count">
		<div>
			<input type="button" value="+1" @click="increace" name="">
			<h2>{{count}}h2>
		div>
	template>


<script type="text/javascript">
	Vue.component('counter',{
		template:"#count",
		data:function(){
			return {
				count:"0"
			}
		},
		methods:{
			increace(){
				this.count++;	
			}
		}
	})
script>

组件切换

v-if和v-else


<body>
	
		<a href="" @click.prevent="flag=true">登录a>
		<a href="" @click.prevent="flag=false">注册a>
		<login v-if="flag">login>
		<register v-else="flag">register>
	div>

	<template id="login">
		<div>
			<h1>登录h1>
		div>
	template>

	<template id="register">
		<div>
			<h2>注册h2>
		div>
	template>
body>

<script type="text/javascript">
	Vue.component('login',{
		template:'#login',
		data:function(){
			return {
			}
		}
	});

	Vue.component('register',{
		template:"#register",
		data:function(){
			return {
			}
		}
	})

	var vm = new Vue({
		el:'.app',
		data:{
			flag:true,
		}

	})
script>

component标签

vue提供的component元素，展示对应名称的组件；
component是一个占位符，：is属性为要展示的组件的名称


<body>
	
		<a href="" @click.prevent="comName='login'">登录a>
		<a href="" @click.prevent="comName='register'">注册a>
		<component :is="comName">component>
	div>

	<template id="login">
		<div>
			<h1>登录h1>
		div>
	template>

	<template id="register">
		<div>
			<h2>注册h2>
		div>
	template>
body>

<script type="text/javascript">
	Vue.component('login',{
		template:'#login'
	});

	Vue.component('register',{
		template:"#register"
	})

	var vm = new Vue({
		el:'.app',
		data:{
			comName:"login",
		}
	})
script>

切换的动画

通过component的mode属性设置组件的切换的模式

<style type="text/css">
	.v-enter,
	.v-leave-to{
		opacity:0;
		transform:translateX(150px);
	}

	.v-enter-active,
	.v-leave-active{
		transition:all 0.5s ease;
	}
style>

<transition mode="out-in">
	<component :is="comName">component>
transition>

组件父子数据传递

默认vue实例中定义的私有组件中，无法访问vue实例data中的数据和methods
父组件通过属性绑定的方式，把数据传递给子组件；
需要在子组件props中把父组件传递的属性先定义一遍，才能使用(最好不用大写)，props里面的数据都是父中传递的
子组件data是子组件私有的数据，可读可写
props中的数据只能读

<body >
	
		<com1 v-bind:parentmsg="msg">com1>
	div>
	<template id="forcom1">
		<h1>子组件:{{parentmsg}}h1>
	template>
body>
<script type="text/javascript">
	var vm = new Vue({
		el:'.app',
		data:{
			msg:"父中的数据",
		},
		components:{
			com1:{
				data(){
					return{
						msg:"123"
					}
				},
				template:"#forcom1",
				// template:'子组件:{{parentmsg}}
',
				props:['parentmsg'],
				methods:{}
			}
		}
	})
script>

父组件传递方法

父组件传递方法，使用v-on:的方式绑定（也可简写@）
子组件通过$emit()出发父传递的方法
$emit（）方法的第一个参数为父组件绑定的名称，之后的参数为传递给函数的参数；
子组件可以通过传参的方式向父组件传递数据；

<body >
	
		<com1 v-on:parentfunc="show">com1>
	div>
	<template id="forcom1">
		<input type="button" value="show" @click="click" name="">
	template>
body>
<script type="text/javascript">
	var vm = new Vue({
		el:'.app',
		data:{
			msg:"父中的数据",
			sonData:{}
		},
		methods:{
			show(msg,data){
				console.log("父组件的函数" + msg);
				this.sonData = data;
				console.log(this.sonData);
			}
		},
		components:{
			com1:{
				data(){
					return {
						name:"Tom",
						id:1,
						ability:{
							des:10,
							life:100
						}
					}
				},
				template:"#forcom1",
				methods:{
					click(){
						this.$emit('parentfunc',123,this.ability);
					}
				}
			}
		}
	})
script>

结果：

组件练习

<link rel="stylesheet" type="text/css" href="./bootstrap.css">
<body >
	
		<com1 v-on:parentfunc="load">com1>
		<ul class="list-group" v-for="(item,index) in list" :key="item.id">
			<li class="list-group-item">
				<span class="badge">评论人：{{item.user}}span>
				{{item.content}}
			li>
		ul>

	div>

	<template id="forcom1">
		<div>
			<div class="form-group">
				<label>评论人：label>
				<input type="text" class="form-control" name="" v-model="user">
			div>
			<div class="form-group">
				<label>评论内容：label>
				<textarea class="form-control" v-model="content">textarea>
			div>
			<div class="form-group">
				<input type="button" name="" value="发表评论" class="btn btn-primary" @click="click">
			div>
		div>
	template>

body>
<script type="text/javascript">
	var vm = new Vue({
		el:'.app',
		data:{
			list:[
				{id:Date.now()+1,user:'Trump',content:'fake news'},
				{id:Date.now()+2,user:'Biden',content:'please,emm'},
				{id:Date.now()+3,user:'King',content:'i have a dream'},
			]
		},
		methods:{
			load(){
				var list = JSON.parse(localStorage.getItem('cmts') || '[]');
				this.list = list;
			}
		},
		components:{
			com1:{
				data(){
					return {
						user:"",
						content:""
					}
				},
				template:"#forcom1",
				methods:{
					click(){
						var newContent = {id:Date.now(),user:this.user,content:this.content};
						var list = JSON.parse(localStorage.getItem('cmts') || '[]');
						list.unshift(newContent);
						localStorage.setItem('cmts',JSON.stringify(list));
						this.user = this.content = "";
						this.$emit('parentfunc');
					}
				}
			}
		},
		created(){
			this.load();
		}
	})
script>

效果：

获取Dom元素

可通过引用获取dom元素，为标签的ref属性赋值string，通过$refs.string获取对应的标签dom；

<body >
	
		<com1 ref="com1t">com1>
		<input type="button" value="get" @click="getEle" name="">
		<h1  ref="myh1">h1标签h1>
	div>
	<template id="forcom1">
		<input type="button" value="show" name="">
	template>
body>
<script type="text/javascript">
	var vm = new Vue({
		el:'.app',
		data:{
		},
		methods:{
			getEle(){
				console.log(this.$refs.myh1.innerText);
				console.log(this.$refs.com1t.name);
				this.$refs.com1t.hello();
			}
		},
		components:{
			com1:{
				data(){
					return {
						name:"tom"
					}
				},
				methods:{
					hello(){
						console.log("hello")
					}
				},
				template:"#forcom1",
			}
		}
	})
script>

同样也可以通过ref属性获取组件，并访问组件中的数据及方法。

文化建设

题金陵渡 金陵津渡小山楼一宿行人自可愁潮落夜江斜月里两三星火是瓜洲

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

element实现动态路由+面包屑软件技术NINI vue案例 vue.js 前端
el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
Long类型前后端数据不一致 igotyback 前端
响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计网页设计期末网页作业 html静态网页 html5期末大作业网页设计 web大作业
️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
【加密社】Solidity 中的事件机制及其应用加密社闲侃区块链智能合约区块链
加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件
关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业 javascript html css 旅游风景
⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动二挡起步 web前端期末大作业 web设计网页规划与设计 html css javascript dreamweaver 前端
Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
node.js学习小猿L node.js node.js 学习 vim
node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
vue3中el-table中点击图片放大时，被表格覆盖叫我小鹏呀 vue.js javascript 前端
问题：vue3中el-table中点击图片放大时，被表格覆盖。解决方法：el-image添加preview-teleported
vue项目element-ui的table表格单元格合并酋长哈哈 vue.js elementui javascript 前端
一、合并效果二全部代码exportdefault{name:'CellMerge',data(){return{tableData:[{id:'1',name:'王小虎',amount1:'165',amount2:'3.2',amount3:10},{id:'1',name:'王小虎',amount1:'162',amount2:'4.43',amount3:12},{id:'1',name:'
Vue中table合并单元格用法 weixin_30613343 javascript ViewUI
地名结果人名性别{{item.name}}已完成未完成{{item.groups[0].name}}{{item.groups[0].sex}}{{item.groups[son].name}}{{item.groups[son].sex}}exportdefault{data(){return{list:[{name:'地名1',result:'1',groups:[{name:'张三',sex
springboot+vue项目实战一-创建SpringBoot简单项目苹果酱0567 面试题汇总与解析 spring boot 后端 java 中间件开发语言
这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
Vue( ElementUI入门、vue-cli安装) m0_l5z elementui vue.js
一.ElementUI入门目录：1.ElementUI入门1.1ElementUI简介1.2Vue+ElementUI安装1.3开发示例2.搭建nodejs环境2.1nodejs介绍2.2npm是什么2.3nodejs环境搭建2.3.1下载2.3.2解压2.3.3配置环境变量2.3.4配置npm全局模块路径和cache默认安装位置2.3.5修改npm镜像提高下载速度2.3.6验证安装结果3.运行n
博客网站制作教程 2401_85194651 java maven
首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
vue+el-table 可输入表格使用上下键进行input框切换以对_ vue学习记录 vue.js javascript 前端
使用上下键进行完工数量这一列的切换-->//键盘触发事件show(ev,index){letnewIndex;letinputAll=document.querySelectorAll('.table_inputinput');//向上=38if(ev.keyCode==38){if(index==0){//如果是第一行,回到最后一个newIndex=inputAll.length-1}elsei
vue + Element UI table动态合并单元格我家媳妇儿萌哒哒 element UI vue.js 前端 javascript
一、功能需求1、根据名称相同的合并工作阶段和主要任务合并这两列，但主要任务内容一样，但要考虑主要任务一样，但工作阶段不一样的情况。（枞向合并）2、落实情况里的定量内容和定性内容值一样则合并。（横向合并）二、功能实现exportdefault{data(){return{tableData:[{name:'a',address:'1',age:'1',six:'2'},{name:'a',addre
vue 创建项目报错：command failed: npm install --loglevel error 那鱼、会飞 vue.js vue-cli3
这个问题其实很好解决，只是很多种情况，逐一排除即可。稳下心来~vuecli3创建项目我的node版本是node14.15.0，（永远不要尝试最新版本）node各种版本下载地址：以往的版本|Node.js(nodejs.org)vue/[email protected]@vue/[email protected]（注意vue/cli2和vue/cli3的下载命名有所改变，2是-形式，3是/形式）其实报错
计算机毕业设计PHP仓储综合管理系统（源码+程序+VUE+lw+部署） java毕设程序源码王哥 php 课程设计 vue.js
该项目含有源码、文档、程序、数据库、配套开发软件、软件安装教程。欢迎交流项目运行环境配置：phpStudy+Vscode+Mysql5.7+HBuilderX+Navicat11+Vue+Express。项目技术：原生PHP++Vue等等组成，B/S模式+Vscode管理+前后端分离等等。环境需要1.运行环境：最好是小皮phpstudy最新版，我们在这个版本上开发的。其他版本理论上也可以。2.开发
最简单将静态网页挂载到服务器上(不用nginx) 全能全知者服务器 nginx 运维前端 html 笔记
最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl
补充元象二面 Redstone Monstrosity 前端面试
1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重
微信小程序开发注意事项 jun778895 微信小程序小程序
微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂
字节二面 Redstone Monstrosity 前端面试
1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文
vue render 函数详解 (配参数详解) 你的眼睛會笑 vue2 vue.js javascript 前端
vuerender函数详解(配参数详解)在Vue3中，`render`函数被用来代替Vue2中的模板语法。它接收一个h函数（或者是`createElement`函数的别名），并且返回一个虚拟DOM。render函数的语法结构如下：render(h){returnh('div',{class:'container'},'Hello,World!')}在上面的示例中，我们使用h函数创建了一个div元素
前端代码上传文件余生逆风飞翔前端 javascript 开发语言
点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i
VUE3 + xterm + nestjs实现web远程终端或连接开启SSH登录的路由器和交换机。焚木灵 node.js vue
可远程连接系统终端或开启SSH登录的路由器和交换机。相关资料：xtermjs/xterm.js:Aterminalfortheweb(github.com)后端实现(NestJS)：1、安装依赖：npminstallnode-ssh@nestjs/websockets@nestjs/platform-socket.io2、我们将创建一个名为RemoteControlModule的NestJS模块，
详解“c:/work/src/components/a/b.vue“‘ has no default export报错原因 hw_happy 开发语言前端 vue.js javascript
前情提要在一个vue文件中需要引入定义的b.vue文件，但是提示b文件没有默认导出，对于vue2文件来说有exportdefault，在中，所有定义的变量、函数和组件都会自动被视为默认导出的组件内容。因此，不需要显式地使用exportdefault来导出组件。但是在我引用这个文件的时候还是提示了这个错误，原来是我的项目使用了ts和vite\webpack，因为TypeScript和Vue的默认导出
uniapp实现动态标记效果详细步骤【前端开发】 2401_85123349 uni-app
第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢？比如说上面gif图中的这些人物对象，有一些已被该用户添加为关心，那么当用户下一次进入该页面时，这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大，只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先，整体的思路是利用动态类名对不同的元素进行选择。
Vue 项目运行时，报错 Error: Cannot find module ‘node:path‘ 周bro vue.js 前端 javascript node.js npm
node-v是否显示nodenpm-v报错Error:Cannotfindmodule‘node:path'是因为node版本和npm版本不匹配安装相对应的版本node版本10.16.0对应npm版本[email protected]执行该命令即可匹配版本官网https://nodejs.org/en/about/previous-releases
vue2实现复制,粘贴功能周bro vue.js javascript 前端
一、需求说明在项目中点击按钮复制某行文本是很常见的应用场景，在Vue项目中实现复制功能需要借助vue-clipboard2插件。二、代码实现1、安装vue-clipboard2依赖（出现错误的话，可以试试切换成淘宝镜像源npmconfigsetregistryhttps://registry.npm.taobao.org）npminstall--savevue-clipboard22、在main.
360前端星计划-动画可以这么玩马小蜗
动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
【vite 自动配置路由】 CODER-V 前端 javascript vue.js 前端软件构建
手动配置路由，是一个没有技术含量又浪费时间的工作。本文将介绍vite构建的vue3项目如何编写一个自动配置路由的脚本。约定大于配置要想使用脚本完成路由的自动配置，我们就需要遵循以下目录规则：每一个页面对应一个包，当前包下的主页面命名为index.vue；每个包里必须配置一个page.js；在每一个page.js里边配置，额外的路由信息，比如：exportdefault{title:'商品',men
redis学习笔记——不仅仅是存取数据 Everyday都不同 returnSource expire/del incr/lpush 数据库分区 redis
最近项目中用到比较多redis，感觉之前对它一直局限于get/set数据的层面。其实作为一个强大的NoSql数据库产品，如果好好利用它，会带来很多意想不到的效果。（因为我搞java，所以就从jedis的角度来补充一点东西吧。PS：不一定全，只是个人理解，不喜勿喷） 1、关于JedisPool.returnSource(Jedis jeids) 这个方法是从red
SQL性能优化-持续更新中。。。。。。 atongyeye oracle sql
1 通过ROWID访问表--索引你可以采用基于ROWID的访问方式情况,提高访问表的效率, , ROWID包含了表中记录的物理位置信息..ORACLE采用索引(INDEX)实现了数据和存放数据的物理位置(ROWID)之间的联系. 通常索引提供了快速访问ROWID的方法,因此那些基于索引列的查询就可以得到性能上的提高. 2 共享SQL语句--相同的sql放入缓存 3 选择最有效率的表
[JAVA语言]JAVA虚拟机对底层硬件的操控还不完善 comsci JAVA虚拟机
如果我们用汇编语言编写一个直接读写CPU寄存器的代码段，然后利用这个代码段去控制被操作系统屏蔽的硬件资源，这对于JVM虚拟机显然是不合法的，对操作系统来讲，这样也是不合法的，但是如果是一个工程项目的确需要这样做，合同已经签了，我们又不能够这样做，怎么办呢？那么一个精通汇编语言的那种X客，是否在这个时候就会发生某种至关重要的作用呢？ &n
lvs- real 男人50 LVS
#!/bin/bash # # Script to start LVS DR real server. # description: LVS DR real server # #. /etc/rc.d/init.d/functions VIP=10.10.6.252 host='/bin/hostname' case "$1" in sta
生成公钥和私钥 oloz DSA 安全加密
package com.msserver.core.util; import java.security.KeyPair; import java.security.PrivateKey; import java.security.PublicKey; import java.security.SecureRandom; public class SecurityUtil {
UIView 中加入的cocos2d，背景透明 374016526 cocos2d glClearColor
要点是首先pixelFormat:kEAGLColorFormatRGBA8，必须有alpha层才能透明。然后view设置为透明glView.opaque = NO;[director setOpenGLView:glView];[self.viewController.view setBackgroundColor:[UIColor clearColor]];[self.viewControll
mysql常用命令香水浓 mysql
连接数据库 mysql -u troy -ptroy 备份表 mysqldump -u troy -ptroy mm_database mm_user_tbl > user.sql 恢复表（与恢复数据库命令相同） mysql -u troy -ptroy mm_database < user.sql 备份数据库 mysqldump -u troy -ptroy
我的架构经验系列文章 - 后端架构 - 系统层面 agevs JavaScript jquery css html5
系统层面：高可用性所谓高可用性也就是通过避免单独故障加上快速故障转移实现一旦某台物理服务器出现故障能实现故障快速恢复。一般来说，可以采用两种方式，如果可以做业务可以做负载均衡则通过负载均衡实现集群，然后针对每一台服务器进行监控，一旦发生故障则从集群中移除；如果业务只能有单点入口那么可以通过实现Standby机加上虚拟IP机制，实现Active机在出现故障之后虚拟IP转移到Standby的快速
利用ant进行远程tomcat部署 aijuans tomcat
在javaEE项目中，需要将工程部署到远程服务器上，如果部署的频率比较高，手动部署的方式就比较麻烦，可以利用Ant工具实现快捷的部署。这篇博文详细介绍了ant配置的步骤（http://www.cnblogs.com/GloriousOnion/archive/2012/12/18/2822817.html），但是在tomcat7以上不适用，需要修改配置，具体如下： 1.配置tomcat的用户角色
获取复利总收入 baalwolf 获取
public static void main(String args[]){ int money=200; int year=1; double rate=0.1; &
eclipse.ini解释 BigBird2012 eclipse
大多数java开发者使用的都是eclipse，今天感兴趣去eclipse官网搜了一下eclipse.ini的配置，供大家参考，我会把关键的部分给大家用中文解释一下。还是推荐有问题不会直接搜谷歌，看官方文档，这样我们会知道问题的真面目是什么，对问题也有一个全面清晰的认识。 Overview 1、Eclipse.ini的作用 Eclipse startup is controlled by th
AngularJS实现分页功能 bijian1013 JavaScript AngularJS 分页
对于大多数web应用来说显示项目列表是一种很常见的任务。通常情况下，我们的数据会比较多，无法很好地显示在单个页面中。在这种情况下，我们需要把数据以页的方式来展示，同时带有转到上一页和下一页的功能。既然在整个应用中这是一种很常见的需求，那么把这一功能抽象成一个通用的、可复用的分页（Paginator）服务是很有意义的。 &nbs
[Maven学习笔记三]Maven archetype bit1129 ArcheType
archetype的英文意思是原型，Maven archetype表示创建Maven模块的模版，比如创建web项目，创建Spring项目等等. mvn archetype提供了一种命令行交互式创建Maven项目或者模块的方式， mvn archetype 1.在LearnMaven-ch03目录下，执行命令mvn archetype:gener
【Java命令三】jps bit1129 Java命令
jps很简单，用于显示当前运行的Java进程，也可以连接到远程服务器去查看 [hadoop@hadoop bin]$ jps -help usage: jps [-help] jps [-q] [-mlvV] [<hostid>] Definitions: <hostid>: <hostname>[:
ZABBIX2.2 2.4 等各版本之间的兼容性 ronin47
zabbix更新很快，从2009年到现在已经更新多个版本，为了使用更多zabbix的新特性，随之而来的便是升级版本，zabbix版本兼容性是必须优先考虑的一点客户端AGENT兼容 zabbix1.x到zabbix2.x的所有agent都兼容zabbix server2.4：如果你升级zabbix server，客户端是可以不做任何改变，除非你想使用agent的一些新特性。 Zabbix代理（p
unity 3d还是cocos2dx哪个适合游戏？ brotherlamp unity自学 unity教程 unity视频 unity资料 unity
unity 3d还是cocos2dx哪个适合游戏？问：unity 3d还是cocos2dx哪个适合游戏？答：首先目前来看unity视频教程因为是3d引擎，目前对2d支持并不完善，unity 3d 目前做2d普遍两种思路，一种是正交相机，3d画面2d视角，另一种是通过一些插件，动态创建mesh来绘制图形单元目前用的较多的是2d toolkit，ex2d，smooth moves，sm2，
百度笔试题：一个已经排序好的很大的数组，现在给它划分成m段，每段长度不定，段长最长为k，然后段内打乱顺序，请设计一个算法对其进行重新排序 bylijinnan java 算法面试百度招聘
import java.util.Arrays; /** * 最早是在陈利人老师的微博看到这道题： * #面试题#An array with n elements which is K most sorted，就是每个element的初始位置和它最终的排序后的位置的距离不超过常数K * 设计一个排序算法。It should be faster than O(n*lgn)。
获取checkbox复选框的值 chiangfai checkbox
<title>CheckBox</title> <script type = "text/javascript"> doGetVal: function doGetVal() { //var fruitName = document.getElementById("apple").value;//根据
MySQLdb用户指南 chenchao051 mysqldb
原网页被墙，放这里备用。 MySQLdb User's Guide Contents Introduction Installation _mysql MySQL C API translation MySQL C API function mapping Some _mysql examples MySQLdb
HIVE 窗口及分析函数 daizj hive 窗口函数分析函数
窗口函数应用场景：（1）用于分区排序（2）动态Group By （3）Top N （4）累计计算（5）层次查询一、分析函数用于等级、百分点、n分片等。函数说明 RANK() &nbs
PHP ZipArchive 实现压缩解压Zip文件 dcj3sjt126com PHP zip
PHP ZipArchive 是PHP自带的扩展类，可以轻松实现ZIP文件的压缩和解压，使用前首先要确保PHP ZIP 扩展已经开启，具体开启方法就不说了，不同的平台开启PHP扩增的方法网上都有，如有疑问欢迎交流。这里整理一下常用的示例供参考。一、解压缩zip文件 01 02 03 04 05 06 07 08 09 10 11
精彩英语贺词 dcj3sjt126com 英语
I'm always here 我会一直在这里支持你 &nb
基于Java注解的Spring的IoC功能 e200702084 java spring bean IOC Office
java模拟post请求 geeksun java
一般API接收客户端（比如网页、APP或其他应用服务）的请求，但在测试时需要模拟来自外界的请求，经探索，使用HttpComponentshttpClient可模拟Post提交请求。此处用HttpComponents的httpclient来完成使命。 import org.apache.http.HttpEntity ; import org.apache.http.HttpRespon
Swift语法之 ---- ?和!区别 hongtoushizi ?swift !
转载自： http://blog.sina.com.cn/s/blog_71715bf80102ux3v.html Swift语言使用var定义变量，但和别的语言不同，Swift里不会自动给变量赋初始值，也就是说变量不会有默认值，所以要求使用变量之前必须要对其初始化。如果在使用变量之前不进行初始化就会报错： var stringValue : String //
centos7安装jdk1.7 jisonami jdk centos
安装JDK1.7 步骤1、解压tar包在当前目录 [root@localhost usr]#tar -xzvf jdk-7u75-linux-x64.tar.gz 步骤2：配置环境变量在etc/profile文件下添加 export JAVA_HOME=/usr/java/jdk1.7.0_75 export CLASSPATH=/usr/java/jdk1.7.0_75/lib
数据源架构模式之数据映射器 home198979 PHP 架构数据映射器 datamapper
前面分别介绍了数据源架构模式之表数据入口、数据源架构模式之行和数据入口数据源架构模式之活动记录，相较于这三种数据源架构模式，数据映射器显得更加“高大上”。一、概念数据映射器（Data Mapper）：在保持对象和数据库（以及映射器本身）彼此独立的情况下，在二者之间移动数据的一个映射器层。概念永远都是抽象的，简单的说，数据映射器就是一个负责将数据映射到对象的类数据。 &nb
在Python中使用MYSQL pda158 mysql python
缘由　　近期在折腾一个小东西须要抓取网上的页面。然后进行解析。将结果放到数据库中。　　了解到 Python在这方面有优势，便选用之。　　由于我有台 server上面安装有 mysql，自然使用之。在进行数据库的这个操作过程中遇到了不少问题，这里记录一下，大家共勉。　　 python中mysql的调用　　百度之后能够通过MySQLdb进行数据库操作。
单例模式 hxl1988_0311 java 单例设计模式单件
package com.sosop.designpattern.singleton; /* * 单件模式：保证一个类必须只有一个实例，并提供全局的访问点 * * 所以单例模式必须有私有的构造器，没有私有构造器根本不用谈单件 * * 必须考虑到并发情况下创建了多个实例对象 * */ /** * 虽然有锁，但是只在第一次创建对象的时候加锁，并发时不会存在效率
27种迹象显示你应该辞掉程序员的工作 vipshichg 工作
1、你仍然在等待老板在2010年答应的要提拔你的暗示。 2、你的上级近10年没有开发过任何代码。 3、老板假装懂你说的这些技术，但实际上他完全不知道你在说什么。 4、你干完的项目6个月后才部署到现场服务器上。 5、时不时的，老板在检查你刚刚完成的工作时，要求按新想法重新开发。 6、而最终这个软件只有12个用户。 7、时间全浪费在办公室政治中，而不是用在开发好的软件上。 8、部署前5分钟才开始测试。

按字母分类： 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 其他