Vue指令 v-model详解

前言

在一次的学习过程中，偶然发现v-model的一个“奇怪”使用方法，如下图：

描述：

在一个组件中，引入一个自定义组件input.vue。然后需要在父组件中操作input的输入框内容。父组件(index.vue)的子组件实例上定义了v-model；input.vue组件中定义一个props，有一个value值，另外input标签的input事件绑定了一个事件名为input 的 $emit。

此示例中，我一直没有明白的地方有：

• 父组件(index.vue)中input实例上的v-model如何响应？
• 子组件(input.vue)中的props从哪里接受数据？
• input标签的input事件中 $emit 在哪里监听？

因此下决心搞清楚v-model指令

表单输入框双向数据绑定

起初，v-model的作用是对应表单、 及 <select> 元素上创建双向数据绑定。Vue官方文档明确表示:</p> <blockquote> <p>但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。<br> 那么实现原理如下</p> </blockquote> <pre><code><template> <div class="hello"> <h4>首先测试普通input输入框: {{text}}</h4> <input type="text" v-model="text"/> <input type="text" @input="val = $event.target.value" :value="val"> <label>{{val}}</label> </div> </template> <script> export default { name: 'index', data () { return { text: '', val: '112' } }, components: { WInput } } </script> </code></pre> <p><strong>组件中有两个input，一个使用v-model，另一个就是双向数据绑定的实际原理，使用input标签的input事件做实时监听。</strong><br> 刚刚的示例是基于input标签实现的，那么如果是其他的表单标签呢：</p> <blockquote> <p>v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。<br> v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：</p> <ul> <li>text 和 textarea 元素使用 value 属性和 input 事件；</li> <li>checkbox 和 radio 使用 checked 属性和 change 事件；</li> <li>select 字段将 value 作为 prop 并将 change 作为事件。</li> </ul> </blockquote> <p>示例如下：</p> <pre><code><template> <div class="test"> <div class="radio-group"> <input type="radio" name="test" v-model="redioModel" value="one"> <input type="radio" name="test" @change="redioChange" value="two"> </div> <div class="checkbox-group"> <input type="checkbox" value="1" v-model="checkboxVal"> <input type="checkbox" value="2" v-model="checkboxVal"> <input type="checkbox" value="3" @change="checkboxChange"> </div> <div class="select-box"> <!-- 使用 @change="selectChange" 替代v-model效果一样--> <select id="select" v-model="selectVal"> <option value>请选择</option> <option value="1">test1</option> <option value="2">test2</option> <option value="3">test3</option> <option value="4">test4</option> </select> </div> </div> </template> <script> export default { name: 'test', data () { return { redioModel: '', checkboxVal: [], selectVal: '' } }, watch: { redioModel (newVal) { console.log(newVal) }, checkboxVal (newVal) { console.log(newVal) }, selectVal (newVal) { console.log(newVal) } }, methods: { /** * radio v-modal等同事件 */ redioChange (e) { this.redioModel = e.target.value }, /** * checkbox v-model等同事件 */ checkboxChange (e) { const checked = e.target.checked if (checked) { this.checkboxVal.push(e.target.value) } else { const index = this.checkboxVal.findIndex( item => item === e.target.value ) this.checkboxVal.splice(index, 1) } }, selectChange (e) { this.selectVal = e.target.value } } } </script> </code></pre> <p>单选框radio、复选框CheckBox、下拉窗select，其中都是用了v-modal 和事件change两种实现双重绑定的方式。效果相同。</p> <h3>自定义组件的 v-model</h3> <p>这是Vue2.2的新增，官方解释：</p> <blockquote> <p>一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，但是像单选框、复选框等类型的输入控件可能会将 value 特性用于不同的目的。model 选项可以用来避免这样的冲突</p> </blockquote> <p><strong>这句定义已经很好地解释了文章一开始提出的疑问</strong><br> 意思就是在自定义组件上使用v-modal就相当于:</p> <pre><code><template> <div class="hello"> <h4>首先测试普通input输入框: {{text}}</h4> <w-input v-model="text"/> <!-- 上行等价于下行 --> <w-input @input="value => val = value" :value="val"/> <label>{{val}}</label> </div> </template> <script> import WInput from './input' export default { name: 'index', data () { return { text: '', val: '123' } }, </code></pre> <p><strong>同理：</strong><br> 对于自定义组件中不同的响应的输出元素，也应该对应的抛出不同事件（同上）：</p> <blockquote> <ul> <li>text 和 textarea 元素使用 value 属性和 input 事件；</li> <li>checkbox 和 radio 使用 checked 属性和 change 事件；</li> <li>select 字段将 value 作为 prop 并将 change 作为事件。</li> </ul> </blockquote> <pre><code>// index.vue <template> <div class="hello"> <w-input v-model="changes"/> <h4>测试选中: {{changes ? '选中': '未选中'}}</h4> </div> </template> <script> import WInput from './input' export default { name: 'index', data () { return { changes: true } } ..... // input.vue <template> <input type="checkbox" :checked="value" @change="handleInput"> </template> <script> export default { name: 'w-input', props: { value: { type: Boolean, default: false } }, methods: { handleInput (e) { this.$emit('input', e.target.checked) } } } </code></pre> <h3>总结</h3> <p>很多时候看Vue文档，对立面的一些方法属性，知其然不知其所以然，定义说的比较模糊，也不知道实际作用，应该怎么用，用在什么地方。只有不断地写项目，不断地尝试新的东西，才能活学活用</p> </div> </div> </div> </div> </div> <!--PC和WAP自适应版--> <div id="SOHUCS" sid="1274857272039718912"></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/1950209116165173248.htm" title="uniapp微信小程序 - 详解微信小程序平台用户授权登录全流程，uniapp v3版本中小程序端开发下用户点击登录后获取手机号/昵称/性别/头像等信息完成登录（提供完整示例代码，一键复制开箱即用）" target="_blank">uniapp微信小程序 - 详解微信小程序平台用户授权登录全流程，uniapp v3版本中小程序端开发下用户点击登录后获取手机号/昵称/性别/头像等信息完成登录（提供完整示例代码，一键复制开箱即用）</a> <span class="text-muted">十一猫咪爱养鱼</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E7%BB%84%E4%BB%B6%E4%B8%8E%E5%8A%9F%E8%83%BD%28%E5%BC%80%E7%AE%B1%E5%8D%B3%E7%94%A8%29/1.htm">前端组件与功能(开箱即用)</a><a class="tag" taget="_blank" href="/search/uniapp%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98%E8%A7%A3%E5%86%B3/1.htm">uniapp常见问题解决</a><a class="tag" taget="_blank" href="/search/uniapp/1.htm">uniapp</a><a class="tag" taget="_blank" href="/search/vue3/1.htm">vue3</a><a class="tag" taget="_blank" href="/search/uniapp3%E5%B0%8F%E7%A8%8B%E5%BA%8F%E6%8E%88%E6%9D%83%E7%99%BB%E5%BD%95/1.htm">uniapp3小程序授权登录</a><a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%99%BB%E5%BD%95%E8%8E%B7%E5%8F%96%E7%94%A8%E6%88%B7%E4%BF%A1%E6%81%AF%E6%95%99%E7%A8%8B/1.htm">微信小程序登录获取用户信息教程</a><a class="tag" taget="_blank" href="/search/%E8%8E%B7%E5%8F%96%E7%94%A8%E6%88%B7%E6%98%B5%E7%A7%B0%E6%89%8B%E6%9C%BA%E5%8F%B7%E5%A4%B4%E5%83%8F%E4%BF%A1%E6%81%AF%E7%99%BB%E5%BD%95/1.htm">获取用户昵称手机号头像信息登录</a><a class="tag" taget="_blank" href="/search/vue3%E7%89%88%E6%9C%AC%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%B9%B3%E5%8F%B0%E6%8E%88%E6%9D%83%E7%99%BB%E5%BD%95/1.htm">vue3版本小程序平台授权登录</a><a class="tag" taget="_blank" href="/search/uniap%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%AB%AF%E7%94%A8%E6%88%B7%E7%99%BB%E5%BD%95%E6%B5%81%E7%A8%8B/1.htm">uniap小程序端用户登录流程</a><a class="tag" taget="_blank" href="/search/uni%E5%AE%8C%E6%95%B4%E7%9A%84%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%B9%B3%E5%8F%B0%E7%99%BB%E5%BD%95%E6%BA%90%E7%A0%81/1.htm">uni完整的小程序平台登录源码</a> <div>效果图在uniapp微信小程序端开发中，超详细实现用户授权登录完整功能源码，用户授权后获取手机号/昵称/头像/性别等，提供完整思路流程及逻辑讲解。uniappVue3和Vue2都能用，你也可以直接复制粘贴，然后改下参数放到你的项目中去就行。整体思路做功能之前，先来看一下整体流程是</div> </li> <li><a href="/article/1950191208873652224.htm" title="vue element 封装表单" target="_blank">vue element 封装表单</a> <span class="text-muted">影子信息</span> <a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>背景：在前端系统开发中，系统页面涉及到的表单组件比较多，所以进行了简单的封装。封装的包括一些Form表单组件，如下：input输入框、select下拉框、等实现效果：理论知识：表单组件官方链接：点击跳转封装组件：封装组件的思路：不封装element组件，每一个input组件绑定一个form对象，例如官网。简单封装element组件，利用for循环生成form表单的每一项el-form-item。进</div> </li> <li><a href="/article/1950179866523529216.htm" title="大学社团管理系统（11831）" target="_blank">大学社团管理系统（11831）</a> <span class="text-muted">codercode2022</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/echarts/1.htm">echarts</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/cloud/1.htm">cloud</a><a class="tag" taget="_blank" href="/search/sentinel/1.htm">sentinel</a><a class="tag" taget="_blank" href="/search/java-rocketmq/1.htm">java-rocketmq</a> <div>有需要的同学，源代码和配套文档领取，加文章最下方的名片哦一、项目演示项目演示视频二、资料介绍完整源代码（前后端源代码+SQL脚本）配套文档（LW+PPT+开题报告）远程调试控屏包运行三、技术介绍Java语言SSM框架SpringBoot框架Vue框架JSP页面Mysql数据库IDEA/Eclipse开发四、项目截图有需要的同学，源代码和配套文档领取，加文章最下方的名片哦!</div> </li> <li><a href="/article/1950164861182865408.htm" title="VUE 座位图功能+扩展" target="_blank">VUE 座位图功能+扩展</a> <span class="text-muted">NUZGNAW</span> <a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>1、通过循环画出页面座位图0"style="display:table;margin:0auto;min-height:472px;position:relative;">{{i.sign}}2、画出右下角的预览图3、编写对应js方法watch:{seatList:{handler(newVal,oldVal){if(this.seatList&&!stringBlank(this.seatLis</div> </li> <li><a href="/article/1950130692448907264.htm" title="Vue CSR 到 Nuxt 3 SSR 迁移：技术实现与问题解决实录" target="_blank">Vue CSR 到 Nuxt 3 SSR 迁移：技术实现与问题解决实录</a> <span class="text-muted">二倍速播放</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a> <div>1.迁移动机与技术选型1.1CSR架构的局限性基于Vue3和Vite构建的客户端渲染(CSR)单页应用(SPA)提供了良好的开发体验和用户交互流畅性。但是其核心局限在于：搜索引擎优化(SEO)：初始HTML响应仅包含一个根div元素，实际内容由JavaScript在浏览器端动态生成。虽然主流搜索引擎（如Google）能够执行部分JavaScript，但其抓取效率和稳定性不如直接获取完整HTML。非</div> </li> <li><a href="/article/1950126282490572800.htm" title="vue项目" target="_blank">vue项目</a> <span class="text-muted">阿什么名字不会重复呢</span> <a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>vue进行配置创建vue项目vuecreateone//one就是项目名字npmielement-ui--Snpmiaxios--savenpmiecharts--save配置main.jsimportVuefrom'vue'importAppfrom'./App.vue'importrouterfrom'./router'importstorefrom'./store'importElement</div> </li> <li><a href="/article/1950119980464926720.htm" title="开发避坑短篇(7)：Vue+window.print()打印实践" target="_blank">开发避坑短篇(7)：Vue+window.print()打印实践</a> <span class="text-muted">帧栈</span> <a class="tag" taget="_blank" href="/search/%E9%81%BF%E5%9D%91%E6%8C%87%E5%8D%97/1.htm">避坑指南</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/elementui/1.htm">elementui</a> <div>需求vue项目中如何打印当前页面内容？解决办法使用浏览器原生APIwindow.print()，这是最简单直接的方式，通过调用window.print()方法触发浏览器打印功能‌。在vue项目中直接调用print()方法即可，无须引入任何插件。如下：functionhandlePrint(){setTimeout(_=>print(),500)}打印页面样式控制可以使用@mediaprint来控制</div> </li> <li><a href="/article/1950099932132208640.htm" title="vue2中实现leader-line-vue连线文章对应字符" target="_blank">vue2中实现leader-line-vue连线文章对应字符</a> <span class="text-muted">小莉爱编程</span> <a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/bug%E8%AE%B0%E5%BD%95/1.htm">bug记录</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>效果展示通过点击右边的tag，触发连接操作第一步：获取右边tag展示1.右边的tag列表展示，我这边是分为两个list嵌套的数据结构；{"人员":[{</div> </li> <li><a href="/article/1950071444180365312.htm" title="【antdv4.0FormItem更新tooltip属性引发的思考】" target="_blank">【antdv4.0FormItem更新tooltip属性引发的思考】</a> <span class="text-muted"></span> <div>北京时间2023-10-19，ant-design-vue最近发布了4.0.4-4.0.6的小版本更新，其中4.0.4新增了对Form组件中FormItem的tooltip属性支持，这个功能我觉得在后台管理场景下还是非常实用的，tooltip属性作用于FormItem中的FormItemLabel区域，用来配置提示信息，当用户不确定该行的用处或者不知道填什么内容时，可以作为input里placeh</div> </li> <li><a href="/article/1950057579757498368.htm" title="零基础入门uniapp Vue3组合式API版本" target="_blank">零基础入门uniapp Vue3组合式API版本</a> <span class="text-muted">鹤早早</span> <a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a> <div>前言：小程序学习笔记，课程来源up主咸虾米_。仅记录笔记，大家想学习可以去关注他。1.已安装HBuiderX（目前是4.36版本），微信开发者工具（但还没注册小程序码），相关配置OK了。1.16相关架构学习1.pages-index-index.vuebox1box2.layout{border:1pxsolidred;.box1{border:1pxsolidgreen;}.box2{borde</div> </li> <li><a href="/article/1950055310613868544.htm" title="Vue3组合API初体验" target="_blank">Vue3组合API初体验</a> <span class="text-muted">DTcode7</span> <a class="tag" taget="_blank" href="/search/Vue%E5%AE%9E%E6%88%98%E6%8C%87%E5%8D%97/1.htm">Vue实战指南</a><a class="tag" taget="_blank" href="/search/VUE/1.htm">VUE</a><a class="tag" taget="_blank" href="/search/HTML/1.htm">HTML</a><a class="tag" taget="_blank" href="/search/web/1.htm">web</a><a class="tag" taget="_blank" href="/search/vue%E6%A1%86%E6%9E%B6/1.htm">vue框架</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>Vue3组合API初体验基本概念与作用说明示例一：使用ref创建响应式数据示例二：使用reactive创建响应式对象示例三：使用computed计算属性示例四：使用watch监听数据变化示例五：使用provide/inject进行父子组件间通信功能使用思路与实际开发技巧1.何时使用ref与reactive？2.如何在组合式API中保持逻辑的清晰？3.如何处理异步操作？随着Vue3的发布，组合式AP</div> </li> <li><a href="/article/1950053798433058816.htm" title="页面开发样式和布局入门：Vite + Vue 3 + Less" target="_blank">页面开发样式和布局入门：Vite + Vue 3 + Less</a> <span class="text-muted"></span> <div>页面开发样式和布局入门：Vite+Vue3+Less引言在现代前端开发中，样式和布局是页面开发的核心部分。随着技术的不断发展，Vite、Vue3和Less等工具和框架的出现，使得前端开发变得更加高效和灵活。然而，尽管这些工具和框架提供了强大的功能，但在实际开发中仍然会遇到各种样式和布局的问题。本文将结合Vite、Vue3和Less，详细介绍在页面开发中常见的样式和布局问题，并提供解决方案和最佳实践</div> </li> <li><a href="/article/1950005757994921984.htm" title="50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | Pokedex（宝可梦图鉴）" target="_blank">50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | Pokedex（宝可梦图鉴）</a> <span class="text-muted"></span> <div>我们继续50个小项目挑战！——Pokedex组件仓库地址：https://github.com/SunACong/50-vue-projects项目预览地址：https://50-vue-projects.vercel.app/使用Vue3结合PokeAPI来创建一个炫酷的宝可梦图鉴应用。通过这个项目，你将能够浏览前150只宝可梦的信息，包括它们的名字、类型、身高、体重以及能力等。而且，每只宝可梦</div> </li> <li><a href="/article/1950002983613820928.htm" title="前端基础知识Vue3系列 - 04（Vue3.0 所采用的 Composition Api 与 Vue2.x 使用的 Options Api 有什么不同）" target="_blank">前端基础知识Vue3系列 - 04（Vue3.0 所采用的 Composition Api 与 Vue2.x 使用的 Options Api 有什么不同）</a> <span class="text-muted"></span> <div>开始之前CompositionAPI可以说是Vue3的最大特点，那么为什么要推出CompositionApi，解决了什么问题？通常使用Vue2开发的项目，普遍会存在以下问题：代码的可读性随着组件变大而变差每一种代码复用的方式，都存在缺点TypeScript支持有限以上通过使用CompositionApi都能迎刃而解正文一、OptionsApiOptionsAPI，即大家常说的选项API，即以vue</div> </li> <li><a href="/article/1949993268787867648.htm" title="Vue3判断对象是否为空方法" target="_blank">Vue3判断对象是否为空方法</a> <span class="text-muted">滿</span> <a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>1、Object.keys()检查对象自身可枚举属性的数量：constisEmpty=Object.keys(obj).length===0;2、JSON.stringify()将对象转为JSON字符串判断：constisEmpty=JSON.stringify(obj)==='{}';3、Reflect.ownKeys()（包含Symbol属性）constisEmpty=Reflect.ownK</div> </li> <li><a href="/article/1949984445817745408.htm" title="Vue 工程化开发入门" target="_blank">Vue 工程化开发入门</a> <span class="text-muted">dawn191228</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0/1.htm">前端学习</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><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a> <div>文章目录一、Vue工程化开发概述二、Vue脚手架三、项目运行流程四、组件化开发五、组件注册六、总结在当今的前端开发领域，Vue.js以其简洁、高效的特性受到了广泛的欢迎。Vue的工程化开发能够帮助我们更好地组织和管理项目，提高开发效率和代码质量。本文将带你了解Vue工程化开发入门知识，包括脚手架、项目运行流程、组件化以及组件注册。一、Vue工程化开发概述工程化开发是一种将软件开发过程规范化、标准化</div> </li> <li><a href="/article/1949966916076498944.htm" title="vue 使用 iFrame 嵌套带有登录的网站 登录成功 无法跳转" target="_blank">vue 使用 iFrame 嵌套带有登录的网站 登录成功 无法跳转</a> <span class="text-muted">WHY<=小氣鬼=></span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>这个问题有点好玩，当时做的时候没想起来，哎不说讲一下问题1.项目在使用iFrame标签嵌套其他，网址或者自己的网址的时候如果没有登录只是浏览是没有问题的2.如个你使用Frame标签嵌套的网址是带有登录的需要注意两个网站是不是在统一域名下面如果在就可以正常登录，如果不在的话会出现登录成功但是无法跳转的问题3.在Vue项目中使用iFrame嵌套本地.html文件，本地.html文件向父页面抛出的方法或</div> </li> <li><a href="/article/1949925685418061824.htm" title="Vue3中Axios的使用-附完整代码" target="_blank">Vue3中Axios的使用-附完整代码</a> <span class="text-muted">【本人】</span> <a class="tag" taget="_blank" href="/search/Vue/1.htm">Vue</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a> <div>前言首先介绍一下什么是axiosAxios是一个基于promise网络请求库，作用于node.js和浏览器中。它是isomorphic的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生node.jshttp模块,而在客户端(浏览端)则使用XMLHttpRequests官方网站：Axios中文文档|Axios中文网目前官方最新版本1.8.4一、Axios优势1.简单易用Axio</div> </li> <li><a href="/article/1949918371738873856.htm" title="vue 进入一个页面，然后离开这个页面他就重新加载" target="_blank">vue 进入一个页面，然后离开这个页面他就重新加载</a> <span class="text-muted">Java&Develop</span> <a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a> <div>vue进入一个页面，然后离开这个页面他就重新加载这个代码导致的注释即可window.location.reload();window.location.reload()是JavaScript中的一个方法，用于强制刷新当前页面（重新加载页面内容）。其作用类似于用户手动点击浏览器的刷新按钮，但可以通过代码精确触发。核心作用：刷新页面重新加载当前显示的文档（即重新请求当前URL的资源）。可选参数控制缓存</div> </li> <li><a href="/article/1949892134148567040.htm" title="在vue项目中嵌入Python项目" target="_blank">在vue项目中嵌入Python项目</a> <span class="text-muted">钱亚锋</span> <a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</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/ecmascript/1.htm">ecmascript</a> <div>在Vue项目中嵌入Python项目在现代Web开发中，前后端分离的架构已成为一种流行趋势。前端使用现代化框架（如Vue.js）来构建用户界面，而后端则使用其他语言（如Python）来处理复杂的业务逻辑和数据库交互。将Python项目嵌入到Vue项目中，可以有效利用两种语言的优势，提升开发效率。本文将介绍如何在Vue项目中集成Python项目，并附带代码示例和可视化工具。流程概述在将Python项目</div> </li> <li><a href="/article/1949891250945585152.htm" title="python和vue结合开发前端_Python--前端之路-----Vue" target="_blank">python和vue结合开发前端_Python--前端之路-----Vue</a> <span class="text-muted"></span> <div>Vue导入Vue创建vue对象加载后执行：绑定：varvm=newVue({el:"#标签的id，此处类似于选择器",属性，方法})属性：data：{属性1："值1",属性2：值2，属性：true}方法：methods：{方法名1:function(){执行内容}，方法名2:function(){执行内容}}监听：watch：{属性名：function(){监听vue属性的数据变化，属性发生修改执</div> </li> <li><a href="/article/1949890746580529152.htm" title="vue3的一些浅显用法" target="_blank">vue3的一些浅显用法</a> <span class="text-muted"></span> <div>1/父页面调用子页面相关需要在父页面引用其中FieldUserForm是子页面@success="handleUserFormSuccess"是子页面成功后回调方法父页面实现handleUserFormSuccess方法子页面相关：//暴露方法给父组件defineExpose({open})需要写个方法暴露给父组件，子页面实现open方法相当于初始加载类2子页面完成任务后调用子页面相关//定义em</div> </li> <li><a href="/article/1949889359373201408.htm" title="python和vue结合开发前端,请手动配置Vue开发环境" target="_blank">python和vue结合开发前端,请手动配置Vue开发环境</a> <span class="text-muted">小六oO</span> <a class="tag" taget="_blank" href="/search/%E6%99%BA%E8%83%BD%E5%86%99%E4%BD%9C/1.htm">智能写作</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>vue怎么全局定义一个变量代替路径。原理：设置一个专用的的全局变量模块文件，模块里面定义一些变量初始状态，用exportdefault暴露出去，在里面使用Vue.prototype挂载到vue实例上面或者在其它地方需要使用时，引入该模块便可。全局变量模块文件：文件：constserverSrc='';consttoken='12345678';consthasEnter=false;constus</div> </li> <li><a href="/article/1949820012533444608.htm" title="Java+Vue 地下停车场管理系统的设计与实现" target="_blank">Java+Vue 地下停车场管理系统的设计与实现</a> <span class="text-muted">不若浮生一梦</span> <a class="tag" taget="_blank" href="/search/%E8%AE%A1%E7%AE%97%E6%9C%BA%E6%AF%95%E8%AE%BE/1.htm">计算机毕设</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>一、项目简介本项目是一款基于SpringBoot+Vue开发的地下停车场管理系统，采用前后端分离架构，后端使用MyBatis操作MySQL数据库，前端使用Vue进行页面展示和用户交互。系统涵盖车位监控、车辆登记、订单生成与结算、在线支付、公告通知、留言反馈、用户积分管理等模块，支持用户端和管理员端的全流程停车管理，适用于中小型停车场数字化转型。项目定位：提升停车场管理效率与用户体验，实现“高效停车</div> </li> <li><a href="/article/1949814878260752384.htm" title="SSM+Vue共享充电宝管理系统 充电宝投放管理系统 共享充电宝维护管理系统Java" target="_blank">SSM+Vue共享充电宝管理系统 充电宝投放管理系统 共享充电宝维护管理系统Java</a> <span class="text-muted">计算机程序老哥</span> <div>作者主页：计算机毕业设计老哥有问题可以主页问我一、开发介绍1.1开发环境开发语言：Java数据库：MySQL系统架构：B/S后端：SSM(Spring+SpringMVC+Mybatis)前端：Vue工具：IDEA或者Eclipse，JDK1.8，Maven二、系统介绍2.1图片展示注册登录页面：登陆前端页面功能：首页、合作商户、充电宝投放、公告栏、个人中心、后台管理首页.png充电宝投放.png</div> </li> <li><a href="/article/1949757224490430464.htm" title="Vue 浏览器本地存储" target="_blank">Vue 浏览器本地存储</a> <span class="text-muted">yume_sibai</span> <a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a> <div>一、webStorage1.存储内容大小一般支持5MB左右（不同浏览器可能不一样）。2.浏览器通过Window.sessionStorage和Window.localStorage属性来实现本地存储机制。3.相关API:(1).xxxxStorage.setItem('Key','value')：该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。(2).xxxx</div> </li> <li><a href="/article/1949756465313017856.htm" title="【web应用】基于Vue3和Spring Boot的课程管理前后端数据交互过程" target="_blank">【web应用】基于Vue3和Spring Boot的课程管理前后端数据交互过程</a> <span class="text-muted">JosieBook</span> <a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/Java%E5%85%A8%E6%A0%88/1.htm">Java全栈</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/%E4%BA%A4%E4%BA%92/1.htm">交互</a> <div>文章目录一、系统架构概述二、前端数据交互流程分析1.组件初始化与数据请求2.API请求封装3.查询参数处理三、后端数据处理流程1.控制器接收请求2.分页处理机制3.服务层业务处理四、典型操作的数据流1.查询操作数据流2.新增操作数据流3.删除操作数据流五、关键技术点解析1.前端表单验证2.后端权限控制3.数据导出实现六、完整交互示例：新增课程七、完整代码八、总结与优化建议1.当前实现特点2.可优化</div> </li> <li><a href="/article/1949756466718109696.htm" title="【第六节】方法与事件处理器" target="_blank">【第六节】方法与事件处理器</a> <span class="text-muted">枫，为落叶</span> <a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a> <div>方法与事件处理器方法处理器可以用v-on指令监听DOM事件:Greet绑定一个单击事件处理器到一个方法greet。下面在Vue实例中定义这个方法varvm=newVue({el:'#example',data:{name:'Vue.js'//在'methods’对象中定义方法methods:{greet:function(event)(//方法内'this”指向vmalert('Hello+thi</div> </li> <li><a href="/article/1949740580871401472.htm" title="IntelliJ IDEA 高效开发指南：从基础操作到高级技巧" target="_blank">IntelliJ IDEA 高效开发指南：从基础操作到高级技巧</a> <span class="text-muted">zqmgx13291</span> <a class="tag" taget="_blank" href="/search/intellij-idea/1.htm">intellij-idea</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/ide/1.htm">ide</a> <div>一、IDEA概述与环境配置1.1IDEA的核心优势智能代码辅助：基于上下文的代码补全（Ctrl+Space）、方法参数提示、错误实时检测全栈开发支持：内置Java/Python/JavaScript等20+语言支持，框架集成（SpringBoot/Vue/React）工具链集成：版本控制（Git/SVN）、数据库（MySQL/PostgreSQL）、容器（Docker/K8s）一站式开发性能优化：</div> </li> <li><a href="/article/1949736674896441344.htm" title="简约时装网店网站开发#网页制作 #网页设计 #网站建设" target="_blank">简约时装网店网站开发#网页制作 #网页设计 #网站建设</a> <span class="text-muted">黄菊华老师</span> <a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E6%A8%A1%E6%9D%BF/1.htm">网页模板</a><a class="tag" taget="_blank" href="/search/%E7%AE%80%E7%BA%A6%E6%97%B6%E8%A3%85%E7%BD%91%E5%BA%97/1.htm">简约时装网店</a> <div>博主介绍：黄菊华老师《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者，CSDN博客专家，在线教育专家，CSDN钻石讲师；专注网站制作、小程序开发、软件开发和大学生毕业设计教育、辅导。所有项目都配有从入门到精通的基础知识视频课程，学习后应对毕业设计答辩，提供核心代码讲解，答辩指导。项目配有对应开发文档、开题报告、任务书、PPT等，提供毕业设计论文辅导。项目都录了发布和功能操作演示视频</div> </li> <li><a href="/article/99.htm" title="ios内付费" target="_blank">ios内付费</a> <span class="text-muted">374016526</span> <a class="tag" taget="_blank" href="/search/ios/1.htm">ios</a><a class="tag" taget="_blank" href="/search/%E5%86%85%E4%BB%98%E8%B4%B9/1.htm">内付费</a> <div>近年来写了很多IOS的程序，内付费也用到不少，使用IOS的内付费实现起来比较麻烦，这里我写了一个简单的内付费包，希望对大家有帮助。   具体使用如下: 这里的sender其实就是调用者，这里主要是为了回调使用。 [KuroStoreApi kuroStoreProductId:@"产品ID" storeSender:self storeFinishCallBa</div> </li> <li><a href="/article/226.htm" title="20 款优秀的 Linux 终端仿真器" target="_blank">20 款优秀的 Linux 终端仿真器</a> <span class="text-muted">brotherlamp</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/linux%E8%A7%86%E9%A2%91/1.htm">linux视频</a><a class="tag" taget="_blank" href="/search/linux%E8%B5%84%E6%96%99/1.htm">linux资料</a><a class="tag" taget="_blank" href="/search/linux%E8%87%AA%E5%AD%A6/1.htm">linux自学</a><a class="tag" taget="_blank" href="/search/linux%E6%95%99%E7%A8%8B/1.htm">linux教程</a> <div>  终端仿真器是一款用其它显示架构重现可视终端的计算机程序。换句话说就是终端仿真器能使哑终端看似像一台连接上了服务器的客户机。终端仿真器允许最终用户用文本用户界面和命令行来访问控制台和应用程序。（LCTT 译注：终端仿真器原意指对大型机-哑终端方式的模拟，不过在当今的 Linux 环境中，常指通过远程或本地方式连接的伪终端，俗称“终端”。） 你能从开源世界中找到大量的终端仿真器，它们</div> </li> <li><a href="/article/353.htm" title="Solr Deep Paging(solr 深分页)" target="_blank">Solr Deep Paging(solr 深分页)</a> <span class="text-muted">eksliang</span> <a class="tag" taget="_blank" href="/search/solr%E6%B7%B1%E5%88%86%E9%A1%B5/1.htm">solr深分页</a><a class="tag" taget="_blank" href="/search/solr%E5%88%86%E9%A1%B5%E6%80%A7%E8%83%BD%E9%97%AE%E9%A2%98/1.htm">solr分页性能问题</a> <div>转载请出自出处：http://eksliang.iteye.com/blog/2148370 作者：eksliang(ickes) blg:http://eksliang.iteye.com/ 概述 长期以来，我们一直有一个深分页问题。如果直接跳到很靠后的页数，查询速度会比较慢。这是因为Solr的需要为查询从开始遍历所有数据。直到Solr的4.7这个问题一直没有一个很好的解决方案。直到solr</div> </li> <li><a href="/article/480.htm" title="数据库面试题" target="_blank">数据库面试题</a> <span class="text-muted">18289753290</span> <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95%E9%A2%98+%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">面试题 数据库</a> <div>1.union ,union all 网络搜索出的最佳答案： union和union all的区别是,union会自动压缩多个结果集合中的重复结果，而union all则将所有的结果全部显示出来，不管是不是重复。 Union：对两个结果集进行并集操作，不包括重复行，同时进行默认规则的排序； Union All：对两个结果集进行并集操作，包括重复行，不进行排序； 2.索引有哪些分类？作用是</div> </li> <li><a href="/article/607.htm" title="Android TV屏幕适配" target="_blank">Android TV屏幕适配</a> <span class="text-muted">酷的飞上天空</span> <a class="tag" taget="_blank" href="/search/android/1.htm">android</a> <div>先说下现在市面上TV分辨率的大概情况 两种分辨率为主 1.720标清，分辨率为1280x720. 屏幕尺寸以32寸为主，部分电视为42寸 2.1080p全高清，分辨率为1920x1080 屏幕尺寸以42寸为主，此分辨率电视屏幕从32寸到50寸都有   适配遇到问题，已1080p尺寸为例： 分辨率固定不变，屏幕尺寸变化较大。 如：效果图尺寸为1920x1080，如果使用d</div> </li> <li><a href="/article/734.htm" title="Timer定时器与ActionListener联合应用" target="_blank">Timer定时器与ActionListener联合应用</a> <span class="text-muted">永夜-极光</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>功能:在控制台每秒输出一次   代码: package Main; import javax.swing.Timer; import java.awt.event.*; public class T { private static int count = 0; public static void main(String[] args){ </div> </li> <li><a href="/article/861.htm" title="Ubuntu14.04系统Tab键不能自动补全问题解决" target="_blank">Ubuntu14.04系统Tab键不能自动补全问题解决</a> <span class="text-muted">随便小屋</span> <a class="tag" taget="_blank" href="/search/Ubuntu+14.04/1.htm">Ubuntu 14.04</a> <div>Unbuntu 14.4安装之后就在终端中使用Tab键不能自动补全，解决办法如下：   1、利用vi编辑器打开/etc/bash.bashrc文件（需要root权限） sudo vi /etc/bash.bashrc  接下来会提示输入密码 2、找到文件中的下列代码 #enable bash completion in interactive shells #if</div> </li> <li><a href="/article/988.htm" title="学会人际关系三招 轻松走职场" target="_blank">学会人际关系三招 轻松走职场</a> <span class="text-muted">aijuans</span> <a class="tag" taget="_blank" href="/search/%E8%81%8C%E5%9C%BA/1.htm">职场</a> <div>要想成功，仅有专业能力是不够的，处理好与老板、同事及下属的人际关系也是门大学问。如何才能在职场如鱼得水、游刃有余呢？在此，教您简单实用的三个窍门。 　　第一，多汇报 最近，管理学又提出了一个新名词“追随力”。它告诉我们，做下属最关键的就是要多请示汇报，让上司随时了解你的工作进度，有了新想法也要及时建议。不知不觉，你就有了“追随力”，上司会越来越了解和信任你。 　　第二，勤沟通 团队的力</div> </li> <li><a href="/article/1115.htm" title="《O2O：移动互联网时代的商业革命》读书笔记" target="_blank">《O2O：移动互联网时代的商业革命》读书笔记</a> <span class="text-muted">aoyouzi</span> <a class="tag" taget="_blank" href="/search/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/1.htm">读书笔记</a> <div>移动互联网的未来：碎片化内容+碎片化渠道=各式精准、互动的新型社会化营销。   O2O：Online to OffLine 线上线下活动 O2O就是在移动互联网时代，生活消费领域通过线上和线下互动的一种新型商业模式。   手机二维码本质：O2O商务行为从线下现实世界到线上虚拟世界的入口。   线上虚拟世界创造的本意是打破信息鸿沟，让不同地域、不同需求的人</div> </li> <li><a href="/article/1242.htm" title="js实现图片随鼠标滚动的效果" target="_blank">js实现图片随鼠标滚动的效果</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/%E6%BB%9A%E5%8A%A8%E5%B1%9E%E6%80%A7%E7%9A%84%E8%8E%B7%E5%8F%96/1.htm">滚动属性的获取</a><a class="tag" taget="_blank" href="/search/%E5%9B%BE%E7%89%87%E6%BB%9A%E5%8A%A8/1.htm">图片滚动</a><a class="tag" taget="_blank" href="/search/%E5%B1%9E%E6%80%A7%E8%8E%B7%E5%8F%96/1.htm">属性获取</a><a class="tag" taget="_blank" href="/search/%E9%A1%B5%E9%9D%A2%E5%8A%A0%E8%BD%BD/1.htm">页面加载</a> <div>1,获取样式属性值 top 与顶部的距离 left 与左边的距离 right 与右边的距离 bottom 与下边的距离 zIndex 层叠层次     例子:获取左边的宽度,当css写在body标签中时 <div id="adver" style="position:absolute;top:50px;left:1000p</div> </li> <li><a href="/article/1369.htm" title="ajax同步异步参数async" target="_blank">ajax同步异步参数async</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/Ajax/1.htm">Ajax</a><a class="tag" taget="_blank" href="/search/async/1.htm">async</a> <div>        开发项目开发过程中，需要将ajax的返回值赋到全局变量中，然后在该页面其他地方引用，因为ajax异步的原因一直无法成功，需将async:false，使其变成同步的。         格式： $.ajax({ type: 'POST', ur</div> </li> <li><a href="/article/1496.htm" title="Webx3框架（1）" target="_blank">Webx3框架（1）</a> <span class="text-muted">Bill_chen</span> <a class="tag" taget="_blank" href="/search/eclipse/1.htm">eclipse</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a><a class="tag" taget="_blank" href="/search/%E6%A1%86%E6%9E%B6/1.htm">框架</a><a class="tag" taget="_blank" href="/search/ibatis/1.htm">ibatis</a> <div>Webx是淘宝开发的一套Web开发框架，Webx3是其第三个升级版本；采用Eclipse的开发环境，现在支持java开发； 采用turbine原型的MVC框架，扩展了Spring容器，利用Maven进行项目的构建管理，灵活的ibatis持久层支持，总的来说，还是一套很不错的Web框架。 Webx3遵循turbine风格，velocity的模板被分为layout/screen/control三部</div> </li> <li><a href="/article/1623.htm" title="【MongoDB学习笔记五】MongoDB概述" target="_blank">【MongoDB学习笔记五】MongoDB概述</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a> <div>MongoDB是面向文档的NoSQL数据库，尽量业界还对MongoDB存在一些质疑的声音，比如性能尤其是查询性能、数据一致性的支持没有想象的那么好，但是MongoDB用户群确实已经够多。MongoDB的亮点不在于它的性能，而是它处理非结构化数据的能力以及内置对分布式的支持(复制、分片达到的高可用、高可伸缩)，同时它提供的近似于SQL的查询能力，也是在做NoSQL技术选型时，考虑的一个重要因素。Mo</div> </li> <li><a href="/article/1750.htm" title="spring/hibernate/struts2常见异常总结" target="_blank">spring/hibernate/struts2常见异常总结</a> <span class="text-muted">白糖_</span> <a class="tag" taget="_blank" href="/search/Hibernate/1.htm">Hibernate</a> <div> Spring ①ClassNotFoundException: org.aspectj.weaver.reflect.ReflectionWorld$ReflectionWorldException 缺少aspectjweaver.jar，该jar包常用于spring aop中   ②java.lang.ClassNotFoundException: org.sprin</div> </li> <li><a href="/article/1877.htm" title="jquery easyui表单重置(reset)扩展思路" target="_blank">jquery easyui表单重置(reset)扩展思路</a> <span class="text-muted">bozch</span> <a class="tag" taget="_blank" href="/search/form/1.htm">form</a><a class="tag" taget="_blank" href="/search/jquery+easyui/1.htm">jquery easyui</a><a class="tag" taget="_blank" href="/search/reset/1.htm">reset</a> <div>在jquery easyui表单中 尚未提供表单重置的功能，这就需要自己对其进行扩展。 扩展的时候要考虑的控件有： combo,combobox,combogrid,combotree,datebox,datetimebox 需要对其添加reset方法，reset方法就是把初始化的值赋值给当前的组件，这就需要在组件的初始化时将值保存下来。 在所有的reset方法添加完毕之后，就需要对fo</div> </li> <li><a href="/article/2004.htm" title="编程之美-烙饼排序" target="_blank">编程之美-烙饼排序</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B%E4%B9%8B%E7%BE%8E/1.htm">编程之美</a> <div> package beautyOfCoding; import java.util.Arrays; /* *《编程之美》的思路是：搜索+剪枝。有点像是写下棋程序：当前情况下，把所有可能的下一步都做一遍；在这每一遍操作里面，计算出如果按这一步走的话，能不能赢（得出最优结果）。 *《编程之美》上代码有很多错误，且每个变量的含义令人费解。因此我按我的理解写了以下代码： */ </div> </li> <li><a href="/article/2131.htm" title="Struts1.X 源码分析之ActionForm赋值原理" target="_blank">Struts1.X 源码分析之ActionForm赋值原理</a> <span class="text-muted">chenbowen00</span> <a class="tag" taget="_blank" href="/search/struts/1.htm">struts</a> <div>struts1在处理请求参数之前，首先会根据配置文件action节点的name属性创建对应的ActionForm。如果配置了name属性，却找不到对应的ActionForm类也不会报错，只是不会处理本次请求的请求参数。 如果找到了对应的ActionForm类，则先判断是否已经存在ActionForm的实例，如果不存在则创建实例，并将其存放在对应的作用域中。作用域由配置文件action节点的s</div> </li> <li><a href="/article/2258.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>       这里有一个常识性的问题:       地球的资源,人类的资金是有限的,而太空是无限的.....       就算全人类联合起来,要在太空中修建大型空间站,也不一定能够成功,因为资源和资金,技术有客观的限制.... &</div> </li> <li><a href="/article/2385.htm" title="ORACLE临时表—ON COMMIT PRESERVE ROWS" target="_blank">ORACLE临时表—ON COMMIT PRESERVE ROWS</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/%E4%B8%B4%E6%97%B6%E8%A1%A8/1.htm">临时表</a> <div>ORACLE临时表 转 临时表：像普通表一样，有结构，但是对数据的管理上不一样，临时表存储事务或会话的中间结果集，临时表中保存的数据只对当前 会话可见，所有会话都看不到其他会话的数据，即使其他会话提交了，也看不到。临时表不存在并发行为，因为他们对于当前会话都是独立的。 创建临时表时，ORACLE只创建了表的结构（在数据字典中定义），并没有初始化内存空间，当某一会话使用临时表时，ORALCE会</div> </li> <li><a href="/article/2512.htm" title="基于Nginx XSendfile+SpringMVC进行文件下载" target="_blank">基于Nginx XSendfile+SpringMVC进行文件下载</a> <span class="text-muted">denger</span> <a class="tag" taget="_blank" href="/search/%E5%BA%94%E7%94%A8%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">应用服务器</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%BA%94%E7%94%A8/1.htm">网络应用</a><a class="tag" taget="_blank" href="/search/lighttpd/1.htm">lighttpd</a> <div>    在平常我们实现文件下载通常是通过普通 read-write方式，如下代码所示。 @RequestMapping("/courseware/{id}") public void download(@PathVariable("id") String courseID, HttpServletResp</div> </li> <li><a href="/article/2639.htm" title="scanf接受char类型的字符" target="_blank">scanf接受char类型的字符</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/c/1.htm">c</a> <div>/* 2013年3月11日22:35:54 目的：学习char只接受一个字符 */ # include <stdio.h> int main(void) { int i; char ch; scanf("%d", &i); printf("i = %d\n", i); scanf("%</div> </li> <li><a href="/article/2766.htm" title="学编程的价值" target="_blank">学编程的价值</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a> <div>发一个人会编程, 想想以后可以教儿女, 是多么美好的事啊, 不管儿女将来从事什么样的职业, 教一教, 对他思维的开拓大有帮助   像这位朋友学习:   http://blog.sina.com.cn/s/articlelist_2584320772_0_1.html   VirtualGS教程 (By @林泰前): 几十年的老程序员，资深的</div> </li> <li><a href="/article/2893.htm" title="二维数组（矩阵）对角线输出" target="_blank">二维数组（矩阵）对角线输出</a> <span class="text-muted">飞天奔月</span> <a class="tag" taget="_blank" href="/search/%E4%BA%8C%E7%BB%B4%E6%95%B0%E7%BB%84/1.htm">二维数组</a> <div>今天在BBS里面看到这样的面试题目,   1，二维数组（N*N），沿对角线方向，从右上角打印到左下角如N=4： 4*4二维数组  { 1 2 3 4 } { 5 6 7 8 } { 9 10 11 12 } {13 14 15 16 } 打印顺序  4 3 8 2 7 12 1 6 11 16 5 10 15 9 14 13 要</div> </li> <li><a href="/article/3020.htm" title="Ehcache（08）——可阻塞的Cache——BlockingCache" target="_blank">Ehcache（08）——可阻塞的Cache——BlockingCache</a> <span class="text-muted">234390216</span> <a class="tag" taget="_blank" href="/search/%E5%B9%B6%E5%8F%91/1.htm">并发</a><a class="tag" taget="_blank" href="/search/ehcache/1.htm">ehcache</a><a class="tag" taget="_blank" href="/search/BlockingCache/1.htm">BlockingCache</a><a class="tag" taget="_blank" href="/search/%E9%98%BB%E5%A1%9E/1.htm">阻塞</a> <div>可阻塞的Cache—BlockingCache          在上一节我们提到了显示使用Ehcache锁的问题，其实我们还可以隐式的来使用Ehcache的锁，那就是通过BlockingCache。BlockingCache是Ehcache的一个封装类，可以让我们对Ehcache进行并发操作。其内部的锁机制是使用的net.</div> </li> <li><a href="/article/3147.htm" title="mysqldiff对数据库间进行差异比较" target="_blank">mysqldiff对数据库间进行差异比较</a> <span class="text-muted">jackyrong</span> <a class="tag" taget="_blank" href="/search/mysqld/1.htm">mysqld</a> <div>  mysqldiff该工具是官方mysql-utilities工具集的一个脚本，可以用来对比不同数据库之间的表结构，或者同个数据库间的表结构    如果在windows下，直接下载mysql-utilities安装就可以了，然后运行后，会跑到命令行下： 1） 基本用法    mysqldiff --server1=admin:12345</div> </li> <li><a href="/article/3274.htm" title="spring data jpa 方法中可用的关键字" target="_blank">spring data jpa 方法中可用的关键字</a> <span class="text-muted">lawrence.li</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a> <div>spring data jpa 支持以方法名进行查询/删除/统计。 查询的关键字为find 删除的关键字为delete/remove (>=1.7.x) 统计的关键字为count (>=1.7.x)   修改需要使用@Modifying注解 @Modifying @Query("update User u set u.firstna</div> </li> <li><a href="/article/3401.htm" title="Spring的ModelAndView类" target="_blank">Spring的ModelAndView类</a> <span class="text-muted">nicegege</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a> <div>项目中controller的方法跳转的到ModelAndView类，一直很好奇spring怎么实现的？ /* * Copyright 2002-2010 the original author or authors. * * Licensed under the Apache License, Version 2.0 (the "License"); * yo</div> </li> <li><a href="/article/3528.htm" title="搭建 CentOS 6 服务器(13) - rsync、Amanda" target="_blank">搭建 CentOS 6 服务器(13) - rsync、Amanda</a> <span class="text-muted">rensanning</span> <a class="tag" taget="_blank" href="/search/centos/1.htm">centos</a> <div>（一）rsync Server端 # yum install rsync # vi /etc/xinetd.d/rsync service rsync { disable = no flags = IPv6 socket_type = stream wait </div> </li> <li><a href="/article/3655.htm" title="Learn Nodejs 02" target="_blank">Learn Nodejs 02</a> <span class="text-muted">toknowme</span> <a class="tag" taget="_blank" href="/search/nodejs/1.htm">nodejs</a> <div>（1）npm是什么 npm is the package manager for node 官方网站：https://www.npmjs.com/ npm上有很多优秀的nodejs包，来解决常见的一些问题，比如用node-mysql，就可以方便通过nodejs链接到mysql，进行数据库的操作 在开发过程往往会需要用到其他的包，使用npm就可以下载这些包来供程序调用 &nb</div> </li> <li><a href="/article/3782.htm" title="Spring MVC 拦截器" target="_blank">Spring MVC 拦截器</a> <span class="text-muted">xp9802</span> <a class="tag" taget="_blank" href="/search/spring+mvc/1.htm">spring mvc</a> <div>Controller层的拦截器继承于HandlerInterceptorAdapter HandlerInterceptorAdapter.java  1  public   abstract   class  HandlerInterceptorAdapter  implements  HandlerIntercep</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>