卡布i
卡布i

Vue组件详解

使用组件的原因: 提高代码可复用性

组件的使用方法

  1. 全局注册
HTML:

    
      


JS:
Vue.component('myComponent',{    
    template: '
我是一个组件
'  
})  
var app = new Vue({    
    el: '#app'  
})
优点：所有的Vue实例都可以用 
缺点：权限太大，容错率降低
  1. 局部注册
    
      


var app = new Vue({    
    el: '#app',    
    components:{      
        'myComponent':{    
            template: '
我是一个组件
'      
        }    
    }  
})

3. vue组件的模板在某些情况下会受到html标签的限制，比如

中只能含有
,

这些元素，所以直接在table中使用组件是无效的，此时可以使用is属性来挂载组件

组件使用的技巧

1. 推荐使用小写字母加­进行命名（必须）

2. template中的内容必须被一个DOM元素包括 ，也可以嵌套

3. 在组件的定义中，除了template之外的其他选项—data,computed,methods

4. data必须是一个方法

      
      


components:{      
    'button-component':{        
        template: '',        
        data: function(){          
            return { count: 0  }        
        }      
    }    
}

使用props传递数据 父亲向儿子传递数据

1. 在组件中使用props来从父亲组件接收参数，注意，在props中定义的属性，都可以在组件中直接使用

2. props来自父级，而组件中data return的数据就是组件自己的数据，两种情况作用域就是 组件本身，可以在template，computed，methods中直接使用

3. props的值有两种，一种是字符串数组，一种是对象，本节先只讲数组

4. 可以使用v­-bind动态绑定父组件来的内容

父组件传数据给子组件

    
    
我是父组件
      
      



var app = new Vue({    
    el: '#app',    
    components:{      
        'child-component':{        
            props:['message'],        
            template: ''      
        }    
    }  
})

使用v­-bind动态绑定父组件来的内容

    
        
      



var app = new Vue({    
    el: '#app',    
    data:{message: ''},    
    components:{      
        'child-component':{        
            props:['msg'],        
            template: ''      
        }    
    }  
})

效果

input输入框里的内容会同步到子组件button按钮内

image.png

单向数据流

解释 : 通过 props 传递数据是单向的，也就是父组件数据变化时会传递给子组件，但是反过来不行

目的 :是尽可能将父子组件解稿，避免子组件无意中修改了父组件的状态。

应用场景: 业务中会经常遇到两种需要改变 prop 的情况

一种是父组件传递初始值进来，子组件将它作为初始值保存起来，在自己的作用域下可以随意使用和修改。这种情况可以在组件 data 内再声明一个数据，引用父组件 的 prop

步骤一：注册组件

步骤二：将父组件的数据传递进来，并在子组件中用props接收

步骤三：将传递进来的数据通过初始值保存起来

    
      


var app = new Vue({    
    el: '#app',    
    components: {      
        'my-component': {        
            props: ['init-count'],        
            template: '
{{count}}
',        
            data: function () {          
                return {            
                count: this.initCount          
                }        
            }      
        }    
    }  
})

另一种情况就是 prop 作为需要被转变的原始值传入。这种情况用计算属性就可以了

步骤一：注册组件

步骤二：将父组件的数据传递进来，并在子组件中用props接收

步骤三：将传递进来的数据通过计算属性进行重新计算

通过计算属性动态控制元素的宽度

    
        
      



var app = new Vue({    
    el: '#app',    
    data:{width: 0 },    
    components:{      
        'child-component':{        
            props:['width'],        
            template: '
',        
        computed:{          
            style: function(){            
                return {              
                width: this.width+'px',              
                height: '20px',              
                background: 'grey'            
                    }          
                }        
            }      
        }    
    }  
})

数据验证

vue组件中camelCased (驼峰式) 命名与 keba-b­case（短横线命名）

1. 在html中, myMessage 和 mymessage 是一致的,,因此在组件中的html 中使用必须使用kebab-­case（短横线）命名方式。在html中不允许使用驼峰！！！

2. 在组件中, 父组件给子组件传递数据必须用短横线。在template中，必须使用驼峰命名，若为短横线的命名方式。则会直接保错。

3. 在组件的data中,用this.XXX引用时,只能是驼峰命名方式。若为短横线的命名方式，则会报错。

验证的 type 类型可以是：

• String

• Number

• Boolean

• Object

• Array

• Function

Vue.component （ 'my-compopent'， ｛
props : {
／／必须是数字类型
propA : Number ,
／／必须是字符串或数字类型
propB : [String , Number] ,
／／布尔值，如果没有定义，默认值就是 true
propC: {
type : Boolean ,
default : true
},
／／数字，而且是必传
propD: {
type: Number ,
required : true
},
／／如果是数组或对象，默认值必须是一个函数来返回
propE: {
type : Array ,
default : function () {
return [] ;
}
},
／／自定义一个验证函数
propF: {
validator : function (value) {
return value > 10;}
}
}
})

自定义事件—子组件给父组件传递数据

使用v­-on 除了监昕 DOM 事件外，还可以用于组件之间的自定义事件。 JavaScript 的设计模式 一一观察者模式， dispatchEvent 和 addEventListener这两个方法。 Vue 组件也有与之类似的一套模式，子组件用on（）来 监昕子组件的事件 。 直接甩代码

第一步：自定义事件

第二步： 在子组件中用$emit触发事件，第一个参数是事件名，后边的参数是要传递的数据

第三步：在自定义事件中用一个参数来接受

    
    
要买多少个苹果? {{number}}
    
      


var app = new Vue({    
    el: '#app',    
    data: {      number: 200    },    
    methods: {      
        change: function (value) {        
        this.number = value      
        }    
    },    
    components: {      
        'child-component': {           
        data: function () {          
            return { count: 200  }        
    },        
    template: `
`,        
    methods: {          
        add: function () {            
                this.count += 1            
                this.$emit('change', this.count)          
        },          
        reduce: function () {            
            this.count -= 1            
            this.$emit('change', this.count)          
                }        
            }      
        }    
    }  
})

效果:

image.png

在组件中使用v­-model

$emit的代码,这行代码实际上会触发一个 input事件, ‘input’后的参数就是传递给v­-model绑定 的属性的值 v­-model 其实是一个语法糖，这背后其实做了两个操作

  • v­-bind 绑定一个 value 属性
  • v-­on 指令给当前元素绑定 input 事件

要使用v­-model,要做到:

  • 接收一个 value 属性。
  • 在有新的 value 时触发 input 事件
    
    
您要买多少个苹果? {{number}}
    
      


var app = new Vue({    
    el: '#app',    
    data: {      
        number: 200    
    },    
    components: {      
        'child-component': {        
    data:function(){return{count:200}},        
    template: ``,        
    methods: {          
        add: function () {            
            this.count += 1        
----------------------注意观察.这一行,emit的是input事件----------------    
            this.$emit('input', this.count)          
            }        
        }      
    }    
}  
})

非父组件之间的通信

可以用一个空的Vue实例作为中央事件总线:

var bus = new Vue()

// 触发事件
bus.$emit('事件名', 1)
//如果是子组件, this.$root.bus

// 监听事件
bus.$emit('事件名', function(id){
    // .....
})

代码:

    
        
      


var app = new Vue({    
    el: '#app',    
    data: { bus: new Vue() },    
    components: {      
        'my-component': {        
        data:function(){          
            return {            
                text: '我是A组件里的text'          
            }        
        },        
    template: '
',        
    methods:{          
        onclick: function(){            
            this.$root.bus.$emit('send',this.text)          
            }        
        }      
    },      
    'child-component': {        
        template: '
第二个组件
',        
        created: function(){          
            this.$root.bus.$on('send',function(value){            
            alert(value)          
                })        
            }      
        }    
    }  
})

点击A组件里的按, 就会触发send事件, 同时把数据发出去, B组件监听send事件, 获取传过来的数据

父链: this.$parent

this.$parent.msg = '数据已经修改了'

子链：

this.$refs 提供了为子组件提供索引的方法，用特殊的属性ref为其增加一个索引

// 给子组件添加ref属性
this.formchild = this.$refs.c.msg;

使用slot分发内容

什么是slot(插槽)

为了让组件可以组合，我们需要一种方式来混合父组件的内容与子组件自己的模板。这个过程被称为内容分发. Vue.js 实现了一个内容分发API，使用特殊的 ‘slot’ 元素作为原始内容的插槽

编译的作用域

在深入内容分发 API 之前，我们先明确内容在哪个作用域里编译。假定模板为：


    {{ message }}

message 应该绑定到父组件的数据，还是绑定到子组件的数据？答案是父组件。组件作用 域简单地说是：

父组件模板的内容在父组件作用域内编译；

子组件模板的内容在子组件作用域内编译。

插槽的用法

父组件的内容与子组件相混合，从而弥补了视图的不足

混合父组件的内容与子组件自己的模板

单个插槽：

    
         
        slot, 接着    
      



components: {      
    'child-component': {
        template: `
如果父组件没有插入内容，我就作为默认出现
`      
    }    
}

具名插槽:

模板占位slot 通过slot 和name属性进行关联

    
          
        
我是标题
      
        
文本内容第一部分
      
        
文本内容第二部分
      
        
我是页脚
    


components: {      
    'child-component': {        
        template: `
                    
            
                      
                                    
            
                    
            
                      
                                    
            
                    
            
                      
                                    
            
                  
        
                  `      
    }    
}

效果:

image.png

作用域插槽:

作用域插槽是一种特殊的slot，使用一个可以复用的模板来替换已经渲染的元素 ——从子组件获取数据 ,template模板是不会被渲染的

      
        

components: {      
    'child-component': {        
    template: `          
        
            
                      
        
`      
    }    
}

Vue 2.5.0之前, slot-scope只能写在template标签上

访问slot

通过this.$slots.(NAME)

mounted:function () { 
    //访问插槽
    var header = this.$slots.header;
    var text = header[0].elm.innerText;
    var html = header[0].elm.innerHTML;
    console.log(header)
    console.log(text)
    console.log(html)
}

组件高级用法–动态组件

VUE给我们提供了一个元素叫component 作用是：

用来动态的挂载不同的组件

实现：使用is特性来进行实现的

// 点击不同的按钮, 渲染不同的组件

    
        
        
        
      


var app = new Vue({    
    el: '#app',    
    data: {  thisView: 'compA' },    
    methods:{      
        selected:function(tag){        
        this.thisView = 'comp' + tag      
        }    
    },    
    components: {      
        'compA': {        
            template: '
一个和尚挑水喝
'      
        },      
        'compB': {        
            template: '
两个和尚抬水喝
'      
        },      
        'compC': {        
            template: '
三个和尚没水喝
'      
        }    
    }  
})

你可能感兴趣的:(Vue组件详解)

  • Python中os.environ基本介绍及使用方法 鹤冲天Pro #Pythonpython服务器开发语言
    文章目录python中os.environos.environ简介os.environ进行环境变量的增删改查python中os.environ的使用详解1.简介2.key字段详解2.1常见key字段3.os.environ.get()用法4.环境变量的增删改查和判断是否存在4.1新增环境变量4.2更新环境变量4.3获取环境变量4.4删除环境变量4.5判断环境变量是否存在python中os.envi
  • 四章-32-点要素的聚合 彩云飘过
    本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.
  • Python爬虫解析工具之xpath使用详解 eqa11 python爬虫开发语言
    文章目录Python爬虫解析工具之xpath使用详解一、引言二、环境准备1、插件安装2、依赖库安装三、xpath语法详解1、路径表达式2、通配符3、谓语4、常用函数四、xpath在Python代码中的使用1、文档树的创建2、使用xpath表达式3、获取元素内容和属性五、总结Python爬虫解析工具之xpath使用详解一、引言在Python爬虫开发中，数据提取是一个至关重要的环节。xpath作为一门
  • [Python] 数据结构 详解及代码 AIAdvocate 算法python数据结构链表
    今日内容大纲介绍数据结构介绍列表链表1.数据结构和算法简介程序大白话翻译,程序=数据结构+算法数据结构指的是存储,组织数据的方式.算法指的是为了解决实际业务问题而思考思路和方法,就叫:算法.2.算法的5大特性介绍算法具有独立性算法是解决问题的思路和方式,最重要的是思维,而不是语言,其(算法)可以通过多种语言进行演绎.5大特性有输入,需要传入1或者多个参数有输出,需要返回1个或者多个结果有穷性,执行
  • 详解：如何设计出健壮的秒杀系统？ 夜空_2cd3
    作者：Yrion博客园：cnblogs.com/wyq178/p/11261711.html前言：秒杀系统相信很多人见过，比如京东或者淘宝的秒杀，小米手机的秒杀。那么秒杀系统的后台是如何实现的呢？我们如何设计一个秒杀系统呢？对于秒杀系统应该考虑哪些问题？如何设计出健壮的秒杀系统？本期我们就来探讨一下这个问题：image目录一：****秒杀系统应该考虑的问题二：****秒杀系统的设计和技术方案三：*
  • MyBatis 详解 阿贾克斯的黎明 javamybatis
    目录目录一、MyBatis是什么二、为什么使用MyBatis（一）灵活性高（二）性能优化（三）易于维护三、怎么用MyBatis（一）添加依赖（二）配置MyBatis（三）创建实体类和接口（四）使用MyBatis一、MyBatis是什么MyBatis是一个优秀的持久层框架，它支持自定义SQL、存储过程以及高级映射。MyBatis免除了几乎所有的JDBC代码以及设置参数和获取结果集的工作。它可以通过简
  • vue render 函数详解 (配参数详解) 你的眼睛會笑 vue2vue.jsjavascript前端
    vuerender函数详解(配参数详解)在Vue3中，`render`函数被用来代替Vue2中的模板语法。它接收一个h函数（或者是`createElement`函数的别名），并且返回一个虚拟DOM。render函数的语法结构如下：render(h){returnh('div',{class:'container'},'Hello,World!')}在上面的示例中，我们使用h函数创建了一个div元素
  • Dockerfile命令详解之 FROM 清风怎不知意 容器化java前端javascript
    许多同学不知道Dockerfile应该如何写，不清楚Dockerfile中的指令分别有什么意义，能达到什么样的目的，接下来我将在容器化专栏中详细的为大家解释每一个指令的含义以及用法。专栏订阅传送门https://blog.csdn.net/qq_38220908/category_11989778.html指令不区分大小写。但是，按照惯例，它们应该是大写的，以便更容易地将它们与参数区分开来。(引用
  • Dockerfile（1） - FROM 指令详解 小菠萝测试笔记 dockerpythonjavacmd大数据
    FROM指明当前的镜像基于哪个镜像构建dockerfile必须以FROM开头，除了ARG命令可以在FROM前面FROM[--platform=][AS]FROM[--platform=][:][AS]FROM[--platform=][@][AS]小栗子FROMalpine:latest一个dockerfile可以有多个FROM可以有多个FROM来创建多个镜像，或区分构建阶段，将一个构建阶段作为另
  • 详解“c:/work/src/components/a/b.vue“‘ has no default export报错原因 hw_happy 开发语言前端vue.jsjavascript
    前情提要在一个vue文件中需要引入定义的b.vue文件，但是提示b文件没有默认导出，对于vue2文件来说有exportdefault，在中，所有定义的变量、函数和组件都会自动被视为默认导出的组件内容。因此，不需要显式地使用exportdefault来导出组件。但是在我引用这个文件的时候还是提示了这个错误，原来是我的项目使用了ts和vite\webpack，因为TypeScript和Vue的默认导出
  • 【显示 后台运行 & 的命令】 晨春计 debuglinux服务器运维
    目录背景步骤详解示例背景当你在Linuxshell中使用&符号将一个命令放到后台运行时，你可以使用jobs命令来查看这些后台进程的状态。但是，jobs命令并不会直接显示进程的PID（进程ID）。它会显示一个作业列表，其中包括每个作业的状态和一个作业标识符（通常是百分号%后面跟着一个数字），但不会直接显示PID。获取后台进程的PID步骤：1、使用jobs命令查看后台作业。2、使用ps命令配合grep
  • k8s中Service暴露的种类以及用法 听说唐僧不吃肉 K8Skubernetes容器云原生
    一、说明在Kubernetes中，有几种不同的方式可以将服务（Service）暴露给外部流量。这些方式通过定义服务的spec.type字段来确定。二、详解1.ClusterIP定义：默认类型，服务只能在集群内部访问。作用：通过集群内部IP地址暴露服务。示例：spec:type:ClusterIPports:-port:80targetPo
  • 详解mybatis的一二级缓存以及缓存失效原因 仰望天花板 缓存数据库mybatisjavamysql
    数据库的大部分场景下是从磁盘读取，如果数据从内存进行读取，速度较比磁盘要快得多。但因为内存的容量有限，所以一般只会把使用和查询较多的数据缓存起来，以便快速反应，其他使用率不太多的继续存放在磁盘。mybatis分为一级缓存和二级缓存1.一级缓存一级缓存存放在SqlSqeeion上，默认开启1.1pojo@DatapublicclassRole{privateLongid;privateStringr
  • 【前端】vue 报错:The template root requires exactly one element 程序员-张师傅 前端前端vue.jsjavascript
    【前端】vue报错:Thetemplaterootrequiresexactlyoneelement在Vue.js中，当你遇到错误“Thetemplaterootrequiresexactlyoneelement”时，这通常意味着你的Vue组件的模板（template）根节点不是单一的元素。Vue要求每个组件的模板必须有一个根元素来包裹所有的子元素。这个错误通常出现在以下几种情况：模板中有多个并行
  • pythonpandas函数详解_Python pandas常用函数详解 Senvn
    本文研究的主要是pandas常用函数，具体介绍如下。1import语句importpandasaspdimportnumpyasnpimportmatplotlib.pyplotaspltimportdatetimeimportre2文件读取df=pd.read_csv(path='file.csv')参数：header=None用默认列名，0，1，2，3...names=['A','B','C'
  • HTTP 响应状态码详解 云博客-资源宝 笔记httpHTTP响应状态码详解
    HTTP状态码详解：HTTP状态码,是用以表示WEB服务器HTTP响应状态的3位数字代码小技巧：Ctrl+F快速查找Http状态码状态码含义100客户端应当继续发送请求。这个临时响应是用来通知客户端它的部分请求已经被服务器接收，且仍未被拒绝。客户端应当继续发送请求的剩余部分，或者如果请求已经完成，忽略这个响应。服务器必须在请求完成后向客户端发送一个最终响应。101服务器已经理解了客户端的请求，并将
  • Linux中GCC与GDB 常用命令详解 Dijkstra's Monk-ey Linux与安全linuxgdbshell安全c语言
    GCC和GDB常用命令详解GCC常用的选项GDBLINUX下编程，少不了和GCC,GDB打交道，现在总结下常用命令，掌握这些足够用了。GCC常用的选项选项语义-o指定生成的输出文件-E仅执行编译预处理gcc的-E选项，可以让编译器在预处理后停止，并输出预处理结果。-S将C代码转换为汇编代码gcc的-S选项，表示在程序编译期间，在生成汇编代码后停止-wall显示警告信息-c生成目标文件（.o），仅执
  • 腾讯发表多模态综述，一文详解多模态大模型 存内计算开发者社区 多模态大模型人工智能chatgptAIGC量子计算AI-nativegptagi
    多模态大语言模型（MLLM）是近年来兴起的一个新的研究热点，它利用强大的大语言模型作为大脑来执行多模态任务。MLLM令人惊讶的新兴能力，如基于图像写故事和无OCR的数学推理，在传统方法中是罕见的，这表明了一条通往人工通用智能的潜在道路。在本文中，追踪多模态大模型最新热点，讨论多模态关键技术以及现有在情绪识别上的应用。腾讯AILab发表了一篇关于多模态大模型的最新综述《MM-LLMs:RecentA
  • OSPF LSA5、LSA7 中 FA 工作原理详解 斐夷所非 network网络
    FA(ForwardingAddress)仅出现在LSA5或LSA7中，它是数据包访问外部网络时，在数据报文离开OSPF路由域时必须经过的设备地址。LSA5作用LSA5区别于LSA3/LSA4，LSA5仅负责通告OSPF路由域外其他协议的路由，如RIP、BGP等。当外部路由引入到OSPF后，靠LSA5将其泛洪到OSPF路由域。LSA5具有其他LSA所没有的泛洪范围，除了特殊类型区域(Stub及NS
  • ⭐算法入门⭐《归并排序》简单01 —— LeetCode 21. 合并两个有序链表 英雄哪里出来 《LeetCode算法全集》算法数据结构链表c++归并排序
    饭不食，水不饮，题必须刷C语言免费动漫教程，和我一起打卡！《光天化日学C语言》LeetCode太难？先看简单题！《C语言入门100例》数据结构难？不存在的！《数据结构入门》LeetCode太简单？算法学起来！《夜深人静写算法》文章目录一、题目1、题目描述2、基础框架3、原题链接二、解题报告1、思路分析2、时间复杂度3、代码详解三、本题小知识一、题目1、题目描述  将两个不降序链表合并为一个新的不降
  • 上传文件到钉盘流程详解 jspyth 开发场景案例分析开发语言java后端
    文章目录前言准备工作实现过程Maven依赖封装一个工具类获取文件上传信息unionId获取钉盘目录spaceId创建上传到钉盘前言  本文详解如何通过钉钉的API实现上传文件到钉盘目录，代码通过JAVA实现。准备工作1、在钉钉开发者后台创建一个钉钉企业内部应用；2、创建并保存好应用的appKey和appSecret，后面用于获取调用API的请求token；3、应用中配置好所需权限：企业存储文件上传
  • Linux中open函数详解 460833359 LinuxClinuxopen函数
    初级文件I/O函数（即不用缓存的I/O函数）：open（打开文件）相关函数read，write，fcntl，create，lseek，close，link，stat，umask，unlink，fopen头文件#include#include#include定义函数intopen(constchar*pathname,intflags);intopen(constchar*pathname,intf
  • linux open详解,Linux系统open函数详解 墨剑心 linuxopen详解
    Linux系统中open函数主要作用就是打开和创建文件，可以根据参数来定制我们需要的文件的属性和用户权限等各种参数，下面良许教程网为大家分享一下Linux系统open函数具体使用方法。一、open函数用来干什么open函数在Linux下一般用来打开或者创建一个文件，我们可以根据参数来定制我们需要的文件的属性和用户权限等各种参数。二、open函数的定义和参数我们首先来看下open函数在Linux下的
  • Linux下read函数详解 威桑 Linuxlinux服务器运维
    在Linux中，read函数是最常用的系统调用之一，用于从文件或其他输入设备读取数据。它是低级别的I/O操作的核心，直接与操作系统的内核交互，提供了高效的数据读取方式。一、read函数简介read函数的声明如下：#includessize_tread(intfd,void*buf,size_tcount);其中：fd是文件描述符，代表了需要读取的文件或设备。文件描述符可以通过调用open或其他文件
  • Python round函数详解 寒秋丶 Python自动化测试性能测试python开发语言测试开发软件开发软件测试自动化测试性能测试
    大家好，在Python编程中，经常需要对数字进行舍入操作。无论是在金融领域的货币计算，还是科学计算中的数据处理，都可能需要使用到四舍五入功能。为了满足这一需求，Python提供了一个内置函数round()，它能够方便地对数字进行舍入操作。在本文中，将深入探讨Python中round()函数的用法和特性。将从基本语法开始，逐步深入，讨论该函数在不同情况下的行为，以及如何在实际编程中灵活运用。无论您是
  • Linux下open函数详解 威桑 Linuxlinux
    在Linux中，open函数是文件操作的核心系统调用之一，它用于打开文件并返回一个文件描述符，用于后续的文件操作如读取、写入、关闭等。open函数的原型#include#include#include#includeintopen(constchar*pathname,intflags);intopen(constchar*pathname,intflags,mode_tmode);open函数有
  • 打开C语言常用内存函数的大门(一) —— memcpy()函数 （内含讲解用法和模拟实现） 埋头编程~ C语言c语言开发语言visualstudio算法
    文章目录1.前言2.memcpy函数2.1memcpy函数的原型2.2memcpy函数的形参和返回值详解3.memcpy函数的演示4.memcpy函数的模拟实现5.总结1.前言在之前写的文章中，我介绍了几个比较常用的字符串函数strlen、strcmp、strcpy。它们作用的对象只能是形如字符串类型的数据。那这难免会引起我们心中一泡浓厚的求知欲——C语言有没有给我们提供一些类似于字符串函数的功能
  • 详解C语言中的循环语句 埋头编程~ C语言c语言开发语言
    文章目录1.前言2.while循环2.1if和whlie的对比2.2while语句的工作机制2.3while循环的实践3.for循环3.1for循环语法3.2for循环的工作机制3.3for循环实践4dowhile循环4.1dowhlie循环语法4.2dowhile循环的工作机理4.3dowhile循环实践5.break和continue语句5.1break举例5.2continue举例6.got
  • 4×4矩阵键盘详解（STM32） 辰哥单片机设计 STM32传感器教学矩阵计算机外设stm32嵌入式硬件单片机传感器
    目录一、介绍二、传感器原理1.原理图2.工作原理介绍三、程序设计main.c文件button4_4.h文件button4_4.c文件四、实验效果五、资料获取项目分享一、介绍矩阵键盘，又称为行列式键盘，是用4条I/O线作为行线，4条I/O线作为列线组成的键盘。在行线和列线的每一个交叉点上设置一个按键，因此键盘中按键的个数是4×4个。这种行列式键盘结构能够有效地提高单片机系统中I/O口的利用率，节约单
  • STM32的寄存器深度解析 千千道 STM32stm32单片机物联网
    目录一、STM32寄存器概述二、寄存器的定义与作用三、寄存器分类1.内核寄存器2.外设寄存器四、重要寄存器详解1.GPIO相关寄存器2.定时器相关寄存器3.中断相关寄存器4.RCC相关寄存器五、寄存器操作方法1.直接操作寄存器2.使用库函数操作寄存器六、总结在嵌入式系统开发中，STM32微控制器以其强大的性能和丰富的功能而备受青睐。而理解和掌握STM32的寄存器是深入学习和开发STM32的关键。本
  • Hadoop(一) 朱辉辉33 hadooplinux
    今天在诺基亚第一天开始培训大数据，因为之前没接触过Linux，所以这次一起学了，任务量还是蛮大的。 首先下载安装了Xshell软件，然后公司给了账号密码连接上了河南郑州那边的服务器，接下来开始按照给的资料学习，全英文的，头也不讲解，说锻炼我们的学习能力，然后就开始跌跌撞撞的自学。这里写部分已经运行成功的代码吧.    在hdfs下，运行hadoop fs -mkdir /u
  • maven An error occurred while filtering resources blackproof maven报错
    转：http://stackoverflow.com/questions/18145774/eclipse-an-error-occurred-while-filtering-resources   maven报错： maven An error occurred while filtering resources   Maven -> Update Proje
  • jdk常用故障排查命令 daysinsun jvm
    linux下常见定位命令： 1、jps      输出Java进程       -q       只输出进程ID的名称，省略主类的名称；       -m      输出进程启动时传递给main函数的参数；     &nb
  • java 位移运算与乘法运算 周凡杨 java位移运算乘法
      对于 JAVA 编程中，适当的采用位移运算，会减少代码的运行时间，提高项目的运行效率。这个可以从一道面试题说起：     问题： 用最有效率的方法算出2 乘以8 等於几?” 答案：2 << 3 由此就引发了我的思考，为什么位移运算会比乘法运算更快呢？其实简单的想想，计算机的内存是用由 0 和 1 组成的二
  • java中的枚举(enmu) g21121 java
    从jdk1.5开始，java增加了enum(枚举)这个类型，但是大家在平时运用中还是比较少用到枚举的，而且很多人和我一样对枚举一知半解，下面就跟大家一起学习下enmu枚举。先看一个最简单的枚举类型，一个返回类型的枚举： public enum ResultType { /** * 成功 */ SUCCESS, /** * 失败 */ FAIL,
  • MQ初级学习 510888780 activemq
    1.下载ActiveMQ 去官方网站下载：http://activemq.apache.org/ 2.运行ActiveMQ 解压缩apache-activemq-5.9.0-bin.zip到C盘，然后双击apache-activemq-5.9.0-\bin\activemq-admin.bat运行ActiveMQ程序。 启动ActiveMQ以后，登陆：http://localhos
  • Spring_Transactional_Propagation 布衣凌宇 springtransactional
    //事务传播属性 @Transactional(propagation=Propagation.REQUIRED)//如果有事务，那么加入事务，没有的话新创建一个 @Transactional(propagation=Propagation.NOT_SUPPORTED)//这个方法不开启事务 @Transactional(propagation=Propagation.REQUIREDS_N
  • 我的spring学习笔记12-idref与ref的区别 aijuans spring
    idref用来将容器内其他bean的id传给<constructor-arg>/<property>元素，同时提供错误验证功能。例如： <bean id ="theTargetBean" class="..." /> <bean id ="theClientBean" class=&quo
  • Jqplot之折线图 antlove jsjqueryWebtimeseriesjqplot
    timeseriesChart.html <script type="text/javascript" src="jslib/jquery.min.js"></script> <script type="text/javascript" src="jslib/excanvas.min.js&
  • JDBC中事务处理应用 百合不是茶 javaJDBC编程事务控制语句
      解释事务的概念; 事务控制是sql语句中的核心之一;事务控制的作用就是保证数据的正常执行与异常之后可以恢复   事务常用命令:             Commit提交         
  • [转]ConcurrentHashMap Collections.synchronizedMap和Hashtable讨论 bijian1013 java多线程线程安全HashMap
    在Java类库中出现的第一个关联的集合类是Hashtable，它是JDK1.0的一部分。 Hashtable提供了一种易于使用的、线程安全的、关联的map功能，这当然也是方便的。然而，线程安全性是凭代价换来的――Hashtable的所有方法都是同步的。此时，无竞争的同步会导致可观的性能代价。Hashtable的后继者HashMap是作为JDK1.2中的集合框架的一部分出现的，它通过提供一个不同步的
  • ng-if与ng-show、ng-hide指令的区别和注意事项 bijian1013 JavaScriptAngularJS
            angularJS中的ng-show、ng-hide、ng-if指令都可以用来控制dom元素的显示或隐藏。ng-show和ng-hide根据所给表达式的值来显示或隐藏HTML元素。当赋值给ng-show指令的值为false时元素会被隐藏，值为true时元素会显示。ng-hide功能类似，使用方式相反。元素的显示或
  • 【持久化框架MyBatis3七】MyBatis3定义typeHandler bit1129 TypeHandler
    什么是typeHandler? typeHandler用于将某个类型的数据映射到表的某一列上，以完成MyBatis列跟某个属性的映射   内置typeHandler MyBatis内置了很多typeHandler，这写typeHandler通过org.apache.ibatis.type.TypeHandlerRegistry进行注册，比如对于日期型数据的typeHandler，
  • 上传下载文件rz,sz命令 bitcarter linux命令rz
    刚开始使用rz上传和sz下载命令： 因为我们是通过secureCRT终端工具进行使用的所以会有上传下载这样的需求： 我遇到的问题： sz下载A文件10M左右，没有问题 但是将这个文件A再传到另一天服务器上时就出现传不上去，甚至出现乱码，死掉现象，具体问题 解决方法： 上传命令改为;rz -ybe 下载命令改为：sz -be filename 如果还是有问题： 那就是文
  • 通过ngx-lua来统计nginx上的虚拟主机性能数据 ronin47 ngx-lua　统计 解禁ip
    介绍 以前我们为nginx做统计,都是通过对日志的分析来完成.比较麻烦,现在基于ngx_lua插件,开发了实时统计站点状态的脚本,解放生产力.项目主页: https://github.com/skyeydemon/ngx-lua-stats 功能 支持分不同虚拟主机统计, 同一个虚拟主机下可以分不同的location统计. 可以统计与query-times request-time
  • java-68-把数组排成最小的数。一个正整数数组，将它们连接起来排成一个数，输出能排出的所有数字中最小的。例如输入数组{32, 321}，则输出32132 bylijinnan java
    import java.util.Arrays; import java.util.Comparator; public class MinNumFromIntArray { /** * Q68输入一个正整数数组，将它们连接起来排成一个数，输出能排出的所有数字中最小的一个。 * 例如输入数组{32, 321}，则输出这两个能排成的最小数字32132。请给出解决问题
  • Oracle基本操作 ccii Oracle SQL总结Oracle SQL语法Oracle基本操作Oracle SQL
    一、表操作 1. 常用数据类型 NUMBER(p,s)：可变长度的数字。p表示整数加小数的最大位数，s为最大小数位数。支持最大精度为38位 NVARCHAR2(size)：变长字符串，最大长度为4000字节（以字符数为单位） VARCHAR2(size)：变长字符串，最大长度为4000字节（以字节数为单位） CHAR(size)：定长字符串，最大长度为2000字节，最小为1字节，默认
  • [强人工智能]实现强人工智能的路线图 comsci 人工智能
        1：创建一个用于记录拓扑网络连接的矩阵数据表      2:自动构造或者人工复制一个包含10万个连接(1000*1000)的流程图      3：将这个流程图导入到矩阵数据表中      4：在矩阵的每个有意义的节点中嵌入一段简单的
  • 给Tomcat，Apache配置gzip压缩(HTTP压缩)功能 cwqcwqmax9 apache
    背景： HTTP 压缩可以大大提高浏览网站的速度，它的原理是，在客户端请求网页后，从服务器端将网页文件压缩，再下载到客户端，由客户端的浏览器负责解压缩并浏览。相对于普通的浏览过程HTML ,CSS,Javascript , Text ，它可以节省40%左右的流量。更为重要的是，它可以对动态生成的，包括CGI、PHP , JSP , ASP , Servlet,SHTML等输出的网页也能进行压缩，
  • SpringMVC and Struts2 dashuaifu struts2springMVC
    SpringMVC VS Struts2 1: spring3开发效率高于struts 2: spring3 mvc可以认为已经100%零配置 3: struts2是类级别的拦截， 一个类对应一个request上下文， springmvc是方法级别的拦截，一个方法对应一个request上下文，而方法同时又跟一个url对应 所以说从架构本身上 spring3 mvc就容易实现r
  • windows常用命令行命令 dcj3sjt126com windowscmdcommand
    在windows系统中，点击开始－运行，可以直接输入命令行，快速打开一些原本需要多次点击图标才能打开的界面，如常用的输入cmd打开dos命令行，输入taskmgr打开任务管理器。此处列出了网上搜集到的一些常用命令。winver 检查windows版本 wmimgmt.msc 打开windows管理体系结构(wmi) wupdmgr windows更新程序 wscrip
  • 再看知名应用背后的第三方开源项目 dcj3sjt126com ios
    知名应用程序的设计和技术一直都是开发者需要学习的，同样这些应用所使用的开源框架也是不可忽视的一部分。此前《 iOS第三方开源库的吐槽和备忘》中作者ibireme列举了国内多款知名应用所使用的开源框架，并对其中一些框架进行了分析，同样国外开发者 @iOSCowboy也在博客中给我们列出了国外多款知名应用使用的开源框架。另外txx's blog中详细介绍了 Facebook Paper使用的第三
  • Objective-c单例模式的正确写法 jsntghf 单例iosiPhone
    一般情况下，可能我们写的单例模式是这样的： #import <Foundation/Foundation.h> @interface Downloader : NSObject + (instancetype)sharedDownloader; @end #import "Downloader.h" @implementation
  • jquery easyui datagrid 加载成功，选中某一行 hae jqueryeasyuidatagrid数据加载
    1.首先你需要设置datagrid的onLoadSuccess $( '#dg' ).datagrid({onLoadSuccess :  function (data){      $( '#dg' ).datagrid( 'selectRow' ,3); }});   2.onL
  • jQuery用户数字打分评价效果 ini JavaScripthtmljqueryWebcss
    效果体验：http://hovertree.com/texiao/jquery/5.htmHTML文件代码： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery用户数字打分评分代码 - HoverTree</
  • mybatis的paramType kerryg DAOsql
    MyBatis传多个参数： 1、采用#{0},#{1}获得参数：    Dao层函数方法：     public User selectUser(String name,String area); 对应的Mapper.xml    <select id="selectUser" result
  • centos 7安装mysql5.5 MrLee23 centos
    首先centos7 已经不支持mysql，因为收费了你懂得，所以内部集成了mariadb，而安装mysql的话会和mariadb的文件冲突，所以需要先卸载掉mariadb，以下为卸载mariadb，安装mysql的步骤。   #列出所有被安装的rpm package rpm -qa | grep mariadb   #卸载 rpm -e mariadb-libs-5.
  • 利用thrift来实现消息群发 qifeifei thrift
               Thrift项目一般用来做内部项目接偶用的，还有能跨不同语言的功能，非常方便，一般前端系统和后台server线上都是3个节点，然后前端通过获取client来访问后台server，那么如果是多太server，就是有一个负载均衡的方法，然后最后访问其中一个节点。那么换个思路，能不能发送给所有节点的server呢，如果能就
  • 实现一个sizeof获取Java对象大小 teasp javaHotSpot内存对象大小sizeof
       由于Java的设计者不想让程序员管理和了解内存的使用，我们想要知道一个对象在内存中的大小变得比较困难了。本文提供了可以获取对象的大小的方法，但是由于各个虚拟机在内存使用上可能存在不同，因此该方法不能在各虚拟机上都适用，而是仅在hotspot 32位虚拟机上，或者其它内存管理方式与hotspot 32位虚拟机相同的虚拟机上 适用。     
  • SVN错误及处理 xiangqian0505 SVN提交文件时服务器强行关闭
    在SVN服务控制台打开资源库“SVN无法读取current” ---摘自网络 写道 SVN无法读取current修复方法 Can't read file : End of file found 文件：repository/db/txn_current、repository/db/current   其中current记录当前最新版本号，txn_current记录版本库中版本