yyzzabc123

vue源码分析-v-model的本质

双向数据绑定这个概念或者大家并不陌生，视图影响数据，数据同样影响视图，两者间有双向依赖的关系。在响应式系统构建的上，中，下篇我已经对数据影响视图的原理详细阐述清楚了。而如何完成视图影响数据这一关联？这就是本节讨论的重点：指令v-model。

由于v-model和前面介绍的插槽，事件一致，都属于vue提供的指令，所以我们对v-model的分析方式和以往大同小异。分析会围绕模板的编译，render函数的生成，到最后真实节点的挂载顺序执行。最终我们依然会得到一个结论，v-model无论什么使用场景，本质上都是一个语法糖。

11.1 表单绑定

11.1.1 基础使用

v-model和表单脱离不了关系，之所以视图能影响数据，本质上这个视图需要可交互的，因此表单是实现这一交互的前提。表单的使用以<select></code>为核心，更细的划分结合<code>v-model</code>的使用如下： <pre><code class="prism language-javascript">// 普通输入框 <input type="text" v-model="value1"> // 多行文本框 <textarea v-model="value2" cols="30" rows="10"></textarea> // 单选框 <div class="group"> <input type="radio" value="one" v-model="value3"> one <input type="radio" value="two" v-model="value3"> two </div> // 原生单选框的写法注：原生单选框的写法需要通过name绑定一组单选，两个radio的name属性相同，才能表现为互斥 <div class="group"> <input type="radio" name="number" value="one">one <input type="radio" name="number" value="two">two </div> // 多选框 (原始值： value4: []) <div class="group"> <input type="checkbox" value="jack" v-model="value4">jack <input type="checkbox" value="lili" v-model="value4">lili </div> // 下拉选项 <select name="" id="" v-model="value5"> <option value="apple">apple</option> <option value="banana">banana</option> <option value="bear">bear</option> </select> </code></pre> 接下来的分析，我们以普通输入框为例 <pre><code class="prism language-javascript"><div id="app"> <input type="text" v-model="value1"> </div> new Vue({ el: '#app', data() { return { value1: '' } } }) </code></pre> 进入正文前先回顾一下模板到真实节点的过程。 <ul> <li> <ol> <li>模板解析成<code>AST</code>树;</li> </ol> </li> <li> <ol start="2"> <li><code>AST</code>树生成可执行的<code>render</code>函数;</li> </ol> </li> <li> <ol start="3"> <li><code>render</code>函数转换为<code>Vnode</code>对象;</li> </ol> </li> <li> <ol start="4"> <li>根据<code>Vnode</code>对象生成真实的<code>Dom</code>节点。</li> </ol> </li> </ul> 接下来，我们先看看模板解析为<code>AST</code>树的过程。 <h6>11.1.2 AST树的解析</h6> 模板的编译阶段，会调用<code>var ast = parse(template.trim(), options)</code>生成<code>AST</code>树，<code>parse</code>函数的其他细节这里不展开分析，前面的文章或多或少都涉及过，我们还是把关注点放在模板属性上的解析，也就是<code>processAttrs</code>函数上。 使用过<code>vue</code>写模板的都知道，<code>vue</code>模板属性由两部分组成，一部分是指令，另一部分是普通<code>html</code>标签属性。z这也是属性处理的两大分支。而在指令的细分领域，又将<code>v-on，v-bind</code>做特殊的处理，其他的普通分支会执行<code>addDirective</code>过程。 <pre><code class="prism language-javascript">// 处理模板属性 function processAttrs(el) { var list = el.attrsList; var i, l, name, rawName, value, modifiers, syncGen, isDynamic; for (i = 0, l = list.length; i < l; i++) { name = rawName = list[i].name; // v-on:click value = list[i].value; // doThis if (dirRE.test(name)) { // 1.针对指令的属性处理 ··· if (bindRE.test(name)) { // v-bind分支 ··· } else if(onRE.test(name)) { // v-on分支 ··· } else { // 除了v-bind，v-on之外的普通指令 ··· // 普通指令会在AST树上添加directives属性 addDirective(el, name, rawName, value, arg, isDynamic, modifiers, list[i]); if (name === 'model') { checkForAliasModel(el, value); } } } else { // 2. 普通html标签属性 } } } </code></pre> 在深入剖析Vue源码 - 揭秘Vue的事件机制这一节，我们介绍了<code>AST</code>产生阶段对事件指令<code>v-on</code>的处理是为<code>AST</code>树添加<code>events</code>属性。类似的，普通指令会在<code>AST</code>树上添加<code>directives</code>属性，具体看<code>addDirective</code>函数。 <pre><code class="prism language-php">// 添加directives属性 function addDirective (el,name,rawName,value,arg,isDynamicArg,modifiers,range) { (el.directives || (el.directives = [])).push(rangeSetItem({ name: name, rawName: rawName, value: value, arg: arg, isDynamicArg: isDynamicArg, modifiers: modifiers }, range)); el.plain = false; } </code></pre> 最终<code>AST</code>树多了一个属性对象，其中<code>modifiers</code>代表模板中添加的修饰符，如：<code>.lazy, .number, .trim</code>。 <pre><code class="prism language-javascript">// AST { directives: { { rawName: 'v-model', value: 'value', name: 'v-model', modifiers: undefined } } } </code></pre> <h6>11.1.3 render函数生成</h6> <code>render</code>函数生成阶段，也就是前面分析了数次的<code>generate</code>逻辑，其中<code>genData</code>会对模板的诸多属性进行处理,最终返回拼接好的字符串模板，而对指令的处理会进入<code>genDirectives</code>流程。 <pre><code class="prism language-kotlin">function genData(el, state) { var data = '{'; // 指令的处理 var dirs = genDirectives(el, state); ··· // 其他属性，指令的处理 // 针对组件的v-model处理，放到后面分析 if (el.model) { data += "model:{value:" + (el.model.value) + ",callback:" + (el.model.callback) + ",expression:" + (el.model.expression) + "},"; } return data } </code></pre> <code>genDirectives</code>逻辑并不复杂,他会拿到之前<code>AST</code>树中保留的<code>directives</code>对象，并遍历解析指令对象，最终以<code>'directives:['</code>包裹的字符串返回。 参考Vue3源码视频讲解：进入学习 <pre><code class="prism language-javascript">// directives render字符串的生成 function genDirectives (el, state) { // 拿到指令对象 var dirs = el.directives; if (!dirs) { return } // 字符串拼接 var res = 'directives:['; var hasRuntime = false; var i, l, dir, needRuntime; for (i = 0, l = dirs.length; i < l; i++) { dir = dirs[i]; needRuntime = true; // 对指令ast树的重新处理 var gen = state.directives[dir.name]; if (gen) { // compile-time directive that manipulates AST. // returns true if it also needs a runtime counterpart. needRuntime = !!gen(el, dir, state.warn); } if (needRuntime) { hasRuntime = true; res += "{name:\"" + (dir.name) + "\",rawName:\"" + (dir.rawName) + "\"" + (dir.value ? (",value:(" + (dir.value) + "),expression:" + (JSON.stringify(dir.value))) : '') + (dir.arg ? (",arg:" + (dir.isDynamicArg ? dir.arg : ("\"" + (dir.arg) + "\""))) : '') + (dir.modifiers ? (",modifiers:" + (JSON.stringify(dir.modifiers))) : '') + "},"; } } if (hasRuntime) { return res.slice(0, -1) + ']' } } </code></pre> 这里有一句关键的代码<code>var gen = state.directives[dir.name]</code>,为了了解其来龙去脉，我们回到Vue源码中的编译流程，在以往的文章中，我们完整的介绍过<code>template</code>模板的编译流程,这一部分的设计是非常复杂且巧妙的，其中大量运用了偏函数的思想，即分离了不同平台不同的编译过程，也为同一个平台每次提供相同的配置选项进行了合并处理，并很好的将配置进行了缓存。其中针对浏览器端有三个重要的指令选项。 <pre><code class="prism language-javascript">var directive$1 = { model: model, text: text, html, html } var baseOptions = { ··· // 指令选项 directives: directives$1, }; // 编译时传入选项配置 createCompiler(baseOptions) </code></pre> 而这个<code>state.directives['model']</code>也就是对应的<code>model</code>函数，所以我们先把焦点聚焦在<code>model</code>函数的逻辑。 <pre><code class="prism language-go">function model (el,dir,_warn) { warn$1 = _warn; // 绑定的值 var value = dir.value; var modifiers = dir.modifiers; var tag = el.tag; var type = el.attrsMap.type; { // 这里遇到type是file的html，如果还使用双向绑定会报出警告。 // 因为File inputs是只读的 if (tag === 'input' && type === 'file') { warn$1( "<" + (el.tag) + " v-model=\"" + value + "\" type=\"file\">:\n" + "File inputs are read only. Use a v-on:change listener instead.", el.rawAttrsMap['v-model'] </code></pre> </div> </div> </div> </div> </div>  <div id="SOHUCS" sid="1740248017413357568"></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.js)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1835512920797179904.htm" title="element实现动态路由+面包屑" target="_blank">element实现动态路由+面包屑</a> 软件技术NINI <a class="tag" taget="_blank" href="/search/vue%E6%A1%88%E4%BE%8B/1.htm">vue案例</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi</div> </li> <li><a href="/article/1835437775344726016.htm" title="博客网站制作教程" target="_blank">博客网站制作教程</a> 2401_85194651 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a> <div>首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java</div> </li> <li><a href="/article/1835331375377510400.htm" title="【前端】vue 报错:The template root requires exactly one element" target="_blank">【前端】vue 报错:The template root requires exactly one element</a> 程序员-张师傅 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%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/javascript/1.htm">javascript</a> <div>【前端】vue报错:Thetemplaterootrequiresexactlyoneelement在Vue.js中，当你遇到错误“Thetemplaterootrequiresexactlyoneelement”时，这通常意味着你的Vue组件的模板（template）根节点不是单一的元素。Vue要求每个组件的模板必须有一个根元素来包裹所有的子元素。这个错误通常出现在以下几种情况：模板中有多个并行</div> </li> <li><a href="/article/1835249513875468288.htm" title="说说在 Vue.js 中如何实现组件间通信" target="_blank">说说在 Vue.js 中如何实现组件间通信</a> deniro <div>1用法假设父组件的模板包含子组件，我们可以通过props来正向地把数据从父组件传递给子组件。props可以是字符串数组，也可以是对象。html：js：Vue.component('deniro-component',{props:['message'],template:'{{message}}'});varapp=newVue({el:'#app',data:{}});渲染结果：＂嫦娥四号＂成功</div> </li> <li><a href="/article/1835019650895802368.htm" title="python基于django/flask的NBA球员大数据分析与可视化python+java+node.js" target="_blank">python基于django/flask的NBA球员大数据分析与可视化python+java+node.js</a> QQ_511008285 <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/django/1.htm">django</a><a class="tag" taget="_blank" href="/search/flask/1.htm">flask</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><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%88%86%E6%9E%90/1.htm">数据分析</a> <div>前端开发框架:vue.js数据库mysql版本不限后端语言框架支持：1java(SSM/springboot)-idea/eclipse2.Nodejs+Vue.js-vscode3.python(flask/django)--pycharm/vscode4.php(thinkphp/laravel)-hbuilderx数据库工具：Navicat/SQLyog等都可以本文针对NBA球员的大数据进行</div> </li> <li><a href="/article/1835019524521422848.htm" title="Java基于spring boot的国产电影数据分析与可视化python+java+node.js" target="_blank">Java基于spring boot的国产电影数据分析与可视化python+java+node.js</a> QQ_511008285 <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><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%88%86%E6%9E%90/1.htm">数据分析</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/django/1.htm">django</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/flask/1.htm">flask</a> <div>前端开发框架:vue.js数据库mysql版本不限后端语言框架支持：1java(SSM/springboot)-idea/eclipse2.Nodejs+Vue.js-vscode3.python(flask/django)--pycharm/vscode4.php(thinkphp/laravel)-hbuilderx数据库工具：Navicat/SQLyog等都可以该系统使用进行大数据处理和</div> </li> <li><a href="/article/1834955336226795520.htm" title="Vue插槽：提升Vue组件灵活性的利器" target="_blank">Vue插槽：提升Vue组件灵活性的利器</a> anyup_前端梦工厂 <a class="tag" taget="_blank" href="/search/Vue.js/1.htm">Vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a> <div>一.介绍什么是插槽插槽是Vue.js中一种强大的组件封装机制，用于在组件间复用可以动态填充的内容。简而言之，插槽允许我们在组件的模板中定义一些可变的区域，在使用组件时，可以灵活地填充不同的内容进入这些区域。当我们的组件有一些需要在使用组件时才能确定的内容时，比如按钮、文字、图标等，使用插槽可以非常方便地将这些内容传递给组件。二.基础插槽1.单个插槽单个插槽也可以称为默认插槽（DefaultSlot</div> </li> <li><a href="/article/1834920164567642112.htm" title="前端同学必备：教你如何安装、使用Chrome的vue-devtools插件" target="_blank">前端同学必备：教你如何安装、使用Chrome的vue-devtools插件</a> 界忆 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E7%BC%96%E7%A8%8B/1.htm">前端编程</a><a class="tag" taget="_blank" href="/search/Vue-devtools%E6%8F%92%E4%BB%B6/1.htm">Vue-devtools插件</a><a class="tag" taget="_blank" href="/search/chrome/1.htm">chrome</a><a class="tag" taget="_blank" href="/search/devtools/1.htm">devtools</a> <div>I.介绍vue-devtools插件Vue-devtools是一个Chrome浏览器插件，它是一个浏览器调试工具，用于开发Vue.js应用程序。它可以用于Vue.js应用程序的调试，可以更好地了解应用程序的结构和状态，以及帮助快速修复代码错误。Vue-devtools插件的作用和优势如下：1.调试Vue.js应用程序：Vue-devtools是一个强大的调试工具，可以帮助开发人员正确地调试应用程序</div> </li> <li><a href="/article/1834880085786718208.htm" title="python毕业设计作品：python闲置物品二手交易平台系统设计与实现毕业设计源代码（Django框架）" target="_blank">python毕业设计作品：python闲置物品二手交易平台系统设计与实现毕业设计源代码（Django框架）</a> 黄菊华老师 <a class="tag" taget="_blank" href="/search/%E6%AF%95%E8%AE%BE%E8%B5%84%E6%96%99/1.htm">毕设资料</a><a class="tag" taget="_blank" href="/search/python%E4%BA%8C%E6%89%8B%E4%BA%A4%E6%98%93%E5%B9%B3%E5%8F%B0%E7%B3%BB%E7%BB%9F/1.htm">python二手交易平台系统</a> <div>博主介绍：黄菊华老师《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者，CSDN博客专家，在线教育专家，CSDN钻石讲师；专注大学生毕业设计教育和辅导。所有项目都配有从入门到精通的基础知识视频课程，学习后应对毕业设计答辩。项目配有对应开发文档、开题报告、任务书、PPT、论文模版等项目都录了发布和功能操作演示视频；项目的界面和功能都可以定制，包安装运行！！！如果需要联系我，可以在CSD</div> </li> <li><a href="/article/1834768522685804544.htm" title="uni-app开发微信小程序" target="_blank">uni-app开发微信小程序</a> hong161688 <a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">微信小程序</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a> <div>uni-app是一个使用Vue.js开发所有前端应用的框架，它支持编译到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/字节跳动/QQ/京东等）平台。使用uni-app开发微信小程序，可以充分利用Vue.js的开发效率和小程序平台的原生能力，实现跨平台的高效开发。以下将详细介绍使用uni-app开发微信小程序的全过程，包括项目搭建、开发、调试、测试及发布等环节，内容将尽量达到或超</div> </li> <li><a href="/article/1834756301549301760.htm" title="使用 uni-app 开发微信小程序：深入教程与技巧" target="_blank">使用 uni-app 开发微信小程序：深入教程与技巧</a> 代码伐木匠 <a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0%E6%9C%AC/1.htm">笔记本</a><a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">微信小程序</a><a class="tag" taget="_blank" href="/search/notepad%2B%2B/1.htm">notepad++</a> <div>使用uni-app开发微信小程序：深入教程与技巧uni-app是一个使用Vue.js语法开发跨平台应用的框架，能够编译到iOS、Android、H5、微信小程序等多个平台。通过uni-app，你可以一套代码同时生成多个端的应用，极大提升开发效率。本文将带你深入了解如何使用uni-app开发微信小程序，并提供大量实践经验与技巧。1.环境配置与项目创建要开始使用uni-app开发微信小程序，首先需要搭</div> </li> <li><a href="/article/1834738272555855872.htm" title="Vue Router push方法的使用" target="_blank">Vue Router push方法的使用</a> hzw0510 <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/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>VueRouterpush方法的使用this.$router.push是VueRouter提供的一个方法，用于在Vue.js应用中进行编程式导航。它的作用是将用户导航到应用中的不同路由。基本作用this.$router.push方法会在浏览器历史记录中添加一个新的记录，并导航到指定的路由。它的工作方式类似于点击一个组件，或者在浏览器中手动输入URL后点击回车。使用示例以下是一些使用this.$ro</div> </li> <li><a href="/article/1834671207056764928.htm" title="组件通信——provide 和 inject 实现爷孙组件通信" target="_blank">组件通信——provide 和 inject 实现爷孙组件通信</a> 你不讲 wood <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>provide和inject实现爷孙组件通信介绍provide和inject是Vue.js提供的一种在组件之间共享数据的机制，它允许在组件树中的任何地方注入依赖项。这对于跨越多个层级的组件间通信特别有用，因此无需手动将prop数据逐层传递下去。provide：在一个组件中使用provide方法来定义要提供的数据或方法。provide方法返回一个对象，该对象包含了要提供的数据或方法。inject：在</div> </li> <li><a href="/article/1834655323768582144.htm" title="vue.js在js里获取属性，触发vue.js内的方法" target="_blank">vue.js在js里获取属性，触发vue.js内的方法</a> 摸鱼的张三 <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/flutter/1.htm">flutter</a> <div>在script标签内把appVue设置varvarappVue=newVue({})appVue不能跨标签也就是说不能这样写varappVue=newVue({})console.log(appVue)上面这个是错的varappVue=newVue({})console.log(appVue)这个是vue2.js的版本这样写可以vue3.js是没有的然后拿到appVue就可以绑定原生事件触发app</div> </li> <li><a href="/article/1834631489283780608.htm" title="Vue 图片预览功能实现指南" target="_blank">Vue 图片预览功能实现指南</a> 繁依Fanyi <a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/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> <div>1.介绍在现代web应用程序中，图片预览功能提升了用户体验，使用户可以在上传图片之前查看图片内容。本文将详细介绍如何在Vue.js应用中实现图片预览功能，包括基本实现、进阶功能、与ElementUI的集成、常见优化技巧以及与其他库的结合使用。2.基本功能实现2.1环境准备确保你的开发环境已经配置好，包括VueCLI和Node.js。如果还没有安装VueCLI，你可以通过以下命令安装：npminst</div> </li> <li><a href="/article/1834617504568274944.htm" title="前后端分离，Asp.net core webapi 如何配置跨域" target="_blank">前后端分离，Asp.net core webapi 如何配置跨域</a> 代码掌控者 <a class="tag" taget="_blank" href="/search/C%23/1.htm">C#</a><a class="tag" taget="_blank" href="/search/asp.net/1.htm">asp.net</a><a class="tag" taget="_blank" href="/search/core/1.htm">core</a><a class="tag" taget="_blank" href="/search/.net/1.htm">.net</a><a class="tag" taget="_blank" href="/search/core/1.htm">core</a><a class="tag" taget="_blank" href="/search/%E7%BB%8F%E9%AA%8C%E5%88%86%E4%BA%AB/1.htm">经验分享</a><a class="tag" taget="_blank" href="/search/c%23/1.htm">c#</a> <div>前言可以说，前后端分离已经成为当今信息系统项目开发的主流软件架构模式，微服务的出现，让前后端分离发展更是迅速，大量优秀的前端框架如vue.js、react的出现，也让前后端分离趋势加快。所谓的前后端分离软件架构模式，就是指将前端和后端的开发完全分离，后端负责提供API接口和数据处理，而前端通过各种现代的JavaScript技术如AJAX或者Fetch等，来调用后端提供的API接口获取数据，从而构建</div> </li> <li><a href="/article/1834610822148616192.htm" title="Uni-app 开发微信小程序" target="_blank">Uni-app 开发微信小程序</a> vvvae1234 <a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a> <div>随着移动互联网的发展，微信小程序已经成为一种流行的应用开发模式。Uni-app作为一种跨平台的开发框架，使用Vue.js语法，能够方便快速地开发出微信小程序、H5、App等多端应用。本指南将引导您从环境配置到实战案例开发，帮助您快速掌握使用Uni-app开发微信小程序的技巧。2.Uni-app概述2.1什么是Uni-app？Uni-app是一个使用Vue.js语法的跨平台开发框架，允许开发者用一套</div> </li> <li><a href="/article/1834590657881141248.htm" title="前后端时间转换的那些常见问题及处理方法" target="_blank">前后端时间转换的那些常见问题及处理方法</a> 繁依Fanyi <a class="tag" taget="_blank" href="/search/%E7%8A%B6%E6%80%81%E6%A8%A1%E5%BC%8F/1.htm">状态模式</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</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><a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/github/1.htm">github</a> <div>在现代的Web开发中，前后端分离的架构已经成为主流，尤其是在SpringBoot和Vue.js的组合中。开发者在这种架构下经常遇到的一个问题就是如何处理时间的转换和显示。前端和后端对时间的处理方式不同，可能会导致时间在传递过程中出现问题，比如时区不同步、格式不一致等。因此，本文将详细讨论在SpringBoot+Vue前后端分离架构中如何处理时间转换问题，并提供一些解决方案。一、前后端时间处理的常见</div> </li> <li><a href="/article/1834480753681985536.htm" title="cross-plateform 跨平台应用程序-06-uni-app 介绍" target="_blank">cross-plateform 跨平台应用程序-06-uni-app 介绍</a> 知识分享官 <a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a> <div>详细介绍一下uni-app？whatuni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一次代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/京东/美团/钉钉/淘宝）、快应用等多个平台。以下是uni-app的一些核心特性和优势：使用Vue.js开发：uni-app基于Vue.js，这意味着如果你已经熟悉Vue.js</div> </li> <li><a href="/article/1834147716041633792.htm" title="从学习vue到uni-app的心得感悟" target="_blank">从学习vue到uni-app的心得感悟</a> crazy_章鱼哥 <a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>前言你是否想过，只用一套代码，就能开发出适用于多个平台的前端应用？你是否想过，只用Vue.js这样一个简洁强大的框架，就能实现各种炫酷的功能和效果？你是否想过，只用uni-app这样一个神器，就能成为一个高手？如果你有这样的想法，那么就跟我一起来学习uni-app吧！uni-app是一个基于Vue.js的全端开发框架，它可以让你用一套代码，同时运行在H5、小程序、App等多个平台上。它具有跨平台、</div> </li> <li><a href="/article/1834134354851360768.htm" title="基于java+SpringBoot+Vue的小徐影城管理系统设计与实现" target="_blank">基于java+SpringBoot+Vue的小徐影城管理系统设计与实现</a> paterWang <a class="tag" taget="_blank" href="/search/Java%E7%B2%BE%E5%93%81%E6%AF%95%E8%AE%BE%E5%AE%9E%E6%88%98/1.htm">Java精品毕设实战</a><a class="tag" taget="_blank" href="/search/%E8%AE%A1%E7%AE%97%E6%9C%BA%E6%AF%95%E4%B8%9A%E8%AE%BE%E8%AE%A1/1.htm">计算机毕业设计</a><a class="tag" taget="_blank" href="/search/Java/1.htm">Java</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><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a> <div>开发语言:Java数据库:MySQL技术:SpringBoot+MyBatis工具:IDEA/Ecilpse、Navicat、Maven系统简介小徐影城管理系统是一款基于Java、SpringBoot和Vue.js技术开发的影院管理系统，旨在为用户提供一个便捷、高效的在线购票和影院管理平台。系统通过B/S架构，实现了管理员和用户两端的功能操作，使得影院管理更加系统化、规范化。整体功能包含：电影信息</div> </li> <li><a href="/article/1834077372249370624.htm" title="vue前端性能优化之cdn的使用" target="_blank">vue前端性能优化之cdn的使用</a> 不cong明的亚子 <a class="tag" taget="_blank" href="/search/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/1.htm">性能优化</a><a class="tag" taget="_blank" href="/search/vue%2Belement/1.htm">vue+element</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><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a> <div>优化原因项目中首页加载过慢，原因是js,css静态资源第一次加载的时间长vue.config.js'usestrict'......constcdn={js_cdn:['https://cdn.jsdelivr.net/npm/moment@2.27.0/moment.min.js','https://unpkg.com/vue@2.6.10/dist/vue.js','https://unpkg</div> </li> <li><a href="/article/1833949559944998912.htm" title="vue浏览器缓存sessionStorage、localStorage、Cookie" target="_blank">vue浏览器缓存sessionStorage、localStorage、Cookie</a> Liumoui <a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E7%BC%93%E5%AD%98/1.htm">缓存</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>在Vue.js项目中，管理浏览器缓存是常见的需求，主要可以通过sessionStorage、localStorage和Cookie来实现。下面分别介绍这三种方式及其用法。1.sessionStoragesessionStorage用于存储在会话（即浏览器窗口关闭前）期间的数据。每次打开一个新的窗口或标签页都会有一个新的会话。使用方法存储数据sessionStorage.setItem('key',</div> </li> <li><a href="/article/1833928246610194432.htm" title="vuex快速入门" target="_blank">vuex快速入门</a> 弓弓弓長 <a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a> <div>vuex是什么*1.Vuex的状态存储是响应式的2.你不能直接改变store中的状态。改变store中的状态的唯一途径就是显式地提交(commit)mutation。vuex是一个专门为vue.js应用程序开发的状态管理模式。vuex中，有默认的五种基本的对象：state：存储状态（变量）getters：对数据获取之前的再次编译，可以理解为state的计算属性。mutations：修改状态，并且是</div> </li> <li><a href="/article/1833920558622928896.htm" title="vue2快速入门" target="_blank">vue2快速入门</a> m0_66357705 <a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>vue2创建HTML界面，引用Vue.js文件编写视图 {{message}} {{type}}:插值表达式变量三元运算符函数调用算数运算在JS代码区域,创建Vue核心对象,定义数据模型 --> //创建一个新的Vue实例 newVue({ //指定Vue实例挂载到的DOM元素，使用'#app'选择器找到id为app的元素 el:"#app", //</div> </li> <li><a href="/article/1833832556395589632.htm" title="Vue实现双向数据绑定" target="_blank">Vue实现双向数据绑定</a> 眉间是银河 <a class="tag" taget="_blank" href="/search/flutter/1.htm">flutter</a> <div>在Vue.js中，双向数据绑定是通过v-model指令实现的。v-model是Vue.js提供的一个语法糖，它能够在表单元素和组件上实现数据的双向绑定。基本用法假设我们有一个简单的输入框，我们希望输入框的值能够实时反映到Vue实例的数据中，并且当Vue实例的数据发生变化时，输入框的值也会自动更新。你输入的内容是:{{message}}exportdefault{data(){return{mess</div> </li> <li><a href="/article/1833801035320225792.htm" title="Vue 生命周期与 TypeScript：深入理解组件生命周期" target="_blank">Vue 生命周期与 TypeScript：深入理解组件生命周期</a> shiming8879 <a class="tag" taget="_blank" href="/search/typescript/1.htm">typescript</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>Vue生命周期与TypeScript：深入理解组件生命周期引言Vue.js作为一种流行的前端框架，其组件生命周期是开发过程中不可或缺的一部分。理解并正确利用Vue的生命周期，可以帮助开发者构建更加健壮和可维护的应用。而当TypeScript与Vue结合使用时，这种优势得到了进一步的增强。TypeScript作为一种强类型语言，提供了类型检查和代码清晰性，使得Vue组件的生命周期管理变得更加高效和可</div> </li> <li><a href="/article/1833745183905247232.htm" title="vue3 什么是Composition API 我为什么要使用它？" target="_blank">vue3 什么是Composition API 我为什么要使用它？</a> 软件技术NINI <a class="tag" taget="_blank" href="/search/vue%E6%A1%88%E4%BE%8B/1.htm">vue案例</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>CompositionAPI（组合式API）是Vue3中引入的一组全新的API，旨在提供一种更加灵活和可组合的方式来组织和复用组件逻辑。这一改变是Vue.js向函数式编程和更现代的开发方式迈出的重要一步。以下是CompositionAPI的详细解析：一、基本概念定义：CompositionAPI是一组允许开发者以函数式编程风格组织Vue组件逻辑的API。目的：提高代码的可读性、可维护性、复用性和类</div> </li> <li><a href="/article/1833707106495197184.htm" title="Vue3异步请求的最佳实践：async/await 与 Promise.then()，Vue3请求接口数据，以及TypeScript中的泛型和任意类型（Vue3请求API，TS中的T 和 any）" target="_blank">Vue3异步请求的最佳实践：async/await 与 Promise.then()，Vue3请求接口数据，以及TypeScript中的泛型和任意类型（Vue3请求API，TS中的T 和 any）</a> 北城笑笑 <a class="tag" taget="_blank" href="/search/VueJS/1.htm">VueJS</a><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> <div>前言在Vue3开发中，异步请求是非常常见的操作，特别是在与后端API交互时。虽然Vue.js自带了一些对异步数据的处理方式，但合理使用异步操作是确保应用顺畅运行的关键。这里我分享一下Vue3异步请求的最佳实践，并探讨async/await和Promise.then()两种处理异步操作的方式，简单记录一下1.请求接口的实现这里，我们使用一个请求接口callAskRecordList，它会从/gpt/</div> </li> <li><a href="/article/1833627924675260416.htm" title="Vue解說" target="_blank">Vue解說</a> 白总Server <a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93%E6%9E%B6%E6%9E%84/1.htm">数据库架构</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%8D%8F%E8%AE%AE/1.htm">网络协议</a><a class="tag" taget="_blank" href="/search/ssl/1.htm">ssl</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a> <div>Vue.js（通常简称为Vue）是一个开源的JavaScript框架，用于构建用户界面和单页应用程序（SPA）。它由前谷歌工程师尤雨溪（EvanYou）创建，并首次发布于2014年。Vue被设计为易于上手、灵活且高效，它允许开发者通过组件化的方式构建复杂的前端应用。Vue.js的关键特点：渐进式框架：Vue可以从简单的界面元素开始，逐步扩展到复杂的单页应用。响应式数据绑定：Vue使用双向数据绑定，</div> </li> <li><a href="/article/86.htm" title="linux系统服务器下jsp传参数乱码" target="_blank">linux系统服务器下jsp传参数乱码</a> 3213213333332132 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/jsp/1.htm">jsp</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/windows/1.htm">windows</a><a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a> <div>在一次解决乱码问题中，发现jsp在windows下用js原生的方法进行编码没有问题，但是到了linux下就有问题， escape,encodeURI,encodeURIComponent等都解决不了问题但是我想了下既然原生的方法不行，我用el标签的方式对中文参数进行加密解密总该可以吧。于是用了java的java.net.URLDecoder,结果还是乱码，最后在绝望之际，用了下面的方法解决了</div> </li> <li><a href="/article/213.htm" title="Spring 注解区别以及应用" target="_blank">Spring 注解区别以及应用</a> BlueSkator <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a> <div>1. @Autowired @Autowired是根据类型进行自动装配的。如果当Spring上下文中存在不止一个UserDao类型的bean，或者不存在UserDao类型的bean，会抛出 BeanCreationException异常，这时可以通过在该属性上再加一个@Qualifier注解来声明唯一的id解决问题。 2. @Qualifier 当spring中存在至少一个匹</div> </li> <li><a href="/article/340.htm" title="printf和sprintf的应用" target="_blank">printf和sprintf的应用</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/sprintf/1.htm">sprintf</a><a class="tag" taget="_blank" href="/search/printf/1.htm">printf</a> <div><?php printf('b: %b c: %c d: %d <bf>f: %f', 80,80, 80, 80); echo ' '; printf('%0.2f %+d %0.2f ', 8, 8, 1235.456); printf('th</div> </li> <li><a href="/article/467.htm" title="config.getInitParameter" target="_blank">config.getInitParameter</a> 171815164 <a class="tag" taget="_blank" href="/search/parameter/1.htm">parameter</a> <div>web.xml <servlet> <servlet-name>servlet1</servlet-name> <jsp-file>/index.jsp</jsp-file> <init-param> <param-name>str</param-name> </div> </li> <li><a href="/article/594.htm" title="Ant标签详解--基础操作" target="_blank">Ant标签详解--基础操作</a> g21121 <a class="tag" taget="_blank" href="/search/ant/1.htm">ant</a> <div> Ant的一些核心概念： build.xml：构建文件是以XML 文件来描述的，默认构建文件名为build.xml。 project：每个构建文</div> </li> <li><a href="/article/721.htm" title="[简单]代码片段_数据合并" target="_blank">[简单]代码片段_数据合并</a> 53873039oycg <a class="tag" taget="_blank" href="/search/%E4%BB%A3%E7%A0%81/1.htm">代码</a> <div> 合并规则:删除家长phone为空的记录,若一个家长对应多个孩子,保留一条家长记录,家长id修改为phone,对应关系也要修改。代码如下: </div> </li> <li><a href="/article/848.htm" title="java 通信技术" target="_blank">java 通信技术</a> 云端月影 <a class="tag" taget="_blank" href="/search/Java+%E8%BF%9C%E7%A8%8B%E9%80%9A%E4%BF%A1%E6%8A%80%E6%9C%AF/1.htm">Java 远程通信技术</a> <div>在分布式服务框架中，一个最基础的问题就是远程服务是怎么通讯的，在Java领域中有很多可实现远程通讯的技术，例如：RMI、MINA、ESB、Burlap、Hessian、SOAP、EJB和JMS等，这些名词之间到底是些什么关系呢，它们背后到底是基于什么原理实现的呢，了解这些是实现分布式服务框架的基础知识，而如果在性能上有高的要求的话，那深入了解这些技术背后的机制就是必须的了，在这篇blog中我们将来</div> </li> <li><a href="/article/975.htm" title="string与StringBuilder 性能差距到底有多大" target="_blank">string与StringBuilder 性能差距到底有多大</a> aijuans <div> 之前也看过一些对string与StringBuilder的性能分析，总感觉这个应该对整体性能不会产生多大的影响，所以就一直没有关注这块！由于学程序初期最先接触的string拼接，所以就一直没改变过自己的习惯！ </div> </li> <li><a href="/article/1102.htm" title="今天碰到 java.util.ConcurrentModificationException 异常" target="_blank">今天碰到 java.util.ConcurrentModificationException 异常</a> antonyup_2006 <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/%E5%B7%A5%E4%BD%9C/1.htm">工作</a><a class="tag" taget="_blank" href="/search/IBM/1.htm">IBM</a> <div>今天改bug，其中有个实现是要对map进行循环，然后有删除操作，代码如下： Iterator<ListItem> iter = ItemMap.keySet.iterator(); while(iter.hasNext()){ ListItem it = iter.next(); //...一些逻辑操作 ItemMap.remove(it); } 结果运行报Con</div> </li> <li><a href="/article/1229.htm" title="PL/SQL的类型和JDBC操作数据库" target="_blank">PL/SQL的类型和JDBC操作数据库</a> 百合不是茶 <a class="tag" taget="_blank" href="/search/PL%2FSQL%E8%A1%A8/1.htm">PL/SQL表</a><a class="tag" taget="_blank" href="/search/%E6%A0%87%E9%87%8F%E7%B1%BB%E5%9E%8B/1.htm">标量类型</a><a class="tag" taget="_blank" href="/search/%E6%B8%B8%E6%A0%87/1.htm">游标</a><a class="tag" taget="_blank" href="/search/PL%2FSQL%E8%AE%B0%E5%BD%95/1.htm">PL/SQL记录</a> <div>PL/SQL的标量类型: 字符,数字,时间,布尔,%type五中类型的 --标量：数据库中预定义类型的变量 --定义一个变长字符串 v_ename varchar2(10); --定义一个小数,范围 -9999.99~9999.99 v_sal number(6,2); --定义一个小数并给一个初始值为5.4 :=是pl/sql的赋值号 </div> </li> <li><a href="/article/1356.htm" title="Mockito：一个强大的用于 Java 开发的模拟测试框架实例" target="_blank">Mockito：一个强大的用于 Java 开发的模拟测试框架实例</a> bijian1013 <a class="tag" taget="_blank" href="/search/mockito/1.htm">mockito</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E5%85%83%E6%B5%8B%E8%AF%95/1.htm">单元测试</a> <div>Mockito框架： Mockito是一个基于MIT协议的开源java测试框架。 Mockito区别于其他模拟框架的地方主要是允许开发者在没有建立“预期”时验证被测系统的行为。对于mock对象的一个评价是测试系统的测</div> </li> <li><a href="/article/1483.htm" title="精通Oracle10编程SQL(10)处理例外" target="_blank">精通Oracle10编程SQL(10)处理例外</a> bijian1013 <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/plsql/1.htm">plsql</a> <div>/* *处理例外 */ --例外简介 --处理例外-传递例外 declare v_ename emp.ename%TYPE; begin SELECT ename INTO v_ename FROM emp where empno=&no; dbms_output.put_line('雇员名：'||v_ename); exceptio</div> </li> <li><a href="/article/1610.htm" title="【Java】Java执行远程机器上Linux命令" target="_blank">【Java】Java执行远程机器上Linux命令</a> bit1129 <a class="tag" taget="_blank" href="/search/linux%E5%91%BD%E4%BB%A4/1.htm">linux命令</a> <div>Java使用ethz通过ssh2执行远程机器Linux上命令，封装定义Linux机器的环境信息 package com.tom; import java.io.File; public class Env { private String hostaddr; //Linux机器的IP地址 private Integer po</div> </li> <li><a href="/article/1737.htm" title="java通信之Socket通信基础" target="_blank">java通信之Socket通信基础</a> 白糖_ <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/socket/1.htm">socket</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%8D%8F%E8%AE%AE/1.htm">网络协议</a> <div>正处于网络环境下的两个程序，它们之间通过一个交互的连接来实现数据通信。每一个连接的通信端叫做一个Socket。一个完整的Socket通信程序应该包含以下几个步骤： ①创建Socket； ②打开连接到Socket的输入输出流； ④按照一定的协议对Socket进行读写操作； ④关闭Socket。 Socket通信分两部分：服务器端和客户端。服务器端必须优先启动，然后等待soc</div> </li> <li><a href="/article/1864.htm" title="angular.bind" target="_blank">angular.bind</a> boyitech <a class="tag" taget="_blank" href="/search/AngularJS/1.htm">AngularJS</a><a class="tag" taget="_blank" href="/search/angular.bind/1.htm">angular.bind</a><a class="tag" taget="_blank" href="/search/AngularJS+API/1.htm">AngularJS API</a><a class="tag" taget="_blank" href="/search/bind/1.htm">bind</a> <div>angular.bind 描述：上下文，函数以及参数动态绑定，返回值为绑定之后的函数. 其中args是可选的动态参数，self在fn中使用this调用。使用方法： angular.bind(se</div> </li> <li><a href="/article/1991.htm" title="java-13个坏人和13个好人站成一圈，数到7就从圈里面踢出一个来，要求把所有坏人都给踢出来，所有好人都留在圈里。请找出初始时坏人站的位置。" target="_blank">java-13个坏人和13个好人站成一圈，数到7就从圈里面踢出一个来，要求把所有坏人都给踢出来，所有好人都留在圈里。请找出初始时坏人站的位置。</a> bylijinnan <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div> import java.util.ArrayList; import java.util.List; public class KickOutBadGuys { /** * 题目：13个坏人和13个好人站成一圈，数到7就从圈里面踢出一个来，要求把所有坏人都给踢出来，所有好人都留在圈里。请找出初始时坏人站的位置。 * Maybe you can find out </div> </li> <li><a href="/article/2118.htm" title="Redis.conf配置文件及相关项说明（自查备用）" target="_blank">Redis.conf配置文件及相关项说明（自查备用）</a> Kai_Ge <a class="tag" taget="_blank" href="/search/redis/1.htm">redis</a> <div> Redis.conf配置文件及相关项说明 # Redis configuration file example # Note on units: when memory size is needed, it is possible to specifiy # it in the usual form of 1k 5GB 4M and so forth: # </div> </li> <li><a href="/article/2245.htm" title="[强人工智能]实现大规模拓扑分析是实现强人工智能的前奏" target="_blank">[强人工智能]实现大规模拓扑分析是实现强人工智能的前奏</a> comsci <a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a> <div> 真不好意思,各位朋友...博客再次更新... 节点数量太少,网络的分析和处理能力肯定不足,在面对机器人控制的需求方面,显得力不从心.... 但是,节点数太多,对拓扑数据处理的要求又很高,设计目标也很高,实现起来难度颇大... </div> </li> <li><a href="/article/2372.htm" title="记录一些常用的函数" target="_blank">记录一些常用的函数</a> dai_lm <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div> public static String convertInputStreamToString(InputStream is) { StringBuilder result = new StringBuilder(); if (is != null) try { InputStreamReader inputReader = new InputStreamRead</div> </li> <li><a href="/article/2499.htm" title="Hadoop中小规模集群的并行计算缺陷" target="_blank">Hadoop中小规模集群的并行计算缺陷</a> datamachine <a class="tag" taget="_blank" href="/search/mapreduce/1.htm">mapreduce</a><a class="tag" taget="_blank" href="/search/hadoop/1.htm">hadoop</a><a class="tag" taget="_blank" href="/search/%E5%B9%B6%E8%A1%8C%E8%AE%A1%E7%AE%97/1.htm">并行计算</a> <div>注：写这篇文章的初衷是因为Hadoop炒得有点太热，很多用户现有数据规模并不适用于Hadoop，但迫于扩容压力和去IOE（Hadoop的廉价扩展的确非常有吸引力）而尝试。尝试永远是件正确的事儿，但有时候不用太突进，可以调优或调需求，发挥现有系统的最大效用为上策。 -----------------------------------------------------------------</div> </li> <li><a href="/article/2626.htm" title="小学4年级英语单词背诵第二课" target="_blank">小学4年级英语单词背诵第二课</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/english/1.htm">english</a><a class="tag" taget="_blank" href="/search/word/1.htm">word</a> <div>egg 蛋 twenty 二十 any 任何 well 健康的，好 twelve 十二 farm 农场 every 每一个 back 向后，回 fast 快速的 whose 谁的 much 许多 flower 花 watch 手表 very 非常，很 sport 运动 Chinese 中国的 </div> </li> <li><a href="/article/2753.htm" title="自己实践了github的webhooks, linux上面的权限需要注意" target="_blank">自己实践了github的webhooks, linux上面的权限需要注意</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/github/1.htm">github</a><a class="tag" taget="_blank" href="/search/webhook/1.htm">webhook</a> <div>环境, 阿里云服务器 1. 本地创建项目, push到github服务器上面 2. 生成www用户的密钥 sudo -u www ssh-keygen -t rsa -C "xxx@xx.com" 3. 将密钥添加到github帐号的SSH_KEYS里面 3. 用www用户执行克隆, 源使</div> </li> <li><a href="/article/2880.htm" title="Java冒泡排序" target="_blank">Java冒泡排序</a> 蕃薯耀 <a class="tag" taget="_blank" href="/search/%E5%86%92%E6%B3%A1%E6%8E%92%E5%BA%8F/1.htm">冒泡排序</a><a class="tag" taget="_blank" href="/search/Java%E5%86%92%E6%B3%A1%E6%8E%92%E5%BA%8F/1.htm">Java冒泡排序</a><a class="tag" taget="_blank" href="/search/Java%E6%8E%92%E5%BA%8F/1.htm">Java排序</a> <div>冒泡排序 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 蕃薯耀 2015年6月23日 10:40:14 星期二 http://fanshuyao.iteye.com/</div> </li> <li><a href="/article/3007.htm" title="Excle读取数据转换为实体List【基于apache-poi】" target="_blank">Excle读取数据转换为实体List【基于apache-poi】</a> hanqunfeng <a class="tag" taget="_blank" href="/search/apache/1.htm">apache</a> <div>1.依赖apache-poi 2.支持xls和xlsx 3.支持按属性名称绑定数据值 4.支持从指定行、列开始读取 5.支持同时读取多个sheet 6.具体使用方式参见org.cpframework.utils.excelreader.CP_ExcelReaderUtilTest.java 比如： Str</div> </li> <li><a href="/article/3134.htm" title="3个处于草稿阶段的Javascript API介绍" target="_blank">3个处于草稿阶段的Javascript API介绍</a> jackyrong <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a> <div>原文： http://www.sitepoint.com/3-new-javascript-apis-may-want-follow/?utm_source=html5weekly&utm_medium=email 本文中，介绍3个仍然处于草稿阶段，但应该值得关注的Javascript API. 1) Web Alarm API &</div> </li> <li><a href="/article/3261.htm" title="6个创建Web应用程序的高效PHP框架" target="_blank">6个创建Web应用程序的高效PHP框架</a> lampcy <a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/%E6%A1%86%E6%9E%B6/1.htm">框架</a><a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a> <div>以下是创建Web应用程序的PHP框架，有coder bay网站整理推荐： 1. CakePHP CakePHP是一个PHP快速开发框架，它提供了一个用于开发、维护和部署应用程序的可扩展体系。CakePHP使用了众所周知的设计模式，如MVC和ORM，降低了开发成本，并减少了开发人员写代码的工作量。 2. CodeIgniter CodeIgniter是一个非常小且功能强大的PHP框架，适合需</div> </li> <li><a href="/article/3388.htm" title="评"救市后中国股市新乱象泛起"谣言" target="_blank">评"救市后中国股市新乱象泛起"谣言</a> nannan408 <div>首先来看百度百家一位易姓作者的新闻：三个多星期来股市持续暴跌，跌得投资者及上市公司都处于极度的恐慌和焦虑中，都要寻找自保及规避风险的方式。面对股市之危机，政府突然进入市场救市，希望以此来重建市场信心，以此来扭转股市持续暴跌的预期。而政府进入市场后，由于市场运作方式发生了巨大变化，投资者及上市公司为了自保及为了应对这种变化，中国股市新的乱象也自然产生。首先，中国股市这两天</div> </li> <li><a href="/article/3515.htm" title="页面全屏遮罩的实现方式" target="_blank">页面全屏遮罩的实现方式</a> Rainbow702 <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E9%81%AE%E7%BD%A9/1.htm">遮罩</a><a class="tag" taget="_blank" href="/search/mask/1.htm">mask</a> <div>之前做了一个页面，在点击了某个按钮之后，要求页面出现一个全屏遮罩，一开始使用了position:absolute来实现的。当时因为画面大小是固定的，不可以resize的，所以，没有发现问题。最近用了同样的做法做了一个遮罩，但是画面是可以进行resize的，所以就发现了一个问题，当画面被reisze到浏览器出现了滚动条的时候，就发现，用absolute 的做法是有问题的。后来改成fixed定位就</div> </li> <li><a href="/article/3642.htm" title="关于angularjs的点滴" target="_blank">关于angularjs的点滴</a> tntxia <a class="tag" taget="_blank" href="/search/AngularJS/1.htm">AngularJS</a> <div> angular是一个新兴的JS框架，和以往的框架不同的事，Angularjs更注重于js的建模，管理，同时也提供大量的组件帮助用户组建商业化程序，是一种值得研究的JS框架。 Angularjs使我们可以使用MVC的模式来写JS。Angularjs现在由谷歌来维护。这里我们来简单的探讨一下它的应用。首先使用Angularjs我</div> </li> <li><a href="/article/3769.htm" title="Nutz--->>反复新建ioc容器的后果" target="_blank">Nutz--->>反复新建ioc容器的后果</a> xiaoxiao1992428 <a class="tag" taget="_blank" href="/search/DAO/1.htm">DAO</a><a class="tag" taget="_blank" href="/search/mvc/1.htm">mvc</a><a class="tag" taget="_blank" href="/search/IOC/1.htm">IOC</a><a class="tag" taget="_blank" href="/search/nutz/1.htm">nutz</a> <div>问题： public class DaoZ { public static Dao dao() { // 每当需要使用dao的时候就取一次 Ioc ioc = new NutIoc(new JsonLoader("dao.js")); return ioc.get(</div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> 按字母分类： <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>