前端小白如何快速上手Vue框架(上篇)
前言:
我之前没有接触过任何前端知识,连基本的HTML语法,css,js的基础知识都不懂,再刚接手vue的时候也是一个头两个大.
然后当然先查vue官方文档,官网会有如下提示:
然后如果你按照提示开始按部就班的看html,css,js然后再回来学习Vue的话,你可能已经被OUT了(况且周期过长,着实不推荐).直接着手一个项目是进步最快的方式,何况还有度娘和Google保驾护航.
推荐vue学习文档
新手不适宜去看vue官方文档,没有详细代码直接入手根本理解不了.
推荐去看vue.js 教程 | 菜鸟教程,里面的代码很详细可以直观看到效果.
vue菜鸟教程链接
开篇–vue框架的优势:
Vue.js的优势所在:
Vue的核心库只关注图层.响应式数据绑定和组件化开发是其两大特点.
响应式数据绑定指的是vue.js会自动对页面中的某些数据的变化做出响应.(v-model指令可以实现数据的双向绑定)
组件化开发指的是vue.js通过组件,把一个单页应用中的各种模块拆分到一个个单独的组件(component)中,我们只要先在父级组件中写好各种组件标签,并且在组件标签中写好要传入组件的参数,然后在写好各种组件的实现,整个应用就可以完成了.
Vue.js和MVVM关系:
MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，其核心是提供对View 和 ViewModel 的双向数据绑定，这使得ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定。
Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。它的核心是 MVVM 中的 ViewModel。ViewModel负责连接 View 和 Model,保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷。
Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；
View 代表UI 组件，它负责将数据模型转化成UI 展现出来.
ViewModel 是一个同步View 和 Model的对象。
在MVVM架构下，ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。
开始vue.js的安装
Vue Devtools调试工具的安装:可以在谷歌浏览器安装vue Devtools工具可以更好的审查和调试Vue应用.
Vue.js 官网下载地址
根据自己的生产要求来安装对应版本.关于安装vue的方法官网给出了多种多样的方法,这里演示独立版本的安装.
我下载之后的地址：https://vuejs.org/js/vue.js
使用独立版本是直接用script标签导入url即可.Vue会被注册为一个全局变量。
第一个vue实例:
HTML内容就是一个个标签组合而成,不知道的自己查询即可.
标签用来声明HTML文档的编写标准,放在最开头位置,可写可不写.
和是中必须有的元素.
里面必须有标签,<meta>和<style>可选.
charset属性指定HTML文档的编码为utf-8.
<script>标签里面的url即为我下载的vue独立版本的地址.src标签指定超链接.
View 层 - Div之间的代码属于html的view层
id指定HTML的唯一属性.
{{ }} 用于输出对象属性和函数返回值.
Model 层 - JavaScript代码如下(需放在指定的HTML元素之后)
el标签为实例提供挂载元素.用来联立view层和model.
data 用于定义属性.里面的内容也即最后的运行结果.
</code></pre>
<p><a href="http://img.e-com-net.com/image/info8/6b5cbd640e5b440db14023fb8418f434.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/6b5cbd640e5b440db14023fb8418f434.jpg" alt="前端小白如何快速上手Vue框架(上篇)_第6张图片" width="650" height="438" style="border:1px solid black;"></a></p>
<h3>vue过滤器"|",和linux中管道用法类似,即上一级的输出作为下一级的输入.</h3>
<pre><code>HTML 中的<!--...--> 是注释标签,Split用于分割字符串,join是把数组拼接成为字符串.
整个代码就是调用了vue中过滤器的用法,使用了vue的内置函数和自定义的函数对data里面定义的属性进行了转换大写,反转的操作.
</code></pre>
<p><a href="http://img.e-com-net.com/image/info8/60a9f44f647a43d9b57a8d4120a36136.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/60a9f44f647a43d9b57a8d4120a36136.jpg" alt="前端小白如何快速上手Vue框架(上篇)_第7张图片" width="650" height="399" style="border:1px solid black;"></a></p>
<h3>vue用法–条件判断</h3>
<h4>v-***代表的是vue中的指令.</h4>
<pre><code><h1>~<h6>用来表示标题的层级关系.<h1>表示最大.
在 Vue 中，我们使用 v-if 指令实现同样的功能,和其他编程语言的条件判断逻辑一样.条件成立才会执行相应的代码.
<h1 v-if="ok">Yes</h1>
也可以用 v-else 添加一个“else 块”：
<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>
同样也可以添加v-else-if在多种条件下进行判断.
</code></pre>
<p>示例1:<br> <a href="http://img.e-com-net.com/image/info8/3c556544b05545168131c60352e7bda6.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/3c556544b05545168131c60352e7bda6.jpg" alt="前端小白如何快速上手Vue框架(上篇)_第8张图片" width="650" height="368" style="border:1px solid black;"></a><br> 示例2:<br> <a href="http://img.e-com-net.com/image/info8/41a92a807024485782eee75494f201bc.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/41a92a807024485782eee75494f201bc.jpg" alt="前端小白如何快速上手Vue框架(上篇)_第9张图片" width="650" height="661" style="border:1px solid black;"></a></p>
<h4>v-show指令根据条件展示元素,即不管初始条件如何元素都会被渲染.</h4>
<pre><code>当ok为true的时候输出了指定的代码Hello!,相应的ok为false时候没有任何输出.
</code></pre>
<p><a href="http://img.e-com-net.com/image/info8/7aa38649e511459996ca06067a4d405c.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/7aa38649e511459996ca06067a4d405c.jpg" alt="前端小白如何快速上手Vue框架(上篇)_第10张图片" width="650" height="437" style="border:1px solid black;"></a></p>
<h3>vue用法–循环语句-v-for指令</h3>
<pre><code>v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。
<li>标签用于定义列表中的项目.可用于有序列表<ol>和无序列表<ul>中.也可以使用of替代in作为分隔符.
如下实例使用v-for指令依次遍历了data里面定义的数组元素.
</code></pre>
<p><a href="http://img.e-com-net.com/image/info8/64a52bbd52cd4c3b89481d8182d081ed.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/64a52bbd52cd4c3b89481d8182d081ed.jpg" alt="前端小白如何快速上手Vue框架(上篇)_第11张图片" width="650" height="549" style="border:1px solid black;"></a></p>
<h4>v-for迭代对象,v-for可以通过一个对象的属性来迭代数据.</h4>
<p><a href="http://img.e-com-net.com/image/info8/4e42994dc607440ea7fae8ffb8a43aea.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/4e42994dc607440ea7fae8ffb8a43aea.jpg" alt="前端小白如何快速上手Vue框架(上篇)_第12张图片" width="650" height="359" style="border:1px solid black;"></a></p>
<h4>v-for可以用来循环整数</h4>
<p><a href="http://img.e-com-net.com/image/info8/e549a2876d804bfa83dbc82caeb6f3c6.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/e549a2876d804bfa83dbc82caeb6f3c6.jpg" alt="前端小白如何快速上手Vue框架(上篇)_第13张图片" width="650" height="340" style="border:1px solid black;"></a></p>
<h4>对getter和setter的理解</h4>
<pre><code>顾名思义，get为取值，set为赋值.
创建一个实例，isMe；此时，isMe是没有name属性的，当我们调用isMe.name时，我们会进入到get name(){...}中，先判断
isMe是否有name属性，答案是否定的，那麽就添加一个name属性并给它赋值；如果有name属性，那就返回name属性。
你可以把get看成一个取值的函数，函数的返回值就是它拿到的值。
set属性理解，当我给实例赋值：
isMe.name="周神"此时，会进入set name(val){...}；形参val就是我赋给name属性的值，在这个函数里，我就可以做很多事了，
比如双向绑定！因为这个值的每次改变都必须经过set，其他方式是改变不了它的，相当于一个万能的监听器。
</code></pre>
<h3>vue用法之vue计算属性vs监听属性</h3>
<pre><code>计算属性关键词: computed:
整个代码进行的流程:
1. data 属性初始化 getter setter(可理解为取值和赋值)
2. computed 计算属性初始化，提供的函数将用作属性 vm.reversedMessage 的 getter
3. 当首次获取 reversedMessage 计算属性的值时，dep 开始依赖收集.
4. 在执行 message getter 方法时，如果 dep 处于依赖收集状态，则判定 message 为 reversedMessage 的依赖，并建立依赖关系
5. 当 message 发生变化时，根据依赖关系，触发 reverseMessage 的重新计算
</code></pre>
<p><a href="http://img.e-com-net.com/image/info8/569b8d6069654e80af05520f2fb54429.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/569b8d6069654e80af05520f2fb54429.jpg" alt="前端小白如何快速上手Vue框架(上篇)_第14张图片" width="650" height="400" style="border:1px solid black;"></a></p>
<h4>methods也是vue的计算属性,介绍一下methods和computed的区别:</h4>
<pre><code>使用computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。
而使用 methods ，在重新渲染的时候，函数总会重新调用执行。
以下实例分别调用了vue的两种计算属性computed和methods.可以从运行结果很清晰的看到computed在第一次渲染之后就有了缓存,
第二次调用的时候直接依赖缓存不会重新渲染,两次调用结果相同.而methods在每次调用的时候都会渲染,所以两次调用结果不同.
</code></pre>
<p><a href="http://img.e-com-net.com/image/info8/cd1faabafab94d1ca3919bb7066c2cea.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/cd1faabafab94d1ca3919bb7066c2cea.jpg" alt="前端小白如何快速上手Vue框架(上篇)_第15张图片" width="650" height="383" style="border:1px solid black;"></a></p>
<h4>vue之监听属性–watch,通过watch来响应数据的变化.</h4>
<pre><code><button>标签是创建一个按钮.
@click等同于v-on:click,是一个指令的缩写.v-on表示事件监听,后续会详细讲到.
<script type = "text/javascript">表示说明内部的代码属于js.
px表示像素. font-size设置字体大小.
$watch是一个实例方法, nval表示新的数据, oval旧的数据.
alert()方法用于显示带有一条信息和一个ok按钮的警告框.
以下示例首先通过v-on指令来监听按钮的按键变化,然后data里面进行定义属性,接着调用vue的监听属性$watch来监听counter的
变化,最后调用alert()方法弹出一个页面来直观显示数据的变化.
</code></pre>
<p><a href="http://img.e-com-net.com/image/info8/8cca8bc5bd0440bca0b7f229ac062473.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/8cca8bc5bd0440bca0b7f229ac062473.jpg" alt="前端小白如何快速上手Vue框架(上篇)_第16张图片" width="650" height="369" style="border:1px solid black;"></a></p>
<h3>vue用法之–vue样式绑定:v-bind用来绑定html属性</h3>
<p>方法特别灵活可以绑定数组,属性等来实现需求.每个部分做一个演示.</p>
<pre><code>v-bind指令的缩写:
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
</code></pre>
<p>class 与 style 是 HTML 元素的属性，用于设置元素的样式，表达式的结果类型除了字符串之外，还可以是对象或数组。style标签用于为文档定义样式信息.v-bind:class表示class存在是否将取决于数据属性isActive的true/false<br> <a href="http://img.e-com-net.com/image/info8/e29613aca317448fa01fb0b160f5b8e8.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/e29613aca317448fa01fb0b160f5b8e8.jpg" alt="前端小白如何快速上手Vue框架(上篇)_第17张图片" width="650" height="398" style="border:1px solid black;"></a></p>
<h4>多属性动态切换class,可以实时调整data里面的值来改变输出结果:</h4>
<p>style标签内定义了两种样式,并使用v-bind指令进行了样式绑定.由于data里面isActive属性为true所以对应样式被触发.可以更改data属性值来动态调整你想要的样式输出.<br> <a href="http://img.e-com-net.com/image/info8/c64f502e781d42d78ba9679464ce69d8.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/c64f502e781d42d78ba9679464ce69d8.jpg" alt="前端小白如何快速上手Vue框架(上篇)_第18张图片" width="650" height="420" style="border:1px solid black;"></a></p>
<h4>直接绑定数据里面的一个对象:classobject和class是对应的.</h4>
<p>text-danger 类背景颜色覆盖了 active 类的背景色：<br> <a href="http://img.e-com-net.com/image/info8/1653cdfe70c247be9e8faf82966a0b83.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/1653cdfe70c247be9e8faf82966a0b83.jpg" alt="前端小白如何快速上手Vue框架(上篇)_第19张图片" width="650" height="437" style="border:1px solid black;"></a></p>
<h4>数组的用法:</h4>
<p>可以把一个数组传给v-bind:class,以应用一个class列表.Text-danger会覆盖activeClass,所以显示结果为红色.<br> <a href="http://img.e-com-net.com/image/info8/799f3b8e4ccb47efbbe46bfc1f9787cb.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/799f3b8e4ccb47efbbe46bfc1f9787cb.jpg" alt="前端小白如何快速上手Vue框架(上篇)_第20张图片" width="650" height="431" style="border:1px solid black;"></a></p>
<h4>根据条件表达式判断输出:</h4>
<p>以下实例使用了三元表达式.表示始终存在errorClass但是activeClass只能在isActive为true时候显示.<br> <a href="http://img.e-com-net.com/image/info8/a367361e46434be9a1c26b0b9e2d1b76.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/a367361e46434be9a1c26b0b9e2d1b76.jpg" alt="前端小白如何快速上手Vue框架(上篇)_第21张图片" width="650" height="453" style="border:1px solid black;"></a></p>
<h3>Vue.js style(内联样式):我们可以在 v-bind:style 直接设置样式</h3>
<p><a href="http://img.e-com-net.com/image/info8/fc88aba7b0354338b08467801d2165fe.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/fc88aba7b0354338b08467801d2165fe.jpg" alt="前端小白如何快速上手Vue框架(上篇)_第22张图片" width="650" height="338" style="border:1px solid black;"></a></p>
<h4>可以直接绑定到一个样式对象，让模板更清晰</h4>
<p><a href="http://img.e-com-net.com/image/info8/68cbdb091fee4dc2b7cbd9edf6c34e04.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/68cbdb091fee4dc2b7cbd9edf6c34e04.jpg" alt="前端小白如何快速上手Vue框架(上篇)_第23张图片" width="400" height="280" style="border:1px solid black;"></a></p>
<h4>v-bind:style 可以使用数组将多个样式对象应用到一个元素上：</h4>
<p><a href="http://img.e-com-net.com/image/info8/b8bd62ea07a34d6abec06d5e185680b1.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/b8bd62ea07a34d6abec06d5e185680b1.jpg" alt="前端小白如何快速上手Vue框架(上篇)_第24张图片" width="650" height="384" style="border:1px solid black;"></a></p>
<h3>vue用法之–事件处理器:v-on指令用来事件监听.</h3>
<pre><code>以下示例调用了v-on指令来监听按钮的点击变化,每次点击counter加1最后做一个输出.
</code></pre>
<p><a href="http://img.e-com-net.com/image/info8/080ee6143f38498aa96acf4c99c5077e.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/080ee6143f38498aa96acf4c99c5077e.jpg" alt="前端小白如何快速上手Vue框架(上篇)_第25张图片" width="650" height="318" style="border:1px solid black;"></a></p>
<h4>v-on指令:处理用户输入</h4>
<pre><code> 为了让用户和你的应用进行交互，我们可以用 v-on 指令添加一个事件监听器，
通过它调用在 Vue 实例中定义的方法： methods是定义的函数.
以下示例同样是使用v-on来监听按钮的变化.当点击按钮会调用自定义的函数reverseMessage
来对data里面定义的message进行反转拼接操作.
</code></pre>
<p><a href="http://img.e-com-net.com/image/info8/ef8b425fb2c347dcb221f29ef97a2c7f.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/ef8b425fb2c347dcb221f29ef97a2c7f.jpg" alt="前端小白如何快速上手Vue框架(上篇)_第26张图片" width="650" height="530" style="border:1px solid black;"></a></p>
<h4>v-on用法:内联js语句中调用方法</h4>
<pre><code>say()实际是一条JS语句，带有括号的就叫内联处理器.相当于直接使用v-on来监听一条js语句,当点击按钮时进行调用say语句进行输出.
</code></pre>
<p><a href="http://img.e-com-net.com/image/info8/a013f1410e3549058978877d8abb8c28.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/a013f1410e3549058978877d8abb8c28.jpg" alt="前端小白如何快速上手Vue框架(上篇)_第27张图片" width="650" height="378" style="border:1px solid black;"></a></p>
<h4>vue:事件修饰符</h4>
<pre><code>Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或 event.stopPropagation()。
Vue.js通过由点(.)表示的指令后缀来调用修饰符。
.stop
.prevent
.capture
.self
.once
<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>
<!-- click 事件只能点击一次，2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>
</code></pre>
<h4>vue:按键修饰符</h4>
<pre><code>Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：
<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">
全部的按键别名：
.enter
.tab
.delete (捕获 "删除" 和 "退格" 键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta
实例:
<!-- Alt + C的ASCll码为67 -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>
</code></pre>
<h3>vue.js表单</h3>
<p>你可以用 v-model 指令在表单,,元素上创建双向数据绑定。V-model指令会自动根据控件类型自动选取正确的方法来更新元素.在input输入框中我们可以使用 v-model 指令来实现双向数据绑定.<br> <a href="http://img.e-com-net.com/image/info8/af5eb4f1d4ae4253b2f130bc8c3586fa.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/af5eb4f1d4ae4253b2f130bc8c3586fa.jpg" alt="前端小白如何快速上手Vue框架(上篇)_第28张图片" width="650" height="345" style="border:1px solid black;"></a></p>
<h4>实例:</h4>
<pre><code>以下实例将js代码单独分离出来用src标签引入即可.在主程序里面看起来代码量比较少.
使用了v-model指令将输入框内容就行了双向绑定.会自动对页面数据变化做出响应.
</code></pre>
<p><a href="http://img.e-com-net.com/image/info8/80bcb37a033341cbaf1722b335634f3f.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/80bcb37a033341cbaf1722b335634f3f.jpg" alt="前端小白如何快速上手Vue框架(上篇)_第29张图片" width="650" height="589" style="border:1px solid black;"></a></p>
<h5>输出:</h5>
<p><a href="http://img.e-com-net.com/image/info8/0f02eb7d2b1f42b08645f0ee03b70330.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/0f02eb7d2b1f42b08645f0ee03b70330.jpg" alt="前端小白如何快速上手Vue框架(上篇)_第30张图片" width="322" height="233" style="border:1px solid black;"></a></p>
<h5>更改输入框数据查看效果</h5>
<p>以上实例中 {{message}} 会根据输入框 input 的改变而改变，如果你不想让其变化可以修改为：{{* message }}<br> <a href="http://img.e-com-net.com/image/info8/2874f18d9b1646f88bd90e2c35eeabd4.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/2874f18d9b1646f88bd90e2c35eeabd4.jpg" alt="前端小白如何快速上手Vue框架(上篇)_第31张图片" width="260" height="142" style="border:1px solid black;"></a></p>
<h4>v-model对input和textarea框进行双向数据绑定:</h4>
<pre><code>Placeholder是一个动态变量可以实现动态绑定.input单行文本框,textarea多行文本框.
style标签用于定义一些代码的呈现样式,后面会有详细讲解.
本实例就是使用v-model指令对单行和多行文本框进行了双向数据绑定.当我们修改文本框内容,vue会自动响应页面数据变化.
</code></pre>
<p><a href="http://img.e-com-net.com/image/info8/eee6be965675447c9841774771566d04.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/eee6be965675447c9841774771566d04.jpg" alt="前端小白如何快速上手Vue框架(上篇)_第32张图片" width="650" height="360" style="border:1px solid black;"></a></p>
<h4>v-model对复选框的双向数据绑定</h4>
<pre><code><input>标签用于收集用户信息.type规定了input元素的类型,value指定了输入字段的初始值.
checkbox为复选框类型.
<span>标签被用来组合文档中的行内元素. <br>是换行标签.
<label> 标签为 input 元素定义标注（标记）,label 元素不会向用户呈现任何特殊效果。
不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。
</code></pre>
<p><a href="http://img.e-com-net.com/image/info8/9437f2c909bd438ab79fc5790e8036ff.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/9437f2c909bd438ab79fc5790e8036ff.jpg" alt="前端小白如何快速上手Vue框架(上篇)_第33张图片" width="650" height="397" style="border:1px solid black;"></a></p>
<h4>v-model对单选按钮的双向绑定: radio为单选按钮类型</h4>
<p><a href="http://img.e-com-net.com/image/info8/be35d17832da4d3084fee98e1f5c81ea.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/be35d17832da4d3084fee98e1f5c81ea.jpg" alt="前端小白如何快速上手Vue框架(上篇)_第34张图片" width="650" height="390" style="border:1px solid black;"></a></p>
<h4>v-model对select下拉列表的双向绑定:</h4>
<pre><code>option 元素定义下拉列表中的一个选项。浏览器将 <option> 标签中的内容作为 <select> 标签的菜单或是滚动列表中的一个
元素显示。option 元素位于 select 元素内部,必须与select元素配合使用不然没意义。<option> 标签可以在不带有任何属性的
情况下使用，但是您通常需要使用 value 属性，此属性会指示出被送往服务器的内容。
</code></pre>
<p><a href="http://img.e-com-net.com/image/info8/90b3b5f5a6064d40ae3d10210da74a96.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/90b3b5f5a6064d40ae3d10210da74a96.jpg" alt="前端小白如何快速上手Vue框架(上篇)_第35张图片" width="650" height="370" style="border:1px solid black;"></a></p>
<h4>v-model修饰符</h4>
<pre><code>.lazy
在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ,从而转变为在change
事件中同步,也就是在失去焦点或者按下回车键才更新.
<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >
.number
如果想自动将用户的输入值转为 Number 类型，可以添加一个修饰符number给v-model 来处理输入值：否则你输入的是数字
但是类型却是字符串String,在数字输入框中有用.
<input v-model.number="age" type="number">
这通常很有用，因为在 type="number" 时 HTML 中输入的值也总是会返回字符串类型。
.trim
如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入：
<input v-model.trim="msg">
</code></pre>
</div>
</div>
</div>
</div>
</div>
<!--PC和WAP自适应版-->
<div id="SOHUCS" sid="1187566818852708352"></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">
<!-- 文章页-右侧1 动态广告位 -->
<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>
<!-- 文章页-右侧2 动态广告位 -->
<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>
<!-- 文章页-右侧3 动态广告位 -->
<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/1950233451282100224.htm"
title="python 读excel每行替换_Python脚本操作Excel实现批量替换功能" target="_blank">python 读excel每行替换_Python脚本操作Excel实现批量替换功能</a>
<span class="text-muted">weixin_39646695</span>
<a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E8%AF%BBexcel%E6%AF%8F%E8%A1%8C%E6%9B%BF%E6%8D%A2/1.htm">读excel每行替换</a>
<div>Python脚本操作Excel实现批量替换功能大家好，给大家分享下如何使用Python脚本操作Excel实现批量替换。使用的工具Openpyxl，一个处理excel的python库，处理excel，其实针对的就是WorkBook，Sheet，Cell这三个最根本的元素~明确需求原始excel如下我们的目标是把下面excel工作表的sheet1表页A列的内容“替换我吧”批量替换为B列的“我用来替换的</div>
</li>
<li><a href="/article/1950232316974526464.htm"
title="（二）SAP Group Reporting (GR) 核心子模块功能及数据流向架构解析" target="_blank">（二）SAP Group Reporting (GR) 核心子模块功能及数据流向架构解析</a>
<span class="text-muted"></span>
<div>数据如何从子公司流转到合并报表的全过程，即数据采集→合并引擎→报表输出，特别是HANA内存计算如何优化传统ETL瓶颈。SAPGroupReporting(GR)核心模块功能及数据流向的架构解析，涵盖核心组件、数据处理流程和关键集成点，适用于S/4HANA1809+版本：一、核心功能模块概览模块功能关键事务码/FioriApp数据采集(DataCollection)整合子公司财务数据（SAP/非SA</div>
</li>
<li><a href="/article/1950231381485350912.htm"
title="《极简思维》第三部分" target="_blank">《极简思维》第三部分</a>
<span class="text-muted">小洋苏兮</span>
<div>整理你的人际关系如何改善人际关系？摘录：因为人际关系问题是人们生活中不快乐的主要原因。感想：感觉这个说的挺对，之前我总是埋头学习，不管舍友不管自己的合作伙伴的一些事情，但实际上，这学期关注了之后好多了摘录：“亲密关系与社交会让你健康而快乐。这是基础。太过于关注成就或不太关心人际关系的人都不怎么快乐。基本上来说，人类就是建立在人脉关系上的。”感想：但是如果有时想的太多就不太好，要以一个开放的心态跟别</div>
</li>
<li><a href="/article/1950230114205757440.htm"
title="现在发挥你的优势" target="_blank">现在发挥你的优势</a>
<span class="text-muted">爱生活的佑嘉</span>
<div>来和我做咨询的一些朋友，涉及到定位的，都会说，我不知道我的优势是什么，你能不能帮我看看？还有一些朋友，喜欢做各种测试来了解自己，测试过后，然并卵。今天，我想来聊聊优势，如何能了解自己的优势是什么。首先，我们要知道，如果要成为“不一般”的人，我们所做的事情，就要基于自身的优势。我做管理者十多年，看到每个员工都有不同的特长，有的擅长数字，有的擅长人际，有的擅长写作。这些知道自己优势并且在这方面刻意练习</div>
</li>
<li><a href="/article/1950228285266915328.htm"
title="Git 与 GitHub 的对比与使用指南" target="_blank">Git 与 GitHub 的对比与使用指南</a>
<span class="text-muted">一念&</span>
<a class="tag" taget="_blank" href="/search/%E5%85%B6%E5%AE%83/1.htm">其它</a><a class="tag" taget="_blank" href="/search/git/1.htm">git</a><a class="tag" taget="_blank" href="/search/github/1.htm">github</a>
<div>Git与GitHub的对比与使用指南在软件开发中，Git和GitHub是两个密切相关但本质不同的工具。下面我将逐步解释它们的定义、区别、核心概念以及如何协同使用，确保内容真实可靠，基于广泛的技术实践。1.什么是Git？Git是一个分布式版本控制系统，由LinusTorvalds于2005年创建。它的核心功能是跟踪代码文件的变化，帮助开发者管理项目历史记录、协作和回滚错误。Git是开源的，可以在本地</div>
</li>
<li><a href="/article/1950227022097739776.htm"
title="第28章 汇编语言--- 异常处理" target="_blank">第28章 汇编语言--- 异常处理</a>
<span class="text-muted">hummhumm</span>
<a class="tag" taget="_blank" href="/search/%E6%B1%87%E7%BC%96/1.htm">汇编</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%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E8%AE%BE%E8%AE%A1/1.htm">程序设计</a><a class="tag" taget="_blank" href="/search/%E9%AB%98%E7%BA%A7%E8%AF%AD%E8%A8%80/1.htm">高级语言</a><a class="tag" taget="_blank" href="/search/%E5%BC%82%E5%B8%B8%E5%A4%84%E7%90%86/1.htm">异常处理</a><a class="tag" taget="_blank" href="/search/%E6%B1%87%E7%BC%96%E8%AF%AD%E8%A8%80/1.htm">汇编语言</a>
<div>在汇编语言中，异常处理是一个重要的概念，它涉及到处理器如何响应和处理程序运行时发生的非正常情况。异常可以是硬件错误（例如除零错误、非法指令）或者软件触发的中断（例如系统调用）。当发生异常时，处理器会暂停当前正在执行的程序，并转移到一个预先定义好的位置来处理这个异常。为了详细阐述第28章关于汇编语言中的异常处理，我们可以考虑一个简化的例子，展示异常处理的基本结构。请注意，实际的代码将取决于具体的处理</div>
</li>
<li><a href="/article/1950226390070652928.htm"
title="Flowable 高级扩展：自定义元素与性能优化实战" target="_blank">Flowable 高级扩展：自定义元素与性能优化实战</a>
<span class="text-muted">练习时长两年半的程序员小胡</span>
<a class="tag" taget="_blank" href="/search/Flowable/1.htm">Flowable</a><a class="tag" taget="_blank" href="/search/%E6%B5%81%E7%A8%8B%E5%BC%95%E6%93%8E%E5%AE%9E%E6%88%98%E6%8C%87%E5%8D%97/1.htm">流程引擎实战指南</a><a class="tag" taget="_blank" href="/search/%E6%B5%81%E7%A8%8B%E5%9B%BE/1.htm">流程图</a><a class="tag" taget="_blank" href="/search/flowable/1.htm">flowable</a><a class="tag" taget="_blank" href="/search/BPMN/1.htm">BPMN</a><a class="tag" taget="_blank" href="/search/%E6%B5%81%E7%A8%8B%E5%BC%95%E6%93%8E/1.htm">流程引擎</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
<div>在前五篇文章中，我们从基础概念、流程设计、API实战、SpringBoot集成，到外部系统协同，逐步构建了Flowable的应用体系。但企业级复杂场景中，原生功能往往难以满足定制化需求——比如需要特殊的审批规则网关、与决策引擎联动实现动态路由，或是在高并发场景下优化流程引擎性能。本文将聚焦Flowable的高级扩展能力，详解如何自定义流程元素、集成规则引擎，并掌握大型系统中的性能调优策略。一、自定</div>
</li>
<li><a href="/article/1950226011559882752.htm"
title="什么是缓存雪崩？缓存击穿？缓存穿透？分别如何解决？什么是缓存预热？" target="_blank">什么是缓存雪崩？缓存击穿？缓存穿透？分别如何解决？什么是缓存预热？</a>
<span class="text-muted">daixin8848</span>
<a class="tag" taget="_blank" href="/search/%E7%BC%93%E5%AD%98/1.htm">缓存</a><a class="tag" taget="_blank" href="/search/redis/1.htm">redis</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
<div>缓存雪崩：在一个时间段内，有大量的key过期，或者Redis服务宕机，导致大量的请求到达数据库,带来巨大压力-给key设置不同的TTL、利用Redis集群提高服务的高可用性、添加多级缓存、添加降级流策略缓存击穿：给某一个key设置了过期时间，当key过期的时间，恰好这个时间点有大量的并发请求访问这个key，可能会瞬间把数据库压垮-互斥锁：缓存失败时，只允许一个请求去加载数据并更新缓存，其他请求阻塞</div>
</li>
<li><a href="/article/1950222852644990976.htm"
title="模拟退火(SA)：如何“故意走错路”，才能找到最优解？" target="_blank">模拟退火(SA)：如何“故意走错路”，才能找到最优解？</a>
<span class="text-muted">小瑞瑞acd</span>
<a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%91%9E%E7%91%9E%E5%AD%A6%E6%95%B0%E6%A8%A1/1.htm">小瑞瑞学数模</a><a class="tag" taget="_blank" href="/search/%E6%A8%A1%E6%8B%9F%E9%80%80%E7%81%AB%E7%AE%97%E6%B3%95/1.htm">模拟退火算法</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%90%AF%E5%8F%91%E5%BC%8F%E7%AE%97%E6%B3%95/1.htm">启发式算法</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a>
<div>模拟退火(SA)：如何“故意走错路”，才能找到最优解？图示模拟退火算法如何通过接受较差解（橙色虚线标注）从局部最优（绿色点）逃逸，最终找到全局最优解（紫色点），展示其跳出局部极小值的能力。大家好，我是小瑞瑞！欢迎回到我的专栏！想象一下，你站在一座连绵不绝的山脉中，目标是找到海拔最低的那个山谷。你手上只有一个高度计，视野被浓雾笼罩，只能看清脚下的一小片区域。如果你是一个“贪心”的登山者，你的策略会非</div>
</li>
<li><a href="/article/1950222852074565632.htm"
title="2025年SDK游戏盾终极解析：重新定义手游安全的“隐形护甲”" target="_blank">2025年SDK游戏盾终极解析：重新定义手游安全的“隐形护甲”</a>
<span class="text-muted">上海云盾商务经理杨杨</span>
<a class="tag" taget="_blank" href="/search/%E6%B8%B8%E6%88%8F/1.htm">游戏</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%85%A8/1.htm">安全</a>
<div>副标题：从客户端加密到AI反外挂，拆解全链路防护如何重塑游戏攻防天平引言：当传统高防在手游战场“失效”2025年全球手游市场规模突破$2000亿，黑客单次攻击成本却降至$30——某SLG游戏因协议层CC攻击单日流失37%玩家，某开放世界游戏遭低频DDoS瘫痪6小时损失千万。传统高防IP的致命短板暴露无遗：无法识别伪造客户端流量、难防协议篡改、误杀率超15%。而集成于游戏终端的SDK游戏盾，正以“源</div>
</li>
<li><a href="/article/1950218819616174080.htm"
title="基于redis的Zset实现作者的轻量级排名" target="_blank">基于redis的Zset实现作者的轻量级排名</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/redis/1.htm">redis</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/%E7%BC%93%E5%AD%98/1.htm">缓存</a>
<div>基于redis的Zset实现轻量级作者排名系统在今天的技术架构中，Redis是一种广泛使用的内存数据存储系统，尤其在需要高效检索和排序的场景中表现优异。在本篇博客中，我们将深入探讨如何使用Redis的有序集合（ZSet）构建一个高效的笔记排行榜系统，并提供相关代码示例和详细的解析。1.功能背景与需求假设我们有一个笔记分享平台，用户可以发布各种笔记，系统需要根据用户发布的笔记数量来生成一个实时更新的</div>
</li>
<li><a href="/article/1950218314064130048.htm"
title="Java并发核心：线程池使用技巧与最佳实践！ | 多线程篇(五)" target="_blank">Java并发核心：线程池使用技巧与最佳实践！ | 多线程篇(五)</a>
<span class="text-muted">bug菌¹</span>
<a class="tag" taget="_blank" href="/search/Java%E5%AE%9E%E6%88%98%28%E8%BF%9B%E9%98%B6%E7%89%88%29/1.htm">Java实战(进阶版)</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/Java%E9%9B%B6%E5%9F%BA%E7%A1%80%E5%85%A5%E9%97%A8/1.htm">Java零基础入门</a><a class="tag" taget="_blank" href="/search/Java%E5%B9%B6%E5%8F%91/1.htm">Java并发</a><a class="tag" taget="_blank" href="/search/%E7%BA%BF%E7%A8%8B%E6%B1%A0/1.htm">线程池</a><a class="tag" taget="_blank" href="/search/%E5%A4%9A%E7%BA%BF%E7%A8%8B%E7%AF%87/1.htm">多线程篇</a>
<div>本文收录于「Java进阶实战」专栏，专业攻坚指数级提升，希望能够助你一臂之力，帮你早日登顶实现财富自由；同时，欢迎大家关注&&收藏&&订阅！持续更新中，up！up！up！！环境说明：Windows10+IntelliJIDEA2021.3.2+Jdk1.8本文目录前言摘要正文何为线程池？为什么需要线程池？线程池的好处线程池使用场景如何创建线程池？线程池的常见配置源码解析案例分享案例代码演示案例运行</div>
</li>
<li><a href="/article/1950217936077647872.htm"
title="Java 队列" target="_blank">Java 队列</a>
<span class="text-muted">tryxr</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</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/%E9%98%9F%E5%88%97/1.htm">队列</a>
<div>队列一般用什么哪种结构实现队列的特性数据入队列时一定是从尾部插入吗数据出队列时一定是从头部删除吗队列的基本运算有什么队列支持随机访问吗队列的英文表示什么是队列队列从哪进、从哪出队列的进出顺序队列是用哪种结构实现的Queue和Deque有什么区别Queue接口的方法Queue中的add与offer的区别offer、poll、peek的模拟实现如何利用链表实现队列如何利用顺序表实现队列什么叫做双端队列</div>
</li>
<li><a href="/article/1950214203994337280.htm"
title="提升在直返APP中的等级：解锁更多特权与收益的秘诀" target="_blank">提升在直返APP中的等级：解锁更多特权与收益的秘诀</a>
<span class="text-muted">古楼</span>
<div>在直返APP的世界里，每个用户都渴望提升自己的等级，以解锁更多特权与收益。那么，如何提升在直返APP中的等级呢？接下来，我们将为您揭示这一秘密。【高省】APP（高佣金领导者）是一个自用省钱佣金高，分享推广赚钱多的平台，百度有几百万篇报道，运行三年，稳定可靠。高省APP，是2021年推出的平台，0投资，0风险、高省APP佣金更高，模式更好，终端用户不流失。高省是公认的返利最高的软件。古楼导师高省邀请</div>
</li>
<li><a href="/article/1950214198956978176.htm"
title="2024微信红包封面序列号领取方法有哪些？（红包封面购买）" target="_blank">2024微信红包封面序列号领取方法有哪些？（红包封面购买）</a>
<span class="text-muted">帮忙赚赏金</span>
<div>2024微信红包封面序列号领取方法有哪些？（红包封面购买）红包封面领取微信搜索公众号：【艺间封面】千万红包封面等你领取2024微信红包封面免费序列号如何设置微信红包封面？1.打开微信，点击好友选择红包。2.单击红包封面。3.单击“添加红包封面”。4.输入接收序列号。来一波免费的微信红包封面序列号微信红包封面序列号红包封面领取微信搜索公众号：艺间封面千万红包封面等你领取微信红包封面序列号kGnkrb</div>
</li>
<li><a href="/article/1950213818848178176.htm"
title="D124:如何训练独立思考力？" target="_blank">D124:如何训练独立思考力？</a>
<span class="text-muted">大栗子_</span>
<div>当我们要判断一个理论或者思想是否正确，需要有三个层次，分别是体验、解释和分析。首先看体验。很多时候，我们会相信“听上去、感觉是对的”的事情。我们之前讲的太空笔的故事之所以大多数人都认为是对的，就是有一些看似真实的关键词，比如美国，NASA，设计等，这些词看起来非常权威，但是离我们又遥远，这时候我们的大脑就会放松警惕了。于是，我们毫不犹豫就接受了。说到这里，你有没有发现之前的电视广告中的各种高让我们</div>
</li>
<li><a href="/article/1950213689143521280.htm"
title="社交电商平台有哪些？社交电商怎么做？" target="_blank">社交电商平台有哪些？社交电商怎么做？</a>
<span class="text-muted">氧惠评测</span>
<div>社交电商平台有很多，以下是一些常见的社交电商平台：氧惠APP是与以往完全不同的抖客+淘客app！2024全新模式，我的直推也会放到你下面。主打：带货高补贴，深受各位带货团队长喜爱（训练营导师每天出单带货几万单）。注册即可享受高补贴+0撸+捡漏等带货新体验。送万元推广大礼包，教你如何1年做到百万团队。珊珊导师氧惠邀请码888999，注册送万元推广大礼包，教你如何1年做到百万团队。氧惠app：氧惠ap</div>
</li>
<li><a href="/article/1950213306421669888.htm"
title="新家长必修课小贴士—如何做到无条件接纳" target="_blank">新家长必修课小贴士—如何做到无条件接纳</a>
<span class="text-muted">SDDE兰</span>
<div>2021年6月14日星期一《新父母晨报》【育儿知识】：怎样做才是无条件地接纳孩子呢？在孩子成长的过程当中，来自父母无条件地接纳，是孩子成长的安全基地，是孩子面对任何困难时候的底气。只有被父母无条件接纳的孩子，未来不管遇到什么样的境况，都会感觉有后盾，都能更快地去适应。怎样做才是无条件地接纳孩子呢？有两个非常重要的维度：️接纳孩子的感受✨一个孩子不管他的行为是可爱，还是令人讨厌，他其实都是为了寻求父</div>
</li>
<li><a href="/article/1950213272120651776.htm"
title="Redis + Caffeine 实现高效的两级缓存架构" target="_blank">Redis + Caffeine 实现高效的两级缓存架构</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/%E7%BC%93%E5%AD%98/1.htm">缓存</a><a class="tag" taget="_blank" href="/search/redis/1.htm">redis</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a>
<div>Redis+Caffeine实现高效的两级缓存架构引言在现代高并发系统中，缓存是提升系统性能的关键组件之一。传统的单一缓存方案往往难以同时满足高性能和高可用性的需求。本文将介绍如何结合Redis和Caffeine构建一个高效的两级缓存系统，并通过三个版本的演进展示如何逐步优化代码结构。项目源代码：github地址、gitee地址两级缓存架构概述两级缓存通常由本地缓存（如Caffeine）和分布式缓</div>
</li>
<li><a href="/article/1950212516172853248.htm"
title="旧系统UI焕新陷阱：保留业务习惯与引入新交互的平衡点把控" target="_blank">旧系统UI焕新陷阱：保留业务习惯与引入新交互的平衡点把控</a>
<span class="text-muted">贝格前端工场</span>
<a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a><a class="tag" taget="_blank" href="/search/%E4%BA%A4%E4%BA%92/1.htm">交互</a>
<div>摘要**想给老旧系统换上“高颜值新衣”，却遭遇员工集体吐槽“不会用”？满心期待新交互能提升效率，结果用户操作频频出错，业务进度反而被拖慢？旧系统UI焕新本是优化体验的好机会，可在保留多年养成的业务操作习惯，与引入更先进便捷的新交互方式之间，却横亘着巨大鸿沟。稍有不慎，就会陷入“改了不如不改”的尴尬境地。这场关于“守旧”与“创新”的博弈，究竟该如何破局？一、旧系统UI焕新：一场甜蜜又棘手的改造工程旧</div>
</li>
<li><a href="/article/1950212283061825536.htm"
title="女生必备技能：如何一眼辨别渣男？" target="_blank">女生必备技能：如何一眼辨别渣男？</a>
<span class="text-muted">艾零的奇异世界</span>
<div>我相信女孩子都不喜欢渣男，虽然也很喜欢看那些渣男出现的奇葩事，而且看完还得自己思考一下人生，这癖好我懂我懂！不过最近渣男出现的频率极高，甚至有点儿惊悚。3月28日芜湖市新市口，红色路虎车上烧死两人。只因男子苦追女子被拒。结果呢，男子想着呀，那就一起命送黄泉！可怜的女孩子死都没法摆脱渣男。4月12日，22岁女孩带着肚子里的孩子自杀，而渣男是准备继承皇位的花花公子。女孩3个月内打胎2次，自杀后还被键盘</div>
</li>
<li><a href="/article/1950211018227511296.htm"
title="鬼谷子智慧：怎样留人死心塌地跟你干；威逼利诱是最差劲的方法" target="_blank">鬼谷子智慧：怎样留人死心塌地跟你干；威逼利诱是最差劲的方法</a>
<span class="text-muted">国学文化学者</span>
<div>随着社会经济发展的迅速提升，企业现代化的变更，更多的企业已经改变了固有的用人模式，更多的是需要专业对口，减少培训成本的员工，可同样现在人才也是如此，选择变多了，在一家企业的时间就变得不再持久了。无论是企业用人还是找工作，似乎变得都不再那么简单了。其实解决了如何留人的问题也就解决了不断更换工作的问题；一个企业各方面都不错，谁又想经常换工作呢？鬼谷子智谋鬼谷子有提到，量才而用，根据他自身的能力让他得到</div>
</li>
<li><a href="/article/1950207097023033344.htm"
title="Pktgen-DPDK：开源网络测试工具的深度解析与应用" target="_blank">Pktgen-DPDK：开源网络测试工具的深度解析与应用</a>
<span class="text-muted">艾古力斯</span>
<div>本文还有配套的精品资源，点击获取简介：Pktgen-DPDK是基于DPDK的高性能流量生成工具，适用于网络性能测试、硬件验证及协议栈开发。它支持多种网络协议，能够模拟高吞吐量的数据包发送。本项目通过利用DPDK的高速数据包处理能力，允许用户自定义数据包内容，并实现高效的数据包管理与传输。文章将指导如何安装DPDK、编译Pktgen、配置工具以及使用方法，最终帮助开发者和网络管理员深入理解并优化网络</div>
</li>
<li><a href="/article/1950207097413103616.htm"
title="微信公众号回调java_处理微信公众号消息回调" target="_blank">微信公众号回调java_处理微信公众号消息回调</a>
<span class="text-muted">weixin_39607620</span>
<a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E5%85%AC%E4%BC%97%E5%8F%B7%E5%9B%9E%E8%B0%83java/1.htm">微信公众号回调java</a>
<div>1、背景在上一节中，咱们知道如何接入微信公众号，可是以后公众号会与咱们进行交互，那么微信公众号如何通知到咱们本身的服务器呢？咱们知道咱们接入的时候提供的url是GET/mp/entry，那么公众号以后产生的事件将会以POST/mp/entry发送到咱们本身的服务器上。html2、代码实现，此处仍是使用weixin-java-mp这个框架实现一、引入weixin-java-mpcom.github.</div>
</li>
<li><a href="/article/1950206718524846080.htm"
title="手把手教你用C语言实现顺序表" target="_blank">手把手教你用C语言实现顺序表</a>
<span class="text-muted"></span>
<div>hello，大家好，本篇文章旨在为大家讲解如何使用C语言实现顺序表，还有就是小编自己复习一下相关知识，OK，那我们现在开始。在通讯录中，有增删查改等功能，那么顺序表我们也会对以上功能进行实现。一、创建并初始化顺序表1.创建typedefintSLDataType;#defineINIT_CAPACITY4//动态顺序表--按需申请typedefstructSeqList{SLDataType*a;</div>
</li>
<li><a href="/article/1950206563411095552.htm"
title="2022-01-06" target="_blank">2022-01-06</a>
<span class="text-muted">嘴角上扬的微微笑</span>
<div>[cp]《琅琊榜》中萧景睿和梅长苏的这段对话，太让人治愈了。他说：“凡是人，总有取舍，你取了你认为重要的东西，舍弃了我，这只是你的选择而已。若是我因为没有被选择，就心生怨恨。那这世间岂不是有太多不可原谅之处。毕竟谁都没有责任，要以我为先，以我为重。无论我如何希望，也不能强求。我之所以这么待你，是因为我愿意。若是以此，换回同样的诚心，固然可喜。可若是没有，我也没有什么好后悔的。”看到这段话真的太感动</div>
</li>
<li><a href="/article/1950206053383729152.htm"
title="直返APP的创始人是谁他们的创业背景和经历如何?" target="_blank">直返APP的创始人是谁他们的创业背景和经历如何?</a>
<span class="text-muted">氧惠帮朋友一起省</span>
<div>直返的创始人是李明，他是一位富有创新精神的电商专家。他看到了传统电商模式的局限，并决心打破这些局限，为消费者带来更实惠、更便捷的购物体验。于是，他创立了直返这一独特的电商模式，通过省去中间环节、直接返还利润给消费者，实现了购物的简单与实惠。氧惠APP（带货领导者）——是与以往完全不同的抖客+淘客app！2024全新模式，我的直推也会放到你下面。主打：带货高补贴，深受各位带货团队长喜爱（每天出单带货</div>
</li>
<li><a href="/article/1950205080594608128.htm"
title="Deepseek技术深化：驱动大数据时代颠覆性变革的未来引擎" target="_blank">Deepseek技术深化：驱动大数据时代颠覆性变革的未来引擎</a>
<span class="text-muted">荣华富贵8</span>
<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/%E6%90%9C%E7%B4%A2%E5%BC%95%E6%93%8E/1.htm">搜索引擎</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/%E7%BC%93%E5%AD%98/1.htm">缓存</a><a class="tag" taget="_blank" href="/search/redis/1.htm">redis</a>
<div>在大数据时代，信息爆炸和数据驱动的决策逐渐重塑各行各业。作为一项前沿技术，Deepseek正在引领新一轮技术革新，颠覆传统数据处理与分析方式。本文将从理论原理、应用场景和前沿代码实践三个层面，深入剖析Deepseek技术如何为大数据时代提供颠覆性变革的解决方案。一、技术背景与核心思想1.1大数据挑战与机遇在数据量呈指数级增长的背景下，传统数据处理方法面临数据存储、计算效率和信息提取精度的诸多挑战。</div>
</li>
<li><a href="/article/1950204901929840640.htm"
title="求解——妊娠纹霜哪个牌子好？皮肤专家推荐的热门秘诀！" target="_blank">求解——妊娠纹霜哪个牌子好？皮肤专家推荐的热门秘诀！</a>
<span class="text-muted">zhangxing0100</span>
<div>妊娠纹会严重影响女性的美观，那孕期的女性朋友该如何避免减少妊娠纹的出现呢?下面美腹丽人小编为大家分享了预防妊娠纹的方法，赶紧一起来学习吧!一、预防妊娠纹的饮食习惯1、多食用对皮肤内胶原纤维有利的食品来增强皮肤的弹性。2、控制糖分摄入，少吃色素含量高的食物。3、早晚两杯脱脂牛奶，多食用维丰富的蔬菜、水果和富含维生素及矿物质的食物，增加细胞膜的通透性和皮肤的新陈代谢功能。4、正确的喝水习惯可以提速皮肤</div>
</li>
<li><a href="/article/1950202936449626112.htm"
title="Qwen3 大模型实战：使用 vLLM 部署与函数调用（Function Call）全攻略" target="_blank">Qwen3 大模型实战：使用 vLLM 部署与函数调用（Function Call）全攻略</a>
<span class="text-muted">曦紫沐</span>
<a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%A8%A1%E5%9E%8B/1.htm">大模型</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%A8%A1%E5%9E%8B%E9%83%A8%E7%BD%B2/1.htm">大模型部署</a><a class="tag" taget="_blank" href="/search/Qwen3/1.htm">Qwen3</a><a class="tag" taget="_blank" href="/search/vLLM/1.htm">vLLM</a><a class="tag" taget="_blank" href="/search/%E5%87%BD%E6%95%B0%E8%B0%83%E7%94%A8/1.htm">函数调用</a>
<div>文章摘要本文将带你从零开始，深入掌握如何使用Qwen3-8B大语言模型，结合vLLM进行高性能部署，并通过函数调用（FunctionCall）实现模型与外部工具的智能联动。我们将详细讲解部署命令、调用方式、代码示例及实际应用场景，帮助你快速构建基于Qwen3的智能应用。一、Qwen3简介与部署环境准备Qwen3是通义千问系列的最新一代大语言模型，具备强大的自然语言理解和生成能力，尤其在函数调用、工</div>
</li>
<li><a href="/article/68.htm"
title="mongodb3.03开启认证" target="_blank">mongodb3.03开启认证</a>
<span class="text-muted">21jhf</span>
<a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a>
<div>下载了最新mongodb3.03版本，当使用--auth 参数命令行开启mongodb用户认证时遇到很多问题，现总结如下：
（百度上搜到的基本都是老版本的，看到db.addUser的就是，请忽略）
Windows下我做了一个bat文件，用来启动mongodb，命令行如下：
mongod --dbpath db\data --port 27017 --directoryperdb --logp</div>
</li>
<li><a href="/article/195.htm"
title="【Spark103】Task not serializable" target="_blank">【Spark103】Task not serializable</a>
<span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/Serializable/1.htm">Serializable</a>
<div>Task not serializable是Spark开发过程最令人头疼的问题之一，这里记录下出现这个问题的两个实例，一个是自己遇到的，另一个是stackoverflow上看到。等有时间了再仔细探究出现Task not serialiazable的各种原因以及出现问题后如何快速定位问题的所在，至少目前阶段碰到此类问题，没有什么章法
1.
package spark.exampl</div>
</li>
<li><a href="/article/322.htm"
title="你所熟知的 LRU(最近最少使用)" target="_blank">你所熟知的 LRU(最近最少使用)</a>
<span class="text-muted">dalan_123</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
<div>关于LRU这个名词在很多地方或听说，或使用，接下来看下lru缓存回收的实现
1、大体的想法
a、查询出最近最晚使用的项
b、给最近的使用的项做标记
通过使用链表就可以完成这两个操作，关于最近最少使用的项只需要返回链表的尾部；标记最近使用的项，只需要将该项移除并放置到头部，那么难点就出现 你如何能够快速在链表定位对应的该项？
这时候多</div>
</li>
<li><a href="/article/449.htm"
title="Javascript 跨域" target="_blank">Javascript 跨域</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/jsonp/1.htm">jsonp</a><a class="tag" taget="_blank" href="/search/%E8%B7%A8%E5%9F%9F/1.htm">跨域</a><a class="tag" taget="_blank" href="/search/cross-domain/1.htm">cross-domain</a>
<div>
</div>
</li>
<li><a href="/article/576.htm"
title="linux下安装apache服务器" target="_blank">linux下安装apache服务器</a>
<span class="text-muted">g21121</span>
<a class="tag" taget="_blank" href="/search/apache/1.htm">apache</a>
<div>安装apache
下载windows版本apache，下载地址：http://httpd.apache.org/download.cgi
1.windows下安装apache
Windows下安装apache比较简单，注意选择路径和端口即可，这里就不再赘述了。 2.linux下安装apache：
下载之后上传到linux的相关目录，这里指定为/home/apach</div>
</li>
<li><a href="/article/703.htm"
title="FineReport的JS编辑框和URL地址栏语法简介" target="_blank">FineReport的JS编辑框和URL地址栏语法简介</a>
<span class="text-muted">老A不折腾</span>
<a class="tag" taget="_blank" href="/search/finereport/1.htm">finereport</a><a class="tag" taget="_blank" href="/search/web%E6%8A%A5%E8%A1%A8/1.htm">web报表</a><a class="tag" taget="_blank" href="/search/%E6%8A%A5%E8%A1%A8%E8%BD%AF%E4%BB%B6/1.htm">报表软件</a><a class="tag" taget="_blank" href="/search/%E8%AF%AD%E6%B3%95%E6%80%BB%E7%BB%93/1.htm">语法总结</a>
<div> JS编辑框：
1.FineReport的js。
作为一款BS产品，browser端的JavaScript是必不可少的。
FineReport中的js是已经调用了finereport.js的。
大家知道，预览报表时，报表servlet会将cpt模板转为html，在这个html的head头部中会引入FineReport的js，这个finereport.js中包含了许多内置的fun</div>
</li>
<li><a href="/article/830.htm"
title="根据STATUS信息对MySQL进行优化" target="_blank">根据STATUS信息对MySQL进行优化</a>
<span class="text-muted">墙头上一根草</span>
<a class="tag" taget="_blank" href="/search/status/1.htm">status</a>
<div>mysql 查看当前正在执行的操作，即正在执行的sql语句的方法为:
show processlist 命令
mysql> show global status;可以列出MySQL服务器运行各种状态值，我个人较喜欢的用法是show status like '查询值%';一、慢查询mysql> show variab</div>
</li>
<li><a href="/article/957.htm"
title="我的spring学习笔记7-Spring的Bean配置文件给Bean定义别名" target="_blank">我的spring学习笔记7-Spring的Bean配置文件给Bean定义别名</a>
<span class="text-muted">aijuans</span>
<a class="tag" taget="_blank" href="/search/Spring+3/1.htm">Spring 3</a>
<div>本文介绍如何给Spring的Bean配置文件的Bean定义别名？
原始的
<bean id="business" class="onlyfun.caterpillar.device.Business">
<property name="writer">
<ref b</div>
</li>
<li><a href="/article/1084.htm"
title="高性能mysql 之 性能剖析" target="_blank">高性能mysql 之 性能剖析</a>
<span class="text-muted">annan211</span>
<a class="tag" taget="_blank" href="/search/%E6%80%A7%E8%83%BD/1.htm">性能</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/mysql+%E6%80%A7%E8%83%BD%E5%89%96%E6%9E%90/1.htm">mysql 性能剖析</a><a class="tag" taget="_blank" href="/search/%E5%89%96%E6%9E%90/1.htm">剖析</a>
<div>
1 定义性能优化
mysql服务器性能，此处定义为 响应时间。
在解释性能优化之前，先来消除一个误解，很多人认为，性能优化就是降低cpu的利用率或者减少对资源的使用。
这是一个陷阱。
资源时用来消耗并用来工作的，所以有时候消耗更多的资源能够加快查询速度，保持cpu忙绿，这是必要的。很多时候发现
编译进了新版本的InnoDB之后，cpu利用率上升的很厉害，这并不</div>
</li>
<li><a href="/article/1211.htm"
title="主外键和索引唯一性约束" target="_blank">主外键和索引唯一性约束</a>
<span class="text-muted">百合不是茶</span>
<a class="tag" taget="_blank" href="/search/%E7%B4%A2%E5%BC%95/1.htm">索引</a><a class="tag" taget="_blank" href="/search/%E5%94%AF%E4%B8%80%E6%80%A7%E7%BA%A6%E6%9D%9F/1.htm">唯一性约束</a><a class="tag" taget="_blank" href="/search/%E4%B8%BB%E5%A4%96%E9%94%AE%E7%BA%A6%E6%9D%9F/1.htm">主外键约束</a><a class="tag" taget="_blank" href="/search/%E8%81%94%E6%9C%BA%E5%88%A0%E9%99%A4/1.htm">联机删除</a>
<div>目标;第一步;创建两张表 用户表和文章表
第二步;发表文章
1,建表;
---用户表 BlogUsers
--userID唯一的
--userName
--pwd
--sex
create </div>
</li>
<li><a href="/article/1338.htm"
title="线程的调度" target="_blank">线程的调度</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/%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">多线程</a><a class="tag" taget="_blank" href="/search/thread/1.htm">thread</a><a class="tag" taget="_blank" href="/search/%E7%BA%BF%E7%A8%8B%E7%9A%84%E8%B0%83%E5%BA%A6/1.htm">线程的调度</a><a class="tag" taget="_blank" href="/search/java%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">java多线程</a>
<div>1. Java提供一个线程调度程序来监控程序中启动后进入可运行状态的所有线程。线程调度程序按照线程的优先级决定应调度哪些线程来执行。
2. 多数线程的调度是抢占式的（即我想中断程序运行就中断，不需要和将被中断的程序协商）
a) </div>
</li>
<li><a href="/article/1465.htm"
title="查看日志常用命令" target="_blank">查看日志常用命令</a>
<span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E5%91%BD%E4%BB%A4/1.htm">命令</a><a class="tag" taget="_blank" href="/search/unix/1.htm">unix</a>
<div>一.日志查找方法，可以用通配符查某台主机上的所有服务器grep "关键字" /wls/applogs/custom-*/error.log
二.查看日志常用命令1.grep '关键字' error.log：在error.log中搜索'关键字'2.grep -C10 '关键字' error.log：显示关键字前后10行记录3.grep '关键字' error.l</div>
</li>
<li><a href="/article/1592.htm"
title="【持久化框架MyBatis3一】MyBatis版HelloWorld" target="_blank">【持久化框架MyBatis3一】MyBatis版HelloWorld</a>
<span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/helloworld/1.htm">helloworld</a>
<div>MyBatis这个系列的文章，主要参考《Java Persistence with MyBatis 3》。
样例数据
本文以MySQL数据库为例，建立一个STUDENTS表，插入两条数据，然后进行单表的增删改查
CREATE TABLE STUDENTS
(
stud_id int(11) NOT NULL AUTO_INCREMENT,
</div>
</li>
<li><a href="/article/1719.htm"
title="【Hadoop十五】Hadoop Counter" target="_blank">【Hadoop十五】Hadoop Counter</a>
<span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/hadoop/1.htm">hadoop</a>
<div>
1. 只有Map任务的Map Reduce Job
File System Counters
FILE: Number of bytes read=3629530
FILE: Number of bytes written=98312
FILE: Number of read operations=0
FILE: Number of lar</div>
</li>
<li><a href="/article/1846.htm"
title="解决Tomcat数据连接池无法释放" target="_blank">解决Tomcat数据连接池无法释放</a>
<span class="text-muted">ronin47</span>
<a class="tag" taget="_blank" href="/search/tomcat+%E8%BF%9E%E6%8E%A5%E6%B1%A0%E3%80%80%E4%BC%98%E5%8C%96/1.htm">tomcat 连接池 优化</a>
<div>
近段时间，公司的检测中心报表系统(SMC)的开发人员时不时找到我，说用户老是出现无法登录的情况。前些日子因为手头上 有Jboss集群的测试工作，发现用户不能登录时，都是在Tomcat中将这个项目Reload一下就好了，不过只是治标而已，因为大概几个小时之后又会 再次出现无法登录的情况。
今天上午，开发人员小毛又找到我，要我协助将这个问题根治一下，拖太久用户难保不投诉。
简单分析了一</div>
</li>
<li><a href="/article/1973.htm"
title="java-75-二叉树两结点的最低共同父结点" target="_blank">java-75-二叉树两结点的最低共同父结点</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 ljn.help.*;
public class BTreeLowestParentOfTwoNodes {
public static void main(String[] args) {
/*
* node data is stored in</div>
</li>
<li><a href="/article/2100.htm"
title="行业垂直搜索引擎网页抓取项目" target="_blank">行业垂直搜索引擎网页抓取项目</a>
<span class="text-muted">carlwu</span>
<a class="tag" taget="_blank" href="/search/Lucene/1.htm">Lucene</a><a class="tag" taget="_blank" href="/search/Nutch/1.htm">Nutch</a><a class="tag" taget="_blank" href="/search/Heritrix/1.htm">Heritrix</a><a class="tag" taget="_blank" href="/search/Solr/1.htm">Solr</a>
<div>公司有一个搜索引擎项目，希望各路高人有空来帮忙指导，谢谢！
这是详细需求：
（1） 通过提供的网站地址(大概100-200个网站)，网页抓取程序能不断抓取网页和其它类型的文件（如Excel、PDF、Word、ppt及zip类型），并且程序能够根据事先提供的规则，过滤掉不相干的下载内容。
（2） 程序能够搜索这些抓取的内容，并能对这些抓取文件按照油田名进行分类，然后放到服务器不同的目录中。
</div>
</li>
<li><a href="/article/2227.htm"
title="[通讯与服务]在总带宽资源没有大幅增加之前,不适宜大幅度降低资费" target="_blank">[通讯与服务]在总带宽资源没有大幅增加之前,不适宜大幅度降低资费</a>
<span class="text-muted">comsci</span>
<a class="tag" taget="_blank" href="/search/%E8%B5%84%E6%BA%90/1.htm">资源</a>
<div>
降低通讯服务资费，就意味着有更多的用户进入，就意味着通讯服务提供商要接待和服务更多的用户，在总体运维成本没有由于技术升级而大幅下降的情况下，这种降低资费的行为将导致每个用户的平均带宽不断下降，而享受到的服务质量也在下降，这对用户和服务商都是不利的。。。。。。。。
&nbs</div>
</li>
<li><a href="/article/2354.htm"
title="Java时区转换及时间格式" target="_blank">Java时区转换及时间格式</a>
<span class="text-muted">Cwind</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
<div>本文介绍Java API 中 Date, Calendar, TimeZone和DateFormat的使用，以及不同时区时间相互转化的方法和原理。
问题描述：
向处于不同时区的服务器发请求时需要考虑时区转换的问题。譬如，服务器位于东八区（北京时间，GMT+8:00），而身处东四区的用户想要查询当天的销售记录。则需把东四区的“今天”这个时间范围转换为服务器所在时区的时间范围。
</div>
</li>
<li><a href="/article/2481.htm"
title="readonly,只读，不可用" target="_blank">readonly,只读，不可用</a>
<span class="text-muted">dashuaifu</span>
<a class="tag" taget="_blank" href="/search/js/1.htm">js</a><a class="tag" taget="_blank" href="/search/jsp/1.htm">jsp</a><a class="tag" taget="_blank" href="/search/disable/1.htm">disable</a><a class="tag" taget="_blank" href="/search/readOnly/1.htm">readOnly</a><a class="tag" taget="_blank" href="/search/readOnly/1.htm">readOnly</a>
<div>readOnly 和 readonly 不同，在做js开发时一定要注意函数大小写和jsp黄线的警告！！！我就经历过这么一件事：
使用readOnly在某些浏览器或同一浏览器不同版本有的可以实现“只读”功能，有的就不行，而且函数readOnly有黄线警告！！！就这样被折磨了不短时间！！！（期间使用过disable函数，但是发现disable函数之后后台接收不到前台的的数据！！！）
</div>
</li>
<li><a href="/article/2608.htm"
title="LABjs、RequireJS、SeaJS 介绍" target="_blank">LABjs、RequireJS、SeaJS 介绍</a>
<span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/js/1.htm">js</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a>
<div>LABjs 的核心是 LAB（Loading and Blocking）：Loading 指异步并行加载，Blocking 是指同步等待执行。LABjs 通过优雅的语法（script 和 wait）实现了这两大特性，核心价值是性能优化。LABjs 是一个文件加载器。RequireJS 和 SeaJS 则是模块加载器，倡导的是一种模块化开发理念，核心价值是让 JavaScript 的模块化开发变得更</div>
</li>
<li><a href="/article/2735.htm"
title="[应用结构]入口脚本" target="_blank">[应用结构]入口脚本</a>
<span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/yii2/1.htm">yii2</a>
<div>入口脚本
入口脚本是应用启动流程中的第一环，一个应用（不管是网页应用还是控制台应用）只有一个入口脚本。终端用户的请求通过入口脚本实例化应用并将将请求转发到应用。
Web 应用的入口脚本必须放在终端用户能够访问的目录下，通常命名为 index.php，也可以使用 Web 服务器能定位到的其他名称。
控制台应用的入口脚本一般在应用根目录下命名为 yii（后缀为.php），该文</div>
</li>
<li><a href="/article/2862.htm"
title="haoop shell命令" target="_blank">haoop shell命令</a>
<span class="text-muted">eksliang</span>
<a class="tag" taget="_blank" href="/search/hadoop/1.htm">hadoop</a><a class="tag" taget="_blank" href="/search/hadoop+shell/1.htm">hadoop shell</a>
<div>
cat
chgrp
chmod
chown
copyFromLocal
copyToLocal
cp
du
dus
expunge
get
getmerge
ls
lsr
mkdir
movefromLocal
mv
put
rm
rmr
setrep
stat
tail
test
text
</div>
</li>
<li><a href="/article/2989.htm"
title="MultiStateView不同的状态下显示不同的界面" target="_blank">MultiStateView不同的状态下显示不同的界面</a>
<span class="text-muted">gundumw100</span>
<a class="tag" taget="_blank" href="/search/android/1.htm">android</a>
<div>只要将指定的view放在该控件里面，可以该view在不同的状态下显示不同的界面，这对ListView很有用，比如加载界面，空白界面，错误界面。而且这些见面由你指定布局，非常灵活。
PS：ListView虽然可以设置一个EmptyView，但使用起来不方便，不灵活，有点累赘。
<com.kennyc.view.MultiStateView xmlns:android=&qu</div>
</li>
<li><a href="/article/3116.htm"
title="jQuery实现页面内锚点平滑跳转" target="_blank">jQuery实现页面内锚点平滑跳转</a>
<span class="text-muted">ini</span>
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a>
<div>平时我们做导航滚动到内容都是通过锚点来做，刷的一下就直接跳到内容了，没有一丝的滚动效果，而且 url 链接最后会有“小尾巴”，就像#keleyi，今天我就介绍一款 jquery 做的滚动的特效，既可以设置滚动速度，又可以在 url 链接上没有“小尾巴”。
效果体验：http://keleyi.com/keleyi/phtml/jqtexiao/37.htmHTML文件代码：
&</div>
</li>
<li><a href="/article/3243.htm"
title="kafka offset迁移" target="_blank">kafka offset迁移</a>
<span class="text-muted">kane_xie</span>
<a class="tag" taget="_blank" href="/search/kafka/1.htm">kafka</a>
<div>在早前的kafka版本中（0.8.0），offset是被存储在zookeeper中的。
到当前版本（0.8.2）为止，kafka同时支持offset存储在zookeeper和offset manager（broker）中。
从官方的说明来看，未来offset的zookeeper存储将会被弃用。因此现有的基于kafka的项目如果今后计划保持更新的话，可以考虑在合适</div>
</li>
<li><a href="/article/3370.htm"
title="android > 搭建 cordova 环境" target="_blank">android > 搭建 cordova 环境</a>
<span class="text-muted">mft8899</span>
<a class="tag" taget="_blank" href="/search/android/1.htm">android</a>
<div>
1 , 安装 node.js
http://nodejs.org
node -v 查看版本
2, 安装 npm
可以先从 https://github.com/isaacs/npm/tags 下载 源码 解压到</div>
</li>
<li><a href="/article/3497.htm"
title="java封装的比较器，比较是否全相同，获取不同字段名字" target="_blank">java封装的比较器，比较是否全相同，获取不同字段名字</a>
<span class="text-muted">qifeifei</span>
<div> 非常实用的java比较器，贴上代码：
import java.util.HashSet;
import java.util.List;
import java.util.Set;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
import net.sf.json.JsonConfig;
i</div>
</li>
<li><a href="/article/3624.htm"
title="记录一些函数用法" target="_blank">记录一些函数用法</a>
<span class="text-muted">.Aky.</span>
<a class="tag" taget="_blank" href="/search/%E4%BD%8D%E8%BF%90%E7%AE%97/1.htm">位运算</a><a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</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/%E5%87%BD%E6%95%B0/1.htm">函数</a><a class="tag" taget="_blank" href="/search/IP/1.htm">IP</a>
<div>高手们照旧忽略。
想弄个全天朝IP段数据库，找了个今天最新更新的国内所有运营商IP段，copy到文件，用文件函数，字符串函数把玩下。分割出startIp和endIp这样格式写入.txt文件，直接用phpmyadmin导入.csv文件的形式导入。（生命在于折腾，也许你们觉得我傻X，直接下载人家弄好的导入不就可以，做自己的菜鸟，让别人去说吧）
当然用到了ip2long()函数把字符串转为整型数</div>
</li>
<li><a href="/article/3751.htm"
title="sublime text 3 rust" target="_blank">sublime text 3 rust</a>
<span class="text-muted">wudixiaotie</span>
<a class="tag" taget="_blank" href="/search/Sublime+Text/1.htm">Sublime Text</a>
<div>1.sublime text 3 => install package => Rust
2.cd ~/.config/sublime-text-3/Packages
3.mkdir rust
4.git clone https://github.com/sp0/rust-style
5.cd rust-style
6.cargo build --release
7.ctrl</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.
<!-- <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">京ICP备09083238号</a><br>-->
</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>