一、了解组件、库、框架的区别?

前端框架、组件与库的区别（转）：https://blog.csdn.net/a519781181/article/details/78975689

二、Vue 是什么？

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架
声明式渲染-组件系统-客户端路由-集中式状态管理。。。

vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合

三、Vue基本使用

1、使用Vue将helloworld 渲染到页面上


    {{msg}}


// el: 标签选择器(css选择器)
// data: 模型数据

四、Vue模板语法

1、前端渲染三种方式

原生字符串拼接
模板引擎（art-template）
vue模板

2、vue模板语法组成

插值表达式
指令
事件绑定
属性绑定
样式绑定
分支循环结构

3、插值表达式

将数据填充到HTML标签中
插值表达式支持基本的计算操作
不能给属性绑定值

  {{ "Hello World" + 123 + "你好" }} 我是字符串

4、指令

本质就是标签的自定义属性
Vue中指定都是以 v- 开头（比如图片的 v-src ）

4.1、v-cloak（解决插值表达式闪烁问题）

插值表达式渲染的标签会有闪动的问题，vue先把表达式 {{xxx}} 显示在页面，再替换成该显示的内容
防止页面加载时出现闪烁问题


    2、 让带有插值语法的标签添加 v-cloak 属性，在数据渲染完之后，v-cloak 属性会被自动去除， 
     v-cloak一旦移除也就是没有这个属性了，属性选择器就选择不到该标签，
     也就是对应的标签会变为可见
{{msg}}

4.2、v-text （没有闪烁问题）

v-text 指令用于将数据填充到标签中，作用于插值表达式类似，但是没有闪动问题
如果数据中有HTML标签会将html标签一并输出（innerText）
注意：此处为单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的值


    注意:在指令中不要写插值语法，直接写对应的变量名称，在 v-text 中，赋值的时候不要在写 插值语法 
    一般属性中不加 {{}}  直接写 对应 的数据名 
    
    
        
        {{msg}}

4.3、v-html

用法和v-text 相似但是他可以将HTML片段填充到标签中
可能有安全问题, 一般只在可信任内容上使用 v-html，永不用在用户提交的内容上
它与v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当html标签解析后输出。


    
    输出：html标签在渲染的时候被解析

    {{message}}
    输出：通过双括号绑定

    
    输出：html标签在渲染的时候被源码输出

4.4、v-pre

显示原始信息，跳过编译过程
跳过这个元素和它的子元素的编译过程。
一些静态的内容不需要编译，加这个指令可以加快渲染

{{ this will not be compiled }}
显示的是{{ this will not be compiled }} 

{{msg}}
即使data里面定义了msg这里仍然显示 {{msg}}

总结：插值表达式、v-text、v-pre

插值表达式	v-text	v-html	v-pre
填充纯文本，支持简单计算	填充纯文本，语法简洁	填充HTML片段，存在安全问题，本网站内部数据可以用，第三方数据不可用	填充原始信息显示原始信息跳过vue编译成原生代码的过程
只能写在标签中间，不能给属性绑定值	会覆盖标签中原内容	会覆盖原内容

4.5、数据响应式

数据驱动内容变化,不需要显示地操作DOM

4.6、v-once

执行一次性的插值【当数据改变时，插值处的内容不会继续更新】
执行一次性的插值，数据响应式不起作用

即使data里面定义了msg 后期我们修改了 仍然显示的是第一次data里面存储的数据即 Hello Vue.js 

{{ msg }}

4.7、双向数据绑定

当数据发生变化的时候，视图也就发生变化
当视图发生变化的时候，数据也会跟着同步变化

4.8、v-model

v-model 是一个指令，限制在、</code></strong>、<strong><code>components</code></strong> 中使用</li> <li> <strong>v-model</strong> 默认是双向数据绑定</li> </ul> <pre><code><div id="app"> <div>{{msg}}</div> <div> 当输入框中内容改变的时候，数据模型中的mgs值会自动改变，而mgs值改变后，页面标签上的 msg 会自动更新 <input type="text" v-model='msg'> </div> </div> <script> let app = new Vue({　　 el: "#app", 　　data: {　　　　 msg: "Hello World" } }); </script> </code></pre> <h3>4.9、MVC和MVVM</h3> <ul> <li><p>MVC 是后端的分层开发概念； MVVM是前端视图层的概念，主要关注于视图层分离，也就是说：MVVM把前端的视图层，分为了三部分 Model、View 、ViewModel</p></li> <li> <p>M（Model）数据</p> <ul> <li>数据层，Vue 中数据层都放在 data 里面</li> </ul> </li> <li> <p>V（View）视图</p> <ul> <li>Vue 中 view 即我们的HTML页面</li> </ul> </li> <li> <p>VM （View-Model）控制器将数据和视图层建立联系</p> <ul> <li>Vue 的实例 vm 就是 viewModel</li> </ul> </li> </ul> <h4>4.10、v-on</h4> <ul> <li><p>用来绑定事件的</p></li> <li> <p>语法如：v-on:click=“事件名(参数1，参数2)” ，缩写为 @click</p> <pre><code><button v-on:click='handle1'>点击1</button> </code></pre> <p>或者：</p> <pre><code><button @click='handle1'>点击1</button> </code></pre> </li> <li> <p>事件传参写法：</p> <pre><code><button v-on:click='handle2(123, 456, $event)'>点击2</button> </code></pre> <p>或者：</p> <pre><code><button @click='handle2(123, 456, $event)'>点击2</button> </code></pre> </li> </ul> <h3>v-on事件函数写法</h3> <ul> <li>如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数</li> <li>如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，并且事件对象的名称必须是$event</li> </ul> <pre><code><div id="app"> <div>{{num}}</div> <div> 如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数 <button @click='handle1'>点击1</button> 如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，并且事件对象的名称必须是$event <button @click='handle2(123, 456, $event)'>点击2</button> </div> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> var vm = new Vue({ el: '#app', data: { num: 0 }, methods: { handle1: function(event) { // 默认传递event console.log(event.target.innerHTML) }, handle2: function(p, p1, event) { console.log(p, p1) console.log(event.target.innerHTML) this.num++; } } }); </script> </code></pre> <p><strong>注意：</strong></p> <blockquote> <ul> <li>vue中的event对象和原生的是相同的</li> <li>methods 是一个对象</li> <li>在methods中使用data中的数据需要加this.访问，this指向实例对象vm</li> <li>箭头函数会改变this指向</li> </ul> </blockquote> <h3>4.11、事件修饰符</h3> <ul> <li><p>在事件处理程序中调用 <code>event.preventDefault()</code> 或 <code>event.stopPropagation()</code> 是非常常见的需求。</p></li> <li><p>Vue 不推荐我们操作DOM 为了解决这个问题，Vue.js 为 <code>v-on</code> 提供了<strong>事件修饰符</strong></p></li> <li><p>修饰符是由点开头的指令后缀来表示的</p></li> </ul> <pre><code>阻止单击事件继续传播 <a @click.stop="doThis"></a> 提交事件不再重载页面 <form @submit.prevent="onSubmit"></form> 修饰符可以串联，即阻止冒泡也阻止默认事件 <a @click.stop.prevent="doThat"></a> 只当在 event.target 是当前元素自身时触发处理函数即事件不是从内部元素触发的 <div @click.self="doThat">...</div> 使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 @click.prevent.self 会阻止所有的点击，而 @click.self.prevent 只会阻止对元素自身的点击。 </code></pre> <h3>4.11、按键修饰符</h3> <ul> <li>在做项目中有时会用到键盘事件，在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 <code>v-on</code> 在监听键盘事件时添加按键修饰符</li> </ul> <pre><code>只有在 `keyCode` 是 13 时调用 `vm.submit()` <input v-on:keyup.13="submit"> 当点击enter 时调用 `vm.submit()` <input v-on:keyup.enter="submit"> 当点击enter或者space时时调用 `vm.alertMe()` <input type="text" v-on:keyup.enter.space="alertMe"> 常用的按键修饰符 .enter => enter键 .tab => tab键 .delete (捕获“删除”和“退格”按键) => 删除键 .esc => 取消键 .space => 空格键 .up => 上 .down => 下 .left => 左 .right => 右 <script> var vm = new Vue({ el: "#app", methods: { submit: function() {}, alertMe: function() {}, } }) </script> </code></pre> <h3>自定义按键修饰符别名</h3> <ul> <li>在Vue中可以通过<code>config.keyCodes</code>自定义按键修饰符别名</li> </ul> <pre><code><div id="app"> 预先定义了keycode 116（即F5）的别名为f5，因此在文字输入框中按下F5，会触发prompt方法 <input type="text" v-on:keydown.f5="prompt()"> </div> <script> Vue.config.keyCodes.f5 = 116; let app = new Vue({ el: '#app', methods: { prompt: function() { alert('我是 F5！'); } } }); </script> </code></pre> <h3>4.12、v-bind</h3> <ul> <li><p>v-bind 指令被用来响应地更新 HTML 属性</p></li> <li><p>v-bind:href 可以缩写为 :href;</p></li> </ul> <pre><code> <img v-bind:src="imageSrc">  <img :src="imageSrc"> </code></pre> <h4>绑定对象</h4> <ul> <li><p>我们可以给v-bind:class 一个对象，以动态地切换class。</p></li> <li><p>注意：v-bind:class指令可以与普通的class特性共存</p></li> <li><p>对象的键就是类名，值为true则显示，false则不显示</p></li> </ul> <pre><code>1、 v-bind 中支持绑定一个对象如果绑定的是一个对象则键为对应的类名值为对应data中的数据  <style> .box { border: 1px dashed #f0f; } .textColor { color: #f00; background-color: #eef; } .textSize { font-size: 30px; font-weight: bold; } </style> <ul class="box" v-bind:class="{textColor:isColor, textSize:isSize}"> <li>学习Vue</li> <li>学习Node</li> <li>学习React</li> </ul> <div v-bind:style="{color:activeColor,fontSize:activeSize}">对象语法</div> <script src="./vue.js"></script> <script> var vm = new Vue({ el:'.box', data:{ isColor:true, isSize:true, activeColor:"red", activeSize:"25px" } }); </script> </code></pre> <h4>绑定class</h4> <pre><code>2、 v-bind 中支持绑定一个数组数组中的 classA 对应data 中的 classA , classB 对应data 中的 classB <ul class="box" :class="[classA, classB]"> <li>学习Vue</li> <li>学习Node</li> <li>学习React</li> </ul> <script> var vm = new Vue({ el: '.box', data: { classA: ‘textColor‘, classB: ‘textSize‘ } }) </script> <style> .box { border: 1px dashed #f0f; } .textColor { color: #f00; background-color: #eef; } .textSize { font-size: 30px; font-weight: bold; } </style> </code></pre> <h4>绑定对象和绑定数组的区别</h4> <ul> <li><p>绑定对象的时候对象的属性即要渲染的类名对象的属性值对应的是 data 中的数据</p></li> <li><p>绑定数组的时候数组里面存的是data 中的数据</p></li> </ul> <p><strong>样式绑定相关语法细节：</strong></p> <ul> <li>对象绑定和数组绑定可以结合使用</li> <li>class绑定的值可以简化操作</li> <li>默认的class会保留</li> </ul> <h4>绑定style（行内样式）</h4> <pre><code><div v-bind:style="styleObject">绑定样式对象</div> CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用单引号括起来) <div v-bind:style="{ color: activeColor, fontSize: fontSize, background:'red' }">内联样式</div> 组语法可以将多个样式对象应用到同一个元素 <div v-bind:style="[styleObj1, styleObj2]"></div> <script> new Vue({ el: '#app', data: { styleObject: { color: 'green', fontSize: '30px', background: 'red' }, activeColor: 'green', fontSize: "30px" }, styleObj1: { color: 'red' }, styleObj2: { fontSize: '30px' } }) </script> </code></pre> <h3>4.13、分支结构</h3> <h4>v-if 使用场景</h4> <ul> <li><p>1- 多个元素通过条件判断展示或者隐藏某个元素。或者多个元素</p></li> <li><p>2- 进行两个视图之间的切换</p></li> </ul> <pre><code><div id="app">  <span v-if="flag"> 如果flag为true则显示,false不显示! </span> </div> <script> var vm = new Vue({ el:"#app", data:{ flag:true } }) </script> ---------------------------------------------------------- <div v-if="type === 'A'"> A </div>  <div v-else-if="type === 'B'"> B </div> <div v-else-if="type === 'C'"> C </div>  <div v-else> Not A/B/C </div> <script> new Vue({ el: '#app', data: { type: 'C' } }) </script> </code></pre> <h4>v-show 和 v-if的区别</h4> <ul> <li> <p><strong><em>v-show</em></strong>本质就是标签display设置为none，控制隐藏</p> <ul> <li> <strong><em>v-show</em></strong> 只编译一次，后面其实就是控制css，而 <strong><em>v-if</em></strong> 不停的销毁和创建，故v-show性能更好一点。</li> </ul> </li> <li> <p><strong><em>v-if</em></strong> 是动态的向DOM树内添加或者删除DOM元素</p> <ul> <li> <strong><em>v-if</em></strong> 切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件</li> </ul> </li> </ul> <h3>4.14、循环结构</h3> <h4>v-for</h4> <ul> <li>用于循环的数组里面的值可以是对象，也可以是普通元素</li> </ul> <pre><code><ul id="example-1">  <li v-for="item in items"> {{ item.message }} </li> </ul> <script> new Vue({ el: '#example-1', data: { items: [ { message: 'Foo' }, { message: 'Bar' } ]， } }) </script> </code></pre> <ul> <li><p><strong>不推荐</strong>同时使用 <code>v-if</code> 和 <code>v-for</code></p></li> <li><p>当 <code>v-if</code> 与 <code>v-for</code> 一起使用时，<code>v-for</code> 具有比 <code>v-if</code> 更高的优先级。</p></li> </ul> <pre><code>  <div v-if='v==13' v-for='(v,k,i) in obj'>{{v + '---' + k + '---' + i}}</div> <script> new Vue({ el: '#example-1', data: { items: [ { message: 'Foo' }, { message: 'Bar' } ]， obj: { uname: 'zhangsan', age: 13, gender: 'female' } } }) </script> </code></pre> <ul> <li> <p>key 的作用</p> <ul> <li><p><strong>key来给每个节点做一个唯一标识</strong></p></li> <li><p><strong>key的作用主要是为了高效的更新虚拟DOM</strong></p></li> </ul> </li> </ul> <pre><code><ul> <li v-for="item in items" :key="item.id">...</li> </ul> </code></pre> <h3>案例选项卡</h3> <h4>1、 HTML 结构</h4> <pre><code>` <div id="app"> <div class="tab">  <ul> <li class="active">apple</li> <li class="">orange</li> <li class="">lemon</li> </ul>  <div class="current"><img src="img/apple.png"></div> <div class=""><img src="img/orange.png"></div> <div class=""><img src="img/lemon.png"></div> </div> </div> ` </code></pre> <h4>2、提供的数据</h4> <pre><code> list: [{ id: 1, title: 'apple', path: 'img/apple.png' }, { id: 2, title: 'orange', path: 'img/orange.png' }, { id: 3, title: 'lemon', path: 'img/lemon.png' }] </code></pre> <h4>3、把数据渲染到页面</h4> <ul> <li> <p>把tab栏中的数替换到页面上</p> <ul> <li><p>把 data 中 title 利用 v-for 循环渲染到页面上</p></li> <li><p>把 data 中 path利用 v-for 循环渲染到页面上</p></li> </ul> </li> </ul> <pre><code> <div id="app"> <div class="tab"> <ul>  <li :key='item.id' v-for='(item,index) in list'>{{item.title}}</li> </ul> <div :key='item.id' v-for='(item, index) in list'>  <img :src="item.path"> </div> </div> </div> <script> new Vue({ // 指定操作元素是 id 为app 的 el: '#app', data: { list: [{ id: 1, title: 'apple', path: 'img/apple.png' }, { id: 2, title: 'orange', path: 'img/orange.png' }, { id: 3, title: 'lemon', path: 'img/lemon.png' }] } }) </script> </code></pre> <h4>4、给每一个tab栏添加事件,并让选中的高亮</h4> <ul> <li> <p>4.1 、让默认的第一项tab栏高亮</p> <ul> <li> <p>tab栏高亮通过添加类名active 来实现（CSS active 的样式已经提前写好）</p> <ul> <li><p>在data 中定义一个默认的索引 currentIndex 为 0</p></li> <li> <p>给第一个li 添加 active 的类名</p> <ul> <li><p>通过动态绑定class 来实现第一个li 的索引为 0 和 currentIndex 的值刚好相等</p></li> <li><p>currentIndex === index 如果相等则添加类名 active 否则添加空类名</p></li> </ul> </li> </ul> </li> </ul> </li> <li> <p>4.2 、让默认的第一项tab栏对应的div 显示</p> <ul> <li>实现思路和第一个 tab 实现思路一样只不过这里控制第一个div 显示的类名是 current</li> </ul> </li> </ul> <pre><code> <ul>  <li :class='currentIndex==index?"active":""' :key='item.id' v-for='(item,index) in list' >{{item.title}}</li> </ul>  <div :class='currentIndex==index?"current":""' :key='item.id' v-for='(item, index) in list'>  <img :src="item.path"> </div> <script> new Vue({ el: '#app', data: { currentIndex: 0, // 选项卡当前的索引默认为 0 list: [{ id: 1, title: 'apple', path: 'img/apple.png' }, { id: 2, title: 'orange', path: 'img/orange.png' }, { id: 3, title: 'lemon', path: 'img/lemon.png' }] } }) </script> </code></pre> <ul> <li> <p>4.3 、点击每一个tab栏当前的高亮其他的取消高亮</p> <ul> <li><p>给每一个li添加点击事件</p></li> <li><p>让当前的索引 index 和当前 currentIndex 的值进项比较</p></li> <li><p>如果相等则当前li 添加active 类名当前的 li 高亮当前对应索引的 div 添加 current 当前div 显示其他隐藏</p></li> </ul> </li> </ul> </article> </div> </div> </div>  <div id="SOHUCS" sid="1394302358695006208"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script>  <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad">  <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div>  <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div>  <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(Vue-基础语法（一）)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1943993659967991808.htm" title="系统学习Python——并发模型和异步编程：进程、线程和GIL" target="_blank">系统学习Python——并发模型和异步编程：进程、线程和GIL</a> <span class="text-muted"></span> <div>分类目录：《系统学习Python》总目录在文章《并发模型和异步编程：基础知识》我们简单介绍了Python中的进程、线程和协程。本文就着重介绍Python中的进程、线程和GIL的关系。Python解释器的每个实例都是一个进程。使用multiprocessing或concurrent.futures库可以启动额外的Python进程。Python的subprocess库用于启动运行外部程序（不管使用何种</div> </li> <li><a href="/article/1943993281092317184.htm" title="为什么会出现“与此站点的连接不安全”警告？" target="_blank">为什么会出现“与此站点的连接不安全”警告？</a> <span class="text-muted"></span> <div>当浏览器弹出“与此站点的连接不安全”的红色警告时，不仅会让访客感到不安，还可能直接导致用户流失、品牌信誉受损，甚至引发数据泄露风险。作为网站运营者，如何快速解决这一问题？一、为什么会出现“与此站点的连接不安全”警告？浏览器提示“不安全连接”，本质上是检测到当前网站与用户之间的数据传输未经过加密保护。以下是触发警告的常见原因：1.未安装SSL证书SSL（SecureSocketsLayer）证书是网</div> </li> <li><a href="/article/1943993028356141056.htm" title="有必要获得WHQL测试认证吗，有什么好处？" target="_blank">有必要获得WHQL测试认证吗，有什么好处？</a> <span class="text-muted"></span> <div>什么是WHQL认证？WHQL是MicrosoftWindowsHardwareQualityLab的缩写，中文意思是Windows硬件设备质量实验室，主要是对Windows操作系统的兼容性测试，检验硬件产品和驱动程序在windows系统下的兼容性和稳定性。当某一硬件或软件通过WHQL测试时，制造商可以在其产品包装和广告上使用“DesignedforWindows”标志。该标志可以证明硬件或软件已经</div> </li> <li><a href="/article/1943992776169418752.htm" title="Flask框架入门：快速搭建轻量级Python网页应用" target="_blank">Flask框架入门：快速搭建轻量级Python网页应用</a> <span class="text-muted">「已注销」</span> <a class="tag" taget="_blank" href="/search/python-AI/1.htm">python-AI</a><a class="tag" taget="_blank" href="/search/python%E5%9F%BA%E7%A1%80/1.htm">python基础</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%AB%99%E7%BD%91%E7%BB%9C/1.htm">网站网络</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/flask/1.htm">flask</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a> <div>转载：Flask框架入门：快速搭建轻量级Python网页应用1.Flask基础Flask是一个使用Python编写的轻量级Web应用框架。它的设计目标是让Web开发变得快速简单，同时保持应用的灵活性。Flask依赖于两个外部库：Werkzeug和Jinja2，Werkzeug作为WSGI工具包处理Web服务的底层细节，Jinja2作为模板引擎渲染模板。安装Flask非常简单，可以使用pip安装命令</div> </li> <li><a href="/article/1943992397344075776.htm" title="驱动程序为什么要做 WHQL 认证?" target="_blank">驱动程序为什么要做 WHQL 认证?</a> <span class="text-muted">GDCA SSL证书</span> <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/%E7%BD%91%E7%BB%9C/1.htm">网络</a> <div>驱动程序进行WHQL（WindowsHardwareQualityLabs）认证的核心价值在于解决兼容性、安全性和市场准入三大关键问题，具体必要性如下：️‌一、规避系统拦截，保障驱动可用性‌消除安装警告‌未认证的驱动在安装时会触发Windows的‌红色安全警告‌（如“无法验证发布者”），甚至被系统强制拦截。通过WHQL认证的驱动获得微软数字签名，用户可无阻安装‌。满足系统强制要求‌Windows1</div> </li> <li><a href="/article/1943992398082273280.htm" title="求是网：“内卷式”竞争的突出表现和主要危害有哪些？" target="_blank">求是网：“内卷式”竞争的突出表现和主要危害有哪些？</a> <span class="text-muted">加百力</span> <a class="tag" taget="_blank" href="/search/%E8%B4%A2%E7%BB%8F%E7%A0%94%E7%A9%B6/1.htm">财经研究</a><a class="tag" taget="_blank" href="/search/%E7%A7%91%E6%8A%80%E7%9F%A5%E8%AF%86/1.htm">科技知识</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/%E5%A4%A7%E6%95%B0%E6%8D%AE/1.htm">大数据</a> <div>"内卷式"竞争主要表现为：企业层面的低价竞争、同质化竞争和营销"逐底竞争"；地方政府层面的违规优惠政策、盲目重复建设和设置市场壁垒。危害体现在三个层面：微观上导致"劣币驱逐良币"，损害消费者利益；中观上破坏行业生态，挤压产业链利润空间；宏观上扭曲资源配置，抑制创新活力。什么是“内卷式”竞争？概括其一般特征，是指经济主体为了维持市场地位或争夺有限市场，不断投入大量精力和资源，却没有带来整体收益增长的</div> </li> <li><a href="/article/1943992396924645376.htm" title="WHQL签名怎么申请" target="_blank">WHQL签名怎么申请</a> <span class="text-muted">GDCA SSL证书</span> <a class="tag" taget="_blank" href="/search/windows/1.htm">windows</a> <div>WHQL（WindowsHardwareQualityLabs）签名是微软对硬件和驱动程序进行认证的一种方式，以确保它们与Windows操作系统的兼容性和稳定性。以下是申请WHQL签名的基本步骤，供您参考：1.准备阶段准备硬件设备和驱动程序：确保您的硬件设备已经准备好，并且对应的驱动程序已经经过充分的测试，能够在各种配置和环境下正常工作。获取EV代码签名证书：根据微软的要求，驱动程序进行WHQL认</div> </li> <li><a href="/article/1943992018892025856.htm" title="JSON 与 AJAX" target="_blank">JSON 与 AJAX</a> <span class="text-muted">Auscy</span> <a class="tag" taget="_blank" href="/search/json/1.htm">json</a><a class="tag" taget="_blank" href="/search/ajax/1.htm">ajax</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>一、JSON（JavaScriptObjectNotation）1.数据类型与语法细节支持的数据类型：基本类型：字符串（需用双引号）、数字、布尔值（true/false）、null。复杂类型：数组（[]）、对象（{}）。严格语法规范：键名必须用双引号包裹（如"name":"张三"）。数组元素用逗号分隔，最后一个元素后不能有多余逗号。数字不能以0开头（如012会被解析为12），不支持八进制/十六进制</div> </li> <li><a href="/article/1943992018111885312.htm" title="发票合并工具" target="_blank">发票合并工具</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/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a> <div>"发票合并工具"是一款专为高效整理票据设计的实用工具，支持将来自不同渠道的发票文件（如PDF文档、各类图片格式）快速整合为排版规范的PDF文件，尤其适用于财务报销场景下的批量票据处理需求。核心功能亮点多格式兼容：无缝导入PDF文件及常见图片格式（.png/.jpg/.jpeg/.bmp），适配多来源发票整合需求。智能布局配置：提供灵活的页面布局选项（每页2/3/4张发票），其中"2合1"模式针对报</div> </li> <li><a href="/article/1943991891796226048.htm" title="Python Flask 框架入门：快速搭建 Web 应用的秘诀" target="_blank">Python Flask 框架入门：快速搭建 Web 应用的秘诀</a> <span class="text-muted">Python编程之道</span> <a class="tag" taget="_blank" href="/search/Python%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD%E4%B8%8E%E5%A4%A7%E6%95%B0%E6%8D%AE/1.htm">Python人工智能与大数据</a><a class="tag" taget="_blank" href="/search/Python%E7%BC%96%E7%A8%8B%E4%B9%8B%E9%81%93/1.htm">Python编程之道</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/flask/1.htm">flask</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/ai/1.htm">ai</a> <div>PythonFlask框架入门：快速搭建Web应用的秘诀关键词Flask、微框架、路由系统、Jinja2模板、请求处理、WSGI、Web开发摘要想快速用Python搭建一个灵活的Web应用？Flask作为“微框架”代表，凭借轻量、可扩展的特性，成为初学者和小型项目的首选。本文将从Flask的核心概念出发，结合生活化比喻、代码示例和实战案例，带你一步步掌握：如何用Flask搭建第一个Web应用？路由</div> </li> <li><a href="/article/1943991262029869056.htm" title="C++ 11 Lambda表达式和min_element()与max_element()的使用_c++ lamda函数 min_element(" target="_blank">C++ 11 Lambda表达式和min_element()与max_element()的使用_c++ lamda函数 min_element(</a> <span class="text-muted"></span> <div>网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化的资料的朋友，可以添加戳这里获取一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！intmain(){vectormyvec{3,</div> </li> <li><a href="/article/1943991008740044800.htm" title="上位机知识篇---SD卡&U盘镜像" target="_blank">上位机知识篇---SD卡&U盘镜像</a> <span class="text-muted"></span> <div>常用的镜像烧录软件balenaEtcherbalenaEtcher是一个开源的、跨平台的工具，用于将操作系统镜像文件（如ISO和IMG文件）烧录到SD卡和USB驱动器中。以下是其使用方法、使用场景和使用注意事项的介绍：使用方法下载安装：根据自己的操作系统，从官方网站下载对应的安装包。Windows系统下载.exe文件后双击安装；Linux系统若下载的是.deb文件，可在终端执行“sudodpkg-</div> </li> <li><a href="/article/1943990630690648064.htm" title="【LeetCode 热题 100】24. 两两交换链表中的节点——（解法一）迭代+哨兵" target="_blank">【LeetCode 热题 100】24. 两两交换链表中的节点——（解法一）迭代+哨兵</a> <span class="text-muted">xumistore</span> <a class="tag" taget="_blank" href="/search/LeetCode/1.htm">LeetCode</a><a class="tag" taget="_blank" href="/search/leetcode/1.htm">leetcode</a><a class="tag" taget="_blank" href="/search/%E9%93%BE%E8%A1%A8/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/java/1.htm">java</a> <div>Problem:24.两两交换链表中的节点题目：给你一个链表，两两交换其中相邻的节点，并返回交换后链表的头节点。你必须在不修改节点内部的值的情况下完成本题（即，只能进行节点交换）。文章目录整体思路完整代码时空复杂度时间复杂度：O(N)空间复杂度：O(1)整体思路这段代码旨在解决一个经典的链表操作问题：两两交换链表中的节点(SwapNodesinPairs)。问题要求将链表中每两个相邻的节点进行交换</div> </li> <li><a href="/article/1943990629709180928.htm" title="Guava LoadingCache" target="_blank">Guava LoadingCache</a> <span class="text-muted">sqyaa.</span> <a class="tag" taget="_blank" href="/search/java%E5%B9%B6%E5%8F%91%E7%BC%96%E7%A8%8B/1.htm">java并发编程</a><a class="tag" taget="_blank" href="/search/Java%E7%9F%A5%E8%AF%86/1.htm">Java知识</a><a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a><a class="tag" taget="_blank" href="/search/%E7%BC%93%E5%AD%98/1.htm">缓存</a><a class="tag" taget="_blank" href="/search/guava/1.htm">guava</a> <div>LoadingCache是GoogleGuava库提供的一个高级缓存实现，它通过自动加载机制简化了缓存使用模式。核心特性自动加载机制当缓存未命中时，自动调用指定的CacheLoader加载数据线程安全：并发请求下，相同key只会加载一次灵活的过期策略支持基于写入时间(expireAfterWrite)和访问时间(expireAfterAccess)的过期可设置最大缓存大小，基于LRU策略淘汰丰富的</div> </li> <li><a href="/article/1943990125864218624.htm" title="JavaScript 树形菜单总结" target="_blank">JavaScript 树形菜单总结</a> <span class="text-muted">Auscy</span> <a class="tag" taget="_blank" href="/search/microsoft/1.htm">microsoft</a> <div>树形菜单是前端开发中常见的交互组件，用于展示具有层级关系的数据（如文件目录、分类列表、组织架构等）。以下从核心概念、实现方式、常见功能及优化方向等方面进行总结。一、核心概念层级结构：数据以父子嵌套形式存在，如{id:1,children:[{id:2}]}。节点：树形结构的基本单元，包含自身信息及子节点（若有）。展开/折叠：子节点的显示与隐藏切换，是树形菜单的核心交互。递归渲染：因数据层级不固定，</div> </li> <li><a href="/article/1943989243923722240.htm" title="基于定制开发开源AI智能名片S2B2C商城小程序的社群游戏定制策略研究" target="_blank">基于定制开发开源AI智能名片S2B2C商城小程序的社群游戏定制策略研究</a> <span class="text-muted">说私域</span> <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/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a><a class="tag" taget="_blank" href="/search/%E6%B8%B8%E6%88%8F/1.htm">游戏</a> <div>摘要：本文聚焦社群游戏定制领域，深入探讨以社群文化和用户偏好为导向的定制策略。通过分析互动游戏活动、社群文化塑造等关键要素，结合定制开发开源AI智能名片S2B2C商城小程序的技术特性，提出针对性游戏定制方案。研究旨在提升社群用户参与度与游戏体验，为社群游戏发展提供理论支持与实践指导。关键词：社群游戏定制；定制开发开源AI智能名片S2B2C商城小程序；社群文化；用户偏好一、引言在数字化社交蓬勃发展的</div> </li> <li><a href="/article/1943988865945628672.htm" title="Leetcode 148. 排序链表" target="_blank">Leetcode 148. 排序链表</a> <span class="text-muted"></span> <div>文章目录前引题目代码（首刷看题解）代码（8.9二刷部分看解析）代码（9.15三刷部分看解析）前引综合性比较强的一道题，要求时间复杂度必须O(logn)才能通过，最适合链表的排序算法就是归并。这里采用自顶向下的方法步骤：找到链表中点（双指针）对两个子链表排序(递归，直到只有一个结点，记得将子链表最后指向nullptr）归并（引入dummy结点）题目Leetcode148.排序链表代码（首刷看题解）c</div> </li> <li><a href="/article/1943988487875260416.htm" title="python_虚拟环境" target="_blank">python_虚拟环境</a> <span class="text-muted">阿_焦</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>第一、配置虚拟环境：virtualenv（1）pipvirtualenv>安装虚拟环境包（2）pipinstallvirtualenvwrapper-win>安装虚拟环境依赖包（3）c盘创建虚拟目录>C:\virtualenv>配置环境变量【了解一下】：（1）如何使用virtualenv创建虚拟环境a、cd到C:\virtualenv目录下：b、mkvirtualenvname>创建虚拟环境nam</div> </li> <li><a href="/article/1943988486428225536.htm" title="全面触摸屏输入法设计与实现" target="_blank">全面触摸屏输入法设计与实现</a> <span class="text-muted">长野君</span> <div>本文还有配套的精品资源，点击获取简介：触摸屏输入法是针对触摸设备优化的文字输入方案，包括虚拟键盘、手写、语音识别和手势等多种输入方式。本方案通过提供主程序文件、用户手册、界面截图、示例图、说明文本和音效文件，旨在为用户提供一个完整的、多样的文字输入体验。开发者通过持续优化算法和用户界面，使用户在无物理键盘环境下也能高效准确地进行文字输入。1.触摸屏输入法概述简介在现代信息技术飞速发展的今天，触摸屏</div> </li> <li><a href="/article/1943988486843461632.htm" title="LeetCode 148. 排序链表：归并排序的细节解析" target="_blank">LeetCode 148. 排序链表：归并排序的细节解析</a> <span class="text-muted">进击的小白菜</span> <a class="tag" taget="_blank" href="/search/2025/1.htm">2025</a><a class="tag" taget="_blank" href="/search/Top100/1.htm">Top100</a><a class="tag" taget="_blank" href="/search/%E8%AF%A6%E8%A7%A3/1.htm">详解</a><a class="tag" taget="_blank" href="/search/leetcode/1.htm">leetcode</a><a class="tag" taget="_blank" href="/search/%E9%93%BE%E8%A1%A8/1.htm">链表</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a> <div>文章目录题目描述一、方法思路：归并排序的核心步骤二、关键实现细节：快慢指针分割链表1.快慢指针的初始化问题2.为什么选择`fast=head.next`？示例1：链表长度为偶数（`1->2->3->4`）三、完整代码实现四、复杂度分析五、总结题目描述LeetCode148题要求对链表进行排序，时间复杂度需为O(nlogn)，且空间复杂度为O(logn)。由于链表的特殊结构（无法随机访问），归并排序</div> </li> <li><a href="/article/1943987856808669184.htm" title="前端项目架构设计要领" target="_blank">前端项目架构设计要领</a> <span class="text-muted"></span> <div>1.架构设计的核心目标在设计前端项目架构时，核心目标是模块化、可维护、可扩展、可测试，以及开发效率的最大化。这些目标可以通过以下几个方面来实现：组件化：将UI功能封装为可复用的组件。模块化：将业务逻辑分解为独立的模块或服务。自动化构建与部署：实现自动化构建、测试和部署流程，减少人为操作的错误。代码规范化与检查：确保团队协作时，代码风格和质量一致。2.项目目录结构设计一个清晰合理的目录结构对大型项目</div> </li> <li><a href="/article/1943987101301272576.htm" title="精通Canvas：15款时钟特效代码实现指南" target="_blank">精通Canvas：15款时钟特效代码实现指南</a> <span class="text-muted">烟幕缭绕</span> <div>本文还有配套的精品资源，点击获取简介：HTML5的Canvas是一个用于绘制矢量图形的API，通过JavaScript实现动态效果。本项目集合了15种不同的时钟特效代码，帮助开发者通过学习绘制圆形、线条、时间更新、旋转、颜色样式设置及动画效果等概念，深化对Canvas的理解和应用。项目中的CSS文件负责时钟的样式设定，而JS文件则包含实现各种特效的逻辑，通过不同的函数或类处理时间更新和动画绘制，提</div> </li> <li><a href="/article/1943986975048527872.htm" title="高效批量单词翻译工具的设计与应用" target="_blank">高效批量单词翻译工具的设计与应用</a> <span class="text-muted"></span> <div>本文还有配套的精品资源，点击获取简介：在信息技术飞速发展的今天，批量单词翻译工具通过计算机的数据处理能力，大大提高了语言学习和文字处理的效率。用户通过简单输入单词列表到一个文本文件，并运行翻译程序，即可获得翻译结果并保存至指定文件。该工具集成了内置或外部翻译引擎，利用自然语言处理技术实现快速准确的翻译，并可能提供词性识别等附加功能。尽管机器翻译无法完全取代人工校对，但它为用户提供了一种高效的翻译解</div> </li> <li><a href="/article/1943986471220342784.htm" title="嵌入式系统LCD显示模块编程实践" target="_blank">嵌入式系统LCD显示模块编程实践</a> <span class="text-muted"></span> <div>本文还有配套的精品资源，点击获取简介：本文档提供了一个具有800x480分辨率的3.5英寸液晶显示模块LW350AC9001的驱动程序代码，以及嵌入式系统中使用C/C++语言进行硬件编程的实践指南。该模块的2mm厚度使其适用于空间受限的便携式设备。内容包括驱动程序源代码、硬件控制接口使用方法，以及如何在嵌入式系统中进行图形处理、电源管理与性能优化。1.嵌入式系统原理1.1嵌入式系统概念嵌入式系统是</div> </li> <li><a href="/article/1943985460749594624.htm" title="FPGA小白到项目实战：Verilog+Vivado全流程通关指南（附光学类岗位技能映射）" target="_blank">FPGA小白到项目实战：Verilog+Vivado全流程通关指南（附光学类岗位技能映射）</a> <span class="text-muted">阿牛的药铺</span> <a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95%E7%A7%BB%E6%A4%8D%E9%83%A8%E7%BD%B2/1.htm">算法移植部署</a><a class="tag" taget="_blank" href="/search/fpga%E5%BC%80%E5%8F%91/1.htm">fpga开发</a><a class="tag" taget="_blank" href="/search/verilog/1.htm">verilog</a> <div>FPGA小白到项目实战：Verilog+Vivado全流程通关指南（附光学类岗位技能映射）引言：为什么这个FPGA入门路线能帮你快速上岗？本文设计了一条**"Verilog语法→工具链操作→光学项目实战→岗位技能对标"的阶梯式学习路径。不同于泛泛而谈的FPGA教程，我们聚焦光学类产品开发**核心能力（时序接口设计、图像处理算法移植、高速接口应用），通过3个递进式项目（从LED闪烁到图像边缘检测），</div> </li> <li><a href="/article/1943985461282271232.htm" title="PyTorch & TensorFlow速成复习：从基础语法到模型部署实战（附FPGA移植衔接）" target="_blank">PyTorch & TensorFlow速成复习：从基础语法到模型部署实战（附FPGA移植衔接）</a> <span class="text-muted">阿牛的药铺</span> <a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95%E7%A7%BB%E6%A4%8D%E9%83%A8%E7%BD%B2/1.htm">算法移植部署</a><a class="tag" taget="_blank" href="/search/pytorch/1.htm">pytorch</a><a class="tag" taget="_blank" href="/search/tensorflow/1.htm">tensorflow</a><a class="tag" taget="_blank" href="/search/fpga%E5%BC%80%E5%8F%91/1.htm">fpga开发</a> <div>PyTorch&TensorFlow速成复习：从基础语法到模型部署实战（附FPGA移植衔接）引言：为什么算法移植工程师必须掌握框架基础？针对光学类产品算法FPGA移植岗位需求（如可见光/红外图像处理），深度学习框架是算法落地的"桥梁"——既要用PyTorch/TensorFlow验证算法可行性，又要将训练好的模型（如CNN、目标检测）转换为FPGA可部署的格式（ONNX、TFLite）。本文采用"</div> </li> <li><a href="/article/1943985461995302912.htm" title="22、文档：Google Docs的强大与易用性" target="_blank">22、文档：Google Docs的强大与易用性</a> <span class="text-muted">pear55</span> <a class="tag" taget="_blank" href="/search/%E6%8E%A2%E7%B4%A2%E4%BA%91%E6%8A%80%E6%9C%AF%E7%9A%84%E6%97%A0%E9%99%90%E5%8F%AF%E8%83%BD/1.htm">探索云技术的无限可能</a><a class="tag" taget="_blank" href="/search/Google/1.htm">Google</a><a class="tag" taget="_blank" href="/search/Docs/1.htm">Docs</a><a class="tag" taget="_blank" href="/search/%E4%BA%91%E7%AB%AF%E6%96%87%E6%A1%A3/1.htm">云端文档</a><a class="tag" taget="_blank" href="/search/%E8%AF%AD%E9%9F%B3%E8%BE%93%E5%85%A5/1.htm">语音输入</a> <div>文档：GoogleDocs的强大与易用性1.GoogleDocs简介GoogleDocs是Google提供的在线办公套件的一部分，它是一个基于云端的文字处</div> </li> <li><a href="/article/1943985208697090048.htm" title="Python流星雨" target="_blank">Python流星雨</a> <span class="text-muted">Want595</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>文章目录系列文章写在前面技术需求完整代码代码分析1.模块导入2.画布设置3.画笔设置4.颜色列表5.流星类(Star)6.流星对象创建7.主循环8.流星运动逻辑9.视觉效果10.总结写在后面系列文章序号直达链接表白系列1Python制作一个无法拒绝的表白界面2Python满屏飘字表白代码3Python无限弹窗满屏表白代码4Python李峋同款可写字版跳动的爱心5Python流星雨代码6Python</div> </li> <li><a href="/article/1943984578133815296.htm" title="Android ViewBinding 使用与封装教程" target="_blank">Android ViewBinding 使用与封装教程</a> <span class="text-muted">积跬步DEV</span> <a class="tag" taget="_blank" href="/search/Android/1.htm">Android</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E5%AE%9E%E6%88%98%E5%A4%A7%E5%85%A8/1.htm">开发实战大全</a><a class="tag" taget="_blank" href="/search/android/1.htm">android</a> <div>AndroidViewBinding使用与封装教程：一、ViewBinding是什么？核心功能：为每个XML布局文件自动生成一个绑定类（如ActivityMainBinding），直接暴露所有带ID的视图引用。优点：避免繁琐的findViewById()，类型安全且编译时检查。对比DataBinding：ViewBinding仅处理视图引用，无数据绑定功能。DataBinding支持双向数据绑定，</div> </li> <li><a href="/article/1943984451734269952.htm" title="理解TCP连接中的进程阻塞与CPU调度机制" target="_blank">理解TCP连接中的进程阻塞与CPU调度机制</a> <span class="text-muted">109702008</span> <a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a><a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/C%E8%AF%AD%E8%A8%80/1.htm">C语言</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a><a class="tag" taget="_blank" href="/search/tcp%2Fip/1.htm">tcp/ip</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a> <div>引言在计算机网络通信中，TCP连接的建立是一个经典的三次握手过程。当用户调用connect()函数发起连接时，内核会发送SYN报文并等待对方的SYN-ACK响应。此时，调用进程通常会进入阻塞状态，暂停执行直至连接成功或超时。这一机制看似简单，但其背后的内核实现却涉及进程调度、等待队列管理和CPU资源分配等复杂操作。本文将深入探讨阻塞状态的实现原理，并解析CPU在进程阻塞期间的行为。一、进程阻塞的实</div> </li> <li><a href="/article/82.htm" title="java类加载顺序" target="_blank">java类加载顺序</a> <span class="text-muted">3213213333332132</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>package com.demo; /** * @Description 类加载顺序 * @author FuJianyong * 2015-2-6上午11:21:37 */ public class ClassLoaderSequence { String s1 = "成员属性"; static String s2 = "</div> </li> <li><a href="/article/209.htm" title="Hibernate与mybitas的比较" target="_blank">Hibernate与mybitas的比较</a> <span class="text-muted">BlueSkator</span> <a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/Hibernate/1.htm">Hibernate</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><a class="tag" taget="_blank" href="/search/orm/1.htm">orm</a> <div>第一章 Hibernate与MyBatis Hibernate 是当前最流行的O/R mapping框架，它出身于sf.net，现在已经成为Jboss的一部分。 Mybatis 是另外一种优秀的O/R mapping框架。目前属于apache的一个子项目。 MyBatis 参考资料官网：http:</div> </li> <li><a href="/article/336.htm" title="php多维数组排序以及实际工作中的应用" target="_blank">php多维数组排序以及实际工作中的应用</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/usort/1.htm">usort</a><a class="tag" taget="_blank" href="/search/uasort/1.htm">uasort</a> <div>自定义排序函数返回false或负数意味着第一个参数应该排在第二个参数的前面, 正数或true反之, 0相等usort不保存键名uasort 键名会保存下来uksort 排序是对键名进行的 <!doctype html> <html lang="en"> <head> <meta charset="utf-8&q</div> </li> <li><a href="/article/463.htm" title="DOM改变字体大小" target="_blank">DOM改变字体大小</a> <span class="text-muted">周华华</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&q</div> </li> <li><a href="/article/590.htm" title="c3p0的配置" target="_blank">c3p0的配置</a> <span class="text-muted">g21121</span> <a class="tag" taget="_blank" href="/search/c3p0/1.htm">c3p0</a> <div>c3p0是一个开源的JDBC连接池，它实现了数据源和JNDI绑定，支持JDBC3规范和JDBC2的标准扩展。c3p0的下载地址是：http://sourceforge.net/projects/c3p0/这里可以下载到c3p0最新版本。以在spring中配置dataSource为例：  <bean name="prope</div> </li> <li><a href="/article/717.htm" title="Java获取工程路径的几种方法" target="_blank">Java获取工程路径的几种方法</a> <span class="text-muted">510888780</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>第一种： File f = new File(this.getClass().getResource("/").getPath()); System.out.println(f); 结果: C:\Documents%20and%20Settings\Administrator\workspace\projectName\bin 获取当前类的所在工程路径; 如果不加“</div> </li> <li><a href="/article/844.htm" title="在类Unix系统下实现SSH免密码登录服务器" target="_blank">在类Unix系统下实现SSH免密码登录服务器</a> <span class="text-muted">Harry642</span> <a class="tag" taget="_blank" href="/search/%E5%85%8D%E5%AF%86/1.htm">免密</a><a class="tag" taget="_blank" href="/search/ssh/1.htm">ssh</a> <div>1.客户机 (1)执行ssh-keygen -t rsa -C "xxxxx@xxxxx.com"生成公钥，xxx为自定义大email地址 (2)执行scp ~/.ssh/id_rsa.pub root@xxxxxxxxx:/tmp将公钥拷贝到服务器上，xxx为服务器地址 (3)执行cat</div> </li> <li><a href="/article/971.htm" title="Java新手入门的30个基本概念一" target="_blank">Java新手入门的30个基本概念一</a> <span class="text-muted">aijuans</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/java+%E5%85%A5%E9%97%A8/1.htm">java 入门</a><a class="tag" taget="_blank" href="/search/%E6%96%B0%E6%89%8B/1.htm">新手</a> <div>在我们学习Java的过程中,掌握其中的基本概念对我们的学习无论是J2SE,J2EE,J2ME都是很重要的,J2SE是Java的基础,所以有必要对其中的基本概念做以归纳,以便大家在以后的学习过程中更好的理解java的精髓,在此我总结了30条基本的概念。　　Java概述:　　目前Java主要应用于中间件的开发(middleware)---处理客户机于服务器之间的通信技术,早期的实践证明,Java不适合</div> </li> <li><a href="/article/1098.htm" title="Memcached for windows 简单介绍" target="_blank">Memcached for windows 简单介绍</a> <span class="text-muted">antlove</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/windows/1.htm">windows</a><a class="tag" taget="_blank" href="/search/cache/1.htm">cache</a><a class="tag" taget="_blank" href="/search/memcached/1.htm">memcached</a> <div>1. 安装memcached server a. 下载memcached-1.2.6-win32-bin.zip b. 解压缩，dos 窗口切换到 memcached.exe所在目录，运行memcached.exe -d install c.启动memcached Server,直接在dos窗口键入 net start "memcached Server&quo</div> </li> <li><a href="/article/1225.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/oeacle%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">oeacle数据库</a><a class="tag" taget="_blank" href="/search/%E8%A7%86%E5%9B%BE/1.htm">视图</a> <div> 视图视图是从一个表或视图导出的表，也可以是从多个表或视图导出的表。视图是一个虚表，数据库不对视图所对应的数据进行实际存储，只存储视图的定义，对视图的数据进行操作时,只能将字段定义为视图,不能将具体的数据定义为视图为什么oracle需要视图; &</div> </li> <li><a href="/article/1352.htm" title="Mockito(一) --入门篇" target="_blank">Mockito(一) --入门篇</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/%E6%8C%81%E7%BB%AD%E9%9B%86%E6%88%90/1.htm">持续集成</a><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是一个针对Java的mocking框架，它与EasyMock和jMock很相似，但是通过在执行后校验什么已经被调用，它消除了对期望行为（expectations）的需要。其它的mocking库需要你在执行前记录期望行为（expectations），而这导致了丑陋的初始化代码。 &nb</div> </li> <li><a href="/article/1479.htm" title="精通Oracle10编程SQL(5)SQL函数" target="_blank">精通Oracle10编程SQL(5)SQL函数</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/plsql/1.htm">plsql</a> <div>/* * SQL函数 */ --数字函数 --ABS(n):返回数字n的绝对值 declare v_abs number(6,2); begin v_abs:=abs(&no); dbms_output.put_line('绝对值：'||v_abs); end; --ACOS(n):返回数字n的反余弦值，输入值的范围是-1~1，输出值的单位为弧度</div> </li> <li><a href="/article/1606.htm" title="【Log4j一】Log4j总体介绍" target="_blank">【Log4j一】Log4j总体介绍</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/log4j/1.htm">log4j</a> <div>Log4j组件：Logger、Appender、Layout Log4j核心包含三个组件：logger、appender和layout。这三个组件协作提供日志功能：日志的输出目标日志的输出格式日志的输出级别(是否抑制日志的输出) logger继承特性 A logger is said to be an ancestor of anothe</div> </li> <li><a href="/article/1733.htm" title="Java IO笔记" target="_blank">Java IO笔记</a> <span class="text-muted">白糖_</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div> public static void main(String[] args) throws IOException { //输入流 InputStream in = Test.class.getResourceAsStream("/test"); InputStreamReader isr = new InputStreamReader(in); Bu</div> </li> <li><a href="/article/1860.htm" title="Docker 监控" target="_blank">Docker 监控</a> <span class="text-muted">ronin47</span> <a class="tag" taget="_blank" href="/search/docker%E7%9B%91%E6%8E%A7/1.htm">docker监控</a> <div> 目前项目内部署了docker，于是涉及到关于监控的事情，参考一些经典实例以及一些自己的想法，总结一下思路。 1、关于监控的内容监控宿主机本身监控宿主机本身还是比较简单的，同其他服务器监控类似，对cpu、network、io、disk等做通用的检查，这里不再细说。额外的，因为是docker的</div> </li> <li><a href="/article/1987.htm" title="java-顺时针打印图形" target="_blank">java-顺时针打印图形</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>一个画图程序要求打印出： 1.int i=5; 2.1 2 3 4 5 3.16 17 18 19 6 4.15 24 25 20 7 5.14 23 22 21 8 6.13 12 11 10 9 7. 8.int i=6 9.1 2 3 4 5 6 10.20 21 22 23 24 7 11.19</div> </li> <li><a href="/article/2114.htm" title="关于iReport汉化版强制使用英文的配置方法" target="_blank">关于iReport汉化版强制使用英文的配置方法</a> <span class="text-muted">Kai_Ge</span> <a class="tag" taget="_blank" href="/search/iReport%E6%B1%89%E5%8C%96/1.htm">iReport汉化</a><a class="tag" taget="_blank" href="/search/%E8%8B%B1%E6%96%87%E7%89%88/1.htm">英文版</a> <div>对于那些具有强迫症的工程师来说，软件汉化固然好用，但是汉化不完整却极为头疼，本方法针对iReport汉化不完整的情况，强制使用英文版，方法如下：在 iReport 安装路径下的 etc/ireport.conf 里增加红色部分启动参数，即可变为英文版。 # ${HOME} will be replaced by user home directory accordin</div> </li> <li><a href="/article/2241.htm" title="[并行计算]论宇宙的可计算性" target="_blank">[并行计算]论宇宙的可计算性</a> <span class="text-muted">comsci</span> <a class="tag" taget="_blank" href="/search/%E5%B9%B6%E8%A1%8C%E8%AE%A1%E7%AE%97/1.htm">并行计算</a> <div> 现在我们知道,一个涡旋系统具有并行计算能力.按照自然运动理论,这个系统也同时具有存储能力,同时具备计算和存储能力的系统,在某种条件下一般都会产生意识...... 那么,这种概念让我们推论出一个结论 &nb</div> </li> <li><a href="/article/2368.htm" title="用OpenGL实现无限循环的coverflow" target="_blank">用OpenGL实现无限循环的coverflow</a> <span class="text-muted">dai_lm</span> <a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/coverflow/1.htm">coverflow</a> <div>网上找了很久，都是用Gallery实现的，效果不是很满意，结果发现这个用OpenGL实现的，稍微修改了一下源码，实现了无限循环功能源码地址： https://github.com/jackfengji/glcoverflow public class CoverFlowOpenGL extends GLSurfaceView implements GLSurfaceV</div> </li> <li><a href="/article/2495.htm" title="JAVA数据计算的几个解决方案1" target="_blank">JAVA数据计算的几个解决方案1</a> <span class="text-muted">datamachine</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/Hibernate/1.htm">Hibernate</a><a class="tag" taget="_blank" href="/search/%E8%AE%A1%E7%AE%97/1.htm">计算</a> <div>老大丢过来的软件跑了10天，摸到点门道，正好跟以前攒的私房有关联，整理存档。 -----------------------------华丽的分割线------------------------------------- 数据计算层是指介于数据存储和应用程序之间，负责计算数据存储层的数据，并将计算结果返回应用程序的层次。J &nbs</div> </li> <li><a href="/article/2622.htm" title="简单的用户授权系统,利用给user表添加一个字段标识管理员的方式" target="_blank">简单的用户授权系统,利用给user表添加一个字段标识管理员的方式</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/yii/1.htm">yii</a> <div>怎么创建一个简单的(非 RBAC)用户授权系统通过查看论坛，我发现这是一个常见的问题，所以我决定写这篇文章。本文只包括授权系统.假设你已经知道怎么创建身份验证系统(登录)。数据库首先在 user 表创建一个新的字段(integer 类型),字段名 'accessLevel',它定义了用户的访问权限扩展 CWebUser 类在配置文件(一般为 protecte</div> </li> <li><a href="/article/2749.htm" title="未选之路" target="_blank">未选之路</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/%E8%AF%97/1.htm">诗</a> <div>作者:罗伯特*费罗斯特黄色的树林里分出两条路, 可惜我不能同时去涉足, 我在那路口久久伫立, 我向着一条路极目望去, 直到它消失在丛林深处. 但我却选了另外一条路, 它荒草萋萋,十分幽寂; 显得更诱人,更美丽, 虽然在这两条小路上, 都很少留下旅人的足迹. 那天清晨落叶满地, 两条路都未见脚印痕迹. 呵,留下一条路等改日再</div> </li> <li><a href="/article/2876.htm" title="Java处理15位身份证变18位" target="_blank">Java处理15位身份证变18位</a> <span class="text-muted">蕃薯耀</span> <a class="tag" taget="_blank" href="/search/18%E4%BD%8D%E8%BA%AB%E4%BB%BD%E8%AF%81%E5%8F%9815%E4%BD%8D/1.htm">18位身份证变15位</a><a class="tag" taget="_blank" href="/search/15%E4%BD%8D%E8%BA%AB%E4%BB%BD%E8%AF%81%E5%8F%9818%E4%BD%8D/1.htm">15位身份证变18位</a><a class="tag" taget="_blank" href="/search/%E8%BA%AB%E4%BB%BD%E8%AF%81%E8%BD%AC%E6%8D%A2/1.htm">身份证转换</a> <div> 15位身份证变18位，18位身份证变15位 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 蕃薯耀 201</div> </li> <li><a href="/article/3003.htm" title="SpringMVC4零配置--应用上下文配置【AppConfig】" target="_blank">SpringMVC4零配置--应用上下文配置【AppConfig】</a> <span class="text-muted">hanqunfeng</span> <a class="tag" taget="_blank" href="/search/springmvc4/1.htm">springmvc4</a> <div>从spring3.0开始，Spring将JavaConfig整合到核心模块，普通的POJO只需要标注@Configuration注解，就可以成为spring配置类，并通过在方法上标注@Bean注解的方式注入bean。 Xml配置和Java类配置对比如下： applicationContext-AppConfig.xml  </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>

Vue-基础语法（一）

一、了解组件、库、框架的区别?

二、Vue 是什么？

三、Vue基本使用

1、使用Vue将helloworld 渲染到页面上

四、Vue模板语法

1、前端渲染三种方式

2、vue模板语法组成

3、插值表达式

4、指令

4.1、v-cloak（解决插值表达式闪烁问题）

4.2、v-text （没有闪烁问题）

4.3、v-html

4.4、v-pre

总结：插值表达式、v-text、v-pre

4.5、数据响应式

4.6、v-once

4.7、双向数据绑定

4.8、v-model