Vue开篇-vue指令（第一天）

1.什么是Vue?

Vue. js 是一套构建用户界面的框架﹐它不仅易于上手，还可以与其它第三方库整合(Swiner、IScroll、...).

2.框架和库的区别?

框架:是一套完整的解决方案;对项目的侵入性较大，项目如果需要更换框架，则需要重构整个项目.
库（插件):提供某一个小功能，对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其它库,例如:

从jQuery 切换到 Zepto，无缝切换
从IScroll切换到ScrollMagic，只需要将用到IScroll的代码替换成ScrollMagic代码即可

3.为什么要学习框架?

提升开发效率:在企业中，时间就是效率，效率就是金钱;
前端提高开发效率的发展历程:
原生JS -〉jQuery之类的类库 -〉前端模板引擎-〉Vue / React / Angular

(二）使用Vue
2.Vue框架使用步骤

2.1下载Vue框架
2.2导入Vue框架
2.3创建Vue实例对象
2.4指定Vue实例对象控制的区域
2.5指定Vue实例对象控制区域的数据

    //1.导入vue.js

MVVM模式

MVVM设计模式
在MVVM设计模式中由3个部分组成
M : Model 数据模型(保存数据,处理数据业务逻辑)
V : View 视图(展示数据，与用户交互)
VM: View Model 数据模型和视图的桥梁(M是中国人，V是美国人，VM就是翻译）
MVVM设计模式最大的特点就是支持数据的双向传递——数据可以从M->VM->V，也可以从 V -〉VM->M。

Vue的数据为单向传递

Vue的数据交给Vue实例对象，Vue实例对象将数据交给Vue控制区域即“视图”部分
M->VM->V(Vue默认情况下数据为单向传递)

Vue 数据双向传递

2.数据双向绑定
默认情况下Vue只支持数据单向传递 M -> VM -> V
但是由于Vue是基于MVVM设计模式的, 所以也提供了双向传递的能力,但是只能在、</code>及<code><select></code>元素上可以用 v-model 指令创建双向数据绑定</p> <pre><code class="html"> <div id="app"> <p>{{ name }}</p> <input type="text" v-model="msg"> </div> <script> // 这里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 这里就是MVVM中的Model data: { name: "yiiya", msg: "华中师范大学" } }); </script> </code></pre> <p><strong>【注意点】</strong>:<code>v-model</code>会忽略所有表单元素的 <code>value</code>、<code>checked</code>、<code>selected</code> 特性的初始值，而总是将 Vue 实例的数据作为数据来源</p> <h6>chorme安装Vue调试工具</h6> <p><strong>1.Vue调试工具安装</strong><br> 如果你能打开谷歌插件商店, 直接在线安装即可<br> https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=zh-CN</p> <p>由于国内无法打开谷歌国外插件商店, 所以可以离线安装<br> https://www.chromefor.com/vue-js-devtools_v5-3-0/</p> <p><strong>2.安装步骤:</strong><br> 2.1下载离线安装包<br> 2.2打开谷歌插件界面<br> 2.3直接将插件拖入<br> 2.4报错程序包无效: "CRX_HEADER_INVALID"<br> 可以将安装包修改为rar后缀, 解压之后再安装<br> 2.5重启浏览器</p> <h5>Vue指令</h5> <p>1.什么是指令?</p> <blockquote> <p>指令就是Vue内部提供的一些自定义属性,<br> 这些属性中封装好了Vue内部实现的一些功能<br> 只要使用这些指令就可以使用Vue中实现的这些功能</p> </blockquote> <p>2.Vue数据绑定的特点</p> <blockquote> <p>只要数据发生变化, 界面就会跟着变化</p> </blockquote> <p><strong><code>vue-once</code>指令</strong>:<br> 让界面不要跟着数据变化, 只渲染一次</p> <p><strong><code>vue-cloak</code>指令</strong></p> <p><em>1.Vue数据绑定过程</em></p> <ul> <li>1.1会先将未绑定数据的界面展示给用户</li> <li>1.2然后再根据模型中的数据和控制的区域生成绑定数据之后的HTML代码</li> <li>1.3最后再将绑定数据之后的HTML渲染到界面上</li> </ul> <p>正是在最终的HTML被生成渲染之前会先显示模板内容<br> 所以如果用户网络比较慢或者网页性能比较差, 那么用户会看到模板内容</p> <p><em>2.如何解决这个问题？</em><br> 利用v-cloak配合 [v-cloak]:{display: none}默认先隐藏未渲染的界面<br> 等到生成HTML渲染之后再重新显示</p> <p><em>3.v-cloak指令作用:</em><br> 数据渲染之后自动显示元素</p> <p><em>4.<code>v-text指令</code></em><br> 1.什么是v-text指令<br> v-text就相当于过去学习的innerText</p> <p><em>5.<code>v-html指令</code></em><br> 2.什么是v-html指令<br> v-html就相当于过去学习的innerHTML</p> <p><em>6.<code>v-if指令</code></em></p> <ul> <li>1.什么是v-if指令</li> <li>条件渲染: 如果v-if取值是true就渲染元素, 如果不是就不渲染元素<br> 2.v-if特点:</li> <li>如果条件不满足根本就不会创建这个元素(重点)<br> 3.v-if注意点</li> <li>v-if可以从模型中获取数据</li> <li>v-if也可以直接赋值一个表达式<br> 4.v-else指令</li> <li>v-else指令可以和v-if指令配合使用, 当v-if不满足条件时就执行v-else就显示v-else中的内容<br> 5.v-else注意点</li> <li>v-else不能单独出现</li> <li>v-if和v-else中间不能出现其它内容<br> 6.v-else-if指令<br> v-else-if可以和v-if指令配合使用, 当v-if不满足条件时就依次执行后续v-else-if, 哪个满足就显示哪个<br> 7.v-else-if注意点<br> 和v-else一样</li> </ul> <p><strong>7.<code>v-show指令</code></strong><br> <em>1.什么是v-show指令</em><br> v-show和v-if的能够一样都是条件渲染, 取值为true就显示, 取值为false就不显示</p> <p><strong>2.v-if和v-show区别</strong></p> <blockquote> <p>v-if: 只要取值为false就不会创建元素<br> v-show: 哪怕取值为false也会创建元素, 只是如果取值是false会设置元素的display为none</p> </blockquote> <p><strong>3.v-if和v-show应用场景</strong></p> <blockquote> <p>由于取值为false时v-if不会创建元素, 所以如果需要切换元素的显示和隐藏, 每次v-if都会创建和删除元素<br> 由于取值为false时v-show会创建元素并设置display为none, 所有如果需要切换元素的显示和隐藏,<br> 不会反复创建和删除, 只是修改display的值</p> </blockquote> <blockquote> <p>所以: 如果企业开发中需要频繁切换元素显示隐藏, 那么推荐使用v-show, 否则使用v-if</p> </blockquote> <p><strong>9.<code>v-for指令</code></strong><br> 1.什么是v-for指令<br> 相当于JS中的for in循环, 可以根据数据多次渲染元素<br> 2.v-for特点<br> 可以遍历数组, 字符, 数字, 对象</p> <pre><code class="html">//数组遍历： <li v-for="(value, index) in list">{{index}}---{{value}}</li> //对象遍历 <li v-for="(value, key) in obj">{{key}}---{{value}}</li> </code></pre> <p><strong>10.<code>v-bind指令</code></strong><br> <em>1.什么是v-bind指令</em></p> <ul> <li>在企业开发中想要给"元素"绑定数据, 我们可以使用{{}}, v-text, v-html，但是如果想给"元素的属性"绑定数据, 就必须使用v-bind<br> 所以v-bind的作用是专门用于给"元素的属性"绑定数据的</li> </ul> <p><em>2.v-bind格式</em></p> <ul> <li>v-bind:属性名称="绑定的数据"<br> :属性名称="绑定的数据"</li> </ul> <p>3.v-bind特点</p> <ul> <li>赋值的数据可以是任意一个合法的JS表达式<br> 例如: :属性名称="age + 1"</li> </ul> <blockquote> <p>注意点: 如果要给元素的属性绑定数据, 那么是不能够使用插值语法<br> <input type="text" value="{{name}}">//报错<br> 注意点: 虽然通过v-model可以将数据绑定到input标签的value属性上, 但是v-model是有局限性的, v-model只能用于input/textarea/select<br> 但是在企业开发中我们还可能需要给其它标签的属性绑定数据</p> </blockquote> <pre><code class="html"> <div id="app">    注意点: 虽然通过v-model可以将数据绑定到input标签的value属性上, 但是v-model是有局限性的, v-model只能用于input/textarea/select，但是在企业开发中我们还可能需要给其它标签的属性绑定数据 <input type="text" v-model="name"> <input type="text" v-bind:value="name"> <input type="text" :value="name"> <input type="text" :value="age + 1"> </div> <script> // 这里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 这里就是MVVM中的Model data: { name: "咿呀", age: 18 } }); </script> </code></pre> <p><strong>11 <code>v-bind指令绑定类名</code></strong><br> 1.如何通过v-bind给style属性绑定数据<br> 1.1将数据放到对象中</p> <pre><code class="vue">:style="{color:'red','font-size':'50px'}" </code></pre> <p>1.2将数据放到Model对象中</p> <pre><code class="javacsript">obj: { color: 'red', 'font-size': '80px', } </code></pre> <p><strong>2.注意点</strong></p> <blockquote> <p>2.1 如果属性名称包含-, 那么必须用引号括起来<br> 2.2 如果需要绑定Model中的多个对象, 可以放到一个数组中赋值<br> 2.3 和绑定类名一样, 默认情况下v-bind回去Model中查找, 找不到所以没有效果<br> 2.4 我们只需要将样式代码放到对象中赋值给style即可,但是取值必须用引号括起来</p> </blockquote> <pre><code class="html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue指令</title> <script src="vue.js"></script> <style> *{ margin: 0; padding: 0; } .a{ background-color: #77ff44; } .active{ background-color: #4D7AA0; } .size{ font-style: italic; } </style> </head> <body> <div id="app"> <p v-bind:class="obj1">{{name}}</p> <p v-bind:class="['a','size']">{{name}}</p> <p :class="obj1">{{name}}</p> <p :class="['a','size']">{{name}}</p> <p :class="age>18?['b','size']:''">{{name}}</p> <p :style="{color:'red'}">{{name}}</p> <p :style="{color:'red','font-size':'32px'}">{{name}}</p> <p :style="obj2">{{name}}</p> <p :style="{color:'red','font-size':'32px'}">{{name}}</p> <p :style="[obj3,obj2]">{{name}}</p> <input type="text" v-model="age"> <input type="text" :value="age"> </div> <script> let vue=new Vue( { el:"#app", data:{ name:"shanjialan", age:20, obj1:{ 'active':true, 'size':true, }, obj2:{ 'color':'blue', 'font-size':'54px', 'background-color':'yellow' }, obj3:{ 'border':'solid 5px black' } } } ) </script> </body> </html> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 700px; max-height: 438px;"> <div class="image-view"> </div> </div> <div class="image-caption"> 运行截图.png </div> </div> <p><strong>12. <code>v-on指令</code></strong><br> <em>1. 什么是v-on指令?</em><br> v-on指令专门用于给元素绑定监听事件</p> <p><em>2. v-on指令格式</em><br> v-on:事件名称="回调函数名称"<br> @事件名称="回调函数名称"</p> <p><em>3. v-on注意点:</em><br> v-on绑定的事件被触发之后, 会去Vue实例对象的methods中查找对应的回调函数</p> <pre><code class="html"><button onclick="alert('单佳兰')">我是按钮</button> </code></pre> <p><strong>1.如果是通过v-on来绑定监听事件, 那么在指定事件名称的时候不需要写on<br> 2.如果是通过v-on来绑定监听事件, 那么在赋值的时候必须赋值一个回调函数的名称</strong></p> <pre><code class="html"><button v-on:click="myFn">我是按钮</button> <script> // 这里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 这里就是MVVM中的Model data: { }, methods: { myFn(){ alert('单佳兰'); } } }); </script> </code></pre> <p><strong>常用指令-v-on修饰符</strong><br> <em>1.v-on修饰符</em><br> 在事件中有很多东西需要我们处理, 例如事件冒泡,事件捕获, 阻止默认行为等<br> 那么在Vue中如何处理以上内容呢, 我们可以通过v-on修饰符来处理</p> <p>2.常见修饰符<br> <code>.once</code> - 只触发一次回调。<br> <code>.prevent</code> - 调用 <code>event.preventDefault()</code>。<br> <code>.stop</code> - 调用<code>event.stopPropagation()</code>。<br> <code>.self</code> - 只当事件是从侦听器绑定的元素本身触发时才触发回调。<br> <code>.capture</code> - 添加事件侦听器时使用 <code>capture</code> 模式。</p> <pre><code class="html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-on</title> <script src="vue.js"></script> <style> *{ margin: 0; padding: 0px; } .grandfather{ width: 300px; height: 300px; background-color: red; } .father{ width: 200px; height: 200px; background-color: aquamarine; } .son{ width: 100px; height: 100px; background-color: blue; } </style> </head> <body> <div id="app">    <a href="https://fanyi.baidu.com/translate?aldtype=16047&query=&keyfrom=baidu&smartresult=dict&lang=auto2zh#zh/en/%E5%8D%81%E4%B8%80%E6%9C%88" v-on:click.prevent="myFn">百度</a> <p v-on:click="myFn">华中师范大学信息管理学院</p> <p @:click="myFn">华中师范大学信息管理学院</p> <div class="grandfather" v-on:click="myFn1"> <div class="father" v-on:click="myFn2"> <div class="son" v-on:click="myFn3"></div> </div> </div> </div> <script> let vue=new Vue({ el:'#app', data:{ name:'Shanjialan', age:19 }, methods:{ myFn(){ console.log("单佳兰加油嘻嘻11111"); }, myFn1(){ console.log("单佳兰加油嘻嘻22222"); }, myFn2(){ console.log("单佳兰加油嘻嘻33333"); }, myFn3(){ console.log("单佳兰加油嘻嘻44444"); }, } }); </script> </body> </html> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 700px; max-height: 475px;"> <div class="image-view"> </div> </div> <div class="image-caption"> 点击son的运行截图.png </div> </div> <pre><code class="html"> 阻止事件冒泡 <div class="grandfather" v-on:click.stop="myFn1"> <div class="father" v-on:click.stop="myFn2"> <div class="son" v-on:click.stop="myFn3"></div> </div> </div> </code></pre> <p></p> <div class="image-package"> <div class="image-container" style="max-width: 700px; max-height: 362px;"> <div class="image-view"> </div> </div> <div class="image-caption"> 点击son的运行截图.png </div> </div> <br> <strong>事件捕获</strong> <p></p> <pre><code class="html"> <div class="grandfather" v-on:click.capture="myFn1"> <div class="father" v-on:click.capture="myFn2"> <div class="son" v-on:click.capture="myFn3"></div> </div> </div> </code></pre> <p><strong>v-on注意点</strong></p> <pre><code class="html"><div id="app"> <p @click="myFn4('shanjialan',19,$event)">点击试试看</p> </div> <script> let vue=new Vue({ el:'#app', data:{ name:'Shanjialan', age:19 }, methods:{ myFn4(name,age,event){ console.log(name,age,event); console.log(this.name); } } }); </script> </code></pre> <p></p> <div class="image-package"> <div class="image-container" style="max-width: 700px; max-height: 417px;"> <div class="image-view"> </div> </div> <div class="image-caption"> image.png </div> </div> <br> <strong>1.v-on注意点</strong> <p></p> <ul> <li><p>1.1绑定回调函数名称的时候, 后面可以写()也可以不写<br> v-on:click="myFn"<br> v-on:click="myFn()"</p></li> <li><p>1.2可以给绑定的回调函数传递参数<br> v-on:click="myFn('shanjialan', 19)"</p></li> </ul> <ul> <li>1.3如果在绑定的函数中需要用到data中的数据必须加上this</li> </ul> <p><strong>按键修饰符</strong></p> <ul> <li>1.什么是按键修饰符<br> 我们可以通过按键修饰符监听特定按键触发的事件<br> 例如: 可以监听当前事件是否是回车触发的, 可以监听当前事件是否是ESC触发的等</li> </ul> <pre><code class="html"> <input @keyup.Q="myFn">按键修饰符</input> <input @keyup.enter="myFn">按键修饰符</input> <input @keyup.f2="myFn">按键修饰符</input> </code></pre> <ul> <li>2.按键修饰符分类<br> 2.1系统预定义修饰符<br> 2.2自定义修饰符</li> </ul> <pre><code class="javascript"> Vue.config.keyCodes.f2=113; </code></pre> <p><strong>13. <code>vue自定义指令</code></strong><br> 1.自定义全局指令<br> 在Vue中除了可以使用Vue内置的一些指令以外, 我们还可以自定义指令</p> <p>2.自定义全局指令语法<br> vue.directive('自定义指令名称', {<br> 生命周期名称: function (el) {<br> 指令业务逻辑代码<br> }<br> });</p> <p>3.指令生命周期方法<br> 自定义指令时一定要明确指令的业务逻辑代码更适合在哪个阶段执行<br> 例如: 指令业务逻辑代码中没有用到元素事件, 那么可以在bind阶段执行<br> 例如: 指令业务逻辑代码中用到了元素事件, 那么就需要在inserted阶段执行</p> <p>4.自定义指令注意点<br> 使用时需要加上v-, 而在自定义时不需要加上v-</p> <pre><code class="html"> <input type="text" v-focus> <p v-color>我的世界</p> </code></pre> <pre><code class="javascript"> Vue.directive("color", { // 这里的el就是被绑定指令的那个元素 bind: function (el) { el.style.color = "red"; } }); Vue.directive("focus", { // 这里的el就是被绑定指令的那个元素 inserted: function (el) { el.focus(); } }); </code></pre> <blockquote> <p>directive方法接收两个参数<br> 第一个参数: 指令的名称<br> 第二个参数: 对象<br> 注意点: 在自定义指令的时候, 在指定指令名称的时候, 不需要写v-<br> 注意点: 指令可以在不同的生命周期阶段执行<br> bind: 指令被绑定到元素上的时候执行<br> inserted: 绑定指令的元素被添加到父元素上的时候执行</p> </blockquote> <p><strong>自定义指令传参</strong></p> <ul> <li><p>1.自定义指令参数<br> 在使用官方指令的时候我们可以给指令传参<br> 例如: v-model="name"<br> 在我们自定义的指令中我们也可以传递传递</p></li> <li><p>2.获取自定义指令传递的参数<br> 在执行自定义指令对应的方法的时候, 除了会传递el给我们, 还会传递一个对象给我们<br> 这个对象中就保存了指令传递过来的参数</p></li> </ul> <pre><code class="html"> <p v-color="currentColor">我的世界</p> </code></pre> <pre><code class="javascript">//参数放在obj参数的value中 Vue.directive("color",{ bind:function (el,obj){ el.style.color = obj.value; } }) </code></pre> <p><strong>自定义vue局部指令</strong></p> <ul> <li><p>1.自定义全局指令的特点<br> 在任何一个Vue实例控制的区域中都可以使用</p></li> <li><p>2.自定义局部指令的特点<br> 只能在自定义的那个Vue实例中使用</p></li> <li><p>3.如何自定义一个局部指令<br> 给创建Vue实例时传递的对象添加</p></li> </ul> <pre><code class="html">directives: { // key: 指令名称 // value: 对象 'color': { bind: function (el, obj) { el.style.color = obj.value; } } } </code></pre> <pre><code class="html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue-Directives</title> <script src="vue.js"></script> </head> <body> <div id="app1"> <p v-color="'red'">单佳兰</p> </div> <div id="app2"> <p v-color="green">单佳兰</p> </div> <script> let vue1=new Vue( { el:"#app1", data:{}, method:{}, directives:{ "color": { bind: function (el, obj) { el.style.color = obj.value; } } } } ) </script> </body> </html> </code></pre> </article> </div> </div> </div>  <div id="SOHUCS" sid="1692658861833531392"></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开篇-vue指令（第一天）)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1835512920797179904.htm" title="element实现动态路由+面包屑" target="_blank">element实现动态路由+面包屑</a> <span class="text-muted">软件技术NINI</span> <a class="tag" taget="_blank" href="/search/vue%E6%A1%88%E4%BE%8B/1.htm">vue案例</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi</div> </li> <li><a href="/article/1835511911769272320.htm" title="C语言如何定义宏函数？" target="_blank">C语言如何定义宏函数？</a> <span class="text-muted">小九格物</span> <a class="tag" taget="_blank" href="/search/c%E8%AF%AD%E8%A8%80/1.htm">c语言</a> <div>在C语言中，宏函数是通过预处理器定义的，它在编译之前替换代码中的宏调用。宏函数可以模拟函数的行为，但它们不是真正的函数，因为它们在编译时不会进行类型检查，也不会分配存储空间。宏函数的定义通常使用#define指令，后面跟着宏的名称和参数列表，以及宏展开后的代码。宏函数的定义方式：1.基本宏函数：这是最简单的宏函数形式，它直接定义一个表达式。#defineSQUARE(x)((x)*(x))2.带参</div> </li> <li><a href="/article/1835503548817829888.htm" title="今天我破防了" target="_blank">今天我破防了</a> <span class="text-muted">sin信仰</span> <div>今天本来是大年初一，新年的第一天，应该是高高兴兴的一天，但是我怎么也高兴不起来。具体原因很简单，原本计划年后去县城找了一份会计的工作，被公公婆婆否定了，我心里立马就不舒服了，但是当时刚好肚子疼，我去了厕所，等我上完厕所，公公由于喝了酒还在那里和婆婆唠叨个没完。然后我就在心情极度压抑的情况下把午饭吃完的碗筷和锅给刷了。边刷碗筷和锅，边在那里难受，感觉自己在这个家里真的是过的憋屈死了，公婆不让我去上班</div> </li> <li><a href="/article/1835502704827396096.htm" title="将cmd中命令输出保存为txt文本文件" target="_blank">将cmd中命令输出保存为txt文本文件</a> <span class="text-muted">落难Coder</span> <a class="tag" taget="_blank" href="/search/Windows/1.htm">Windows</a><a class="tag" taget="_blank" href="/search/cmd/1.htm">cmd</a><a class="tag" taget="_blank" href="/search/window/1.htm">window</a> <div>最近深度学习本地的训练中我们常常要在命令行中运行自己的代码，无可厚非，我们有必要保存我们的炼丹结果，但是复制命令行输出到txt是非常麻烦的，其实Windows下的命令行为我们提供了相应的操作。其基本的调用格式就是：运行指令>输出到的文件名称或者具体保存路径测试下，我打开cmd并且ping一下百度：pingwww.baidu.com>./data.txt看下相同目录下data.txt的输出：如果你再</div> </li> <li><a href="/article/1835495644123459584.htm" title="Day1笔记-Python简介&标识符和关键字&输入输出" target="_blank">Day1笔记-Python简介&标识符和关键字&输入输出</a> <span class="text-muted">~在杰难逃~</span> <a class="tag" taget="_blank" href="/search/Python/1.htm">Python</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%95%B0%E6%8D%AE/1.htm">大数据</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%88%86%E6%9E%90/1.htm">数据分析</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E6%8C%96%E6%8E%98/1.htm">数据挖掘</a> <div>大家好，从今天开始呢，杰哥开展一个新的专栏，当然，数据分析部分也会不定时更新的，这个新的专栏主要是讲解一些Python的基础语法和知识，帮助0基础的小伙伴入门和学习Python，感兴趣的小伙伴可以开始认真学习啦！一、Python简介【了解】1.计算机工作原理编程语言就是用来定义计算机程序的形式语言。我们通过编程语言来编写程序代码，再通过语言处理程序执行向计算机发送指令，让计算机完成对应的工作，编程</div> </li> <li><a href="/article/1835493373906087936.htm" title="libyuv之linux编译" target="_blank">libyuv之linux编译</a> <span class="text-muted">jaronho</span> <a class="tag" taget="_blank" href="/search/Linux/1.htm">Linux</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a> <div>文章目录一、下载源码二、编译源码三、注意事项1、银河麒麟系统（aarch64）（1）解决armv8-a+dotprod+i8mm指令集支持问题（2）解决armv9-a+sve2指令集支持问题一、下载源码到GitHub网站下载https://github.com/lemenkov/libyuv源码，或者用直接用git克隆到本地，如：gitclonehttps://github.com/lemenko</div> </li> <li><a href="/article/1835493247716257792.htm" title="ARM中断处理过程" target="_blank">ARM中断处理过程</a> <span class="text-muted">落汤老狗</span> <a class="tag" taget="_blank" href="/search/%E5%B5%8C%E5%85%A5%E5%BC%8Flinux/1.htm">嵌入式linux</a> <div>一、前言本文主要以ARM体系结构下的中断处理为例，讲述整个中断处理过程中的硬件行为和软件动作。具体整个处理过程分成三个步骤来描述：1、第二章描述了中断处理的准备过程2、第三章描述了当发生中的时候，ARM硬件的行为3、第四章描述了ARM的中断进入过程4、第五章描述了ARM的中断退出过程本文涉及的代码来自3.14内核。另外，本文注意描述ARM指令集的内容，有些sourcecode为了简短一些，删除了T</div> </li> <li><a href="/article/1835492740536823808.htm" title="node.js学习" target="_blank">node.js学习</a> <span class="text-muted">小猿L</span> <a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/vim/1.htm">vim</a> <div>node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行</div> </li> <li><a href="/article/1835480162121117696.htm" title="每天都有“小感动”" target="_blank">每天都有“小感动”</a> <span class="text-muted">河北张海霞</span> <div>上次开学，在楼道值班儿的我，回到办公室后，发现我的办公桌上了一个小饭盒，打开一看，是自家腌的萝卜片，闻起来香香的，是哪位有心的孩子带来的？我猜测着……会不会是杨同学，记得开学第一天，她胃疼再加上低血糖，我曾陪她去医务室看病，并给她带回了早餐……还是李同学，那次她被别的同学欺侮，我为她主持公道。晚餐时间到了，我还带她去餐厅吃饭，引得同学们一阵羡慕……会不会是王同学，那次她眼睛不好，我陪她聊天，关心地</div> </li> <li><a href="/article/1835478626196353024.htm" title="厦门自由行之第一天:" target="_blank">厦门自由行之第一天:</a> <span class="text-muted">大苏子在广漂</span> <div>厦门三人行之杂记出发前一天:12️28日下午15:00从广州粗发，来深圳集合！但是中间发生一个小插曲，验票时候发现车票不见了，或许也是一场恶作剧，对于不排队的人，忍不住说了一下，接下来就发现车票不见了，已经是拿在手上！不过还好，可以凭借购票订单查看到信息，所以有惊无险，顺利进站！晚上三个人一起去吃了柠檬鱼，说实话，那会，感觉美吃饱，啊哈哈！晚上回来，两个人又开始彻夜长谈，发现身边优秀的人，一大把，</div> </li> <li><a href="/article/1835472914879705088.htm" title="11月，你好" target="_blank">11月，你好</a> <span class="text-muted">自由自在的白云</span> <div>图片发自App今天是11月的第一天阳光明媚，秋日静好。给大家分享一个情绪管理的方法。也许你学习过，也许你还不曾了解，都没有关系，现在，我们一起来温习一下。就像孔老先生说的：学而时习之，温故而知新。种下对的种子，才会结出好的果实。种下情绪良好的种子，就可以收获良好的心态。“你瞧这些白云聚了又散，散了又聚，人生离合，亦复如斯。”世事如此，情绪的变化如山型曲线，一会来了，一会去了。还有那天课堂中老师讲，</div> </li> <li><a href="/article/1835469798838988800.htm" title="Python实现简单的机器学习算法" target="_blank">Python实现简单的机器学习算法</a> <span class="text-muted">master_chenchengg</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%8A%9E%E5%85%AC%E6%95%88%E7%8E%87/1.htm">办公效率</a><a class="tag" taget="_blank" href="/search/python%E5%BC%80%E5%8F%91/1.htm">python开发</a><a class="tag" taget="_blank" href="/search/IT/1.htm">IT</a> <div>Python实现简单的机器学习算法开篇：初探机器学习的奇妙之旅搭建环境：一切从安装开始必备工具箱第一步：安装Anaconda和JupyterNotebook小贴士：如何配置Python环境变量算法初体验：从零开始的Python机器学习线性回归：让数据说话数据准备：从哪里找数据编码实战：Python实现线性回归模型评估：如何判断模型好坏逻辑回归：从分类开始理论入门：什么是逻辑回归代码实现：使用skl</div> </li> <li><a href="/article/1835456560277581824.htm" title="简单说说关于shell中zsh和bash的选择" target="_blank">简单说说关于shell中zsh和bash的选择</a> <span class="text-muted">秋刀prince</span> <a class="tag" taget="_blank" href="/search/MacOS/1.htm">MacOS</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%8C%BF%E4%BB%AC%E7%9A%84%E5%BC%80%E5%8F%91%E6%97%A5%E5%B8%B8/1.htm">小猿们的开发日常</a><a class="tag" taget="_blank" href="/search/bash/1.htm">bash</a> <div>希望文章能给到你启发和灵感～如果觉得文章对你有帮助的话，点赞+关注+收藏支持一下博主吧～阅读指南开篇说明一、基础环境说明1.1硬件环境1.2软件环境二、什么是shell、bash、zsh?2.1bash2.2zsh三、选择Bash还是Zsh？四、一些常见问题开篇说明本篇主要简单说明一下，shell中bash和zsh的区别和选择；我们经常会把这两个搞混，不知道什么时候用哪一个，以及怎么使用；一、基础</div> </li> <li><a href="/article/1835453535777550336.htm" title="vue3中el-table中点击图片放大时，被表格覆盖" target="_blank">vue3中el-table中点击图片放大时，被表格覆盖</a> <span class="text-muted">叫我小鹏呀</span> <a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>问题：vue3中el-table中点击图片放大时，被表格覆盖。解决方法：el-image添加preview-teleported</div> </li> <li><a href="/article/1835452528599330816.htm" title="vue项目element-ui的table表格单元格合并" target="_blank">vue项目element-ui的table表格单元格合并</a> <span class="text-muted">酋长哈哈</span> <a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/elementui/1.htm">elementui</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>一、合并效果二全部代码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:'</div> </li> <li><a href="/article/1835450384655675392.htm" title="Vue中table合并单元格用法" target="_blank">Vue中table合并单元格用法</a> <span class="text-muted">weixin_30613343</span> <a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/ViewUI/1.htm">ViewUI</a> <div>地名结果人名性别{{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</div> </li> <li><a href="/article/1835448238103162880.htm" title="springboot+vue项目实战一-创建SpringBoot简单项目" target="_blank">springboot+vue项目实战一-创建SpringBoot简单项目</a> <span class="text-muted">苹果酱0567</span> <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95%E9%A2%98%E6%B1%87%E6%80%BB%E4%B8%8E%E8%A7%A3%E6%9E%90/1.htm">面试题汇总与解析</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E4%B8%AD%E9%97%B4%E4%BB%B6/1.htm">中间件</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一</div> </li> <li><a href="/article/1835446975806402560.htm" title="【Bugs】Python：“ModuleNotFoundError: No module named ‘XXX‘”" target="_blank">【Bugs】Python：“ModuleNotFoundError: No module named ‘XXX‘”</a> <span class="text-muted">系'辞</span> <a class="tag" taget="_blank" href="/search/%E5%B7%A5%E5%85%B7%E7%AE%B1/1.htm">工具箱</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/bug/1.htm">bug</a><a class="tag" taget="_blank" href="/search/anaconda/1.htm">anaconda</a> <div>问题描述Python使用库的前提是必须已安装了相应的库，往往利用“命令行指令”实现安装，一般安装解法类似。但，还是具有延伸问题，本博客对此作记录。【1】Nomodulenamed‘seaborn’(1.1):情况1：为Anaconda安装【图1-2】.定位Anaconda路径【图3】.Anaconda路径加入Path>&</div> </li> <li><a href="/article/1835443569528238080.htm" title="Vue( ElementUI入门、vue-cli安装)" target="_blank">Vue( ElementUI入门、vue-cli安装)</a> <span class="text-muted">m0_l5z</span> <a class="tag" taget="_blank" href="/search/elementui/1.htm">elementui</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a> <div>一.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</div> </li> <li><a href="/article/1835442058828017664.htm" title="ARMV8体系结构简介：概述" target="_blank">ARMV8体系结构简介：概述</a> <span class="text-muted">简单同学</span> <a class="tag" taget="_blank" href="/search/ARMV8%E4%BD%93%E7%B3%BB%E7%BB%93%E6%9E%84/1.htm">ARMV8体系结构</a><a class="tag" taget="_blank" href="/search/ARMV8/1.htm">ARMV8</a> <div>1.前言本文主要概括的介绍ARMV8体系结构定义了哪些内容，概括的说：ARM体系结构定义了PE的行为，不会定义具体的实现ARM体系结构也定义了debug体系结构和trace体系结构ARM体系结构采用RISC指令集（1）长度一致的寄存器；（2）load/store架构，数据处理操作只能对寄存器内容进行处理，不会直接对内存的内容进行处理；（3）简单寻址方式，load/store地址来源于寄存器或指令域</div> </li> <li><a href="/article/1835440210264027136.htm" title="儿子开学报道第一天：我和公公一起送他去学校" target="_blank">儿子开学报道第一天：我和公公一起送他去学校</a> <span class="text-muted">文又又</span> <div>儿子今天是开学报道的的时光，儿子对于是谁送他去学校非常在意，他也想着自己一个人去学校，不要家长送，我们告诉他，可以等到他再大一点的话，就让他自己去学校。我还是一如既往的早起，5点闹钟响起，我的头还昏昏的，就窝在被子里看手机。看爆款文，看热点内容。还看了一会《明朝那些事》，看着看着，就觉得眼皮打架想要睡觉。可是我的潜意识还是提醒自己，起床吧，今天要6点钟起床，说好要叫儿子早起，今天他是8点钟要到学校</div> </li> <li><a href="/article/1835438056568614912.htm" title="日记 2019年10月15日杨义博" target="_blank">日记 2019年10月15日杨义博</a> <span class="text-muted">c487bb976552</span> <div>今天是我穿校服的第一天，我很激动，我觉得我正式成为了一名一年级的小学生。中午回家时，我们看向操场发现有些高年级的大哥哥们在一个一个摆这一个有很多种颜色的龙，我们觉得很酷。下午上体育课，体育老师带我们上操场上去跑了一圈，我们看见了高年级哥哥姐姐们在操场上打鼓，还有一个大哥哥从前面拿着一个戴着星星的拐杖，指挥着全队的行动，最后面还有拿着花圈的，还有拿着国旗的。</div> </li> <li><a href="/article/1835437775344726016.htm" title="博客网站制作教程" target="_blank">博客网站制作教程</a> <span class="text-muted">2401_85194651</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a> <div>首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java</div> </li> <li><a href="/article/1835435885760442368.htm" title="vue+el-table 可输入表格使用上下键进行input框切换" target="_blank">vue+el-table 可输入表格使用上下键进行input框切换</a> <span class="text-muted">以对_</span> <a class="tag" taget="_blank" href="/search/vue%E5%AD%A6%E4%B9%A0%E8%AE%B0%E5%BD%95/1.htm">vue学习记录</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>使用上下键进行完工数量这一列的切换-->//键盘触发事件show(ev,index){letnewIndex;letinputAll=document.querySelectorAll('.table_inputinput');//向上=38if(ev.keyCode==38){if(index==0){//如果是第一行,回到最后一个newIndex=inputAll.length-1}elsei</div> </li> <li><a href="/article/1835435885122908160.htm" title="vue + Element UI table动态合并单元格" target="_blank">vue + Element UI table动态合并单元格</a> <span class="text-muted">我家媳妇儿萌哒哒</span> <a class="tag" taget="_blank" href="/search/element/1.htm">element</a><a class="tag" taget="_blank" href="/search/UI/1.htm">UI</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>一、功能需求1、根据名称相同的合并工作阶段和主要任务合并这两列，但主要任务内容一样，但要考虑主要任务一样，但工作阶段不一样的情况。（枞向合并）2、落实情况里的定量内容和定性内容值一样则合并。（横向合并）二、功能实现exportdefault{data(){return{tableData:[{name:'a',address:'1',age:'1',six:'2'},{name:'a',addre</div> </li> <li><a href="/article/1835433364228763648.htm" title="《错嫁傻王：王妃她又黑化了》南君宥乔洛染（独家小说）精彩TXT阅读" target="_blank">《错嫁傻王：王妃她又黑化了》南君宥乔洛染（独家小说）精彩TXT阅读</a> <span class="text-muted">海边书楼</span> <div>《错嫁傻王：王妃她又黑化了》南君宥乔洛染（独家小说）精彩TXT阅读主角：南君宥乔洛染简介：堂堂21世纪金牌特种兵乔洛染，穿来的第一天，就被人诬陷私通被逼投江。而前来解救她的，正是她的夫婿——智力受损的痴傻王爷南君宥。傻子娶了一个不贞女，全京城都在等着看他们的笑话。殊不知，乔洛染一手医术济天下，一手制毒退万敌。关注微信公众号【花车文学】去回个书號【36】，即可阅读【错嫁傻王：王妃她又黑化了】小说全文</div> </li> <li><a href="/article/1835431726982197248.htm" title="vue 创建项目报错：command failed: npm install --loglevel error" target="_blank">vue 创建项目报错：command failed: npm install --loglevel error</a> <span class="text-muted">那鱼、会飞</span> <a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/vue-cli3/1.htm">vue-cli3</a> <div>这个问题其实很好解决，只是很多种情况，逐一排除即可。稳下心来~vuecli3创建项目我的node版本是node14.15.0，（永远不要尝试最新版本）node各种版本下载地址：以往的版本|Node.js(nodejs.org)vue/cli@3.12.1npminstall-g@vue/cli@3.12.1（注意vue/cli2和vue/cli3的下载命名有所改变，2是-形式，3是/形式）其实报错</div> </li> <li><a href="/article/1835430719363575808.htm" title="更改npm镜像源为淘宝镜像" target="_blank">更改npm镜像源为淘宝镜像</a> <span class="text-muted">骆小骆</span> <a class="tag" taget="_blank" href="/search/%E5%9F%BA%E4%BA%8Enode.js/1.htm">基于node.js</a> <div>npm常用指令后缀*最近复习了一下node.js整理了一下跟node.js相关的指令后缀*--save、-S参数意思是把模块的版本信息保存到dependencies（生产环境依赖）中，即你的package.json文件的dependencies字段中；–--save-dev、-D参数意思是把模块版本信息保存到devDependencies（开发环境依赖）中，即你的package.json文件的de</div> </li> <li><a href="/article/1835429416604364800.htm" title="寓美于心" target="_blank">寓美于心</a> <span class="text-muted">琴韵无声</span> <div>今天是“语文湿地2021网络年会”第一天。年会早上七点在尹东老师和王君老师的激情开幕致辞中开始。一天下来听了八节课，真是“八仙过海，各显神通。”精彩纷呈。愚笨如我，真的是找不出一个恰切的词来形容她们的美妙绝伦。今天一口气吃下了饕餮盛宴，留待日后慢慢反刍吧。今天的压轴大戏是王君老师的《若爱，深深爱；若写，深情写》——跟《土地的誓言》学意象铺排”艺术。又加上是最后一节听的，印象最为深刻。凭着印象先略记</div> </li> <li><a href="/article/1835429160957341696.htm" title="误落尘网中，一去三十年" target="_blank">误落尘网中，一去三十年</a> <span class="text-muted">不会功夫的谭大侠</span> <div>图片发自App图片发自App图片发自App《财富自由之路》中开篇就讲述了财富自由的目的是为了时间自由，高中觉得每个月一千块是财富自由，大学觉得每个月两千块是财富自由，毕业时觉得每个月五千是财富自由，现在感觉每个月一万都不一定自由。思来想去，货币贬值也没有这么快，还是自己欲望太大了，欲壑难填。大学有一个梦想去西藏，当时觉得两千块就能去，现在感觉有一万都不够。膨胀了啊！曾经想过时间自由了干什么，我就半</div> </li> <li><a href="/article/54.htm" title="JAVA中的Enum" target="_blank">JAVA中的Enum</a> <span class="text-muted">周凡杨</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/enum/1.htm">enum</a><a class="tag" taget="_blank" href="/search/%E6%9E%9A%E4%B8%BE/1.htm">枚举</a> <div>Enum是计算机编程语言中的一种数据类型---枚举类型。在实际问题中，有些变量的取值被限定在一个有限的范围内。例如，一个星期内只有七天我们通常这样实现上面的定义： public String monday; public String tuesday; public String wensday; public String thursday</div> </li> <li><a href="/article/181.htm" title="赶集网mysql开发36条军规" target="_blank">赶集网mysql开发36条军规</a> <span class="text-muted">Bill_chen</span> <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/%E4%B8%9A%E5%8A%A1%E6%9E%B6%E6%9E%84%E8%AE%BE%E8%AE%A1/1.htm">业务架构设计</a><a class="tag" taget="_blank" href="/search/mysql%E8%B0%83%E4%BC%98/1.htm">mysql调优</a><a class="tag" taget="_blank" href="/search/mysql%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/1.htm">mysql性能优化</a> <div>(一)核心军规 (1)不在数据库做运算 cpu计算务必移至业务层； (2)控制单表数据量 int型不超过1000w，含char则不超过500w；合理分表；限制单库表数量在300以内； (3)控制列数量字段少而精，字段数建议在20以内</div> </li> <li><a href="/article/308.htm" title="Shell test命令" target="_blank">Shell test命令</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/shell/1.htm">shell</a><a class="tag" taget="_blank" href="/search/%E5%AD%97%E7%AC%A6%E4%B8%B2/1.htm">字符串</a><a class="tag" taget="_blank" href="/search/test/1.htm">test</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E5%AD%97/1.htm">数字</a><a class="tag" taget="_blank" href="/search/%E6%96%87%E4%BB%B6%E6%AF%94%E8%BE%83/1.htm">文件比较</a> <div>Shell test命令 Shell中的 test 命令用于检查某个条件是否成立，它可以进行数值、字符和文件三个方面的测试。数值测试参数说明 -eq 等于则为真 -ne 不等于则为真 -gt 大于则为真 -ge 大于等于则为真 -lt 小于则为真 -le 小于等于则为真实例演示： num1=100 num2=100if test $[num1]</div> </li> <li><a href="/article/435.htm" title="XFire框架实现WebService(二)" target="_blank">XFire框架实现WebService(二)</a> <span class="text-muted">周凡杨</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/webservice/1.htm">webservice</a> <div> 有了XFire框架实现WebService(一)，就可以继续开发WebService的简单应用。 Webservice的服务端(WEB工程)：两个java bean类： Course.java package cn.com.bean; public class Course { private </div> </li> <li><a href="/article/562.htm" title="重绘之画图板" target="_blank">重绘之画图板</a> <span class="text-muted">朱辉辉33</span> <a class="tag" taget="_blank" href="/search/%E7%94%BB%E5%9B%BE%E6%9D%BF/1.htm">画图板</a> <div> 上次博客讲的五子棋重绘比较简单，因为只要在重写系统重绘方法paint（）时加入棋盘和棋子的绘制。这次我想说说画图板的重绘。画图板重绘难在需要重绘的类型很多，比如说里面有矩形，园，直线之类的，所以我们要想办法将里面的图形加入一个队列中，这样在重绘时就</div> </li> <li><a href="/article/689.htm" title="Java的IO流" target="_blank">Java的IO流</a> <span class="text-muted">西蜀石兰</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>刚学Java的IO流时，被各种inputStream流弄的很迷糊，看老罗视频时说想象成插在文件上的一根管道，当初听时觉得自己很明白，可到自己用时，有不知道怎么代码了。。。每当遇到这种问题时，我习惯性的从头开始理逻辑，会问自己一些很简单的问题，把这些简单的问题想明白了，再看代码时才不会迷糊。 IO流作用是什么？答：实现对文件的读写，这里的文件是广义的； Java如何实现程序到文件</div> </li> <li><a href="/article/816.htm" title="No matching PlatformTransactionManager bean found for qualifier 'add' - neither" target="_blank">No matching PlatformTransactionManager bean found for qualifier 'add' - neither</a> <span class="text-muted">林鹤霄</span> <div>java.lang.IllegalStateException: No matching PlatformTransactionManager bean found for qualifier 'add' - neither qualifier match nor bean name match! 网上找了好多的资料没能解决，后来发现：项目中使用的是xml配置的方式配置事务，但是</div> </li> <li><a href="/article/943.htm" title="Row size too large (> 8126). Changing some columns to TEXT or BLOB" target="_blank">Row size too large (> 8126). Changing some columns to TEXT or BLOB</a> <span class="text-muted">aigo</span> <a class="tag" taget="_blank" href="/search/column/1.htm">column</a> <div>原文：http://stackoverflow.com/questions/15585602/change-limit-for-mysql-row-size-too-large 异常信息： Row size too large (> 8126). Changing some columns to TEXT or BLOB or using ROW_FORMAT=DYNAM</div> </li> <li><a href="/article/1070.htm" title="JS 格式化时间" target="_blank">JS 格式化时间</a> <span class="text-muted">alxw4616</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a> <div>/** * 格式化时间 2013/6/13 by 半仙 alxw4616@msn.com * 需要 pad 函数 * 接收可用的时间值. * 返回替换时间占位符后的字符串 * * 时间占位符:年 Y 月 M 日 D 小时 h 分 m 秒 s 重复次数表示占位数 * 如 YYYY 4占4位 YY 占2位<p></p> * MM DD hh mm</div> </li> <li><a href="/article/1197.htm" title="队列中数据的移除问题" target="_blank">队列中数据的移除问题</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/%E9%98%9F%E5%88%97%E7%A7%BB%E9%99%A4/1.htm">队列移除</a> <div> 队列的移除一般都是使用的remov();都可以移除的,但是在昨天做线程移除的时候出现了点问题,没有将遍历出来的全部移除, 代码如下; // package com.Thread0715.com; import java.util.ArrayList; public class Threa</div> </li> <li><a href="/article/1324.htm" title="Runnable接口使用实例" target="_blank">Runnable接口使用实例</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/thread/1.htm">thread</a><a class="tag" taget="_blank" href="/search/Runnable/1.htm">Runnable</a><a class="tag" taget="_blank" href="/search/java%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">java多线程</a> <div>Runnable接口 a. 该接口只有一个方法：public void run(); b. 实现该接口的类必须覆盖该run方法 c. 实现了Runnable接口的类并不具有任何天</div> </li> <li><a href="/article/1451.htm" title="oracle里的extend详解" target="_blank">oracle里的extend详解</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/extend/1.htm">extend</a> <div>扩展已知的数组空间，例： DECLARE TYPE CourseList IS TABLE OF VARCHAR2(10); courses CourseList; BEGIN -- 初始化数组元素，大小为3 courses := CourseList('Biol 4412 ', 'Psyc 3112 ', 'Anth 3001 '); -- </div> </li> <li><a href="/article/1578.htm" title="【httpclient】httpclient发送表单POST请求" target="_blank">【httpclient】httpclient发送表单POST请求</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/httpclient/1.htm">httpclient</a> <div>浏览器Form Post请求浏览器可以通过提交表单的方式向服务器发起POST请求，这种形式的POST请求不同于一般的POST请求 1. 一般的POST请求，将请求数据放置于请求体中，服务器端以二进制流的方式读取数据，HttpServletRequest.getInputStream()。这种方式的请求可以处理任意数据形式的POST请求，比如请求数据是字符串或者是二进制数据 2. Form </div> </li> <li><a href="/article/1705.htm" title="【Hive十三】Hive读写Avro格式的数据" target="_blank">【Hive十三】Hive读写Avro格式的数据</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/hive/1.htm">hive</a> <div> 1. 原始数据 hive> select * from word; OK 1 MSN 10 QQ 100 Gtalk 1000 Skype 2. 创建avro格式的数据表 hive> CREATE TABLE avro_table(age INT, name STRING)STORE</div> </li> <li><a href="/article/1832.htm" title="nginx+lua+redis自动识别封解禁频繁访问IP" target="_blank">nginx+lua+redis自动识别封解禁频繁访问IP</a> <span class="text-muted">ronin47</span> <div>在站点遇到攻击且无明显攻击特征，造成站点访问慢，nginx不断返回502等错误时，可利用nginx+lua+redis实现在指定的时间段内，若单IP的请求量达到指定的数量后对该IP进行封禁，nginx返回403禁止访问。利用redis的expire命令设置封禁IP的过期时间达到在指定的封禁时间后实行自动解封的目的。一、安装环境： CentOS x64 release 6.4(Fin</div> </li> <li><a href="/article/1959.htm" title="java-二叉树的遍历-先序、中序、后序（递归和非递归）、层次遍历" target="_blank">java-二叉树的遍历-先序、中序、后序（递归和非递归）、层次遍历</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div> import java.util.LinkedList; import java.util.List; import java.util.Stack; public class BinTreeTraverse { //private int[] array={ 1, 2, 3, 4, 5, 6, 7, 8, 9 }; private int[] array={ 10,6,</div> </li> <li><a href="/article/2086.htm" title="Spring源码学习-XML 配置方式的IoC容器启动过程分析" target="_blank">Spring源码学习-XML 配置方式的IoC容器启动过程分析</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/IOC/1.htm">IOC</a> <div>以FileSystemXmlApplicationContext为例，把Spring IoC容器的初始化流程走一遍： ApplicationContext context = new FileSystemXmlApplicationContext ("C:/Users/ZARA/workspace/HelloSpring/src/Beans.xml&q</div> </li> <li><a href="/article/2213.htm" title="[科研与项目]民营企业请慎重参与军事科技工程" target="_blank">[科研与项目]民营企业请慎重参与军事科技工程</a> <span class="text-muted">comsci</span> <a class="tag" taget="_blank" href="/search/%E4%BC%81%E4%B8%9A/1.htm">企业</a> <div> 军事科研工程和项目并非要用最先进，最时髦的技术，而是要做到“万无一失” 而民营科技企业在搞科技创新工程的时候，往往考虑的是技术的先进性，而对先进技术带来的风险考虑得不够，在今天提倡军民融合发展的大环境下，这种“万无一失”和“时髦性”的矛盾会日益凸显。。。。。。所以请大家在参与任何重大的军事和政府项目之前，对</div> </li> <li><a href="/article/2340.htm" title="spring 定时器-两种方式" target="_blank">spring 定时器-两种方式</a> <span class="text-muted">cuityang</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/quartz/1.htm">quartz</a><a class="tag" taget="_blank" href="/search/%E5%AE%9A%E6%97%B6%E5%99%A8/1.htm">定时器</a> <div>方式一：间隔一定时间运行 <bean id="updateSessionIdTask" class="com.yang.iprms.common.UpdateSessionTask" autowire="byName" /> <bean id="updateSessionIdSchedule</div> </li> <li><a href="/article/2467.htm" title="简述一下关于BroadView站点的相关设计" target="_blank">简述一下关于BroadView站点的相关设计</a> <span class="text-muted">damoqiongqiu</span> <a class="tag" taget="_blank" href="/search/view/1.htm">view</a> <div>终于弄上线了，累趴，戳这里http://www.broadview.com.cn 简述一下相关的技术点前端：jQuery+BootStrap3.2+HandleBars，全站Ajax（貌似对SEO的影响很大啊！怎么破？），用Grunt对全部JS做了压缩处理，对部分JS和CSS做了合并（模块间存在很多依赖，全部合并比较繁琐，待完善）。后端：U</div> </li> <li><a href="/article/2594.htm" title="运维 PHP问题汇总" target="_blank">运维 PHP问题汇总</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/windows2003/1.htm">windows2003</a> <div>1、Dede(织梦)发表文章时,内容自动添加关键字显示空白页解决方法：后台>系统>系统基本参数>核心设置>关键字替换（是/否），这里选择“是”。后台>系统>系统基本参数>其他选项>自动提取关键字，这里选择“是”。 2、解决PHP168超级管理员上传图片提示你的空间不足网站是用PHP168做的，反映使用管理员在后台无法</div> </li> <li><a href="/article/2721.htm" title="mac 下安装php扩展 - mcrypt" target="_blank">mac 下安装php扩展 - mcrypt</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a> <div>MCrypt是一个功能强大的加密算法扩展库，它包括有22种算法，phpMyAdmin依赖这个PHP扩展，具体如下：下载并解压libmcrypt-2.5.8.tar.gz。在终端执行如下命令： tar zxvf libmcrypt-2.5.8.tar.gz cd libmcrypt-2.5.8/ ./configure --disable-posix-threads --</div> </li> <li><a href="/article/2848.htm" title="MongoDB更新文档 [四]" target="_blank">MongoDB更新文档 [四]</a> <span class="text-muted">eksliang</span> <a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a><a class="tag" taget="_blank" href="/search/Mongodb%E6%9B%B4%E6%96%B0%E6%96%87%E6%A1%A3/1.htm">Mongodb更新文档</a> <div>MongoDB更新文档转载请出自出处：http://eksliang.iteye.com/blog/2174104 MongoDB对文档的CURD，前面的博客简单介绍了，但是对文档更新篇幅比较大，所以这里单独拿出来。语法结构如下： db.collection.update( criteria, objNew, upsert, multi) 参数含义参数 </div> </li> <li><a href="/article/2975.htm" title="Linux下的解压，移除，复制，查看tomcat命令" target="_blank">Linux下的解压，移除，复制，查看tomcat命令</a> <span class="text-muted">y806839048</span> <a class="tag" taget="_blank" href="/search/tomcat/1.htm">tomcat</a> <div>重复myeclipse生成webservice有问题删除以前的，干净 1、先切换到：cd usr/local/tomcat5/logs 2、tail -f catalina.out 3、这样运行时就可以实时查看运行日志了 Ctrl+c 是退出tail命令。有问题不明的先注掉 cp /opt/tomcat-6.0.44/webapps/g</div> </li> <li><a href="/article/3102.htm" title="Spring之使用事务缘由(3-XML实现)" target="_blank">Spring之使用事务缘由(3-XML实现)</a> <span class="text-muted">ihuning</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a> <div> 用事务通知声明式地管理事务事务管理是一种横切关注点。为了在 Spring 2.x 中启用声明式事务管理，可以通过 tx Schema 中定义的 <tx:advice> 元素声明事务通知，为此必须事先将这个 Schema 定义添加到 <beans> 根元素中去。声明了事务通知后，就需要将它与切入点关联起来。由于事务通知是在 <aop:</div> </li> <li><a href="/article/3229.htm" title="GCD使用经验与技巧浅谈" target="_blank">GCD使用经验与技巧浅谈</a> <span class="text-muted">啸笑天</span> <a class="tag" taget="_blank" href="/search/GC/1.htm">GC</a> <div>前言 GCD(Grand Central Dispatch)可以说是Mac、iOS开发中的一大“利器”，本文就总结一些有关使用GCD的经验与技巧。 dispatch_once_t必须是全局或static变量这一条算是“老生常谈”了，但我认为还是有必要强调一次，毕竟非全局或非static的dispatch_once_t变量在使用时会导致非常不好排查的bug，正确的如下： 1 </div> </li> <li><a href="/article/3356.htm" title="linux（Ubuntu）下常用命令备忘录1" target="_blank">linux（Ubuntu）下常用命令备忘录1</a> <span class="text-muted">macroli</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a><a class="tag" taget="_blank" href="/search/ubuntu/1.htm">ubuntu</a> <div>在使用下面的命令是可以通过--help来获取更多的信息1,查询当前目录文件列表：ls ls命令默认状态下将按首字母升序列出你当前文件夹下面的所有内容，但这样直接运行所得到的信息也是比较少的，通常它可以结合以下这些参数运行以查询更多的信息： ls / 显示/.下的所有文件和目录 ls -l 给出文件或者文件夹的详细信息 ls -a 显示所有文件，包括隐藏文</div> </li> <li><a href="/article/3483.htm" title="nodejs同步操作mysql" target="_blank">nodejs同步操作mysql</a> <span class="text-muted">qiaolevip</span> <a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E6%B0%B8%E6%97%A0%E6%AD%A2%E5%A2%83/1.htm">学习永无止境</a><a class="tag" taget="_blank" href="/search/%E6%AF%8F%E5%A4%A9%E8%BF%9B%E6%AD%A5%E4%B8%80%E7%82%B9%E7%82%B9/1.htm">每天进步一点点</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/nodejs/1.htm">nodejs</a> <div>// db-util.js var mysql = require('mysql'); var pool = mysql.createPool({ connectionLimit : 10, host: 'localhost', user: 'root', password: '', database: 'test', port: 3306 }); </div> </li> <li><a href="/article/3610.htm" title="一起学Hive系列文章" target="_blank">一起学Hive系列文章</a> <span class="text-muted">superlxw1234</span> <a class="tag" taget="_blank" href="/search/hive/1.htm">hive</a><a class="tag" taget="_blank" href="/search/Hive%E5%85%A5%E9%97%A8/1.htm">Hive入门</a> <div> [一起学Hive]系列文章目录贴，入门Hive，持续更新中。 [一起学Hive]之一—Hive概述，Hive是什么 [一起学Hive]之二—Hive函数大全-完整版 [一起学Hive]之三—Hive中的数据库(Database)和表(Table) [一起学Hive]之四-Hive的安装配置 [一起学Hive]之五-Hive的视图和分区 [一起学Hive</div> </li> <li><a href="/article/3737.htm" title="Spring开发利器：Spring Tool Suite 3.7.0 发布" target="_blank">Spring开发利器：Spring Tool Suite 3.7.0 发布</a> <span class="text-muted">wiselyman</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a> <div>Spring Tool Suite(简称STS)是基于Eclipse，专门针对Spring开发者提供大量的便捷功能的优秀开发工具。在3.7.0版本主要做了如下的更新：将eclipse版本更新至Eclipse Mars 4.5 GA Spring Boot(JavaEE开发的颠覆者集大成者，推荐大家学习)的配置语言YAML编辑器的支持(包含自动提示，</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>