一.Vue的指令：

分为两大类；内置指令和自定义指令；今天我们就来学习一下Vue的内置指令；

1.>v-for ：

循环指令（遍历，其意义在于检查集合中的元素并做处理），根据一组数据的选项列表进行渲染；v-for指令主要用于列表渲染；v-for可以遍历数组和对象；

eg:{{val}}

实例：





    
    Document



     {{msk}}
        
            {{a}}
            {{i}}
            {{index}}--{{val}}
            {{ins}}--{{value}}
            {{val.name}} {{val.pname}} {{val.price}}
        
        
            
                
                    编号
                    数量
                    价格
                
            
            
                
                    {{val.name}}
                    {{val.pname}}
                    {{val.price}}

编号	数量	价格
{{val.name}}	{{val.pname}}	{{val.price}}

2.>v-model:

(对表单元素进行双向数据绑定);该指令主要用于,,<select></code>标签中，它会根据控件类型自动选取正确的方法来更新元素。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理；</p> <pre><code>eg:<input type="text" v-model="message"> <p>{{message}}</p> </code></pre> <h2>3.>v-on:</h2> <p>（<code>绑定事件监听器</code>）当模板渲染完成之后，就可进行事件的绑定与监听了；<br> 事件类型由参数指定；表达式为：<code>v-on:事件名=“函数名”；</code></p> <h6>注：<code>事件名与js不同，使用时没有“on”；</code> </h6> <pre><code>eg:<button v-on:click="c">添加</button> </code></pre> <h6>v-on可以绑定实例选项methods中的方法作为事件的处理器；</h6> <h6>v-on后参数接受所有的原生事件名称；</h6> <h3>实例:</h3> <h6>点击来回切换：</h6> <pre><code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="itany"> <p>{{msg}}</p> <button v-on:click="c">按钮</button> </div> <script src="js/vue.js"></script> <script> new Vue({ el:'#itany', data:{ msg:"hello world", // trr:"hello vue", flag:true }, methods:{ c:function(){ if(this.flag){ this.msg="hello world", this.flag=false }else{ this.msg="hello vue" this.flag=true } } } }) </script> </body> </html> </code></pre> <h4>v-on：（点击按钮时输出“hello Vue”）</h4> <pre><code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="itany"> <button v-on:click='alt'>按钮</button> </div> <script src="js/vue.js"></script> <script> var vm=new Vue({ el:"#itany", data:{ msg:"hello vue", arr:[1,2,3] }, methods:{ alt:function(){ console.log(vm.msg); } } }) </script> </body> </html> </code></pre> <h6>注：<code>数组元素的添加与删除：添加：push（）；删除：splice(index,n) 从哪开始删，删几个；</code> </h6> <h2>4.>v-bind:</h2> <p>(主要用于动态绑定Dom元素属性，v-bind可动态的绑定一个或多个特性，或一个组件prop表达式。)<code>在绑定class或style特性时，支持其他特性的值，如：数组或对象；</code></p> <h6>在绑定prop时，prop必修在子组件中声明；它可以用于修饰符指定不同的绑定类型。没有参数时，可以绑定到一个包含键值对的对象。注意此时class和style绑定不支持数组和对象。</h6> <p>表达式：<code>v-bind：属性名=“值”</code>；（<code>只有函数调用时，函数方可执行</code>）</p> <h3>实例：</h3> <pre><code><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="name"> <img v-bind:src="url" v-on:click="aa"/> </div> <script src="js/vue.min.js"></script> <script> new Vue({ el:"#name", data:{ url:"img/banner_5.jpg", flag:true }, methods:{ aa:function(){ if(this.flag==true){ this.url="img/banner_5.jpg", this.flag=false }else{ this.url="img/banner_1.jpg", this.flag=true } } } }) </script> </body> </html> </code></pre> <h6>注：<code>v-bind的属性名称驼峰化；</code> </h6> <h3>5.>v-show:</h3> <h6>控制元素显示隐藏，与v-if不同的是，使用v-show元素，无论绑定值为true或false，<code>均会渲染并保持在Dom中</code>，绑定值的改变只会切换元素的css属性display；</h6> <h3>实例：</h3> <pre><code><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> li{ list-style: none; width: 100px; height: 100px; background: red; } </style> </head> <body> <div id="name">  <button v-on:click="btn">点击隐藏</button> <li v-show="see"></li> </div> <script src="js/vue.js"></script> <script> new Vue({ el:"#name", data:{ /*msg:"hello vue",*/ see:true }, methods:{ btn:function(){ if(this.see==true){ this.see=false }else{ this.see=true } /* this.see=!this.see*/ } } }) </script> </body> </html> </code></pre> <h1>6.>v-if:</h1> <h5>1.v-if与v-show都是可以根据条件展示元素的一种指令；</h5> <h5>2.当v-if值为true时，显示div；当<code>值为false时</code>，该元素消失，代码也会消失，相当于<code>将代码删除了</code>；当值为true时，页面会重新渲染div；而v-show的值为false时，<code>仍会正常操作，只是将css样式设置为：display：none；</code> </h5> <h2>7.>v-else,v-else-if:</h2> <h6>不需要表达式 `v-else必须有v-if或v-else-if；</h6> <pre><code>if(){} if(){}else{} else...if多重条件语句； </code></pre> <h3>实例：（v-if，v-else,v-else-if随机数效果）</h3> <pre><code><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id='itany'> <p v-if='num==0'>0000000</p> <h3 v-else-if='num==1'>11111</h3> <h3 v-else-if='num==2'>22222</h3> <h3 v-else-if='num==3'>33333</h3> <h3 v-else-if='num==4'>44444</h3> <h1 v-else>5555555</h1> </div> <script src='js/vue.js'> </script> <script type="text/javascript"> new Vue({ el:'#itany', data:{ num:Math.floor(Math.random()*(5-0+1)+0) } }) </script> </body> </html> </code></pre> <h4>效果图：</h4> <div class="image-package"> <div class="image-container" style="max-width: 700px; max-height: 605px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/43254b3c50d94639893f48697e9b934b.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/43254b3c50d94639893f48697e9b934b.jpg" width="650" height="297" alt="Vue-02：_第1张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"> v-if v-else v-else-if.html.png </div> </div> <h1>二：v-for,v-model,v-on综合应用实例：</h1> <pre><code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id='itany'> <input type="text" v-model='txt'> <button v-on:click='add'>添加</button> <ul> <li v-for="(value,index) in arr"> {{value}} <button v-on:click='delt(index)'>删除</button> </li> </ul> </div> <script src='js/vue.js'></script> <script> new Vue({ el:'#itany', data:{ arr:['吃饭','睡觉','打游戏'], txt:'' }, methods:{ add:function(){ this.arr.push(this.txt), this.txt='' }, delt:function(ind){ this.arr.splice(ind,1) } } }) </script> </body> </html> </code></pre> <h4>效果图：</h4> <div class="image-package"> <div class="image-container" style="max-width: 700px; max-height: 605px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/5a7d5a769df14fd89f6043edbc065653.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/5a7d5a769df14fd89f6043edbc065653.jpg" width="650" height="297" alt="Vue-02：_第2张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"> Document.png </div> </div> <h1>三.图片来回切换效果：</h1> <pre><code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> li{ list-style: none; text-align: center; float: left; width: 60px; height: 40px; line-height: 40px; border: 1px solid gray; margin-right: 3px; } </style> </head> <body> <div id="name"> <img v-bind:src="url" alt=""> <ul> <li v-for="(val,index) in list" v-on:click="btn(index)"> {{index+1}} </li> </ul> </div> <script src="../vue.js"></script> <script> new Vue({ el:"#name", data:{ url:"01.jpg", list:["01.jpg","02.jpg","03.jpg","04.jpg","05.jpg"] }, methods:{ btn:function(ind){ this.url=this.list[ind] } } }) </script> </body> </html> </code></pre> <h4>效果图：</h4> <div class="image-package"> <div class="image-container" style="max-width: 700px; max-height: 605px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/cd3a0284acde4bda892a0a19ce94d2ac.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/cd3a0284acde4bda892a0a19ce94d2ac.jpg" width="650" height="297" alt="Vue-02：_第3张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"> Document1.png </div> </div> </article> </div> </div> </div>  <div id="SOHUCS" sid="1401188744773554176"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script>  <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad">  <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div>  <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div>  <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(Vue-02：)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1711735801957658624.htm" title="vue-02" target="_blank">vue-02</a> <span class="text-muted">comTjack</span> <a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a> <div>Vue1.常用命令1.1v-bind用于绑定元素属性1.2v-if现在你看到我了varapp3=newVue({el:'#app-3',data:{seen:true}})Vue会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做除了使Vue变得非常快之外，还有其它一些好处。例如，如果你允许用户在不同的登录方式之间切换：UsernameEmail那么在上面的代码中切换loginTy</div> </li> <li><a href="/article/1633809150855143424.htm" title="Vue-02" target="_blank">Vue-02</a> <span class="text-muted">天青Pppp</span> <div>data属性通过data属性指定自定义组件的初始数据，要求data必须是一个函数，如果不是函数就会报错。Props属性组件可以嵌套使用，叫做父子组件。那么父组件经常要给子组件传递数据这叫做父子组件通信。父子组件的关系可以总结为props向下传递，事件向上传递。父组件通过props给子组件下发数据，子组件通过事件给父组件发送消息。1、在父组件中定义数据2、在使用组件时，绑定父组件中的数据3、在子组件</div> </li> <li><a href="/article/1401188744773554176.htm" title="Vue-02：" target="_blank">Vue-02：</a> <span class="text-muted">OrangeQjt</span> <div>一.Vue的指令：分为两大类；内置指令和自定义指令；今天我们就来学习一下Vue的内置指令；1.>v-for：循环指令（遍历，其意义在于检查集合中的元素并做处理），根据一组数据的选项列表进行渲染；v-for指令主要用于列表渲染；v-for可以遍历数组和对象；eg:{{val}}实例：Document{{msk}}{{a}}{{i}}{{index}}--{{val}}{{ins}}--{{value</div> </li> <li><a href="/article/1278221566349426688.htm" title="vue-02" target="_blank">vue-02</a> <span class="text-muted">XiangChiZhaJi</span> <a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a> <div>常用特性概览表单操作双向绑定+阻止表单的默认提交默认选中value为1的爱好复选框应该用数组表示下拉选项添加mutipily=true可以多选数据要是数组形式表单域修饰符这时候做的是字符串的拼接默认触发的input事件，输入文字发生变化，change是失去焦点，发生改变，可以用在验证过程自定义指令带参数的指令打印binding所以这样可以得到orange这是可以修改data里的颜色来修改颜色了局部</div> </li> <li><a href="/article/1175714563677564928.htm" title="vue-02：vue常见属性" target="_blank">vue-02：vue常见属性</a> <span class="text-muted">CoderYin</span> <a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a> <div>vue-02：vue常见属性参考博客：咸鱼最牛逼地址：https://blog.csdn.net/panchang199266?utm_source=feed一、vue属性集合1、属性集合：v-bind、v-if、v-else-if、v-else、v-for、v-html、v-model、v-on、v-once、v-pre、v-show、v-text2、v-bind(简写:)/html/text：</div> </li> <li><a href="/article/26.htm" title="设计模式介绍" target="_blank">设计模式介绍</a> <span class="text-muted">tntxia</span> <a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a> <div>设计模式来源于土木工程师克里斯托弗亚历山大（http://en.wikipedia.org/wiki/Christopher_Alexander）的早期作品。他经常发表一些作品，内容是总结他在解决设计问题方面的经验，以及这些知识与城市和建筑模式之间有何关联。有一天，亚历山大突然发现，重复使用这些模式可以让某些设计构造取得我们期望的最佳效果。亚历山大与萨拉-石川佳纯和穆雷西乐弗斯坦合作</div> </li> <li><a href="/article/153.htm" title="android高级组件使用(一)" target="_blank">android高级组件使用(一)</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/RatingBar/1.htm">RatingBar</a><a class="tag" taget="_blank" href="/search/Spinner/1.htm">Spinner</a> <div>1、自动完成文本框（AutoCompleteTextView） AutoCompleteTextView从EditText派生出来，实际上也是一个文本编辑框，但它比普通编辑框多一个功能：当用户输入一个字符后，自动完成文本框会显示一个下拉菜单，供用户从中选择，当用户选择某个菜单项之后，AutoCompleteTextView按用户选择自动填写该文本框。使用AutoCompleteTex</div> </li> <li><a href="/article/280.htm" title="[网络与通讯]路由器市场大有潜力可挖掘" target="_blank">[网络与通讯]路由器市场大有潜力可挖掘</a> <span class="text-muted">comsci</span> <a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a> <div> 如果国内的电子厂商和计算机设备厂商觉得手机市场已经有点饱和了,那么可以考虑一下交换机和路由器市场的进入问题..... 这方面的技术和知识,目前处在一个开放型的状态,有利于各类小型电子企业进入 &nbs</div> </li> <li><a href="/article/407.htm" title="自写简单Redis内存统计shell" target="_blank">自写简单Redis内存统计shell</a> <span class="text-muted">商人shang</span> <a class="tag" taget="_blank" href="/search/Linux+shell/1.htm">Linux shell</a><a class="tag" taget="_blank" href="/search/%E7%BB%9F%E8%AE%A1Redis%E5%86%85%E5%AD%98/1.htm">统计Redis内存</a> <div>#!/bin/bash address="192.168.150.128:6666,192.168.150.128:6666" hosts=(${address//,/ }) sfile="staticts.log" for hostitem in ${hosts[@]} do ipport=(${hostitem</div> </li> <li><a href="/article/534.htm" title="单例模式(饿汉 vs懒汉)" target="_blank">单例模式(饿汉 vs懒汉)</a> <span class="text-muted">oloz</span> <a class="tag" taget="_blank" href="/search/%E5%8D%95%E4%BE%8B%E6%A8%A1%E5%BC%8F/1.htm">单例模式</a> <div>package 单例模式; /* * 应用场景:保证在整个应用之中某个对象的实例只有一个 * 单例模式种的《懒汉模式》 * */ public class Singleton { //01 将构造方法私有化，外界就无法用new Singleton()的方式获得实例 private Singleton(){}; //02 申明类得唯一实例 priva</div> </li> <li><a href="/article/661.htm" title="springMvc json支持" target="_blank">springMvc json支持</a> <span class="text-muted">杨白白</span> <a class="tag" taget="_blank" href="/search/json+springmvc/1.htm">json springmvc</a> <div>1.Spring mvc处理json需要使用jackson的类库，因此需要先引入jackson包 2在spring mvc中解析输入为json格式的数据:使用@RequestBody来设置输入 @RequestMapping("helloJson") public @ResponseBody JsonTest helloJson() { </div> </li> <li><a href="/article/788.htm" title="android播放，掃描添加本地音頻文件" target="_blank">android播放，掃描添加本地音頻文件</a> <span class="text-muted">小桔子</span> <div> 最近幾乎沒有什麽事情，繼續鼓搗我的小東西。想在項目中加入一個簡易的音樂播放器功能，就像華為p6桌面上那麼大小的音樂播放器。用過天天動聽或者QQ音樂播放器的人都知道，可已通過本地掃描添加歌曲。不知道他們是怎麼實現的，我覺得應該掃描設備上的所有文件，過濾出音頻文件，每個文件實例化為一個實體，記錄文件名、路徑、歌手、類型、大小等信息。具體算法思想，</div> </li> <li><a href="/article/915.htm" title="oracle常用命令" target="_blank">oracle常用命令</a> <span class="text-muted">aichenglong</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/dba/1.htm">dba</a><a class="tag" taget="_blank" href="/search/%E5%B8%B8%E7%94%A8%E5%91%BD%E4%BB%A4/1.htm">常用命令</a> <div>1 创建临时表空间 create temporary tablespace user_temp tempfile 'D:\oracle\oradata\Oracle9i\user_temp.dbf' size 50m autoextend on next 50m maxsize 20480m extent management local</div> </li> <li><a href="/article/1042.htm" title="25个Eclipse插件" target="_blank">25个Eclipse插件</a> <span class="text-muted">AILIKES</span> <a class="tag" taget="_blank" href="/search/eclipse%E6%8F%92%E4%BB%B6/1.htm">eclipse插件</a> <div>提高代码质量的插件1. FindBugsFindBugs可以帮你找到Java代码中的bug，它使用Lesser GNU Public License的自由软件许可。2. CheckstyleCheckstyle插件可以集成到Eclipse IDE中去，能确保Java代码遵循标准代码样式。3. ECLemmaECLemma是一款拥有Eclipse Public License许可的免费工具，它提供了</div> </li> <li><a href="/article/1169.htm" title="Spring MVC拦截器+注解方式实现防止表单重复提交" target="_blank">Spring MVC拦截器+注解方式实现防止表单重复提交</a> <span class="text-muted">baalwolf</span> <a class="tag" taget="_blank" href="/search/spring+mvc/1.htm">spring mvc</a> <div>原理：在新建页面中Session保存token随机码，当保存时验证，通过后删除，当再次点击保存时由于服务器端的Session中已经不存在了，所有无法验证通过。 1.新建注解： ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 </div> </li> <li><a href="/article/1296.htm" title="《Javascript高级程序设计(第3版)》闭包理解" target="_blank">《Javascript高级程序设计(第3版)》闭包理解</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a> <div>“闭包是指有权访问另一个函数作用域中的变量的函数。”--《Javascript高级程序设计(第3版)》看以下代码： <script type="text/javascript"> function outer() { var i = 10; return f</div> </li> <li><a href="/article/1423.htm" title="AngularJS Module类的方法" target="_blank">AngularJS Module类的方法</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/AngularJS/1.htm">AngularJS</a><a class="tag" taget="_blank" href="/search/Module/1.htm">Module</a> <div> AngularJS中的Module类负责定义应用如何启动，它还可以通过声明的方式定义应用中的各个片段。我们来看看它是如何实现这些功能的。一.Main方法在哪里如果你是从Java或者Python编程语言转过来的，那么你可能很想知道AngularJS里面的main方法在哪里？这个把所</div> </li> <li><a href="/article/1550.htm" title="[Maven学习笔记七]Maven插件和目标" target="_blank">[Maven学习笔记七]Maven插件和目标</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/maven%E6%8F%92%E4%BB%B6/1.htm">maven插件</a> <div>插件(plugin)和目标(goal) Maven，就其本质而言，是一个插件执行框架，Maven的每个目标的执行逻辑都是由插件来完成的，一个插件可以有1个或者几个目标，比如maven-compiler-plugin插件包含compile和testCompile，即maven-compiler-plugin提供了源代码编译和测试源代码编译的两个目标使用插件和目标使得我们可以干预</div> </li> <li><a href="/article/1677.htm" title="【Hadoop八】Yarn的资源调度策略" target="_blank">【Hadoop八】Yarn的资源调度策略</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/hadoop/1.htm">hadoop</a> <div>1. Hadoop的三种调度策略 Hadoop提供了3中作业调用的策略， FIFO Scheduler Fair Scheduler Capacity Scheduler 以上三种调度算法，在Hadoop MR1中就引入了，在Yarn中对它们进行了改进和完善.Fair和Capacity Scheduler用于多用户共享的资源调度 2. 多用户资源共享的调度 </div> </li> <li><a href="/article/1804.htm" title="Nginx使用Linux内存加速静态文件访问" target="_blank">Nginx使用Linux内存加速静态文件访问</a> <span class="text-muted">ronin47</span> <div>Nginx是一个非常出色的静态资源web服务器。如果你嫌它还不够快，可以把放在磁盘中的文件，映射到内存中，减少高并发下的磁盘IO。先做几个假设。nginx.conf中所配置站点的路径是/home/wwwroot/res，站点所对应文件原始存储路径：/opt/web/res shell脚本非常简单，思路就是拷贝资源文件到内存中，然后在把网站的静态文件链接指向到内存中即可。具体如下： </div> </li> <li><a href="/article/1931.htm" title="关于Unity3D中的Shader的知识" target="_blank">关于Unity3D中的Shader的知识</a> <span class="text-muted">brotherlamp</span> <a class="tag" taget="_blank" href="/search/unity/1.htm">unity</a><a class="tag" taget="_blank" href="/search/unity%E8%B5%84%E6%96%99/1.htm">unity资料</a><a class="tag" taget="_blank" href="/search/unity%E6%95%99%E7%A8%8B/1.htm">unity教程</a><a class="tag" taget="_blank" href="/search/unity%E8%A7%86%E9%A2%91/1.htm">unity视频</a><a class="tag" taget="_blank" href="/search/unity%E8%87%AA%E5%AD%A6/1.htm">unity自学</a> <div>首先先解释下Unity3D的Shader，Unity里面的Shaders是使用一种叫ShaderLab的语言编写的，它同微软的FX文件或者NVIDIA的CgFX有些类似。传统意义上的vertex shader和pixel shader还是使用标准的Cg/HLSL 编程语言编写的。因此Unity文档里面的Shader，都是指用ShaderLab编写的代码，然后我们来看下Unity3D自带的60多个S</div> </li> <li><a href="/article/2058.htm" title="CopyOnWriteArrayList vs ArrayList" target="_blank">CopyOnWriteArrayList vs ArrayList</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>package com.ljn.base; import java.util.ArrayList; import java.util.Iterator; import java.util.List; import java.util.concurrent.CopyOnWriteArrayList; /** * 总述： * 1.ArrayListi不是线程安全的，CopyO</div> </li> <li><a href="/article/2185.htm" title="内存中栈和堆的区别" target="_blank">内存中栈和堆的区别</a> <span class="text-muted">chicony</span> <a class="tag" taget="_blank" href="/search/%E5%86%85%E5%AD%98/1.htm">内存</a> <div> 1、内存分配方面：堆：一般由程序员分配释放，若程序员不释放，程序结束时可能由OS回收。注意它与数据结构中的堆是两回事，分配方式是类似于链表。可能用到的关键字如下：new、malloc、delete、free等等。栈：由编译器(Compiler)自动分配释放，存放函数的参数值，局部变量的值等。其操作方式类似于数据结构中</div> </li> <li><a href="/article/2312.htm" title="回答一位网友对Scala的提问" target="_blank">回答一位网友对Scala的提问</a> <span class="text-muted">chenchao051</span> <a class="tag" taget="_blank" href="/search/scala/1.htm">scala</a><a class="tag" taget="_blank" href="/search/map/1.htm">map</a> <div>本来准备在私信里直接回复了，但是发现不太方便，就简要回答在这里。问题写道对于scala的简洁十分佩服，但又觉得比较晦涩，例如一例，Map("a" -> List(11,111)).flatMap(_._2)，可否说下最后那个函数做了什么，真正在开发的时候也会如此简洁？谢谢先回答一点，在实际使用中，Scala毫无疑问就是这么简单。</div> </li> <li><a href="/article/2439.htm" title="mysql 取每组前几条记录" target="_blank">mysql 取每组前几条记录</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/%E5%88%86%E7%BB%84/1.htm">分组</a><a class="tag" taget="_blank" href="/search/%E6%9C%80%E5%A4%A7%E5%80%BC/1.htm">最大值</a><a class="tag" taget="_blank" href="/search/%E6%9C%80%E5%B0%8F%E5%80%BC/1.htm">最小值</a><a class="tag" taget="_blank" href="/search/%E6%AF%8F%E7%BB%84%E4%B8%89%E6%9D%A1%E8%AE%B0%E5%BD%95/1.htm">每组三条记录</a> <div>一、对分组的记录取前N条记录：例如：取每组的前3条最大的记录 1.用子查询： SELECT * FROM tableName a WHERE 3> (SELECT COUNT(*) FROM tableName b WHERE b.id=a.id AND b.cnt>a. cnt) ORDER BY a.id,a.account DE</div> </li> <li><a href="/article/2566.htm" title="HTTP深入浅出 http请求" target="_blank">HTTP深入浅出 http请求</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/http/1.htm">http</a> <div> HTTP(HyperText Transfer Protocol)是一套计算机通过网络进行通信的规则。计算机专家设计出HTTP，使HTTP客户（如Web浏览器）能够从HTTP服务器(Web服务器)请求信息和服务，HTTP目前协议的版本是1.1.HTTP是一种无状态的协议，无状态是指Web浏览器和Web服务器之间不需要建立持久的连接，这意味着当一个客户端向服务器端发出请求，然后We</div> </li> <li><a href="/article/2693.htm" title="判断MySQL记录是否存在方法比较" target="_blank">判断MySQL记录是否存在方法比较</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div>把数据写入到数据库的时，常常会碰到先要检测要插入的记录是否存在，然后决定是否要写入。　　我这里总结了判断记录是否存在的常用方法：　　sql语句： select count ( * ) from tablename; 　　然后读取count(*)的值判断记录是否存在。对于这种方法性能上有些浪费，我们只是想判断记录记录是否存在，没有必要全部都查出来。</div> </li> <li><a href="/article/2820.htm" title="对HTML XML的一点认识" target="_blank">对HTML XML的一点认识</a> <span class="text-muted">e200702084</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a> <div>感谢http://www.w3school.com.cn提供的资料 HTML 文档中的每个成分都是一个节点。节点根据 DOM，HTML 文档中的每个成分都是一个节点。 DOM 是这样规定的：整个文档是一个文档节点每个 HTML 标签是一个元素节点包含在 HTML 元素中的文本是文本节点每一个 HTML 属性是一个属性节点注释属于注释节点 Node 层次 </div> </li> <li><a href="/article/2947.htm" title="jquery分页插件" target="_blank">jquery分页插件</a> <span class="text-muted">genaiwei</span> <a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%88%86%E9%A1%B5/1.htm">分页</a><a class="tag" taget="_blank" href="/search/%E6%8F%92%E4%BB%B6/1.htm">插件</a> <div>//jquery页码控件// 创建一个闭包 (function($) { // 插件的定义 $.fn.pageTool = function(options) { var totalPa</div> </li> <li><a href="/article/3201.htm" title="Mybatis与Ibatis对照入门于学习" target="_blank">Mybatis与Ibatis对照入门于学习</a> <span class="text-muted">Josh_Persistence</span> <a class="tag" taget="_blank" href="/search/mybatis/1.htm">mybatis</a><a class="tag" taget="_blank" href="/search/ibatis/1.htm">ibatis</a><a class="tag" taget="_blank" href="/search/%E5%8C%BA%E5%88%AB/1.htm">区别</a><a class="tag" taget="_blank" href="/search/%E8%81%94%E7%B3%BB/1.htm">联系</a> <div>一、为什么使用IBatis/Mybatis 对于从事 Java EE 的开发人员来说，iBatis 是一个再熟悉不过的持久层框架了，在 Hibernate、JPA 这样的一站式对象 / 关系映射（O/R Mapping）解决方案盛行之前，iBaits 基本是持久层框架的不二选择。即使在持久层框架层出不穷的今天，iBatis 凭借着易学易用、</div> </li> <li><a href="/article/3328.htm" title="C中怎样合理决定使用那种整数类型？" target="_blank">C中怎样合理决定使用那种整数类型？</a> <span class="text-muted">秋风扫落叶</span> <a class="tag" taget="_blank" href="/search/c/1.htm">c</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B/1.htm">数据类型</a> <div>如果需要大数值(大于32767或小于32767), 使用long 型。否则, 如果空间很重要 (如有大数组或很多结构), 使用 short 型。除此之外, 就使用 int 型。如果严格定义的溢出特征很重要而负值无关紧要, 或者你希望在操作二进制位和字节时避免符号扩展的问题, 请使用对应的无符号类型。但是, 要注意在表达式中混用有符号和无符号值的情况。 &nbs</div> </li> <li><a href="/article/3455.htm" title="maven问题" target="_blank">maven问题</a> <span class="text-muted">zhb8015</span> <a class="tag" taget="_blank" href="/search/maven%E9%97%AE%E9%A2%98/1.htm">maven问题</a> <div> 问题1： Eclipse 中新建maven项目无法添加src/main/java 问题 eclipse创建maevn web项目，在选择maven_archetype_web原型后，默认只有src/main/resources这个Source Floder。按照maven目录结构，添加src/main/ja</div> </li> <li><a href="/article/3582.htm" title="(二)androidpn-server tomcat版源码解析之--push消息处理" target="_blank">(二)androidpn-server tomcat版源码解析之--push消息处理</a> <span class="text-muted">spjich</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/androdipn/1.htm">androdipn</a><a class="tag" taget="_blank" href="/search/%E6%8E%A8%E9%80%81/1.htm">推送</a> <div>在 (一)androidpn-server tomcat版源码解析之--项目启动这篇中，已经描述了整个推送服务器的启动过程，并且把握到了消息的入口即XmppIoHandler这个类，今天我将继续往下分析下面的核心代码，主要分为3大块，链接创建，消息的发送，链接关闭。先贴一段XmppIoHandler的部分代码 /** * Invoked from an I/O proc</div> </li> <li><a href="/article/3709.htm" title="用js中的formData类型解决ajax提交表单时文件不能被serialize方法序列化的问题" target="_blank">用js中的formData类型解决ajax提交表单时文件不能被serialize方法序列化的问题</a> <span class="text-muted">中华好儿孙</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/Ajax/1.htm">Ajax</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/%E4%B8%8A%E4%BC%A0%E6%96%87%E4%BB%B6/1.htm">上传文件</a><a class="tag" taget="_blank" href="/search/FormData/1.htm">FormData</a> <div> var formData = new FormData($("#inputFileForm")[0]); $.ajax({ type:'post', url:webRoot+"/electronicContractUrl/webapp/uploadfile", data:formData, async: false, ca</div> </li> <li><a href="/article/3836.htm" title="mybatis常用jdbcType数据类型" target="_blank">mybatis常用jdbcType数据类型</a> <span class="text-muted">ysj5125094</span> <a class="tag" taget="_blank" href="/search/mybatis/1.htm">mybatis</a><a class="tag" taget="_blank" href="/search/mapper/1.htm">mapper</a><a class="tag" taget="_blank" href="/search/jdbcType/1.htm">jdbcType</a> <div> MyBatis 通过包含的jdbcType 类型 BIT FLOAT CHAR </div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> <strong>按字母分类：</strong> <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a> </div> </div> </div> <footer id="footer" class="mb30 mt30"> <div class="container"> <div class="footBglm"> <a target="_blank" href="/">首页</a> - <a target="_blank" href="/custom/about.htm">关于我们</a> - <a target="_blank" href="/search/Java/1.htm">站内搜索</a> - <a target="_blank" href="/sitemap.txt">Sitemap</a> - <a target="_blank" href="/custom/delete.htm">侵权投诉</a> </div> <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.  </div> </div> </footer>  <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html>