清玄huo

Vue全家桶之Vue.js----Vue基础（持续更新中）

1.Vue基础语法

1.1 Vue概述

1.1.1Vue是什么？

用于构建用户界面的渐进式框架

声明式渲染→组件系统→客户端路由→集中式状态管理→项目构建

vue 的核心库只关注视图层

1.1.2Vue有哪些优点？

易用、灵活、高效简单易上手

1.2 vue基本使用

1.2.1如何利用Vue将hello world 渲染到页面上？

1、需要提供标签用于填充数据注意：在标签中我们使用插值语法的形式即 {{}} 进行填充数据

2、引入vue.js库文件注意：一定要先引入Vue文件在使用Vue语法因为存在作用域的问题

3、使用vue的语法做功能： new Vue() 创建一个Vue的实例，在构造函数中以对象的形式做一些配置

4、利用Vue将数据渲染到页面上，数据写在data 里面

1.2.2 Hello Vue之细节分析

1. 实例参数分析

⚫ el：元素的挂载位置（值可以是CSS选择器或者DOM元素）

⚫ data：模型数据（值是一个对象）

2. 插值表达式用法

⚫ 将数据填充到HTML标签中

⚫ 插值表达式支持基本的计算操作

3. Vue代码运行原理分析

⚫ 概述编译过程的概念（Vue语法→ 原生语法）

1.3 Vue模板语法

1.3.1 如何理解前端渲染？

把数据填充到HTML标签中：模板 + 数据 →前端渲染→静态HTML内容

1.3.2 把字符串渲染到页面上有哪些方式？

1.利用原生js拼接字符串（代码差异大，维护困难）

2.利用模板引擎拼接（基于模板引擎art-template，没有专门提供事件机制）

3.利用Vue插值语法

4.文档碎片 document.createDocumentFragment

5.利用es6 `` 反引号拼接字符串

1.3.3 什么是指令？

指令的本质就是自定义属性，格式以v-开始

1.3.4 为什么会有闪烁问题？

代码加载的时候先加载HTML 把插值语法当做HTML内容加载到页面上当加载完js后才把插值语法替换掉所以我们会看到闪烁问题

解决插值语法闪烁问题：使用v-cloak

在指令中不要写插值语法，直接写对应的变量名称；在 v-text 中赋值的时候不要在写插值语法；一般属性中不加 {{}} 直接写对应的数据名； Vue 中只有在标签的内容中才用插值语法

1.3.5 数据绑定指令

⚫ v-text 填充纯文本

① 用于将数据填充到标签中，作用于插值表达式类似，但是没有闪动问题，相比插值表达式更加简洁

② 如果数据中有 HTML 标签会将 html 标签一并输出

注意：此处为单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的

值

⚫ v-html 填充HTML片段

① 存在安全问题

② 本网站内部数据可以使用，来自第三方的数据不可以用

注意：v-text输出的是纯文本，浏览器不会对其再进行html解析；html会将其当html标签解析后输出；可能有安全问题, 一般只在可信任内容上使用 v-html ，永不用在用户提交的内容上

⚫ v-pre 填充原始信息

① 显示原始信息，跳过编译过程（分析编译过程）

② 一些静态的内容不需要编译加这个指令可以加快渲染

1.3.6 数据响应式

⚫ 如何理解响应式

① html5中的响应式（屏幕尺寸的变化导致样式的变化）

② 数据的响应式（数据的变化导致页面内容的变化）

⚫ 什么是数据绑定

① 数据绑定：将数据填充到标签中

⚫ v-once 只编译一次

① 显示内容之后不再具有响应式功能：执行一次性的插值【当数据改变时，插值处的内容不会继续更新】

1.3.7 双向数据绑定（v-model）

1.什么是双向数据绑定：当数据发生变化的时候，视图也就发生变化；当视图发生变化的时候，数据也会跟着同步变化

2.使用场景：v-model是一个指令，限制在、

、components（组件） 中使用</span> 
  </div> 
  <div>
    3.MVVM:       
  </div> 
  <div> 
   <div> 
    <span style="color:#333333;">MVC </span> 
    <span style="color:#333333;">是后端的分层开发概念；</span> 
    <span style="color:#333333;"> MVVM</span> 
    <span style="color:#333333;">是前端视图层的概念，主要关注于 视图层分离，也就是说：</span> 
    <span style="color:#333333;">MVVM</span> 
    <span style="color:#333333;">把前端的视图层，分为了三部分 Model, View , VM ViewModel </span> 
   </div> 
   <p style="text-indent:33px;"><span style="color:#262626;">① </span><span style="color:#333333;">m model :数据层Vue中数据层都放在</span><span style="color:#333333;">data</span><span style="color:#333333;">里面 </span></p> 
   <p style="text-indent:33px;"><span style="color:#262626;">② </span><span style="color:#333333;">v view 视图 :Vue中</span><span style="color:#333333;">view</span><span style="color:#333333;">即我们的</span><span style="color:#333333;">HTML</span><span style="color:#333333;">页面 </span></p> 
   <p style="text-indent:33px;"><span style="color:#262626;">③ </span><span style="color:#333333;">vm （</span><span style="color:#333333;">view-model</span><span style="color:#333333;">） 控制器 将数据和视图层建立联系 :vm即</span><span style="color:#333333;">Vue</span><span style="color:#333333;">的实例</span></p> 
   <p style="text-indent:0;"><span style="color:#333333;">4.</span><span style="color:#404040;"><strong>v-model的低层实现原理分析 </strong></span></p> 
   <p style="text-indent:0;"><span style="color:#262626;">v-bind绑定属性值，v-on处理值变化这个事件 </span><span style="color:#7c79e5;"> <input v-bind:value="msg" v-on:input="msg=$event.target.value"></span></p> 
   <p style="text-indent:0;"><span style="color:#262626;">第一种方案 ：</span></p> 
   <p style="text-indent:0;"><span style="color:#262626;">通过 v-on监听输入框的输入事件  将输入的值通过事件处理函数存到data中 给输入框通过v-bind 绑定属性 value  把数据渲染到页面上 </span></p> 
   <p style="text-indent:0;"><span style="color:#262626;">第二种方案 ：</span></p> 
   <p style="text-indent:0;"><span style="color:#262626;">通过 v-on监听输入框的输入事件   通过事件对象$event 拿到输入的值 直接存储到data中 给输入框通过v-bind 绑定属性 value  把数据渲染到页面上</span></p> 
   <h3>1.3.8 <span style="color:#404040;"><strong>事件绑定 </strong></span></h3> 
   <div> 
    <span style="color:#333333;"><strong>1.v-on </strong>:用来绑定事件；形式如：v-on:click ，</span> 
    <span style="color:#333333;">缩写为</span> 
    <span style="color:#333333;"> @click</span> 
   </div> 
   <div>
       
   </div> 
   <div> 
    <p style="text-align:center;"><a href="http://img.e-com-net.com/image/info8/9ce571d205f840178c34fa806a95fc1c.jpg" target="_blank"><img alt="Vue全家桶之Vue.js----Vue基础（持续更新中）_第4张图片" src="http://img.e-com-net.com/image/info8/9ce571d205f840178c34fa806a95fc1c.jpg" width="595" height="900" style="border:1px solid black;"></a></p> 
    <p>2.<span style="color:#404040;"><strong>事件函数的调用方式</strong></span></p> 
    <p><span style="color:#262626;">① </span><span style="color:#404040;">直接绑定函数名称调用  </span><span style="color:#7c79e5;"><button v-on:click='handle1'>点击1</button></span><span style="color:#404040;"> </span></p> 
    <p><span style="color:#262626;">② </span><span style="color:#404040;">调用函数的形式 </span><span style="color:#7c79e5;"><button v-on:click='handle1()'>点击1</button></span></p> 
    <p><span style="color:#aa5500;">如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数。</span><span style="color:#aa5500;">如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递， 并且事件对象的名称必须是$event</span></p> 
    <p>3.<span style="color:#404040;"><strong>事件修饰符 </strong></span></p> 
    <div> 
     <span style="color:#333333;">在事件处理程序中调用 </span> 
     <span style="color:#7c79e5;">event.preventDefault() </span> 
     <span style="color:#333333;">或 </span> 
     <span style="color:#7c79e5;">event.stopPropagation() </span> 
     <span style="color:#333333;">是非常常见的需求。 </span> 
    </div> 
    <div> 
     <span style="color:#333333;">Vue </span> 
     <span style="color:#333333;">不推荐我们操作</span> 
     <span style="color:#333333;">DOM </span> 
     <span style="color:#333333;">为了解决这个问题，</span> 
     <span style="color:#333333;">Vue.js </span> 
     <span style="color:#333333;">为 </span> 
     <span style="color:#333333;">v</span> 
     <span style="color:#333333;">-</span> 
     <span style="color:#333333;">on </span> 
     <span style="color:#333333;">提供了</span> 
     <span style="color:#333333;"><strong>事件修饰符 </strong></span> 
    </div> 
    <div> 
     <span style="color:#333333;">修饰符是由点开头的指令后缀来表示的 </span> 
    </div> 
    <div> 
     <div> 
      <span style="color:#333333;">使用修饰符时，</span> 
      <span style="color:#f33b45;">顺序很重要</span> 
      <span style="color:#333333;">；相应的代码会以同样的顺序产生。因此，用 </span> 
      <span style="color:#7c79e5;">v-on:click.prevent.self </span> 
      <span style="color:#333333;">会阻止所有的点 </span> 
     </div> 
     <div> 
      <span style="color:#333333;">击，而 </span> 
      <span style="color:#7c79e5;">v-on:click.self.prevent</span> 
      <span style="color:#333333;"> </span> 
      <span style="color:#333333;">只会阻止对元素自身的点击。</span> 
     </div> 
     <div>
         
     </div> 
     <div> 
      <p style="text-align:center;"><a href="http://img.e-com-net.com/image/info8/56cd8dc7a83a4bb7b5b48c7393bea80f.jpg" target="_blank"><img alt="Vue全家桶之Vue.js----Vue基础（持续更新中）_第5张图片" src="http://img.e-com-net.com/image/info8/56cd8dc7a83a4bb7b5b48c7393bea80f.jpg" width="650" height="226" style="border:1px solid black;"></a></p> 
      <p><span style="color:#333333;">4.</span><strong>按键修饰符</strong></p> 
      <div> 
       <span style="color:#333333;">Vue </span> 
       <span style="color:#333333;">允许为 </span> 
       <span style="color:#333333;">v</span> 
       <span style="color:#333333;">-</span> 
       <span style="color:#333333;">on </span> 
       <span style="color:#333333;">在监听键盘事件时添加按键修饰符</span> 
      </div> 
      <div> 
       <p style="text-align:center;"><a href="http://img.e-com-net.com/image/info8/1e14f8869ea1464598126d969520f40b.jpg" target="_blank"><img alt="Vue全家桶之Vue.js----Vue基础（持续更新中）_第6张图片" src="http://img.e-com-net.com/image/info8/1e14f8869ea1464598126d969520f40b.jpg" width="650" height="538" style="border:1px solid black;"></a></p> 
       <p>5.<strong>自定义按键修饰符别名</strong></p> 
       <p><span style="color:#333333;">在</span><span style="color:#333333;">Vue</span><span style="color:#333333;">中可以通过 </span><span style="color:#333333;">config.keyCodes </span><span style="color:#333333;">自定义按键修饰符别名 ，如 </span><span style="color:#7c79e5;">Vue.config.keyCodes.f1 = 112</span></p> 
      </div> 
     </div> 
    </div> 
   </div> 
   <h3>1.3.9 <span style="color:#404040;"><strong>属性绑定</strong></span></h3> 
   <p>1.<span style="color:#404040;">Vue中动态处理属性：</span><span style="color:#333333;">v-bind 指令被用来响应地更新</span><span style="color:#333333;"> HTML </span><span style="color:#333333;">属性 ，v-bind:href 可以缩写为 </span><span style="color:#333333;">:href</span></p> 
   <p><span style="color:#f33b45;">注意：v-bind 和 v-on的区别 v-bind   绑定属性  v-on  绑定事件 </span></p> 
   <p>2.<span style="color:#333333;"><strong>绑定对象 ：</strong>通过v-bind:class = {   键： 值 } 键 代表一个类名，如果这个值为true表示显示这个类名，如果这个值为false表示不显示这个类</span></p> 
   <p><span style="color:#333333;">注意：v-bind:class</span><span style="color:#333333;">指令可以与普通的</span><span style="color:#333333;">class</span><span style="color:#333333;">特性共存 </span></p> 
   <p><span style="color:#333333;">3.<strong>绑定数组：</strong>通过v-bind:class =[ 值1，值2 ] 值1、值2 对应 data 中的 数据</span></p> 
   <div>
     4. 
    <span style="color:#333333;"><strong>绑定对象和绑定数组的区别：</strong></span> 
    <div> 
     <span style="color:#333333;">绑定对象的时候 对象的属性 即要渲染的类名 对象的属性值对应的是</span> 
     <span style="color:#333333;"> data </span> 
     <span style="color:#333333;">中的数据 </span> 
    </div> 
    <div> 
     <span style="color:#333333;">绑定数组的时候数组里面存的是</span> 
     <span style="color:#333333;">data </span> 
     <span style="color:#333333;">中的数据</span> 
    </div> 
    <div> 
     <span style="color:#f33b45;">注意：对象绑定和对象数组可以混用</span> 
    </div> 
   </div> 
   <div>
       
   </div> 
   <div>
     5. 
    <span style="color:#333333;"><strong>绑定style：</strong></span> 
   </div> 
   <div> 
    <span style="color:#333333;">属性名可以用驼峰式 </span> 
    <span style="color:#333333;">(camelCase) </span> 
    <span style="color:#333333;">或短横线分隔 </span> 
    <span style="color:#333333;">(kebab-case</span> 
    <span style="color:#333333;">，记得用单引号括起来</span> 
    <span style="color:#333333;">) </span> 
   </div> 
   <div> 
    <div> 
     <span style="color:#333333;">        </span> 
     <span style="color:#7c79e5;"><div v-bind:style="{ color: activeColor, fontSize: fontSize,background:'red' }">内联样式 </div> </span> 
    </div> 
    <div> 
     <span style="color:#333333;">组语法可以将多个样式对象应用到同一个元素</span> 
    </div> 
    <div> 
     <span style="color:#333333;">        </span> 
     <span style="color:#7c79e5;"><div v-bind:style="[styleObj1, styleObj2]"></div> </span> 
    </div> 
    <div> 
     <span style="color:#333333;">也可以使用对象和数组：</span> 
    </div> 
    <div> 
     <span style="color:#333333;">v-bind:style = [值1， 值2 ] ，数组中的值1 和值2 中存储的是一个对象，这个对象里面存储的css属性和属性值 </span> 
    </div> 
    <div> 
     <span style="color:#333333;">v-bind:style =  {  键： 值 } ，键代表CSS的属性，值中存贮的是CSS 属性值</span> 
    </div> 
    <h3>1.3.10 <span style="color:#404040;"><strong>分支循环结构 </strong></span></h3> 1. 
    <strong>分支结构</strong> 
    <p style="text-indent:33px;"><span style="color:#262626;">⚫ v-if</span></p> 
    <p style="text-indent:33px;"><span style="color:#333333;">            1- 多个元素 通过条件判断展示或者隐藏某个元素。或者多个元素 </span></p> 
    <div> 
     <span style="color:#333333;">                    2- </span> 
     <span style="color:#333333;">进行两个视图之间的切换 </span> 
    </div> 
    <p style="text-indent:33px;"><span style="color:#262626;">⚫ v-else </span></p> 
    <p style="text-indent:33px;"><span style="color:#262626;">⚫ v-else-if </span></p> 
    <p style="text-indent:33px;"><span style="color:#262626;">⚫ v-show</span></p> 
   </div> 
   <div>
     2. 
    <strong>v-if与v-show的区别</strong> 
    <p style="text-indent:33px;"><span style="color:#262626;">⚫ v-if控制元素是否渲染到页面：v-if是动态的向DOM树内添加或者删除DOM元素</span></p> 
    <p style="text-indent:33px;"><span style="color:#333333;">v-if</span><span style="color:#333333;">切换有一个局部编译</span><span style="color:#333333;">/</span><span style="color:#333333;">卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件 </span></p> 
    <p style="text-indent:33px;"><span style="color:#262626;">⚫ v-show控制元素是否显示（</span><span style="color:#f33b45;">已经渲染到了页面</span><span style="color:#262626;">）：v-show本质就是标签display设置为none，控制隐藏</span></p> 
    <p style="text-indent:33px;"><span style="color:#333333;">v-show</span><span style="color:#333333;">只编译一次，后面其实就是控制</span><span style="color:#333333;">css</span><span style="color:#333333;">，而</span><span style="color:#333333;">v-if</span><span style="color:#333333;">不停的销毁和创建，故</span><span style="color:#333333;">v-show</span><span style="color:#333333;">性能更好一点</span></p> 
    <p style="text-indent:0;">3.<span style="color:#333333;"><strong>循环结构 </strong></span></p> 
    <div> 
     <span style="color:#333333;"><strong>v-for </strong>：用于循环的数组里面的值可以是对象，也可以是普通元素</span> 
    </div> 
    <div>
        
    </div> 
    <div> 
     <div> 
      <span style="color:#262626;">⚫ v-for遍历数组</span> 
     </div> 
    </div> 
    <div> 
     <p style="text-align:center;"><a href="http://img.e-com-net.com/image/info8/868bcf14966c48b695a6ee832188211a.jpg" target="_blank"><img alt="Vue全家桶之Vue.js----Vue基础（持续更新中）_第7张图片" src="http://img.e-com-net.com/image/info8/868bcf14966c48b695a6ee832188211a.jpg" width="650" height="389" style="border:1px solid black;"></a></p> 
     <div> 
      <span style="color:#262626;">⚫ v-for遍历对象</span> 
     </div> 
     <div> 
      <p style="text-align:center;"><a href="http://img.e-com-net.com/image/info8/fed85c553ca64dfaaffc4857eac2e399.jpg" target="_blank"><img alt="Vue全家桶之Vue.js----Vue基础（持续更新中）_第8张图片" src="http://img.e-com-net.com/image/info8/fed85c553ca64dfaaffc4857eac2e399.jpg" width="650" height="415" style="border:1px solid black;"></a></p> 
      <div> 
       <span style="color:#f33b45;"><strong>不推荐</strong>同时使用 v-if 和 v-for ，当 v-if 与 v-for 一起使用时， v-for 具有比 v-if 更高的优先级</span> 
      </div> 
      <div> 
       <div> 
        <span style="color:#404040;">⚫ v-if和v-for结合使用 </span> 
       </div> 
       <div> 
        <span style="color:#000000;">        <div v-if='value==12' v-for='(value, key, index) in object'></div></span> 
       </div> 
       <div>
         4. key的作用： 
       </div> 
       <div>
         key来给每个节点做一个唯一标识 ；key的作用主要是为了高效的更新虚拟DOM； 
        <span style="color:#262626;">帮助Vue区分不同的元素，从而提高性能</span> 
       </div> 
      </div> 
     </div> 
    </div> 
   </div> 
   <h2>1.4 <span style="color:#333333;"><strong>Vue</strong></span><span style="color:#333333;"><strong>常用特性</strong></span></h2> 
   <p style="text-indent:33px;"><span style="color:#262626;">⚫ </span><span style="color:#404040;">表单操作 </span></p> 
   <p style="text-indent:33px;"><span style="color:#262626;">⚫ </span><span style="color:#404040;">自定义指令 </span></p> 
   <p style="text-indent:33px;"><span style="color:#262626;">⚫ </span><span style="color:#404040;">计算属性 </span></p> 
   <p style="text-indent:33px;"><span style="color:#262626;">⚫ </span><span style="color:#404040;">侦听器 </span></p> 
   <p style="text-indent:33px;"><span style="color:#262626;">⚫ </span><span style="color:#404040;">过滤器 </span></p> 
   <p style="text-indent:33px;"><span style="color:#262626;">⚫ </span><span style="color:#404040;">生命周期 </span></p> 
   <h3>1.4.1 <span style="color:#404040;"><strong>表单操作</strong></span></h3> 
   <div> 
    <span style="color:#333333;">1.获取单选框中的值 (通过v-model)</span> 
   </div> 
   <div>
       
   </div> 
   <div> 
    <p style="text-align:center;"><a href="http://img.e-com-net.com/image/info8/612f5143d58c4a90942fe9398039f9c4.jpg" target="_blank"><img alt="Vue全家桶之Vue.js----Vue基础（持续更新中）_第9张图片" src="http://img.e-com-net.com/image/info8/612f5143d58c4a90942fe9398039f9c4.jpg" width="634" height="405" style="border:1px solid black;"></a></p> 
    <p>2.获取<span style="color:#333333;">复选框中的值（通过</span><span style="color:#333333;">v-model）：</span><span style="color:#333333;">和获取单选框中的值一样 ，复选框 checkbox 这种的组合时 </span><span style="color:#333333;">data </span><span style="color:#333333;">中的</span><span style="color:#333333;"> hobby </span><span style="color:#333333;">我们要定义成数组 否则无法实现多选</span></p> 
    <p style="text-align:center;"><a href="http://img.e-com-net.com/image/info8/bfc4baa24f634dc4b9c91506e52e35c8.jpg" target="_blank"><img alt="Vue全家桶之Vue.js----Vue基础（持续更新中）_第10张图片" src="http://img.e-com-net.com/image/info8/bfc4baa24f634dc4b9c91506e52e35c8.jpg" width="626" height="270" style="border:1px solid black;"></a></p> 
    <p>3.<span style="color:#333333;">获取下拉框和文本框中的值（通过</span><span style="color:#333333;">v-model）</span></p> 
    <p style="text-align:center;"><a href="http://img.e-com-net.com/image/info8/a16363a21ab74107b634294decb2878e.jpg" target="_blank"><img alt="Vue全家桶之Vue.js----Vue基础（持续更新中）_第11张图片" src="http://img.e-com-net.com/image/info8/a16363a21ab74107b634294decb2878e.jpg" width="621" height="493" style="border:1px solid black;"></a></p> 
    <p>4.<span style="color:#404040;"><strong>表单域修饰符 </strong></span></p> 
    <div> 
     <span style="color:#333333;">.number </span> 
     <span style="color:#333333;">转换为数值：</span> 
    </div> 
    <div> 
     <span style="color:#333333;">        注意点： </span> 
     <span style="color:#333333;">当开始输入非数字的字符串时，因为Vue</span> 
     <span style="color:#333333;">无法将字符串转换成数值 ，所以属性值将实时更新成相同的字符串。即使后面输入数字，也将被视作字符串</span> 
    </div> 
    <div>
        
    </div> 
    <div> 
     <span style="color:#333333;">.trim </span> 
     <span style="color:#333333;">自动过滤用户输入的首尾空白字符：只能去掉首尾的 不能去除中间的空格 </span> 
    </div> 
    <div>
        
    </div> 
    <div> 
     <span style="color:#333333;">.lazy </span> 
     <span style="color:#333333;">将</span> 
     <span style="color:#333333;">input</span> 
     <span style="color:#333333;">事件切换成</span> 
     <span style="color:#333333;">change</span> 
     <span style="color:#333333;">事件：.lazy 修饰符延迟了同步更新属性值的时机。即将原本绑定在</span> 
     <span style="color:#333333;"> input </span> 
     <span style="color:#333333;">事件的同步逻辑转变为绑定在</span> 
     <span style="color:#333333;"> change 事件上 ，</span> 
     <span style="color:#f33b45;">在失去焦点 或者 按下回车键时才更新 </span> 
    </div> 
    <div>
        
    </div> 
    <h3>1.4.2自定义指令</h3> 
    <div>
        
    </div> 
    <div> 
     <div> 
      <span style="color:#333333;"><strong>1.Vue.directive </strong></span> 
      <span style="color:#333333;"><strong>注册全局指令</strong></span> 
     </div> 
     <div> 
      <p style="text-align:center;"><a href="http://img.e-com-net.com/image/info8/da544e481f254f2db559a7a8bd3e584f.jpg" target="_blank"><img alt="Vue全家桶之Vue.js----Vue基础（持续更新中）_第12张图片" src="http://img.e-com-net.com/image/info8/da544e481f254f2db559a7a8bd3e584f.jpg" width="650" height="384" style="border:1px solid black;"></a></p> 
      <div> 
       <span style="color:#333333;"><strong>2.Vue.directive </strong></span> 
       <span style="color:#333333;"><strong>注册全局指令 带参数 </strong></span> 
      </div> 
      <div> 
       <p style="text-align:center;"><a href="http://img.e-com-net.com/image/info8/18d680bfd5d8455ab4596bc2c61232ac.jpg" target="_blank"><img alt="Vue全家桶之Vue.js----Vue基础（持续更新中）_第13张图片" src="http://img.e-com-net.com/image/info8/18d680bfd5d8455ab4596bc2c61232ac.jpg" width="650" height="446" style="border:1px solid black;"></a></p> 
       <div> 
        <span style="color:#333333;"><strong>3.自定义指令局部指令</strong></span> 
       </div> 
       <div> 
        <div> 
         <span style="color:#333333;">局部指令，需要定义在 </span> 
         <span style="color:#333333;">directives </span> 
         <span style="color:#333333;">的选项 用法和全局用法一样 ；</span> 
         <span style="color:#f33b45;">局部指令只能在当前组件里面使用</span> 
         <span style="color:#333333;"> ；当全局指令和局部指令同名时以局部指令为准 </span> 
        </div> 
        <div> 
         <p style="text-align:center;"><a href="http://img.e-com-net.com/image/info8/a667ab9f2d304fa28b6803736a15880c.jpg" target="_blank"><img alt="Vue全家桶之Vue.js----Vue基础（持续更新中）_第14张图片" src="http://img.e-com-net.com/image/info8/a667ab9f2d304fa28b6803736a15880c.jpg" width="650" height="323" style="border:1px solid black;"></a></p> 
         <h3>1.4.3 <span style="color:#333333;"><strong>计算属性 </strong></span><span style="color:#333333;"><strong>computed</strong></span></h3> 
         <div> 
          <span style="color:#333333;">模板中放入太多的逻辑会让模板过重且难以维护 使用计算属性可以让模板更加的简洁 ；</span> 
          <span style="color:#f33b45;"><strong>计算属性是基于它们的响应式依赖进行缓存的，方法不存在缓存；</strong></span> 
          <span style="color:#333333;">computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化，则我们监控的这个值也就会发生变化</span> 
         </div> 
         <h3><span style="color:#333333;">1.4.4 </span><span style="color:#333333;"><strong>侦听器 </strong></span><span style="color:#333333;"><strong>watch </strong></span></h3> 
         <div> 
          <span style="color:#333333;">使用</span> 
          <span style="color:#333333;">watch</span> 
          <span style="color:#333333;">来响应数据的变化 ，一般用于异步或者开销较大的操作 ，watch 中的属性 一定是</span> 
          <span style="color:#333333;">data </span> 
          <span style="color:#333333;">中 已经存在的数据 </span> 
         </div> 
         <div> 
          <span style="color:#333333;"><strong>当需要监听一个对象的改变时，普通的</strong></span> 
          <span style="color:#333333;"><strong>watch</strong></span> 
          <span style="color:#333333;"><strong>方法无法监听到对象内部属性的改变，只有</strong></span> 
          <span style="color:#333333;"><strong>data</strong></span> 
          <span style="color:#333333;"><strong>中的数据才能够 </strong></span> 
          <span style="color:#333333;"><strong>监听到变化，此时就需要</strong></span> 
          <span style="color:#333333;"><strong>deep</strong></span> 
          <span style="color:#333333;"><strong>属性对对象进行深度监听 </strong></span> 
         </div> 
         <div>
             
         </div> 
        </div> 
        <p style="text-align:center;"><a href="http://img.e-com-net.com/image/info8/0a21e77b7e3840cea12256fd63f366cc.jpg" target="_blank"><img alt="Vue全家桶之Vue.js----Vue基础（持续更新中）_第15张图片" src="http://img.e-com-net.com/image/info8/0a21e77b7e3840cea12256fd63f366cc.jpg" width="650" height="302" style="border:1px solid black;"></a></p> 
        <h3>1.4.5<span style="color:#333333;"><strong>过滤器 </strong></span></h3> 
        <p><span style="color:#333333;"><strong>  作用：</strong></span><span style="color:#262626;">格式化数据，比如将字符串格式化为首字母大写，将日期格式化为指定的格式等</span></p> 
        <div> 
         <span style="color:#333333;">1.Vue.js</span> 
         <span style="color:#333333;">允许自定义过滤器，可被用于一些常见的文本格式化</span> 
        </div> 
        <div>
               
         <p style="text-indent:33px;"><span style="color:#7c79e5;">Vue.filter(‘过滤器名称’, function(value){ </span></p> 
         <p style="text-indent:33px;"><span style="color:#7c79e5;">// 过滤器业务逻辑 </span></p> 
         <p style="text-indent:33px;"><span style="color:#7c79e5;">}) </span></p> 
        </div> 
        <div> 
         <span style="color:#333333;">2.过滤器可以用在两个地方：双花括号插值和</span> 
         <span style="color:#333333;">v-bind</span> 
         <span style="color:#333333;">表达式</span> 
        </div> 
        <div> 
         <p style="text-indent:33px;"><span style="color:#7c79e5;"><div>{{msg | upper}}</div> </span></p> 
         <p style="text-indent:33px;"><span style="color:#7c79e5;"><div>{{msg | upper | lower}}</div> </span></p> 
         <p style="text-indent:33px;"><span style="color:#7c79e5;"><div v-bind:id=“id | formatId"></div> </span></p> 
        </div> 
        <div> 
         <span style="color:#333333;">3.过滤器应该被添加在</span> 
         <span style="color:#333333;">JavaScript</span> 
         <span style="color:#333333;">表达式的尾部，由</span> 
         <span style="color:#333333;">“</span> 
         <span style="color:#333333;">管道</span> 
         <span style="color:#333333;">”</span> 
         <span style="color:#333333;">符号指示 支持级联操作 </span> 
        </div> 
        <div> 
         <span style="color:#333333;">4.过滤器不改变真正的 </span> 
         <span style="color:#333333;">data </span> 
         <span style="color:#333333;">，而只是改变渲染的结果，并返回过滤后的版本 </span> 
        </div> 
        <div> 
         <span style="color:#333333;">5.全局注册时是</span> 
         <span style="color:#333333;">fifilter</span> 
         <span style="color:#333333;">，没有</span> 
         <span style="color:#333333;">s</span> 
         <span style="color:#333333;">的。而局部过滤器是</span> 
         <span style="color:#333333;">fifilters</span> 
         <span style="color:#333333;">，是有</span> 
         <span style="color:#333333;">s</span> 
         <span style="color:#333333;">的</span> 
        </div> 
        <div> 
         <span style="color:#333333;">        Vue.filter   全局 Filters  局部</span> 
        </div> 
        <div> 
         <p style="text-indent:33px;"><span style="color:#7c79e5;">filters:{ </span></p> 
         <p style="text-indent:33px;"><span style="color:#7c79e5;">capitalize: function(){} </span></p> 
         <p style="text-indent:33px;"><span style="color:#7c79e5;">} </span></p> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div> 
      <p style="text-align:center;"><a href="http://img.e-com-net.com/image/info8/003ecf0eff604e169583508bdea56e8f.jpg" target="_blank"><img alt="Vue全家桶之Vue.js----Vue基础（持续更新中）_第16张图片" src="http://img.e-com-net.com/image/info8/003ecf0eff604e169583508bdea56e8f.jpg" width="650" height="560" style="border:1px solid black;"></a></p> 
      <div> 
       <span style="color:#333333;"><strong>过滤器中传递参数 </strong></span> 
      </div> 
      <div> 
       <p style="text-indent:33px;"><span style="color:#7c79e5;">Vue.filter(‘format’, function(value, arg1){ </span></p> 
       <p style="text-indent:33px;"><span style="color:#7c79e5;">// value就是过滤器传递过来的参数 </span></p> 
       <p style="text-indent:33px;"><span style="color:#7c79e5;">}) </span></p> 
       <div> 
        <p style="text-indent:33px;"><span style="color:#7c79e5;"><div>{{date | format(‘yyyy-MM-dd')}}</div> </span></p> 
       </div> 
      </div> 
      <div> 
       <p style="text-align:center;"><a href="http://img.e-com-net.com/image/info8/8862130f54a64ab0afc9e592731d3f7b.jpg" target="_blank"><img alt="Vue全家桶之Vue.js----Vue基础（持续更新中）_第17张图片" src="http://img.e-com-net.com/image/info8/8862130f54a64ab0afc9e592731d3f7b.jpg" width="650" height="511" style="border:1px solid black;"></a></p> 
       <h3>1.4.6 <span style="color:#333333;"><strong>生命周期 </strong></span></h3> 
      </div> 
     </div> 
    </div> 
   </div> 
   <div> 
    <div> 
     <span style="color:#333333;">1.事物从出生到死亡的过程 ；Vue实例从创建 到销毁的过程 ，这些过程中会伴随着一些函数的自调用。我们称这些函数为钩子函数 </span> 
    </div> 
    <div> 
     <span style="color:#3399ea;">2.主要阶段：挂载（初始化相关属性）→更新（元素或组件的变更操作）→销毁（销毁相关属性）</span> 
     <span style="color:#262626;"> </span> 
    </div> 
   </div> 
   <div> 
    <div> 
     <span style="color:#333333;"><strong>3.常用的 钩子函数</strong></span> 
    </div> 
    <div> 
     <p style="text-align:center;"><a href="http://img.e-com-net.com/image/info8/2655c55c35d34216b5f4b973abb8bea1.jpg" target="_blank"><img alt="Vue全家桶之Vue.js----Vue基础（持续更新中）_第18张图片" src="http://img.e-com-net.com/image/info8/2655c55c35d34216b5f4b973abb8bea1.jpg" width="650" height="317" style="border:1px solid black;"></a></p> 
     <p>4.<span style="color:#404040;"><strong>Vue实例的产生过程 </strong></span></p> 
     <p style="text-indent:33px;"><span style="color:#262626;">① beforeCreate 在实例初始化之后，数据观测和事件配置之前被调用。 </span></p> 
     <p style="text-indent:33px;"><span style="color:#262626;">② created 在实例创建完成后被立即调用。 </span></p> 
     <p style="text-indent:33px;"><span style="color:#262626;">③ beforeMount 在挂载开始之前被调用。 </span></p> 
     <p style="text-indent:33px;"><span style="color:#262626;">④ mounted el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子。 </span></p> 
     <p style="text-indent:33px;"><span style="color:#262626;">⑤ beforeUpdate 数据更新时调用，发生在虚拟DOM打补丁之前。 </span></p> 
     <p style="text-indent:33px;"><span style="color:#262626;">⑥ updated 由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。 </span></p> 
     <p style="text-indent:33px;"><span style="color:#262626;">⑦ beforeDestroy 实例销毁之前调用。 </span></p> 
     <p style="text-indent:33px;"><span style="color:#262626;">⑧ destroyed 实例销毁后调用。</span></p> 
     <p style="text-indent:33px;"> </p> 
     <h3>1.4.7 <strong>数组变异方法</strong></h3> 
    </div> 
   </div> 
   <div>
     在vue中，直接修改对象属性的值无法触发响应式（直接修改对象属性的值，数据修改了，但是页面内容没有变），变异数组方法即保持数组方法原有功能不变的前提下对其进行功能拓展 
   </div> 
   <div>
       
   </div> 
   <div> 
    <p style="text-align:center;"><a href="http://img.e-com-net.com/image/info8/9e5c1c78064d4dbb92f112295a75d315.jpg" target="_blank"><img alt="Vue全家桶之Vue.js----Vue基础（持续更新中）_第19张图片" src="http://img.e-com-net.com/image/info8/9e5c1c78064d4dbb92f112295a75d315.jpg" width="650" height="255" style="border:1px solid black;"></a></p> 
    <h3>1.4.8 替换数组</h3> 
    <p>不会改变原始数组，但总是返回一个新数组</p> 
    <p style="text-align:center;"><a href="http://img.e-com-net.com/image/info8/6754a3984b0c458498e0915a93254ba9.jpg" target="_blank"><img alt="Vue全家桶之Vue.js----Vue基础（持续更新中）_第20张图片" height="102" src="http://img.e-com-net.com/image/info8/6754a3984b0c458498e0915a93254ba9.jpg" width="650" style="border:1px solid black;"></a></p> 
    <p><span style="color:#f33b45;">变异方法和替换数组有什么区别 </span>：变异的方法能够实现数据更新视图自动更新 替换数组 不会修改原始数据 导致 数据改变 视图不一定更新</p> 
    <h3>1.4.9 动态处理响应式数据</h3> 
    <p style="text-indent:33px;"><span style="color:#7c79e5;">⚫Vue.set(vm.items, indexOfItem, newValue) </span></p> 
    <p style="text-indent:33px;"><span style="color:#7c79e5;">⚫ vm.$set(vm.items, indexOfItem, newValue) </span></p> 
    <p style="text-indent:33px;"><span style="color:#262626;">① 参数一表示要处理的数组名称 </span></p> 
    <p style="text-indent:33px;"><span style="color:#262626;">② 参数二表示要处理的数组的索引 </span></p> 
    <p style="text-indent:33px;"><span style="color:#262626;">③ 参数三表示要处理的数组的值</span></p> 
    <p style="text-indent:33px;"> </p> 
   </div> 
   <p style="text-indent:33px;"> </p> 
   <p style="text-indent:33px;"> </p> 
   <div>
       
   </div> 
  </div> 
 </div> 
</div>
                            </div>
                        </div>
                    </div>
                    
                    <div id="SOHUCS" sid="1275349564311748608"></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)</h4>
        <div id="paradigm-article-related">
            <div class="recommend-post mb30">
                <ul class="widget-links">
                    <li><a href="/article/1881363260859543552.htm"
                           title=". 如何在 Vue 3 中使用组合式 API 进行代码的逻辑复用？" target="_blank">. 如何在 Vue 3 中使用组合式 API 进行代码的逻辑复用？</a>
                        <span class="text-muted">JJCTO袁龙</span>
<a class="tag" taget="_blank" href="/search/Vue/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>如何在Vue3中使用组合式API进行代码的逻辑复用？在Vue3的生态中，组合式API（CompositionAPI）引入了全新的方式来构建组件，使得逻辑复用变得更加简单和灵活。在传统的选项API中，逻辑复用通常依赖于混入（mixins）和高阶组件（HOCs），并且这两者在某种程度上可能导致代码的复杂性及可读性问题。而组合式API通过函数的方式，使得逻辑复用变得更加明确且易于管理。本文将通过示例，带</div>
                    </li>
                    <li><a href="/article/1881360866637574144.htm"
                           title="Vue Router 中如何获取路由传递过来的参数？" target="_blank">Vue Router 中如何获取路由传递过来的参数？</a>
                        <span class="text-muted">晚夜微雨问海棠呀</span>
<a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95%E9%A2%98%E6%95%B4%E7%90%86%E4%B8%93%E9%A2%98/1.htm">面试题整理专题</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>在VueRouter中，可以通过多种方式获取路由传递过来的参数。以下是几种常见的方法：使用this.$route.params在组件中，可以通过this.$route.params来访问路由参数。例如，假设你有一个路由配置如下：constroutes=[{path:'/user/:id',component:UserComponent}];在UserComponent组件中，你可以这样获取id参数</div>
                    </li>
                    <li><a href="/article/1881360265505730560.htm"
                           title="Vue.js 的组合式 API 与状态管理" target="_blank">Vue.js 的组合式 API 与状态管理</a>
                        <span class="text-muted"></span>

<div>随着现代前端开发的不断发展，Vue.js作为一个渐进式JavaScript框架，已经成为开发动态和交互式用户界面的流行选择之一。Vue.js的设计旨在通过简洁的语法和强大的功能来提升开发者的生产力。在Vue3中引入的组合式API（CompositionAPI）及其状态管理功能，为开发者提供了一种灵活且可扩展的方式来构建复杂的应用程序。本文将深入探讨Vue.js的组合式API，并结合状态管理的概念，</div>
                    </li>
                    <li><a href="/article/1881357733731561472.htm"
                           title="ofa.js：无需打包的MVVM框架，前端开发的轻量之选" target="_blank">ofa.js：无需打包的MVVM框架，前端开发的轻量之选</a>
                        <span class="text-muted"></span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>近年来，前端开发领域涌现了许多优秀的框架，如React、Vue和Angular，它们极大地提升了开发效率和代码可维护性。然而，随着项目复杂度的增加，这些框架的学习曲线和构建工具链的复杂性也让许多开发者感到头疼。在这样的背景下，ofa.js应运而生，它号称“无需打包的MVVM框架”，试图为前端开发带来一种全新的体验。那么，ofa.js究竟有何独特之处？它与其他MVVM框架相比又有哪些优势？本文将为你</div>
                    </li>
                    <li><a href="/article/1881357351257174016.htm"
                           title="Vue 3.5 中的 useId：深入解析与应用实践" target="_blank">Vue 3.5 中的 useId：深入解析与应用实践</a>
                        <span class="text-muted"></span>
<a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98/1.htm">程序员</a>
                        <div>随着Vue3.5的发布，开发者们迎来了许多新特性和改进。其中，useId是一个备受关注的工具函数，它为开发者提供了一种简单而高效的方式来生成唯一的ID。本文将深入解析useId的实现原理、使用场景以及在实际项目中的应用实践。一、什么是useId？useId是Vue3.5中引入的一个CompositionAPI函数，用于生成唯一的ID。它的主要用途是为组件或DOM元素分配唯一的标识符，避免在SSR（</div>
                    </li>
                    <li><a href="/article/1881353429582934016.htm"
                           title="深入剖析Vue的provide与inject：如何实现跨层级数据共享" target="_blank">深入剖析Vue的provide与inject：如何实现跨层级数据共享</a>
                        <span class="text-muted"></span>
<a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a>
                        <div>引言在Vue开发中，provide与inject是两个非常有用的特性，它们常用于父子组件关系之外的跨层级数据传递。相比于props和$emit的传统方式，provide和inject可以更轻松地在多个组件之间传递数据，尤其是在深层嵌套的组件树中。它们在Vue2.2版本首次引入，Vue3中也得到了进一步的优化。尽管provide和inject的使用看起来非常简单，但其背后隐藏了复杂的实现原理。在这篇</div>
                    </li>
                    <li><a href="/article/1881352923691151360.htm"
                           title="Vue项目打包部署与路由配置深度解析" target="_blank">Vue项目打包部署与路由配置深度解析</a>
                        <span class="text-muted"></span>
<a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98/1.htm">程序员</a>
                        <div>在Vue.js项目的开发和部署过程中，配置打包路径和路由模式是两个至关重要的环节。下面，我们将详细探讨如何根据需求将Vue项目打包部署到域名的根路径或二级路径，并深入解析hash路由与history路由的配置方法。一、Vue项目打包部署1.配置vue.config.jsvue.config.js是VueCLI项目的配置文件，用于定制项目构建过程中的各种选项。其中，publicPath属性决定了打包</div>
                    </li>
                    <li><a href="/article/1881352290326081536.htm"
                           title="小明，谈谈Vue组件动态加载有哪些方式" target="_blank">小明，谈谈Vue组件动态加载有哪些方式</a>
                        <span class="text-muted"></span>
<a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98/1.htm">程序员</a>
                        <div>动态加载组件可以显著提高应用的性能，优化用户体验，尤其是在大型应用中，合理的组件加载策略尤为重要。本文将探讨几种在Vue中实现组件动态加载的具体方案。1.异步组件Vue允许将组件定义为异步组件，从而在需要时动态加载它们。这可以通过使用import()函数来实现，具体示例如下：constAsyncComponent=()=>import('./components/MyComponent.vue')</div>
                    </li>
                    <li><a href="/article/1881351654117273600.htm"
                           title="小明，谈谈你对Vue nextTick的理解" target="_blank">小明，谈谈你对Vue nextTick的理解</a>
                        <span class="text-muted"></span>
<a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98/1.htm">程序员</a>
                        <div>一、nextTick的实现细节在Vue中，nextTick是一个重要的异步操作工具，用于在DOM更新完成后执行回调函数。其实现依赖于微任务机制，以确保操作在下一个“事件循环”中执行。以下是nextTick的具体实现过程：任务队列：当调用nextTick时，Vue会将回调函数存入一个数组（任务队列）中。每次触发数据变化时，这个队列会被处理。微任务调度：Vue首先尝试使用Promise.resolve</div>
                    </li>
                    <li><a href="/article/1881351651776851968.htm"
                           title="小明，谈谈你对Vue 虚拟dom的理解" target="_blank">小明，谈谈你对Vue 虚拟dom的理解</a>
                        <span class="text-muted"></span>
<a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98/1.htm">程序员</a>
                        <div>Vue.js的虚拟DOM（VirtualDOM）是为了提高前端性能和开发体验而引入的一种技术。Vue.js虚拟DOM的大致实现虚拟DOM的定义虚拟DOM是一种JavaScript对象，它用来描述用户界面（UI）的结构和内容。每个虚拟DOM节点（VNode）代表一个真实的DOM元素或组件实例。//VNode示例constvnode={tag:'div',data:{id:'app'},childre</div>
                    </li>
                    <li><a href="/article/1881349018727018496.htm"
                           title="使用vue-cli创建uni-app项目，vue3/vite模板" target="_blank">使用vue-cli创建uni-app项目，vue3/vite模板</a>
                        <span class="text-muted">hy2356891299</span>
<a class="tag" taget="_blank" href="/search/vue3/1.htm">vue3</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a>
                        <div>官网地址：https://uniapp.dcloud.net.cn/quickstart-cli.html1.首先，安装脚手架：npminstall-g@vue/cli注意：Vue3/Vite版要求node版本^14.18.0||>=16.0.0（我用的是nodev16.0.0）2.下载模板，因为我使用官网命令安装失败，所以直接下载的压缩包使用js下载地址https://gitee.com/dcl</div>
                    </li>
                    <li><a href="/article/1881346359013994496.htm"
                           title="Vue.js 的组合式 API 与状态管理" target="_blank">Vue.js 的组合式 API 与状态管理</a>
                        <span class="text-muted"></span>

<div>一、条形码绘制1.原理绘制条形码需要根据不同的应用场景选择适当的条形码标准，如常见的codabar、CODE30、CODE128等，每一种条形码标准都有它特定的数据编码规则，调用这些编码规则进行数据编码时会将数据字符按照所选编码规则转换成条和空的组合（一组二进制数据）。不同的条形码标准使用不同的编码规则来表示0到9的数字或26个英文字母。其中，为了确保扫描的准确性，条形码中还包括一个校验字符。这个</div>
                    </li>
                    <li><a href="/article/1881268391084355584.htm"
                           title="Springboot毕设项目动物园售票管理系统96zau（java+VUE+Mybatis+Maven+Mysql）" target="_blank">Springboot毕设项目动物园售票管理系统96zau（java+VUE+Mybatis+Maven+Mysql）</a>
                        <span class="text-muted">韩元计算机毕设</span>
<a class="tag" taget="_blank" href="/search/mybatis/1.htm">mybatis</a><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/boot/1.htm">boot</a>
                        <div>项目运行环境配置：Jdk1.8+Tomcat8.5+Mysql+HBuilderX（Webstorm也行）+Eclispe（IntelliJIDEA,Eclispe,MyEclispe,Sts都支持）。项目技术：Springboot+mybatis+Maven+Vue等等组成，B/S模式+Maven管理等等。环境需要1.运行环境：最好是javajdk1.8，我们在这个平台上运行的。其他版本理论上也</div>
                    </li>
                    <li><a href="/article/1881201748866035712.htm"
                           title="Axios封装一款前端项目网络请求实用插件" target="_blank">Axios封装一款前端项目网络请求实用插件</a>
                        <span class="text-muted">smart_ljh</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/vuejs/1.htm">vuejs</a><a class="tag" taget="_blank" href="/search/axios/1.htm">axios</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a>
                        <div>前端项目开发非常经典的插件axios大家都很熟悉，它是一个Promise网络请求库，可以用于浏览器和node.js支持的项目中。像一直以来比较火的Vue.js开发的几乎所有项目网络请求用的都是axios。那么我们在实际的项目中，有时候为了便于维护、请求头信息统一处理、统一拦截器设置以及响应数据统一处理，需要在项目中针对axios封装一个网络请求插件。接下来就介绍一下针对以上这些输出具体的解决方案和</div>
                    </li>
                    <li><a href="/article/1881201598768672768.htm"
                           title="vue2开发：el-select多选框点击后关闭下拉" target="_blank">vue2开发：el-select多选框点击后关闭下拉</a>
                        <span class="text-muted"></span>

<div>效果：代码：vue2开发：el-select多选框点击后关闭下拉*{margin:0;padding:0;}#app{padding:50px;}el-select多选框点击后不关闭下拉el-select多选框点击后关闭下拉newVue({el:'#app',data(){return{inviteStoreStatus:null,inviteStoreStatus1:null,inviteSto</div>
                    </li>
                    <li><a href="/article/1881201471312162816.htm"
                           title="vue3开发：项目添加mitt" target="_blank">vue3开发：项目添加mitt</a>
                        <span class="text-muted"></span>

<div>项目中遇到一个场景：类似于app.vue页面获取某一个页面组件的数据，因为进入那个组件是通过router-view进入，不是通过组件注入到app.vue,所以使用常规的组件通信获取不到数据，我使用了mitt实现了这个功能。Vue2中我们使用EventBus来实现跨组件之间的一些通信，它依赖于Vue自带的on/on/on/emit/$off等方法，而Vue3中移除了这些相关方法，这意味着EventB</div>
                    </li>
                    <li><a href="/article/1881201092457459712.htm"
                           title="vue开发：解决el-input-number组件输入数字的时候无法实时触发change事件" target="_blank">vue开发：解决el-input-number组件输入数字的时候无法实时触发change事件</a>
                        <span class="text-muted"></span>

<div>问题：当已经输入数字的时候，还触发了为空的校验，预期是已经输入年龄的时候不会校验，输入框没有值的时候才会触发校验的。在网上查找了资料，el-input-number组件输入数字的时候无法实时触发change事件，需要使用@input.native来触发,一开始使用了也没有效果，后来加了this.$nextTick功能实现了。//解决el-input-number组件输入数字的时候无法实时触发cha</div>
                    </li>
                    <li><a href="/article/1881187742491144192.htm"
                           title="问题大集-02-vue ui 启动时Failed to get response from https://registry.npm.taobao.org/vue-cli-version-marker" target="_blank">问题大集-02-vue ui 启动时Failed to get response from https://registry.npm.taobao.org/vue-cli-version-marker</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/ui/1.htm">ui</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>1、问题：Failedtogetresponsefromhttps://registry.npm.taobao.org/vue-cli-version-marker使用VueCLI的图形用户界面（GUI）时遇到这个错误，通常意味着VueCLI在尝试从指定的npm镜像（这里是淘宝的npm镜像https://registry.npm.taobao.org）获取某个包（这里是vue-cli-versio</div>
                    </li>
                    <li><a href="/article/1881179532459831296.htm"
                           title="vue3实现搜索关键字高亮" target="_blank">vue3实现搜索关键字高亮</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/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>其实这个需求非常常见，平时用app、浏览网页时都能用到，那具体是怎么实现的？我做了小案例，先看下效果我们先梳理下这个需求获取搜索关键字，并过滤出符合条件的数据匹配出要高亮的关键字增加样式那其实关键点就在于怎么匹配，如何高亮？这里我们使用正则匹配，再用replace替换，replace的第二个参数也可以是函数，接受的值就是正则匹配到的值：constsearchKey=(val:string)=>{i</div>
                    </li>
                    <li><a href="/article/1881178650464808960.htm"
                           title="JSON数据格式转换" target="_blank">JSON数据格式转换</a>
                        <span class="text-muted">百事老饼干</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E7%A7%AF%E7%B4%AF/1.htm">前端积累</a><a class="tag" taget="_blank" href="/search/json/1.htm">json</a>
                        <div>在前端Vue3中，处理JSON数据通常涉及到从API获取JSON、解析JSON数据、或者将JavaScript对象转换为JSON字符串。这里是几种常见的JSON转换操作一、从JSON字符串解析为JavaScript对象如果你从API或其他地方收到一个JSON字符串，可以使用JSON.parse()来将它转换为JavaScript对象。letjsonString='{"name":"John","a</div>
                    </li>
                    <li><a href="/article/1881178524115595264.htm"
                           title="VUE前端实现防抖节流 Lodash" target="_blank">VUE前端实现防抖节流 Lodash</a>
                        <span class="text-muted">百事老饼干</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E7%A7%AF%E7%B4%AF/1.htm">前端积累</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>方法一：采用Lodash工具库Lodash是一个一致性、模块化、高性能的JavaScript实用工具库。（1）采用终端导入Lodash库$npmi-gnpm$npmi--savelodash（2）应用示例：搜索框输入防抖在这个示例中，我们希望用户在输入框中停止输入500毫秒后才执行搜索操作，避免频繁请求.//假设这是一个执行搜索操作的函数functionperformSearch(query){c</div>
                    </li>
                    <li><a href="/article/1881172724785672192.htm"
                           title="学生作业-学生选课系统，后端SpringBoot + maven，前端vue。涉及管理员、学生和教师三个角色。教师可设置课程信息以及学生成绩录入；学生可选课和查看成绩。源码中包含MySQ数据表sql。" target="_blank">学生作业-学生选课系统，后端SpringBoot + maven，前端vue。涉及管理员、学生和教师三个角色。教师可设置课程信息以及学生成绩录入；学生可选课和查看成绩。源码中包含MySQ数据表sql。</a>
                        <span class="text-muted">程序员WANG</span>
<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/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a>
                        <div>1、学生作业-学生选课系统，后端SpringBoot+maven，前端vue。涉及管理员、学生和教师三个角色。教师可设置课程信息以及学生成绩录入；学生可选课和查看成绩。2、源码中包含数据表，sql文件，mysql数据库，可一键导入。3、管理员账号和密码root、root；学生和教师的账号请查看数据表，密码均为123456。4、Management是后端代码，vue是前端vue代码，按照正常启动（v</div>
                    </li>
                    <li><a href="/article/1881172472653475840.htm"
                           title="minio免费文件管理器（windows版本），若依RuoYi-Vue-Plus框架使用，有需要的可以下载，因为官网下载特别慢" target="_blank">minio免费文件管理器（windows版本），若依RuoYi-Vue-Plus框架使用，有需要的可以下载，因为官网下载特别慢</a>
                        <span class="text-muted">程序员WANG</span>
<a class="tag" taget="_blank" href="/search/%E5%B7%A5%E5%85%B7/1.htm">工具</a><a class="tag" taget="_blank" href="/search/windows/1.htm">windows</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%AE%B9%E5%99%A8/1.htm">容器</a>
                        <div>MinIO是一款开源的对象存储系统，它提供类似AmazonS3的云存储服务，适用于各种规模的企业。MinIO设计为高性能、安全且易于使用，适合存储大量的非结构化数据，如图片、文档、视频以及大数据分析中的日志文件等。在本案例中，我们关注的是Windows版本的MinIO，它被集成到了若依RuoYi-Vue-Plus框架中，以实现文件管理功能。若依RuoYi-Vue-Plus是一个基于Vue.js的现</div>
                    </li>
                    <li><a href="/article/1881155695236149248.htm"
                           title="vue+Element实现搜索关键字高亮功能" target="_blank">vue+Element实现搜索关键字高亮功能</a>
                        <span class="text-muted">hsany330</span>

<div>本文实例为大家分享了vueelementUI表格关键字筛选高亮的具体代码，供大家参考，具体内容如下代码：1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787</div>
                    </li>
                    <li><a href="/article/1881145482055577600.htm"
                           title="当使用 npm 时，出现 `certificate has expired` 错误通常意味着请求的证书已过期。" target="_blank">当使用 npm 时，出现 `certificate has expired` 错误通常意味着请求的证书已过期。</a>
                        <span class="text-muted">程序员WANG</span>
<a class="tag" taget="_blank" href="/search/%E5%B7%A5%E5%85%B7/1.htm">工具</a><a class="tag" taget="_blank" href="/search/npm/1.htm">npm</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a>
                        <div>当使用npm时，出现certificatehasexpired错误通常意味着请求的证书已过期。这可能是由于以下几种情况：网络代理问题：如果使用了网络代理，代理服务器的证书可能过期或配置有误。系统时间错误：系统时间不准确可能导致证书验证失败，因为证书的有效期是基于时间的。远程服务器证书问题：https://registry.npm.taobao.org/@vue%2fcli的证书可能在服务器端过期或</div>
                    </li>
                                <li><a href="/article/103.htm"
                                       title="SAX解析xml文件" target="_blank">SAX解析xml文件</a>
                                    <span class="text-muted">小猪猪08</span>
<a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a>
                                    <div>1.创建SAXParserFactory实例 
2.通过SAXParserFactory对象获取SAXParser实例 
3.创建一个类SAXParserHander继续DefaultHandler，并且实例化这个类 
4.SAXParser实例的parse来获取文件 
    public static void main(String[] args) { 
 //</div>
                                </li>
                                <li><a href="/article/230.htm"
                                       title="为什么mysql里的ibdata1文件不断的增长？" target="_blank">为什么mysql里的ibdata1文件不断的增长？</a>
                                    <span class="text-muted">brotherlamp</span>
<a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/linux%E8%BF%90%E7%BB%B4/1.htm">linux运维</a><a class="tag" taget="_blank" href="/search/linux%E8%B5%84%E6%96%99/1.htm">linux资料</a><a class="tag" taget="_blank" href="/search/linux%E8%A7%86%E9%A2%91/1.htm">linux视频</a><a class="tag" taget="_blank" href="/search/linux%E8%BF%90%E7%BB%B4%E8%87%AA%E5%AD%A6/1.htm">linux运维自学</a>
                                    <div>我们在 Percona 支持栏目经常收到关于 MySQL 的 ibdata1 文件的这个问题。 
当监控服务器发送一个关于 MySQL 服务器存储的报警时，恐慌就开始了 —— 就是说磁盘快要满了。 
一番调查后你意识到大多数地盘空间被 InnoDB 的共享表空间 ibdata1 使用。而你已经启用了 innodbfileper_table，所以问题是： 
ibdata1存了什么？ 
当你启用了 i</div>
                                </li>
                                <li><a href="/article/357.htm"
                                       title="Quartz-quartz.properties配置" target="_blank">Quartz-quartz.properties配置</a>
                                    <span class="text-muted">eksliang</span>
<a class="tag" taget="_blank" href="/search/quartz/1.htm">quartz</a>
                                    <div>其实Quartz JAR文件的org.quartz包下就包含了一个quartz.properties属性配置文件并提供了默认设置。如果需要调整默认配置，可以在类路径下建立一个新的quartz.properties，它将自动被Quartz加载并覆盖默认的设置。 
  
下面是这些默认值的解释 
#-----集群的配置
org.quartz.scheduler.instanceName =</div>
                                </li>
                                <li><a href="/article/484.htm"
                                       title="informatica session的使用" target="_blank">informatica session的使用</a>
                                    <span class="text-muted">18289753290</span>
<a class="tag" taget="_blank" href="/search/workflow/1.htm">workflow</a><a class="tag" taget="_blank" href="/search/session/1.htm">session</a><a class="tag" taget="_blank" href="/search/log/1.htm">log</a><a class="tag" taget="_blank" href="/search/Informatica/1.htm">Informatica</a>
                                    <div>如果希望workflow存储最近20次的log，在session里的Config  Object设置，log  options做配置，save  session log :sessions  run  ;savesessio log for  these runs:20 
session下面的source 里面有个tracing </div>
                                </li>
                                <li><a href="/article/611.htm"
                                       title="Scrapy抓取网页时出现CRC check failed 0x471e6e9a != 0x7c07b839L的错误" target="_blank">Scrapy抓取网页时出现CRC check failed 0x471e6e9a != 0x7c07b839L的错误</a>
                                    <span class="text-muted">酷的飞上天空</span>
<a class="tag" taget="_blank" href="/search/scrapy/1.htm">scrapy</a>
                                    <div>Scrapy版本0.14.4 
出现问题现象： 
  
ERROR: Error downloading <GET http://xxxxx  CRC check failed 
  
解决方法 
  
1.设置网络请求时的header中的属性'Accept-Encoding': '*;q=0' 
  
明确表示不支持任何形式的压缩格式，避免程序的解压</div>
                                </li>
                                <li><a href="/article/738.htm"
                                       title="java Swing小集锦" target="_blank">java Swing小集锦</a>
                                    <span class="text-muted">永夜-极光</span>
<a class="tag" taget="_blank" href="/search/java+swing/1.htm">java swing</a>
                                    <div>1.关闭窗体弹出确认对话框 
  1.1   this.setDefaultCloseOperation (JFrame.DO_NOTHING_ON_CLOSE); 
  1.2   
	this.addWindowListener (
				new WindowAdapter () {
					public void windo</div>
                                </li>
                                <li><a href="/article/865.htm"
                                       title="强制删除.svn文件夹" target="_blank">强制删除.svn文件夹</a>
                                    <span class="text-muted">随便小屋</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
                                    <div>  
        在windows上，从别处复制的项目中可能带有.svn文件夹，手动删除太麻烦，并且每个文件夹下都有。所以写了个程序进行删除。因为.svn文件夹在windows上是只读的，所以用File中的delete()和deleteOnExist()方法都不能将其删除，所以只能采用windows命令方式进行删除</div>
                                </li>
                                <li><a href="/article/992.htm"
                                       title="GET和POST有什么区别？及为什么网上的多数答案都是错的。" target="_blank">GET和POST有什么区别？及为什么网上的多数答案都是错的。</a>
                                    <span class="text-muted">aijuans</span>
<a class="tag" taget="_blank" href="/search/get+post/1.htm">get post</a>
                                    <div>  
    如果有人问你，GET和POST，有什么区别？你会如何回答？ 我的经历 
     前几天有人问我这个问题。我说GET是用于获取数据的，POST，一般用于将数据发给服务器之用。 
    这个答案好像并不是他想要的。于是他继续追问有没有别的区别？我说这就是个名字而已，如果服务器支持，他完全可以把G</div>
                                </li>
                                <li><a href="/article/1119.htm"
                                       title="谈谈新浪微博背后的那些算法" target="_blank">谈谈新浪微博背后的那些算法</a>
                                    <span class="text-muted">aoyouzi</span>
<a class="tag" taget="_blank" href="/search/%E8%B0%88%E8%B0%88%E6%96%B0%E6%B5%AA%E5%BE%AE%E5%8D%9A%E8%83%8C%E5%90%8E%E7%9A%84%E9%82%A3%E4%BA%9B%E7%AE%97%E6%B3%95/1.htm">谈谈新浪微博背后的那些算法</a>
                                    <div>本文对微博中常见的问题的对应算法进行了简单的介绍，在实际应用中的算法比介绍的要复杂的多。当然，本文覆盖的主题并不全，比如好友推荐、热点跟踪等就没有涉及到。但古人云“窥一斑而见全豹”，希望本文的介绍能帮助大家更好的理解微博这样的社交网络应用。 
微博是一个很多人都在用的社交应用。天天刷微博的人每天都会进行着这样几个操作：原创、转发、回复、阅读、关注、@等。其中，前四个是针对短博文，最后的关注和@则针</div>
                                </li>
                                <li><a href="/article/1246.htm"
                                       title="Connection reset 连接被重置的解决方法" target="_blank">Connection reset 连接被重置的解决方法</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/%E5%AD%97%E7%AC%A6%E6%B5%81/1.htm">字符流</a><a class="tag" taget="_blank" href="/search/%E8%BF%9E%E6%8E%A5%E8%A2%AB%E9%87%8D%E7%BD%AE/1.htm">连接被重置</a>
                                    <div>流是java的核心部分,,昨天在做android服务器连接服务器的时候出了问题,就将代码放到java中执行,结果还是一样连接被重置 
  
被重置的代码如下; 
  
客户端代码; 
package 通信软件服务器;

import java.io.BufferedWriter;
import java.io.OutputStream;
import java.io.O</div>
                                </li>
                                <li><a href="/article/1373.htm"
                                       title="web.xml配置详解之filter" target="_blank">web.xml配置详解之filter</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/web.xml/1.htm">web.xml</a><a class="tag" taget="_blank" href="/search/filter/1.htm">filter</a>
                                    <div>一.定义 
<filter>
	<filter-name>encodingfilter</filter-name>
	<filter-class>com.my.app.EncodingFilter</filter-class>
	<init-param>
		<param-name>encoding<</div>
                                </li>
                                <li><a href="/article/1500.htm"
                                       title="Heritrix" target="_blank">Heritrix</a>
                                    <span class="text-muted">Bill_chen</span>
<a class="tag" taget="_blank" href="/search/%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">多线程</a><a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E5%88%B6%E9%80%A0/1.htm">制造</a><a class="tag" taget="_blank" href="/search/%E9%85%8D%E7%BD%AE%E7%AE%A1%E7%90%86/1.htm">配置管理</a>
                                    <div>作为纯Java语言开发的、功能强大的网络爬虫Heritrix，其功能极其强大，且扩展性良好，深受热爱搜索技术的盆友们的喜爱，但它配置较为复杂，且源码不好理解，最近又使劲看了下，结合自己的学习和理解，跟大家分享Heritrix的点点滴滴。 
Heritrix的下载（http://sourceforge.net/projects/archive-crawler/）安装、配置，就不罗嗦了，可以自己找找资</div>
                                </li>
                                <li><a href="/article/1627.htm"
                                       title="【Zookeeper】FAQ" target="_blank">【Zookeeper】FAQ</a>
                                    <span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/zookeeper/1.htm">zookeeper</a>
                                    <div>1.脱离IDE，运行简单的Java客户端程序 
#ZkClient是简单的Zookeeper~$ java -cp "./:zookeeper-3.4.6.jar:./lib/*" ZKClient   
  
1. Zookeeper是的Watcher回调是同步操作，需要添加异步处理的代码 
2. 如果Zookeeper集群跨越多个机房，那么Leader/</div>
                                </li>
                                <li><a href="/article/1754.htm"
                                       title="The user specified as a definer ('aaa'@'localhost') does not exist" target="_blank">The user specified as a definer ('aaa'@'localhost') does not exist</a>
                                    <span class="text-muted">白糖_</span>
<a class="tag" taget="_blank" href="/search/localhost/1.htm">localhost</a>
                                    <div>今天遇到一个客户BUG，当前的jdbc连接用户是root，然后部分删除操作都会报下面这个错误：The user specified as a definer ('aaa'@'localhost') does not exist 
最后找原因发现删除操作做了触发器，而触发器里面有这样一句 
  
 /*!50017 DEFINER = ''aaa@'localhost' */ 
 原来最初</div>
                                </li>
                                <li><a href="/article/1881.htm"
                                       title="javascript中showModelDialog刷新父页面" target="_blank">javascript中showModelDialog刷新父页面</a>
                                    <span class="text-muted">bozch</span>
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/%E5%88%B7%E6%96%B0%E7%88%B6%E9%A1%B5%E9%9D%A2/1.htm">刷新父页面</a><a class="tag" taget="_blank" href="/search/showModalDialog/1.htm">showModalDialog</a>
                                    <div>在页面中使用showModalDialog打开模式子页面窗口的时候，如果想在子页面中操作父页面中的某个节点，可以通过如下的进行： 
      window.showModalDialog('url',self,‘status...’); // 首先中间参数使用self 
      在子页面使用w</div>
                                </li>
                                <li><a href="/article/2008.htm"
                                       title="编程之美-买书折扣" target="_blank">编程之美-买书折扣</a>
                                    <span class="text-muted">bylijinnan</span>
<a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B%E4%B9%8B%E7%BE%8E/1.htm">编程之美</a>
                                    <div>

import java.util.Arrays;

public class BookDiscount {

/**编程之美 买书折扣

书上的贪心算法的分析很有意思，我看了半天看不懂，结果作者说，贪心算法在这个问题上是不适用的。。
下面用动态规划实现。
哈利波特这本书一共有五卷，每卷都是8欧元，如果读者一次购买不同的两卷可扣除5%的折扣，三卷10%，四卷20%，五卷</div>
                                </li>
                                <li><a href="/article/2135.htm"
                                       title="关于struts2.3.4项目跨站执行脚本以及远程执行漏洞修复概要" target="_blank">关于struts2.3.4项目跨站执行脚本以及远程执行漏洞修复概要</a>
                                    <span class="text-muted">chenbowen00</span>
<a class="tag" taget="_blank" href="/search/struts/1.htm">struts</a><a class="tag" taget="_blank" href="/search/WEB%E5%AE%89%E5%85%A8/1.htm">WEB安全</a>
                                    <div>因为近期负责的几个银行系统软件，需要交付客户，因此客户专门请了安全公司对系统进行了安全评测，结果发现了诸如跨站执行脚本，远程执行漏洞以及弱口令等问题。 
下面记录下本次解决的过程以便后续 
1、首先从最简单的开始处理，服务器的弱口令问题，首先根据安全工具提供的测试描述中发现应用服务器中存在一个匿名用户，默认是不需要密码的，经过分析发现服务器使用了FTP协议， 
而使用ftp协议默认会产生一个匿名用</div>
                                </li>
                                <li><a href="/article/2262.htm"
                                       title="[电力与暖气]煤炭燃烧与电力加温" target="_blank">[电力与暖气]煤炭燃烧与电力加温</a>
                                    <span class="text-muted">comsci</span>

<div> 
      在宇宙中,用贝塔射线观测地球某个部分,看上去,好像一个个马蜂窝,又像珊瑚礁一样,原来是某个国家的采煤区..... 
 
      不过,这个采煤区的煤炭看来是要用完了.....那么依赖将起燃烧并取暖的城市,在极度严寒的季节中...该怎么办呢? 
 
  &nbs</div>
                                </li>
                                <li><a href="/article/2389.htm"
                                       title="oracle O7_DICTIONARY_ACCESSIBILITY参数" target="_blank">oracle O7_DICTIONARY_ACCESSIBILITY参数</a>
                                    <span class="text-muted">daizj</span>
<a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a>
                                    <div>O7_DICTIONARY_ACCESSIBILITY参数控制对数据字典的访问.设置为true,如果用户被授予了如select any table等any table权限,用户即使不是dba或sysdba用户也可以访问数据字典.在9i及以上版本默认为false,8i及以前版本默认为true.如果设置为true就可能会带来安全上的一些问题.这也就为什么O7_DICTIONARY_ACCESSIBIL</div>
                                </li>
                                <li><a href="/article/2516.htm"
                                       title="比较全面的MySQL优化参考" target="_blank">比较全面的MySQL优化参考</a>
                                    <span class="text-muted">dengkane</span>
<a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a>
                                    <div>本文整理了一些MySQL的通用优化方法，做个简单的总结分享，旨在帮助那些没有专职MySQL DBA的企业做好基本的优化工作，至于具体的SQL优化，大部分通过加适当的索引即可达到效果，更复杂的就需要具体分析了，可以参考本站的一些优化案例或者联系我，下方有我的联系方式。这是上篇。 
  
1、硬件层相关优化 
  
1.1、CPU相关 
  
在服务器的BIOS设置中，可</div>
                                </li>
                                <li><a href="/article/2643.htm"
                                       title="C语言homework2，有一个逆序打印数字的小算法" target="_blank">C语言homework2，有一个逆序打印数字的小算法</a>
                                    <span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/c/1.htm">c</a>
                                    <div>#h1# 
  
0、完成课堂例子 
1、将一个四位数逆序打印 
1234 ==> 4321 
实现方法一： 
# include <stdio.h>

int main(void)
{
	int i = 1234;
	int one = i%10;
	int two =  i / 10 % 10;
	int three = i / 100 % 10;
</div>
                                </li>
                                <li><a href="/article/2770.htm"
                                       title="apacheBench对网站进行压力测试" target="_blank">apacheBench对网站进行压力测试</a>
                                    <span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/apachebench/1.htm">apachebench</a>
                                    <div>   ab 的全称是 ApacheBench ， 是 Apache 附带的一个小工具 ， 专门用于 HTTP Server 的 benchmark testing ， 可以同时模拟多个并发请求。前段时间看到公司的开发人员也在用它作一些测试，看起来也不错，很简单，也很容易使用，所以今天花一点时间看了一下。 
通过下面的一个简单的例子和注释，相信大家可以更容易理解这个工具的使用。 </div>
                                </li>
                                <li><a href="/article/2897.htm"
                                       title="2种办法让HashMap线程安全" target="_blank">2种办法让HashMap线程安全</a>
                                    <span class="text-muted">flyfoxs</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/jdk/1.htm">jdk</a><a class="tag" taget="_blank" href="/search/jni/1.htm">jni</a>
                                    <div>多线程之--2种办法让HashMap线程安全 
多线程之--synchronized 和reentrantlock的优缺点 
多线程之--2种JAVA乐观锁的比较( NonfairSync VS. FairSync) 
  
  
HashMap不是线程安全的,往往在写程序时需要通过一些方法来回避.其实JDK原生的提供了2种方法让HashMap支持线程安全. 
  
</div>
                                </li>
                                <li><a href="/article/3024.htm"
                                       title="Spring Security（04）——认证简介" target="_blank">Spring Security（04）——认证简介</a>
                                    <span class="text-muted">234390216</span>
<a class="tag" taget="_blank" href="/search/Spring+Security/1.htm">Spring Security</a><a class="tag" taget="_blank" href="/search/%E8%AE%A4%E8%AF%81/1.htm">认证</a><a class="tag" taget="_blank" href="/search/%E8%BF%87%E7%A8%8B/1.htm">过程</a>
                                    <div>认证简介 
目录 
1.1     认证过程 
1.2     Web应用的认证过程 
1.2.1    ExceptionTranslationFilter 
1.2.2    在request之间共享SecurityContext

1</div>
                                </li>
                                <li><a href="/article/3151.htm"
                                       title="Java 位运算" target="_blank">Java 位运算</a>
                                    <span class="text-muted">Javahuhui</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E4%BD%8D%E8%BF%90%E7%AE%97/1.htm">位运算</a>
                                    <div>// 左移( << ) 低位补0 
// 0000 0000 0000 0000 0000 0000 0000 0110 然后左移2位后，低位补0： 
// 0000 0000 0000 0000 0000 0000 0001 1000 
System.out.println(6 << 2);// 运行结果是24 
 
// 右移( >> ) 高位补"</div>
                                </li>
                                <li><a href="/article/3278.htm"
                                       title="mysql免安装版配置" target="_blank">mysql免安装版配置</a>
                                    <span class="text-muted">ldzyz007</span>
<a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a>
                                    <div>1、my-small.ini是为了小型数据库而设计的。不应该把这个模型用于含有一些常用项目的数据库。 
2、my-medium.ini是为中等规模的数据库而设计的。如果你正在企业中使用RHEL,可能会比这个操作系统的最小RAM需求(256MB)明显多得多的物理内存。由此可见，如果有那么多RAM内存可以使用，自然可以在同一台机器上运行其它服务。 
3、my-large.ini是为专用于一个SQL数据</div>
                                </li>
                                <li><a href="/article/3405.htm"
                                       title="MFC和ado数据库使用时遇到的问题" target="_blank">MFC和ado数据库使用时遇到的问题</a>
                                    <span class="text-muted">你不认识的休道人</span>
<a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/C%2B%2B/1.htm">C++</a><a class="tag" taget="_blank" href="/search/mfc/1.htm">mfc</a>
                                    <div>=================================================================== 
第一个 
=================================================================== 
 
try{
		CString sql;
	sql.Format("select * from p</div>
                                </li>
                                <li><a href="/article/3532.htm"
                                       title="表单重复提交Double Submits" target="_blank">表单重复提交Double Submits</a>
                                    <span class="text-muted">rensanning</span>
<a class="tag" taget="_blank" href="/search/double/1.htm">double</a>
                                    <div>可能发生的场景： 
 
 
 *多次点击提交按钮  
 *刷新页面  
 *点击浏览器回退按钮  
 *直接访问收藏夹中的地址  
 *重复发送HTTP请求（Ajax） 
 
（1）点击按钮后disable该按钮一会儿，这样能避免急躁的用户频繁点击按钮。 
这种方法确实有些粗暴，友好一点的可以把按钮的文字变一下做个提示，比如Bootstrap的做法： 
http://getbootstrap.co</div>
                                </li>
                                <li><a href="/article/3659.htm"
                                       title="Java String 十大常见问题" target="_blank">Java String 十大常见问题</a>
                                    <span class="text-muted">tomcat_oracle</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/1.htm">正则表达式</a>
                                    <div>　1.字符串比较，使用“==”还是equals()?   　　"=="判断两个引用的是不是同一个内存地址(同一个物理对象)。   　　equals()判断两个字符串的值是否相等。   　　除非你想判断两个string引用是否同一个对象，否则应该总是使用equals()方法。   　　如果你了解字符串的驻留(String Interning)则会更好地理解这个问题。   　 
　</div>
                                </li>
                                <li><a href="/article/3786.htm"
                                       title="SpringMVC 登陆拦截器实现登陆控制" target="_blank">SpringMVC 登陆拦截器实现登陆控制</a>
                                    <span class="text-muted">xp9802</span>
<a class="tag" taget="_blank" href="/search/springMVC/1.htm">springMVC</a>
                                    <div>思路，先登陆后，将登陆信息存储在session中，然后通过拦截器，对系统中的页面和资源进行访问拦截，同时对于登陆本身相关的页面和资源不拦截。 
  
实现方法： 
        1   2   3   4   5   6   7   8   9   10   11   12   13   14   15   16   17   18   19   20   21   22   23  </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>