LiuLiuY_

Vue-knowledge

Vue

一、Vue简介

1.vue

vue是一个动态构建用户界面的渐进式JS框架，渐进式是指按需加载相应的功能模块。

2. vue的特点

遵循MVVM模式
采用组件化模式，提高代码复用率
双向数据绑定
本身只关注用户界面，可以轻松引入第三方插件或其他库

3. 单页面与多页面

多页面	单页面
由多个完整页面组成	由一个页面和多个页面片段组成
页面之间的跳转是从一个页面跳转到另一个页面	页面的跳转是将当前页面片段删除或隐藏，将另一个页面片段加载显示，以此模拟页面的跳转
跳转后重新加载公共资源	跳转后不重新加载公共资源
URL：http://xxx/index1.html和http://xxx/index2.html 两个页面index1.html和index2.html	URL：http://xxx/index.html#page1和http://xxx//index.html#page2 同一个页面index.html的两个页面片段page1和page2
页面之间切换加载慢，用户体验差	首页加载慢，但页面片段之间切换加载快，用户体验好
对搜索引擎优化友好	不利于搜索引擎的抓取
	在web页面初始化时就加载相应的HTML、CSS、JS等，页面加载完成后不会因为用户的操作进行页面的重新加载，而是动态切换页面片段，实现用户与页面的交互
	优化方案：根据当前页面的显示按需加载；根据路由拆分减少初始加载体积，(路由懒加载)在需要进入对应路由时再进行加载

单页面首页加载慢的优化方案：

资源加载优化：①减小资源大小，压缩代码；②优化资源加载时机，根据当前页面的显示按需加载，或根据路由拆分减少初始加载体积，(路由懒加载)在需要进入对应路由时再进行加载。
页面渲染优化：

4. MVVM和MVC

MVC模式：
- Model-View-Control：Model用于存储数据，View用于处理数据显示，Control负责从视图读取数据，控制用户输入，并向模型发送数据。
MVVM模式
- Model代表数据模型，可以定义数据修改和操作的业务逻辑；View代表视图层，负责将数据模型转换成用户界面展现出来；ViewModel是一个同步View和Model的对象。

Model，实现一个数据监听器observer：对数据对象进行递归遍历，利用Object.defineProperty()的getter和setter属性监听数据，数据变动时通知订阅者
View，实现一个指令编译器compiler：根据指令模板替换数据，初始化渲染页面，并对每个指令对应的节点绑定相应的更新函数
VM，watcher订阅者是observer和compiler的桥梁，能够订阅并收到每个属性变化的通知，执行指令绑定的回调函数，从而达到更新视图的目的

MVVM整合observer、compiler和watcher三者，通过observer来监听model数据的变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer，Compile之间的通信桥路，达到数据变化=>视图更新；视图交互变化=>数据model变更的双向绑定效果。

MVVM和MVC的区别
- MVVM实现了View和Model的自动同步，也就是当Model的数据改变时不需要操作Dom就可以自动更新View层，解决了MVC中使用大量Dom操作导致的加载速度慢、页面渲染性能低的问题。

5. 双向数据绑定原理

双向数据绑定就是说数据发生变化后会同步到视图中，用户在视图上的修改也会同步到数据中。

原理：采用数据劫持和发布订阅者模式实现的。主要是利用Object.defineProperty()的getter和setter属性对数据进行劫持，达到监听数据的目的，在数据发生变化时发布消息给订阅者，触发相应的监听回调。

6. v-model => 实现双向数据绑定

v-model是v-bind和v-on的语法糖，在表单、</code>、<code><select></code>元素上创建双向数据绑定，监听输入事件以更新数据。 <ul> <li>一方面绑定数据，在绑定数据变化时，更新页面输入控件里的值</li> <li>另一方面监听input输入事件，将页面上输入控件里的值更新到绑定数据中。</li> </ul> <pre><code class="prism language-vue">// v-model <input type="text" v-model="myboy"> <div> {{ myboy }} </div> data: { myboy: [] } // v-bind和v-on <input type="text" v-bind:value = 'mylove' v-on:input="change"> {{ mylove }} data: { mylove: '' } methods: { change: function(){ this.mylove = $event.target.value } } </code></pre> <h4>7. 响应式原理</h4> (改变数据data时视图view会随之改变就是响应式) vue上的data属性都被添加getter和setter，当执行渲染函数时，读取data并调用getter，此时vue会记录所依赖的data(依赖收集)；当data发生变动时会调用setter，此时vue会通知所有依赖该data的组件去更新视图。 <h4>8. vue从初始化-修改数据-更新页面的过程</h4> 当vue进入初始化阶段，一方面Observer会遍历data的所有属性，利用Object.defineProperty()设置getter和setter属性，实现数据劫持，在读取属性时会触发dep.depend()收集依赖，在设置属性时会触发dep.notify()触发依赖；另一方面Compiler指令编译器对元素节点的各个指令进行编译，初始化渲染页面，并绑定Watcher订阅者更新页面，Watcher将自己加入消息订阅队列Dep，此时初始化完成。 当数据发生变化时，触发Observer中的setter，调用dep.notify()方法，遍历订阅者队列，并调用其update()方法，生成新的虚拟dom，通过diff算法，更新视图。 <h4>9. Object.defineProperty()</h4> <ul> <li>Object.defineProperty()会直接在一个对象上定义一个新的属性，或修改一个对象的现有属性。有三个参数，obj是需要定义属性的对象，prop是需要定义的属性，descriptor是属性描述符。返回值是该对象。</li> </ul> <pre><code class="prism language-js">Object.defineProperty(obj, 'name', { get: (name) => { return this.name }, set: (newName) => { this.name = newName return this.name } }) </code></pre> <h4>10. Proxy</h4> Proxy对象用于创建一个对象的代理，访问用Proxy包装的对象都会被Proxy拦截。Proxy有两个参数，target是要访问的对象，handle是一个以函数作为属性的匿名对象，可以在这个对象中定义get和set函数 <pre><code class="prism language-js">let p = new Proxy(target,handle) </code></pre> <h4>11. Object.defineProperty()和Proxy</h4> <ul> <li>Object.defineProperty()不能监听数组的变化，必须遍历对象的所有属性，必须深层遍历嵌套的对象。 <ol> <li>不能监听数组的变化：数组的push、pop、shift、unshift、splise、sort、reverse方法不能触发set，vue中对这些方法进行了重写</li> <li>必须遍历对象的所有属性：利用Object.keys()遍历对象的属性并通过Object.defineProperty()给对象设置getter和setter属性</li> <li>深层遍历嵌套多层的对象</li> </ol> </li> <li>Proxy劫持的是整个对象，不用遍历对象的属性；并且支持监听数组的变化；对于嵌套多层的对象，可以在get属性中递归调用Proxy</li> </ul> <h4>12. 计算属性computed</h4> <ul> <li> 计算属性：当其依赖的属性值发生变化时，该属性也会发生相应的变化。 </li> <li> 在计算属性中可以设置getter和setter属性，getter属性可以用来获取依赖的属性值，setter属性可以用来设置计算属性值并更新依赖的属性值。 </li> <li> 计算属性具有缓存特性，只有在依赖的属性发生变化时才会重新执行getter；缓存特性存在的问题在于当依赖的属性具有实时性时，每次访问该实例时都要获取最新的属性值，此时只需要将该计算属性的cache改为false即可。(cache是用来控制计算属性的缓存与否) </li> <li> 通过调用方法也可以实现同样的效果，但是计算属性具有缓存特性，当其依赖的属性值没有发生变化时访问该计算属性会立即返回之前计算出来的值，不需要重新计算。 </li> <li> 适用于一个数据受多个数据影响的场景。 </li> </ul> <pre><code class="prism language-js">{{ first }} + {{ last }} = {{ total }} data() { return { first: 'xu', last: 'caojun' } } computed: { total: function() { cache: false, // 关闭计算属性的缓存特性 get: function() { return this.first + this.last }, set: function(newvalue) { var names = newvalue.split(' '); this.first = names[0] this.last = names[1] } } } </code></pre> <h4>13. 监视属性watch</h4> <ul> <li>**监视属性：**在属性值发生变化时自动触发相应的监听事件；watch属性的键是要监听的属性，值是监听事件</li> <li>watch属性的值可以是一个函数function(){}，也可以是methods里的函数名’change’，或者是一个对象，这个对象有三个属性：handle(回调函数)，immediate，deep(是否深入监听)</li> <li>watch有一个特点是最初绑定的时候不会执行，只有在数据变化时才会执行监听事件并更新，若想一开始的时候就执行监听事件，可以将immediate设为true</li> <li>当deep为false时，在视图中的输入框中改变对象的属性值时监听事件是无效的。默认情况下，watch只能监听到将对象重新赋值，对象属性的变化监听不到。</li> </ul> <pre><code class="prism language-js">data() { return { age:21, height: 175, student:{ id:1, studentName:'xcj' } } } methods: { change: function() { console.log('22') } } watch: { age: 'change', height: function() { console.log(165) } student: { handle: function() { return this.id + "=" + this.studentName }, deep: true, immediate: true,//代表立即先去执行handle方法 } } </code></pre> <h4>14. methods与watch、computed的区别</h4> <ul> <li>methods方法：定义函数，在需要时进行调用(v-on/@绑定事件)，不依赖属性值的变化。</li> <li>watch：监听属性的变化，属性变化时自动调用methods或其他函数，watch还可以进行异步操作(setTimeout(()=> { },1000))</li> <li>computed：当某个属性依赖的多个属性发生变化，该属性也会随之发生相应的变化；同时也可以通过setter属性设置该属性，其依赖的属性随之变化。</li> </ul> <h4>15. v-bind:绑定class</h4> <ul> <li>对象语法：</li> </ul> <ol> <li>直接绑定class属性：<code><div v-bind:class="{active: isActive, red: isRed}"></div></code></li> </ol> <pre><code class="prism language-js">data() { return { isActive: true, isRed: false } }// isActive为true表示使用active这个类名，isRed为false表示不使用red这个类名 </code></pre> <ol start="2"> <li>将class作为对象处理：<code><div :class="classObj"></div></code></li> </ol> <pre><code class="prism language-js">data() { return { classObj:{ red: true, blue: true, pink: blue } } } </code></pre> <ol start="3"> <li>将class与computed结合起来：<code><div :class="computeClass"></div></code></li> </ol> <pre><code class="prism language-js">data:{ red:true, yellow:true }, computed:{ computeClass(){ return { red:this.red&&this.yellow } } } </code></pre> <ul> <li>数组语法：</li> </ul> <ol> <li> 直接绑定class属性：<code><div v-bind:class="[activeClass, errorClass]"></div></code> </li> <li> 三元运算符：<code><div :class="[isActive? red: green]"></div></code> </li> <li> 数组和对象：<code><div v-bind:class="[{ active: isActive }, errorClass]"></div></code> </li> </ol> <h4>16. v-bind:绑定style</h4> <ul> <li>对象语法：</li> </ul> <ol> <li>直接绑定style：<code><div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div></code>，activeColor和fontSize的值都保存在data中</li> <li>用对象绑定：<code><div v-bind:style="styleObj"></div></code>，styleObj是保存属性的对象</li> <li>和计算属性结合：<code><div :style="computeStyle">你好</div></code></li> </ol> <pre><code class="prism language-js">computed:{ computeStyle(){ return{ color:this.bl?'red':'blue', fontSize:this.bl?'20px':'50px', } } } </code></pre> <ul> <li>数组语法：</li> </ul> <ol> <li>直接绑定style：<code><div v-bind:class=['red','pink']></div></code></li> <li>绑定多层值：<code><div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div></code></li> </ol> <h4>17. v-if/v-show(条件渲染)</h4> <ul> <li>v-if： <ol> <li>用于条件渲染，当指令表达式的值为<code>true</code>时才会渲染，可以与<code>v-else-if</code>、<code>v-else</code>连起来使用。</li> <li>若想同时切换多个元素，可以在这些元素外面包裹上<code><template></code>，在<code><template></code>标签内使用<code>v-if</code>。</li> <li>用<code>key</code>管理可复用的元素</li> </ol> </li> <li>v-show： <ol> <li>用于条件渲染，当<code>v-show</code>后面的值为<code>true</code>时才会渲染，不能与<code>v-else</code>一起用。</li> <li><code>v-show</code>只是切换元素的<code>display</code>属性</li> </ol> </li> <li><code>v-if</code>和<code>v-show</code>的区别： <ol> <li><code>v-if</code>是通过添加或删除<code>dom</code>元素控制；<code>v-show</code>是通过设置元素的<code>display</code>属性控制</li> <li><code>v-if</code>切换有局部编译或卸载过程，在切换过程中重建或销毁事件监听和子组件；<code>v-show</code>只是简单的<code>css</code>切换</li> <li><code>v-if</code>只有在第一次为真时才开始编译，若初始页面为<code>false</code>，则一直等到变成<code>true</code>时才渲染；<code>v-show</code>不管初始是否为真，都进行编译并缓存</li> <li><code>v-if</code>有更高的切换消耗；<code>v-show</code>有更高的初始渲染消耗</li> </ol> </li> </ul> <h4>18. v-for(列表渲染)</h4> <ul> <li><code>v-for</code>：</li> </ul> <pre><code class="prism language-html"><li v-for="item in items" :key="item.message"> {{ item.message }} </li> <div v-for="item of items"> {{ item }} </div> <div v-for="(value, name, index) in object"> {{ index }}-{{ name }}-{{ value }} </div> <li v-for="n in evenNumbers">{{ n }}</li> <-- evenNumbers可以是一个计算属性或方法，用于获取过滤值 --> </code></pre> <ul> <li><code>key</code>的作用和原理：</li> </ul> <pre><code class="prism language-CN">1. 虚拟DOM中key的作用： key是虚拟DOM对象的标识，当数据发送发生变化时，vue会根据新数据生成新的虚拟DOM，然后vue进行新旧虚拟 DOM的差异比较：若在旧虚拟DOM中找到与新虚拟DOM中相同的key：若虚拟DOM没有变化则依旧使用之前的真实DOM，若虚拟DOM发生变化则生成新的真实DOM，替换掉之前的真实DOM。若在旧虚拟DOM中未找到与新虚拟DOM相同的key，就创建新的真实DOM，随后渲染到页面。 2. 用index做key可能会引发的问题： ①对数据进行逆序添加、逆序删除等破坏顺序的操作，会产生没有必要的真实DOM更新 ②若结构中包含输入类DOM元素，则会产生错误的DOM更新 3. 如何选择key？ ①使用每条数据的唯一标识作为key，比如id、证件号码等 ②若仅用于渲染列表，可以使用index作为key </code></pre> <h4>19. v-for和v-if</h4> <ol> <li>当<code>v-for</code>和<code>v-if</code>用于同一个节点时，<code>v-for</code>的优先级高于<code>v-if</code>，这意味着<code>v-if</code>作用在<code>v-for</code>循环的每一个元素。</li> <li>若是想条件式使用<code>v-for</code>循环，则可以在<code>v-for</code>外层嵌套一个<code><template></code>，在<code><template></code>标签内加上<code>v-if</code>判断语句。</li> </ol> <h4>20. v-on(事件处理)</h4> <ul> <li><code>v-on</code>监听DOM事件，触发相应的函数。</li> <li><code>@click="find"</code>、<code>@keyup="count + 1"</code>、<code>@mouseover="set(value)"</code></li> </ul> 为什么在HTML中绑定监听事件？： ①便于在HTML代码中快速定位JS中的方法；②不需要在JS代码中手动绑定事件，和DOM完全解耦；③当ViewModel实例被销毁时，所有事件处理器都被清理。 <h4>21. Vue实例的生命周期</h4> 当一个Vue实例被创建时，他的<code>data</code>对象中的所有属性都会被加入响应式系统，当属性值发生变化时视图也会随之更新。注意：只有在实例被创建时就存在的属性才是响应式的。可利用Object.freeze()使属性不能变化。 生命周期： vue实例从开始创建到销毁的一系列过程就是vue实例的生命周期，也就是实例的创建、挂载、更新和销毁的过程。作用：在这个过程中会运行生命周期钩子函数，可以在不同阶段添加不同的函数。 <ol> <li>创建<code>vue</code>实例，初始化生命周期和事件，实例创建完的钩子函数是<code>beforeCreate()</code>；</li> <li>初始化<code>data</code>和<code>methods</code>，之后钩子函数是<code>created()</code>，此时可以获取<code>data</code>中的数据和调用<code>methods</code>中的方法；接下来将<code>data</code>对象中的数据和vue语法中的模板生成<code>HTML</code>；</li> <li>在<code>beforeMount()</code>钩子函数之后，开始挂载生成的<code>HTML</code>，然后将之前生成好的<code>HTML</code>内容替换<code>el</code>属性指定的<code>dom</code>元素，但此时页面还没有内容；</li> <li>挂载完成后的钩子函数为<code>mounted()</code>，此时生成的<code>HTML</code>已经渲染到页面；</li> <li>实时监控<code>data</code>，在<code>data</code>被修改之前的钩子函数为<code>beforeUpdate()</code>，此时页面还没有更新；</li> <li>比较新旧虚拟<code>dom</code>，找出真正需要更新的元素；</li> <li>钩子函数<code>updated()</code>之后页面已经完成更新，继续实时监控<code>data</code>；</li> <li><code>beforeDestroy()</code>钩子函数是实例销毁前执行，此时还可以操作实例，此后会进行一系列实例销毁操作，接触数据引用，移除事件监听等；</li> <li>销毁完成后，执行<code>destroyed()</code>钩子函数，之后就不可以操作实例了。</li> </ol> <img alt="lifecycle" src=""> <h4>22. 父子组件生命周期函数顺序</h4> <ul> <li> 第一次加载页面触发的钩子函数 beforeCreate --> created --> beforeMount --> mounted </li> <li> 加载渲染过程 父beforeCreate --> 父created --> 父beforeMount --> 子beforeCreate --> 子created --> 子beforeMount --> 子mounted --> 父mounted </li> <li> 更新过程 父beforeUpdate --> 子beforeUpdate --> 子updated --> 父updated </li> <li> 销毁过程 父beforeDestory --> 子beforeDestroy --> 子destroyed --> 父destroyed </li> </ul> <h4>23. vue实例挂载</h4> 首先进行初始化，定义方法、事件等；然后调用$mount进行页面的挂载；定义udateComponent更新函数，执行render函数生成虚拟dom，然后将虚拟dom生成真实的dom，渲染到页面中。 <h4>24. vue中的nexttick</h4> <ul> <li>nexttick：在修改数据后立即调用这个方法，获取更新后的DOM。</li> <li></li> </ul> <h4>25. 虚拟DOM与diff算法</h4> 虚拟DOM： <ul> <li>真实DOM更新页面时只能通过遍历查询DOM树的方式找到需要修改的DOM然后修改样式行为或结构来达到更新页面的作用。每次查询都要遍历整个DOM树，非常消耗计算资源。</li> <li>虚拟DOM是建立一个与DOM树对应的虚拟DOM对象，以对象嵌套的方式来表示DOM树，利用数据中对象的属性来描述节点，每次DOM的更改就变成了JS对象的属性更改，这样查找JS对象的属性变化比遍历DOM树的消耗性能小。</li> <li>虚拟DOM的作用：提高效率，提高渲染性能。</li> <li>虚拟DOM的实现：根据当前数据生成一个虚拟dom，数据发生变动时又会生成一个新的虚拟dom，通过diff算法，计算出新旧虚拟dom的差异，找出真正需要更新的节点，从而避免操作其他无需更改的节点。</li> </ul> diff算法： <ul> <li>对同层的树节点进行比较</li> <li>特点：只在同级进行比较，不会跨级；在比较过程中，循环地从两边向中间靠拢。</li> </ul> 流程： <ul> <li>对新旧节点的起始和结束位置进行标记</li> <li>分情况进行虚拟节点的比较并移动标记(while循环)(patch函数) <ul> <li>若新旧节点的起始节点相同，则执行patchVnode函数，比较虚拟节点的属性等；同时新旧节点的起始索引都加一</li> <li>若新旧节点的结束节点相同，则执行patchVnode函数，比较虚拟节点的属性等；同时新旧节点的结束索引都减一</li> <li>若旧节点的起始与新节点的结束相同，执行完patchVnode函数后，将当前节点移到旧结束节点后面；同时旧节点起始索引加一，新节点结束索引减一</li> <li>若旧节点的结束与新节点的起始相同，执行完patchVnode函数后，将当前节点移到旧起始节点前面；同时旧节点的结束索引减一，新节点起始索引加一</li> </ul> </li> <li>若上述四种情况都不存在，在事先创建的以旧vnode为key、以index为vlaue的哈希表中查找与新节点起始相同的节点，若能找到则放到相应位置，若查找不到则创建一个新的dom节点放到相应位置</li> <li>(while)循环结束后根据新旧节点的数目不同，对节点进行添加或删除</li> </ul> <h4>26. 自定义指令</h4> Vue.directive(‘指令名字’, {对象数据或指令函数}) <pre><code class="prism language-js">Vue.directive('focus',{ inserted:function(el){ el.focus() } }) </code></pre> <h3>二、vue组件化</h3> <h4>1. 组件</h4> 组件化：把页面拆分成多个组件，每个组件实现自己的功能，组件之间的资源相互独立，实现组件的复用。 组件： 将UI界面拆分成一个个小的功能块，每个功能块实现自己的功能。是可复用的vue实例，可以在父组件中把子组件当成是自定义元素来用。 <ul> <li>降低系统的耦合度(依赖程度)，可以通过替换不同的组件完成需求</li> <li>实现代码复用，提高开发效率和系统的可维护性</li> </ul> 插件： 为vue添加全局功能，对vue功能的增强和补充 <ul> <li>vue-lazyload 图片懒加载</li> <li>vue-router</li> <li>使用Vue.use()安装插件</li> </ul> **组件和插件的区别：**组件注册方式有全局注册和局部注册；插件注册使用<code>Vue.use()</code>。组件是构成业务模块，插件是对vue功能的增强或补充。 <h4>2. 组件中的data</h4> ① 组件中的data必须是一个函数：对象是引用数据类型，若组件中的data是一个对象，复用的同一组件中的data都指向同一个地址，其中一个组件中的数据变化就会引起其他组件的数据都会变化；当data是一个函数时，每个组件的data都会有一个作用域，不会受到其他组件数据变化的影响。 ② 组件中的data函数返回一个对象，用来存储数据。返回一个对象是因为要使用<code>Object.defineProperty()</code>进行数据劫持。 <ul> <li> vue中给data添加新属性，只会更改数据，不会更新视图 </li> <li> 原因：新增的属性没有通过Object.defineProperty()设置成响应式数据。 </li> <li> 解决方法 <ul> <li>Object.assign(target, source1, source3…)：合并对象，将源对象的可枚举属性复制到目标对象</li> <li>Vue.set(obj,key,value)：向响应式对象添加响应式属性，并更新视图</li> <li>this.$set(obj,key,value)：同上</li> </ul> </li> </ul> <h4>3. 组件通信</h4> <ul> <li> 父子组件： <ul> <li> props和$emit： <ul> <li>父=>子：<code>props</code>，通过在子组件中定义<code>props</code>，在子组件的<code>props</code>中定义传递的数据的类型、默认值等，在父组件中的子组件标签内通过<code>v-bind</code>绑定数据；**单向数据流：**防止子组件意外改变父组件中属性的值。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mX4OjFfp-1630299526884)(D:\00Front_Web\myKnowledge\images\父传子.png)]</li> <li>子=>父：<code>$emit</code>，在子组件中通过<code>$emit</code>触发相应事件并传递数据，在父组件中的子组件标签内通过<code>v-on</code>监听相应事件并接收数据。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1llgxy9y-1630299526886)(D:\00Front_Web\myKnowledge\images\子传父.png)]</li> </ul> </li> <li> $parent和$children： <ul> <li>子操作父：在子组件中通过this.$parent.data = "传递的数据"改变父组件中的data</li> </ul> [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Dr7tnDQI-1630299526887)(D:\00Front_Web\myKnowledge\images\子操作父.png)] <ul> <li>父操作子：在父组件中通过this.$children.data = "传递的数据"改变子组件中的data</li> </ul> [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SDAOLkte-1630299526888)(D:\00Front_Web\myKnowledge\images\父操作子.png)] </li> <li> ref：<code>ref</code>属性是用来给子组件注册引用信息的，使用<code>this.$refs.xxx</code>获取；<code>ref</code>用在<code>html</code>标签上是获取真实的<code>DOM</code>元素，用在组件标签上是获取组件实例对象。<code>ref</code>特性就是为元素或子组件赋予一个<code>ID</code>引用,通过<code>this.$refs.refName</code>来访问元素或子组件的实例。<code>this.$refs</code>是一个对象，持有当前组件中注册过<code>ref</code>特性的所有 <code>DOM</code> 元素和子组件实例 <ul> <li>在父组件的子组件标签内，通过<code>ref="child"</code>绑定子组件，在父组件中通过<code>this.\$refs.child.data</code>调取子组件的数据，通过<code>this.\$refs.child.methods</code>调用子组件的方法</li> </ul> [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-w3iwcb4O-1630299526888)(D:\00Front_Web\myKnowledge\images\ref属性.png)] </li> </ul> </li> <li> 跨级通信 <ul> <li> $attrs和$listeners：两个对象 <ul> <li><code>$attrs</code>存放父组件中非<code>props</code>中的属性，当一个组件没有<code>props</code>属性时，<code>$attrs</code>包含父组件所有的属性，并通过<code>v-bind="$attrs"</code>传入子组件。</li> <li><code>$listeners</code>存放父组件中<code>v-on</code>事件监听，通过<code>v-on="$listeners"</code>传入子组件。</li> </ul> </li> <li> **子获取父组件属性：**在父组件的子组件标签中通过<code>v-bind</code>绑定需要传递的属性，在子组件<code>props</code>中的属性不能再往下传递，通过<code>this.\$attrs</code>获取到除<code>props</code>中以外的属性 </li> <li> **孙获取父组件属性：**在子组件的孙组件标签中通过<code>v-bind='\$attrs'</code>绑定父组件传过来的除子组件<code>props</code>中以外的属性，在孙组件<code>props</code>中的属性不能再往下传递。 </li> </ul> [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lwqVdREb-1630299526889)(D:\00Front_Web\myKnowledge\images\attrs.png)] <ul> <li>**子调用父组件事件：**在父组件的子组件标签中通过<code>v-on</code>绑定父组件事件，在子组件中通过<code>this.\$listeners.父组件事件</code>来调用</li> <li>**孙调用父组件事件：**在子组件的孙组件标签中通过<code>v-on="\$listeners"</code>绑定父组件事件，在孙组件中通过<code>this.\$listeners.父组件事件</code>来调用</li> </ul> [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-G3DswhGy-1630299526890)(D:\00Front_Web\myKnowledge\images\父listeners子.png)] <ul> <li>**孙传递给父组件：**在孙组件中通过<code>this.\$emit('相应事件','数据')</code>触发相应事件，在子组件的孙组件标签中通过<code>v-on='\$listeners'</code>来监听触发事件，在父组件的子组件标签中通过<code>v-on:相应事件="父组件事件"</code>来接收数据</li> </ul> [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vWapCHqx-1630299526890)(D:\00Front_Web\myKnowledge\images\孙emit父.png)] </li> <li> 兄弟组件的通信(A=>B) <ul> <li>借助父组件，A传给父，父再传给B：先通过<code>$emit</code>将数据传给父并在父中保存，然后父通过<code>props</code>传给B</li> <li>bus总线传值：bus总线作用的两个组件应该在同一页面中，也可以在vuex中保存这个值。</li> <li>若两个组件不在同一个页面，即使bus总线改变了值，当通过路由去往另一个组件后<code>data()</code>函数已经初始化。</li> </ul> 在main.js中创建bus总线： <pre><code class="prism language-js">Vue.prototype.bus = new Vue(); // bus属性值为vue实例 </code></pre> 在组件A中通过bus总线抛出信息和值，<code>this.bus</code>是vue实例，<code>$emit</code>是vue实例的方法 <pre><code class="prism language-js"><div @click="handle"> hello </div> methods: { handle(e) { this.bus.$emit('message',e.target.innerText) } } </code></pre> 在组件B中的<code>created</code>、<code>mounted</code>、<code>data</code>函数中使用<code>$on</code>监听事件和获取数据 <pre><code class="prism language-js">data() { this.bus.$on('busEvent',res=>{ this.busEvent = res; }) return { message: '' } } created() { this.bus.$on('busEvent',res=>{ this.busEvent = res; }) } </code></pre> </li> </ul> **全局事件总线：**任意组件间通信。 <h4>4. 插槽</h4> 插槽<code><slot></slot></code>就是子组件中留给父组件的占位符，在父组件中使用这个子组件时可以在占位符中填充任何模板代码，填充的内容会代替<code><slot></slot></code>。 <ul> <li>匿名插槽<code><slot></slot></code>：父组件的子组件标签内若有多个DOM，都填充到这个插槽。</li> <li>具名插槽<code><slot name="xxx"></slot></code>：在父组件的子组件标签内，用<code>v-slot:xxx</code>/<code>#xxx</code>属性指明要填充到<code>name="xxx"</code>的插槽。<code>v-slot</code> 只能添加在 <code><template></code> 上。</li> <li>作用域插槽：使父组件可以访问子组件的数据。将子组件上的数据用<code>v-bind</code>绑定到<code>slot</code>标签的属性上，在父组件使用时，将<code>slot</code>标签上绑定的属性命名为 <code>slotProps</code>，是一个对象。</li> </ul> <pre><code class="prism language-html">// 匿名插槽 // 子 <h1>我是子组件</h1> <slot></slot> // 父 <children> <span>我是魔鬼</span> </children> // 具名插槽 // 子 <slot name="header"></slot> <h1>我是子组件</h1> <slot name="footer"></slot> // 父 <Child> <span slot="header">我是header</span> <span slot="footer">我是footer</span> </Child> // 作用域插槽 // 子 <slot v-bind:user="user"> // 父 <template v-slot:default="slotProps"> {{ slotProps.user.firstName }} </template> </code></pre> <h4>5. 组件的注册</h4> <ul> <li>组件的名字：注册组件时可以使用连字符命名，也可以使用驼峰命名；引用组件时用连字符命名。</li> <li>全局注册：①<code>Vue.extend()</code>②<code>Vue.component("name",{})</code>；可以在任意vue实例中使用。</li> <li>局部注册：使用vue实例的components属性，只能在这个vue实例下使用。</li> </ul> <h4>6. 自定义事件</h4> <pre><code class="prism language-js">//自定义事件的定义，也可以写在vue实例的methods里 vm.$on(自定义事件的名称，自定义事件的处理程序) //自定义事件的触发 vm.$emit(自定义事件的名称，自定义事件处理程序需要的参数) </code></pre> <pre><code class="prism language-js">//父组件中定义自定义事件 methods:{ getChildData: function(val){ this.name = val; } } //子组件中触发自定义事件 methods:{ sendParentData: function(){ this.$emit('receive',this.name) } } //子组件中触发发送事件 <button @click="sendParentData">发送</button> //父组件中接收数据 <p>{{ name }}</p> <child @receive="getChildData"></child> </code></pre> <h4>7. 动态组件&异步组件</h4> <ul> <li> **动态组件： **不同组件之间可以进行动态切换。 <ol> <li> 在组件标签内使用<code>is</code>属性来实现组件的动态切换：<code><component v-bind:is="currentTabComponent"></component></code>。 </li> <li> DOM模板解析问题：在HTML中有些标签只能包含或包含于对应的标签，比如<code><table></code>只能包含<code><tr></code>等：<code><table><tr is="component"></tr></table></code>。 </li> <li> 当动态组件之间进行切换时可以用<code>keep-alive</code>把组件包裹起来，保持组件的状态，以避免反复渲染导致的性能问题。但是用<code>keep-alive</code>包裹的组件再一次进入时，就不会触发<code>created</code>和<code>mounted</code>，无法获取新数据。 以上问题有两种解决方式： ①增加<code>activated()</code>生命周期钩子函数，在<code>activated()</code>中添加请求数据的函数，可以在每次进入缓存的页面时再获取一次数据，退出这个组件时执行<code>deactived()</code>失活函数。 ②在<code>keep-alive</code>中增加一个过滤<code>exclude</code>，<code><keep-alive :exclude="name"><router-view></router-view></keep-alive></code>，<code>name</code>为不缓存的组件路由名字。 <ul> <li>keep-alive的相关属性； <ul> <li>include=‘字符串或正则表达式’：包含该名字的组件都被缓存</li> <li>exclude=‘字符串或正则表达式’：包含该名字的组件都不缓存</li> <li>max=数字：最多可以缓存的数量</li> </ul> </li> </ul> </li> </ol> </li> <li> 异步组件： 只在组件第一次需要渲染的时候进行加载渲染并缓存，缓存是以备下次渲染。 </li> </ul> <h3>三、axios</h3> <h4>1. axios是什么？</h4> axios是基于promise和XMLHttpRequest的异步AJAX请求库，实现AJAX的异步通信功能。 为什么要二次封装？ <ul> <li>每次http请求都要把设置超时时间、请求头、请求地址等操作重复一遍，会很繁琐，所以需要二次封装。</li> </ul> 封装过程： <ul> <li>创建请求函数</li> <li>在函数内，创建axios实例，设置请求地址前缀等</li> <li>设置请求拦截器instance.interceptors.request.use()、响应拦截器instance.interceptors.response.use()</li> <li>在函数内返回instance(config)，真正的请求</li> </ul> <h4>2. axios在项目中的封装</h4> <ol> <li>项目的前期配置：下载<code>axios</code>，<code>npm i axios -S</code>；在<code>require.js</code>中引入，<code>import axios from "axios"</code>。</li> <li>创建一个<code>axios</code>实例：</li> </ol> <pre><code class="prism language-js">const instance = axios.create({ // `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。 baseURL: 'http://ttapi.research.itcast.cn/', timeout: 5000, // 如果请求花费了超过 `timeout` 的时间，请求将被中断 method: 'GET' }) </code></pre> <ol start="3"> <li>设置请求拦截：</li> </ol> <pre><code class="prism language-js">require.interceptors.request.use( config => { // 对请求参数进行配置 return config; }, errer=>{ // 对错误进行处理 } }) </code></pre> <ol start="4"> <li>设置响应拦截：</li> </ol> <pre><code class="prism language-js">instance.interceptors.response.use(result => { return result.data;//返回处理后的data }, error => { console.log(error); }); </code></pre> <ol start="5"> <li>导出这个实例：<code>export default require</code></li> </ol> <pre><code class="prism language-js">export function require(config) { const instance = axios.create({}) //响应拦截 instance.interceptors.response.use(); // 请求拦截 instance.interceptors.request.use(); return instance(config); } </code></pre> <ol start="6"> <li>先在<code>home.js</code>中引入<code>require</code>函数并使用</li> </ol> <pre><code class="prism language-js">import { require } from './require.js'; export function getData(data) { return require({ url: '/home/data', // 相对路径 data: { type, page } }) } </code></pre> <h4>3. 解决axios的跨域问题</h4> 跨域本质是浏览器基于同源策略的一种安全手段。同源就是协议、主机和端口全都一致。跨域是浏览器的限制。 <ol> <li>Proxy： proxy是网络代理，是一种特殊的网络服务，允许客户端通过网络代理与服务端进行非直接的连接。代理服务有利于保障网络终端的隐私或安全，防止攻击。在<code>vue.config.js</code>文件中配置<code>devServer</code>实现代理转发，从而实现跨域。</li> </ol> <pre><code class="prism language-js">// 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题 devServer: { proxy: { '/proxyApi': { target: 'http://dev.xxx.com', // 请求的第三方接口 changeOrigin: true, // 是否跨域 pathRewrite: { // 路径重写 '/proxyApi': ''// 替换target中的请求地址，也就是说/api=/target，请求target这个地址的时候直接写成/api即可。 } } } } </code></pre> <ol start="2"> <li>CORS： 跨域资源共享是一个系统，它由一系列传输的HTTP头组成，这些HTTP头决定浏览器是否阻止前端的JS代码获取跨域请求的响应。整个CORS通信过程都是浏览器自动完成，浏览器一旦发现跨域请求，便会自动添加一些附加的头信息，只要服务器实现了CORS接口，就可以跨域通信。</li> </ol> <h3>四、vuex</h3> vuex相当于一个公共的仓库，用于保存所有组件都能使用的公共数据。Vue中实现集中式状态(数据)管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式管理，也是组件间进行通信的一种方式。vuex不属于任何一个组件。 1、什么时候使用vuex? <ol> <li>多个组件依赖同一个状态</li> <li>来自不同组件的行为需要变更同一状态</li> </ol> 2、vuex工作原理： <ul> <li>Actions：对象类型，异步操作</li> <li>Mutations：操作<code>state</code>数据的方法的集合，比如对该数据的修改、增加、删除等。</li> <li>State：对象类型，存放状态</li> </ul> <img alt="vuex" src=""> 3、vuex的工作流程： 首先，<code>Vue</code>组件如果调用某个<code>VueX</code>的方法过程中需要向后端请求时或者说出现异步操作时，需要<code>dispatch</code> VueX中<code>actions</code>的方法，以保证数据的同步。可以说，<code>action</code>的存在就是为了让<code>mutations</code>中的方法能在异步操作中起作用。如果没有异步操作，那么我们就可以直接在组件内提交状态中的<code>Mutations</code>中自己编写的方法来达成对<code>state</code>成员的操作。注意，不建议在组件中直接对<code>state</code>中的成员进行操作，这是因为直接修改(例如：<code>this.$store.state.name = 'hello'</code>)的话不能被<code>VueDevtools</code>所监控到。最后被修改后的state成员会被渲染到组件的原位置当中去。 4、Mutations <code>mutations</code>中的方法都有默认的形参：<code>[state,传递参数]</code>。 <ol> <li>在store的index.js中</li> </ol> <pre><code class="prism language-js">import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.store({ state:{ name:'helloVueX' }, mutations:{ //es6语法，等同edit:funcion(){...} edit(state){ state.name = 'jack' } } }) export default store </code></pre> <ol start="2"> <li>在组件中调用mutations的方法，同步操作数据的，<code>this.$store.commit('方法','参数')</code></li> </ol> <pre><code class="prism language-js">// 单个值传值 this.$store.comit('edit', 'xcj') // 多个值传值 this.$store.comut('edit', {'name':'xcj','age':25}) // 另一种方式 edit(state,payload){ state.name = 'jack' console.log(payload) // 15或{age:15,sex:'男'} } // 在组件中提交并传值 this.$store.commit({ type: 'edit', payload: { age: 25, sex: 'mail' } }) // 添加state Vue.set(state,"age",15) // 删除state Vue.delete(state,'age') </code></pre> <ol start="3"> <li>Getters方法，获取数据的，<code>this.$store.getters.xxx</code></li> </ol> <code>Getters</code>可以对<code>state</code>中的状态加工后传递给外界。<code>getters</code>方法中有两个参数，<code>state</code>和<code>getters</code>。 <pre><code class="prism language-js">getters:{ nameInfo(state){ return "姓名:"+state.name }, fullInfo(state,getters){ return getters.nameInfo+'年龄:'+state.age } } // 在组件中调用 this.$store.getters.fullInfo </code></pre> <ol start="4"> <li>Actions：异步操作数据的，<code>this.$store.dispatch('方法','参数')</code></li> </ol> <pre><code class="prism language-js">// context：上下文对象，payload：挂载参数 actions:{ aEdit(context,payload){ setTimeout(()=>{ // 异步操作mutations中的方法 context.commit('edit',payload) },2000) } } // 在组件中调用 this.$store.dispatch('aEdit',{age:25}) </code></pre> <h3>五、路由</h3> <h4>1. 前端路由和后端路由</h4> 路由：根据不同的url地址展示不同的页面或内容，一个路由就是一组键值的映射关系(key => value)。 前端路由：<code>key</code>为路径，<code>value</code>为组件，用于展示页面内容。当浏览器的路径发生变化时，对应的组件就会显示。 后端路由：通过用户请求的url导航到具体的HTML页面，每次跳转到不同的URL都是重新访问服务器，服务器再返回页面。 <h4>2. 路由的基本使用</h4> <code><router-link></code>：使用<code><router-link></code>来导航，通过传入<code>to</code>属性指定要跳转的页面，会被默认渲染成<code><a></code>链接。 <code><router-view></code>：路由出口，路由匹配的组件在这里渲染。 <h4>3. $route 和 $router</h4> ** r o u t e ： ∗ ∗ 每个组件都有自己的 ‘ route：** 每个组件都有自己的` route：∗∗每个组件都有自己的‘route<code>属性，里面存储着自己的路由信息。</code>this.$route<code>是当前跳转的路由对象，每个路由都会有一个</code>route<code>对象，包含</code>path<code>(当前路由对象的路径)、</code>name<code>(当前路由对象的名字)、</code>query`(当前路由中查询参数的键值对)等。 $router: 整个应用只有一个<code>router</code>，可以通过<code>this.\$router</code>获取。<code>this.\$router</code>是用来进行路由跳转的，通过<code>VueRouter</code>和<code>Vue</code>构造函数得到的一个全局实例对象，包含了所有的路由，包括很多对象和属性。比如<code>history</code>对象，<code>this.\$router.push({path:home})</code>就是向<code>history</code>中添加路由记录。还有<code>options</code>对象，包含<code>mode</code>、<code>routes</code>等。 <h4>4. 嵌套路由</h4> 在路由配置中，添加<code>children</code>属性，<code>children</code>是一个数组，在<code><router-link></code>的<code>to</code>属性中要设置为完全路径。 <pre><code class="prism language-js">const routes = [ { path: '/', component: Home }, { path: '/foo', component: Foo , children:[ {path:'foo1',component:Foo1}, {path:'foo2',component:Foo2}, {path:'foo3',component:Foo3}, ]} ]; <p> <router-link to="/foo/foo1">to Foo1</router-link> <router-link to="/foo/foo2">to Foo2</router-link> <router-link to="/foo/foo3">to Foo3</router-link> </p> </code></pre> <h4>5. 路由传参query</h4> 传递参数： <pre><code class="prism language-html"> <router-link :to="`/home?id=${m.id}&title=${m.title}`"></router-link>  <router-link :to="{ path: '/home', query: { id: m.id, title: m.title } }" ></router-link> </code></pre> 接收参数： <pre><code class="prism language-js">$route.query.id $route.query.title </code></pre> <h4>6. 命名路由</h4> 命名路由可以简化路由的跳转。 给路由命名： <pre><code class="prism language-js">{ path: '/demo', component: Demo, children: { path: 'test', component: Test, children: [ { name: 'hello', // 给路由命名 path: welcome, component: Hello } ] } } </code></pre> 简化跳转： <pre><code class="prism language-html"> <router-link to="/demo/test/welcome">跳转</router-link>  <router-link :to="{name: 'hello'}">跳转</router-link>  <router-link :to="{ name: 'hello', query:{ id: m.id, title: m.title } }" >跳转</router-link> </code></pre> <h4>7. 路由传参params(动态路由)</h4> 配置路由，声明接收params参数： <pre><code class="prism language-js">{ path: '/demo', component: Demo, children: { { path: 'news', components:News }, { components: Message, children: [ { name: 'hello', // 给路由命名 path: 'detail/:id/:title', // 使用占位符声明接收params参数 component: Detail } ] } } } </code></pre> 传递参数： 使用<code>params</code>传递参数时，若使用<code>to</code>的对象写法，则不能使用<code>path</code>的配置项，必须使用<code>name</code>配置。 <pre><code class="prism language-html"> <router-link to="/home/message/detail/123/你好">跳转</router-link>  <router-link to="{ name: 'hello', params: { id: 123, title: '你好' } }" >跳转</router-link> </code></pre> 接收参数： <pre><code class="prism language-js">$route.params.id </code></pre> params与query的区别： <code>query</code>在页面跳转时，地址栏有请求的参数，刷新页面数据不会丢失。<code>params</code>参数不会在地址栏显示出来，刷新页面数据会丢失。 <code>params</code>传参，只能是 <code>name:‘xxxx’</code>，注意配对使用，否则接收参数为<code>undefined</code>。 <h4>8. 路由传参props</h4> <pre><code class="prism language-js">{ // 路由解耦 path: '/demo', component: Demo, children: { { path: 'news', components:News }, { components: Message, children: [ { name: 'hello', // 给路由命名 path: 'detail/:id/:title', // 使用占位符声明接收params参数 component: Detail, // props第一种写法:值为对象,该对象中的所有键值对都会以props的形式传给Detail props: {a: 1, b: 'hello'} // props第二种写法:值为布尔值,若为true,就会把该路由组件的params参数以props的形式传给Detail props: true // props第三种写法:值为函数,返回值是对象 props($route){ return {id: $route.query.id, title: $route.query.title} } } ] } } } </code></pre> <h4>9. 编程式路由导航</h4> 有时候不能使用<code><router-link></code>实现跳转，因为<code><router-link></code>会被默认渲染成<code><a></a></code>标签，比如想使用<code><button></code>来实现跳转就不能再使用<code><router-link></code>。 编程式路由就是使用JS来实现路由的跳转： <pre><code class="prism language-js">$router.push(); // 向history栈添加一个新记录，当点击浏览器后退按钮时，可以返回到之前的URL。 $router.replace(); // 替换路由，没有历史记录，点击返回，会跳转到上上一个页面 $router.go(n); // 向前或者向后跳转n个页面，n可为正整数或负整数 $router.back(); // 后退 $router.forward(); // 前进 </code></pre> <h4>10. 路由守卫</h4> <ul> <li> 路由跳转过程中的钩子函数，路由跳转的过程可以分为跳转前中后的细小过程，每个过程都有对应的钩子函数，可以在此期间触发事件。 </li> <li> **当点击切换路由时： ** beforeRouterLeave–>beforeEach–>beforeEnter–>beforeRouteEnter–>beforeResolve–>afterEach–>beforeCreate–>created–>beforeMount–>mounted–>beforeRouteEnter的next回调 </li> <li> 全局守卫： 路由实例上直接操作的钩子函数，特点是所有路由配置的组件都会触发。 </li> </ul> [beforeEach]：在路由跳转前触发，主要用于登录验证。 [beforeResolve]：在独享路由守卫和组件路由守卫之后调用，也是路由跳转前触发。 [afterEach]：路由跳转完成后触发。 <ul> <li>独享路由守卫： 在单个路由配置的钩子函数，写在路由配置映射关系的<code>routes</code>中。</li> </ul> [beforeEnter]：路由跳转前触发。 <ul> <li>组件路由守卫： 在组件内执行的钩子函数，相当于为配置路由的组件添加的声明周期钩子函数。</li> </ul> [beforeRouterEnter]：路由跳转前触发，不能获取组件实例的this，在next中通过vm访问组件实例，next中的函数在mounted之后调用(为了保证对组件实例的完整访问)。 [beforeRouterUpdate]：在当前路由改变时，并且该组件被复用时调用，可以通过this访问实例；对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，组件实例会被复用，该守卫会被调用；当前路由query变更时，该守卫会被调用。 [beforeRouterLeave]：导航离开该组件的对应路由时调用，可以访问组件实例<code>this</code>。 参数： <ol> <li><code>to</code>：目标路由对象</li> <li><code>from</code>：即将要离开的路由对象</li> <li><code>next</code>：<code>next()</code>进行下一个钩子函数；<code>next(false)</code>中断当前的导航，若URL改变，URL会重置到from的路由对象；<code>next('/')</code>或<code>next({path:'/home'})</code>跳转到另一个地址，不是to的目标路由；<code>next(error)</code>中传入的参数是一个error实例，则导航会被终止且会将错误传递给<code>route.onError()</code>注册过的回调。</li> </ol> <h4>11. 路由模式</h4> 浏览器对页面的访问是无状态的，导致切换不同的页面时都要重新发送请求，在<code>vue</code>路由中不重新发送请求就能更新页面。有两种路由模式：hash模式和history模式。 <ul> <li><code>hash</code>模式：<code>hash</code>模式在URL中有<code>#</code>，<code>#</code>在英文中读作hashtag，所以简称<code>hash</code>模式，<code>#</code>后面的值称为<code>hash</code>值。 <ul> <li>特点：<code>hash</code>值虽然出现在URL中，但是不会被包括在HTTP请求中，因此改变<code>hash</code>值不会重新加载页面。</li> <li>原理：<code>hash</code>模式的原理是<code>onhashchange()</code>事件，可以利用<code>window.onhashchange()</code>为<code>hash</code>值的改变添加页面切换处理函数。</li> <li><code>hash</code>值发生的变化都会在浏览器的访问历史中添加记录。</li> </ul> </li> <li><code>history</code>模式：利用了<code>history pushState</code>和<code>replaceState()</code>API，可以分为两大部分：切换和修改。 <ul> <li>切换历史状态：包括<code>go()</code>、<code>back()</code>、<code>forward()</code>三个方法，对应前进、后退、跳转操作。</li> <li>修改历史状态：<code>history.pushState()</code>用于在浏览历史中添加历史记录,但是并不触发跳转；<code>history.replaceState()</code>用于在浏览历史中修改当前记录，不触发跳转。</li> <li>通过<code>pushState</code>把页面的状态保存在<code>state</code>对象中，当页面的url再变回这个url时，可以通过<code>event.state</code>取到这个<code>state</code>对象，从而可以对页面状态进行还原</li> </ul> </li> </ul> <code>hash</code>模式下前端路由改变的是<code>#</code>后面的内容，页面不会重新加载，即使服务端没有覆盖所以路由，也不会返回404错误；而在<code>history</code>模式下，如果服务端没有相应的资源则会返回404错误(NOT FOUND)，需要在服务端增加一个覆盖所有情况的候选资源，在URL匹配不到资源时应该返回同一个<code>index.html</code>页面，就是<code>app</code>依赖的页面。 为什么history模式下前端的url必须和后端一致？因为vue是单页面应用，一个url对应一个页面。 <h4>12. 路由懒加载</h4> 在单页面应用中，如果没有应用懒加载，会导致在首次进入页面时需要加载的资源过多，延时过长，造成用户体验不好；运用路由懒加载可以将页面进行划分，需要的时候加载页面，可以有效的分担首页的加载压力，减少首页的加载时间。 <ul> <li> vue异步组件 </li> <li> webpack的require,ensure() </li> <li> ES6的import：<code>const 组件名=() => import('组件路径');</code> 页面一加载就会执行<code>import Login from '@/views/login'</code>，相当于编译执行了加载组件；使用路由懒加载的写法，只会在进入当前这个路由时才会走 <code>component</code> ，然后在运行<code>import</code>编译加载相应的组件 </li> </ul> <h3>六、vue项目遇到的问题及解决</h3> <h4>1. vue项目加载的顺序</h4> ①index.html项目的入口文件 ②main.js项目的核心文件，在main.js中创建一个新的vue实例，将根组件App.vue放在这个实例的components属性中，并将这个实例的app与index.html联系起来 ③App.vue根组件，引入子组件和<code><router-view></code>(用来显示路由相关页面) ④index.js配置路由的文件 ⑤子组件 </div> </div> </div> </div> </div>  <div id="SOHUCS" sid="1562584333011718144"></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/1949984445817745408.htm" title="Vue 工程化开发入门" target="_blank">Vue 工程化开发入门</a> dawn191228 <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/1949892134148567040.htm" title="在vue项目中嵌入Python项目" target="_blank">在vue项目中嵌入Python项目</a> 钱亚锋 <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/1949756466718109696.htm" title="【第六节】方法与事件处理器" target="_blank">【第六节】方法与事件处理器</a> 枫，为落叶 <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/1949736674896441344.htm" title="简约时装网店网站开发#网页制作 #网页设计 #网站建设" target="_blank">简约时装网店网站开发#网页制作 #网页设计 #网站建设</a> 黄菊华老师 <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/1949634169407598592.htm" title="Vue实战：利用Element UI轻松实现动态表单项管理与高效验证" target="_blank">Vue实战：利用Element UI轻松实现动态表单项管理与高效验证</a> 征尘bjajmd <a class="tag" taget="_blank" href="/search/elementui/1.htm">elementui</a> <div>在Vue.js项目中，表单是与用户交互的重要部分，特别是在需要动态管理表单项的场景下，如何优雅地实现添加、删除、上移、下移及验证功能变得尤为重要。本文将详细介绍如何使用ElementUI来实现一个包含动态表单项管理以及验证功能的表单。效果图如下一、项目背景假设我们正在开发一个活动管理系统，其中一个功能是为活动添加多条路线信息，每条路线包含路线名称、可参加人数和路线详情。用户需要能够动态地添加、删除</div> </li> <li><a href="/article/1949554233095286784.htm" title="【vue-8】Vue3 Options API 生命周期函数全面解析" target="_blank">【vue-8】Vue3 Options API 生命周期函数全面解析</a> AllenBright <a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><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>在Vue.js开发中，理解组件的生命周期是构建健壮应用程序的关键。虽然Vue3引入了CompositionAPI，但OptionsAPI仍然是许多开发者的首选，特别是对于从Vue2迁移的项目或更喜欢基于选项的代码组织的团队。本文将深入探讨Vue3中OptionsAPI的生命周期函数，帮助您掌握组件从创建到销毁的完整过程。1.生命周期概览Vue3的生命周期与Vue2相比有一些变化，主要是为了更好的支</div> </li> <li><a href="/article/1949421458853785600.htm" title="vue2中实现双向绑定的三种方法" target="_blank">vue2中实现双向绑定的三种方法</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%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>在Vue.js中，v-model是实现双向绑定的核心指令，而.sync是用于父子组件之间双向绑定的修饰符。如果需要在自定义组件中实现双向绑定，可以通过以下几种方式来实现：1.使用v-model实现双向绑定v-model默认会绑定一个名为value的prop和一个名为input的事件。在自定义组件中，可以通过以下方式实现v-model的双向绑定：父组件ParentValue:{{parentValu</div> </li> <li><a href="/article/1949403564023541760.htm" title="npm init vite-app runoob-vue3-test2 ，npm init vue@latest，指令区别" target="_blank">npm init vite-app runoob-vue3-test2 ，npm init vue@latest，指令区别</a> CATTLECODE <a class="tag" taget="_blank" href="/search/npm/1.htm">npm</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.js项目的脚手架命令，但它们在技术栈、配置方式和项目结构上有显著区别：1.npminitvite-apprunoob-vue3-test2技术栈：基于Vite构建工具使用Vue3作为默认框架由Vite团队维护特点：bash复制代码npminitvite-app快速创建：零配置启动，没有交互选项文件结构：复制代码├──node_modules├──index.html├</div> </li> <li><a href="/article/1949236611715756032.htm" title="如何实现零成本裂变?微信推客带货小程序开发功能模式全解析" target="_blank">如何实现零成本裂变?微信推客带货小程序开发功能模式全解析</a> 开发加微信：hedian116 <a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1/1.htm">微信</a> <div>引言在当今社交电商蓬勃发展的背景下，微信推客系统作为一种基于社交关系的分销模式，其技术实现和架构设计值得开发者深入探讨。本文将从技术角度分析微信推客系统的核心组件和实现原理，避免商业营销，专注于技术层面的分享。一、微信推客系统的基本架构1.1前端架构微信推客系统通常采用混合开发模式：小程序前端：使用WXML+WXSS+JavaScript技术栈H5页面：Vue.js或React框架实现跨平台兼容原</div> </li> <li><a href="/article/1949226772570632192.htm" title="Vue.js前端组件通信的多种方式解析" target="_blank">Vue.js前端组件通信的多种方式解析</a> AI架构全栈开发实战笔记 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%A4%A7%E6%95%B0%E6%8D%AE%E4%B8%8EAI%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">前端大数据与AI人工智能</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E8%89%BA%E5%8C%A0%E9%A6%86/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/flutter/1.htm">flutter</a><a class="tag" taget="_blank" href="/search/ai/1.htm">ai</a> <div>Vue.js前端组件通信的多种方式解析关键词：Vue.js、组件通信、props、事件总线、Vuex、provide/inject、Pinia摘要：在Vue.js的组件化开发中，组件通信是构建复杂应用的核心能力。本文将用“班级里的小喇叭”“家族传家宝”等生活化类比，从父子、兄弟到跨层级组件，一步步拆解Vue.js中8种主流通信方式的原理、使用场景与实战技巧，帮你彻底掌握组件通信的“十八般武艺”。背</div> </li> <li><a href="/article/1949092858069839872.htm" title="vue 组件水平滚动_Vue.js自定义垂直/水平滚动条组件|vue模拟滚动条" target="_blank">vue 组件水平滚动_Vue.js自定义垂直/水平滚动条组件|vue模拟滚动条</a> weixin_39726379 <a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/%E7%BB%84%E4%BB%B6%E6%B0%B4%E5%B9%B3%E6%BB%9A%E5%8A%A8/1.htm">组件水平滚动</a> <div>介绍VScroll滚动条基于vuejs2.x构建的美化XY轴滚动条组件。支持原生滚动条、鼠标移出是否隐藏滚动条、自定义滚动条尺寸、颜色及层级等功能。拥有漂亮且流畅的滚动体验！参数配置props:{//是否显示原生滚动条native:Boolean,//是否自动隐藏滚动条autohide:Boolean,//滚动条尺寸size:{type:[Number,String],default:''},//</div> </li> <li><a href="/article/1949002076700864512.htm" title="鞋类电商平台网站制作 #网站建设 #公司网站建设 #网站定制开发" target="_blank">鞋类电商平台网站制作 #网站建设 #公司网站建设 #网站定制开发</a> 黄菊华老师 <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/%E9%9E%8B%E7%B1%BB%E7%94%B5%E5%95%86%E5%B9%B3%E5%8F%B0%E7%BD%91%E7%AB%99/1.htm">鞋类电商平台网站</a> <div>博主介绍：黄菊华老师《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者，CSDN博客专家，在线教育专家，CSDN钻石讲师；专注网站制作、小程序开发、软件开发和大学生毕业设计教育、辅导。所有项目都配有从入门到精通的基础知识视频课程，学习后应对毕业设计答辩，提供核心代码讲解，答辩指导。项目配有对应开发文档、开题报告、任务书、PPT等，提供毕业设计论文辅导。项目都录了发布和功能操作演示视频</div> </li> <li><a href="/article/1948992746610028544.htm" title="vue项目入门" target="_blank">vue项目入门</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/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>入门1.创建Vue项目首先，确保你已经安装了Node.js和VueCLI（如前面所提到的）。然后，你可以创建一个新的Vue项目：vuecreatevue-crud-project选择Vue3和默认配置（或者根据需要自定义配置）。2.推荐的Vue.js项目目录结构以下是一个常见的、适合中小型Vue.js项目的目录结构：vue-crud-project/├──public/#存放静态资源│├──ind</div> </li> <li><a href="/article/1948986067969437696.htm" title="MyUI 登陆组件使用文档" target="_blank">MyUI 登陆组件使用文档</a> 速易达网络 <a class="tag" taget="_blank" href="/search/Vue-MyUI%E7%BB%84%E4%BB%B6%E5%BA%93/1.htm">Vue-MyUI组件库</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%E6%A1%86%E6%9E%B6/1.htm">前端框架</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>下面是一个完整的Vue.js登录组件实现，包含表单验证、API请求、状态管理和路由跳转等功能：功能特点表单验证：实时验证用户名（邮箱格式）密码复杂度验证（6-20位字母+数字）错误提示显示用户体验：提交按钮加载状态"记住我"功能（使用localStorage）友好的错误提示安全措施：防止重复提交密码字段使用type="password"401未授权处理</div> </li> <li><a href="/article/1948849925949288448.htm" title="Uniapp 纯前端台球计分器开发指南：能否上架微信小程序 & 打包成APP？" target="_blank">Uniapp 纯前端台球计分器开发指南：能否上架微信小程序 & 打包成APP？</a> 雪碧聊技术 <a class="tag" taget="_blank" href="/search/uniapp/1.htm">uniapp</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/%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%8F%B0%E7%90%83%E8%AE%A1%E5%88%86%E5%99%A8/1.htm">台球计分器</a> <div>目录前言：纯前端Uniapp项目的可行性台球计分器功能分析（纯前端实现方案）如何发布到微信小程序（无后端限制）如何打包成手机APP（Android&iOS）⚠️注意事项&常见问题优化建议（提升用户体验）总结&互动问答1.前言：纯前端Uniapp项目的可行性Uniapp是一个基于Vue.js的跨平台开发框架，可以一套代码编译到微信小程序、H5、Android、iOS等多个平台。如果你的台球计分器只需</div> </li> <li><a href="/article/1948707201363275776.htm" title="Vue.js 性能优化指南：掌握 keep-alive 的使用技巧" target="_blank">Vue.js 性能优化指南：掌握 keep-alive 的使用技巧</a> 乐闻x <a class="tag" taget="_blank" href="/search/Vue/1.htm">Vue</a><a class="tag" taget="_blank" href="/search/%E8%BF%9B%E9%98%B6%E7%AC%94%E8%AE%B0%E6%89%8B%E5%86%8C/1.htm">进阶笔记手册</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><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/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>前言在现代前端开发中，性能优化和用户体验一直是开发者关注的重点。对于使用Vue.js构建的单页应用（SPA）来说，频繁的组件切换可能带来性能问题和状态丢失等挑战。Vue提供的keep-alive组件为这一问题提供了优雅的解决方案。本文将深入探讨keep-alive的作用及其使用方法，帮助开发者在实际项目中充分利用这一功能实现高效的组件管理。什么是keep-alive？简单来说，keep-alive</div> </li> <li><a href="/article/1948677195811581952.htm" title="Vue.js与Ajax实现数据动态交互及双向绑定项目指南" target="_blank">Vue.js与Ajax实现数据动态交互及双向绑定项目指南</a> 溪水边小屋 <div>本文还有配套的精品资源，点击获取简介：Vue.js结合Ajax技术可以创建动态交互的Web应用程序。本项目指南介绍了如何在Vue.js框架下使用Ajax下载和上传后台数据，并通过双向数据绑定实时更新页面内容。项目中演示了Vue组件数据绑定、axios的集成与使用，以及如何处理用户交互、服务器响应和文件操作。通过这一过程，用户能够构建一个高效、直观的用户体验良好的单页应用程序。1.Vue.js框架简</div> </li> <li><a href="/article/1948256134267727872.htm" title="【插件】vue-i18n的安装和使用全解" target="_blank">【插件】vue-i18n的安装和使用全解</a> <div>vue-i18n是Vue.js的国际化插件，它提供了丰富的API和配置选项，支持多种语言切换、语言资源管理、日期时间格式化等功能，能够满足不同场景下的国际化需求。1.项目准备在开始之前，请确保已经具备以下条件：Vue.js项目环境：已搭建好的Vue.js项目，建议使用VueCLI创建。Node.js环境：已安装Node.js和npm。2.安装vue-i18n使用npm安装vue-i18nnpmin</div> </li> <li><a href="/article/1948192603287646208.htm" title="Vue UEditor Wrap JS：实现富文本编辑器的Vue组件" target="_blank">Vue UEditor Wrap JS：实现富文本编辑器的Vue组件</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/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/js/1.htm">js</a> <div>VueUEditorWrapJS：实现富文本编辑器的Vue组件在Vue.js开发中，经常需要使用富文本编辑器来处理用户输入的富文本内容。Vue-UEditor-Wrap是一个方便的Vue组件，它将百度UEditor富文本编辑器封装成了一个可直接在Vue项目中使用的组件。本文将详细介绍如何使用Vue-UEditor-Wrap来实现富文本编辑器功能。首先，我们需要安装Vue-UEditor-Wrap。</div> </li> <li><a href="/article/1948095779038097408.htm" title="Vue的ubus emit/on使用" target="_blank">Vue的ubus emit/on使用</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/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>这段代码是Vue.js组件中的mounted生命周期钩子函数，主要作用是监听一个名为“macSelectData”的全局事件。具体行为如下：分步解释：mounted()生命周期钩子当组件被挂载到DOM后，Vue会自动调用mounted()方法。这里常用于初始化操作，比如数据请求、事件监听等。this.$bus.on("macSelectData",this.open)this.$bus：通常指通过</div> </li> <li><a href="/article/1948095022616342528.htm" title="深入理解 UniApp：跨平台开发的终极解决方案" target="_blank">深入理解 UniApp：跨平台开发的终极解决方案</a> <div>深入理解UniApp：跨平台开发的终极解决方案一、UniApp概述：重新定义跨平台开发（一）UniApp的诞生背景在移动互联网高速发展的今天，多端适配成为开发者面临的主要挑战。传统开发模式下，针对iOS、Android、微信小程序、H5等不同平台需要编写多套代码，开发成本高且维护困难。DCloud公司于2019年推出的UniApp，正是为了解决这一行业痛点而生。它基于Vue.js语法规范，实现了"</div> </li> <li><a href="/article/1948092878291005440.htm" title="uni-app跨平台开发知识点总结" target="_blank">uni-app跨平台开发知识点总结</a> <div>uni-app简介uni-app概述：uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。uni-app由来：是为了解决跨平台开发的问题。在移动应用开发中，不同平台（如iOS、Android）有不同的开发语言和技术栈，这导致开发者</div> </li> <li><a href="/article/1947767667561656320.htm" title="【学术会议投稿】Vue.js组件开发实战：从零构建高效可复用组件" target="_blank">【学术会议投稿】Vue.js组件开发实战：从零构建高效可复用组件</a> 小周不想卷 <a class="tag" taget="_blank" href="/search/%E8%89%BE%E6%80%9D%E7%A7%91%E8%93%9D%E5%AD%A6%E6%9C%AF%E4%BC%9A%E8%AE%AE%E6%8A%95%E7%A8%BF/1.htm">艾思科蓝学术会议投稿</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a> <div>【IEEE出版|会后3-4个月EI检索】第三届云计算、大数据应用与软件工程国际学术会议(CBASE2024）_艾思科蓝_学术一站式服务平台更多学术会议请看：https://ais.cn/u/nuyAF3目录引言一、Vue.js组件开发基础二、构建高效可复用组件三、Vue.js组件的高级特性四、Vue.js的优点与缺点Vue.js的优点Vue.js的缺点引言在现代前端开发中，Vue.js凭借其简洁的</div> </li> <li><a href="/article/1947764390052818944.htm" title="《Vue.js 核心概念：前端魔法世界的奇幻基石》" target="_blank">《Vue.js 核心概念：前端魔法世界的奇幻基石》</a> Muai木离 <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/flutter/1.htm">flutter</a> <div>在当今数字化浪潮汹涌澎湃，Web应用如梦幻仙境般绚烂多彩且变幻无穷的时代，Vue.js仿若一位神秘而强大的魔法画师，其核心概念则是绘制出震撼人心的Web开发魔法画卷的神来之笔。这些概念宛如星空中最耀眼、最具魔力的星座，不仅赋予Vue.js令人心醉神迷的独特魅力与蓬勃无尽的创造力，更为构建灵动如仙、性能超凡且用户体验犹如置身奇幻梦境的Web应用勾勒出清晰可见的魔法蓝图。对于那些心怀对前端开发领域的炽</div> </li> <li><a href="/article/1947764390468055040.htm" title="Pinia 实战指南：Vue 3 状态管理的高效之道" target="_blank">Pinia 实战指南：Vue 3 状态管理的高效之道</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>1.给我来个系统学习Pinia的大纲学习Pinia作为Vue.js的状态管理库，可以按照以下大纲来系统地进行学习：1.Pinia入门Pinia简介什么是Pinia？Pinia是Vue3的官方状态管理库，是对Vuex的继承和改进。它通过提供更简洁和灵活的API，使得在Vue应用中管理全局状态变得更加容易。Pinia是专为Vue3设计的，基于CompositionAPI，允许开发者以更加模块化和简洁的</div> </li> <li><a href="/article/1947763128926269440.htm" title="error ‘vue‘ 不是内部或外部命令，也不是可运行的程序或批处理文件 [Windows/Mac/Linux 系统解决方案大全]" target="_blank">error ‘vue‘ 不是内部或外部命令，也不是可运行的程序或批处理文件 [Windows/Mac/Linux 系统解决方案大全]</a> <div>error‘vue‘不是内部或外部命令，也不是可运行的程序或批处理文件[Windows/Mac/Linux系统解决方案大全]在使用Vue.js开发时，常常会遇到如下错误提示：'vue'不是内部或外部命令，也不是可运行的程序或批处理文件。这是因为系统无法识别vue命令，可能源于多种原因：未安装或未正确配置环境变量、VueCLI未安装、Node.js管理工具（如nvm）切换版本后未重新全局安装等。作者</div> </li> <li><a href="/article/1947760602915074048.htm" title="入门指南：Vue.js的基本概念和用法" target="_blank">入门指南：Vue.js的基本概念和用法</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>引言：Vue.js是一种流行的JavaScript框架，用于构建现代化的Web应用程序。它以其简洁易用的API和响应式的数据绑定而闻名，使得开发人员能够更轻松地构建交互性强大的用户界面。本文将介绍Vue.js的基本概念和用法，帮助初学者快速入门。一、Vue.js是一个轻量级、渐进式的JavaScript框架，用于构建用户界面。它的设计目标是通过尽可能简单的API，让开发者能够更高效地开发交互性强大</div> </li> <li><a href="/article/1947757195953238016.htm" title="使用位运算优化 Vue.js 应用：高效状态管理技巧" target="_blank">使用位运算优化 Vue.js 应用：高效状态管理技巧</a> 结城 <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>在Vue.js开发中，位运算（BitwiseOperations）是一种高效的工具，尤其适用于需要管理大量布尔状态或优化性能的场景。位运算通过操作二进制位来实现状态的存储和检查，相比传统的数组或对象操作，内存占用更低，执行速度更快。本篇博客将介绍如何在Vue.js中应用位运算技巧，结合Vue的响应式系统实现高效的状态管理。读vue3响应式源码有感https://github.com/vuejs/c</div> </li> <li><a href="/article/1947510263628492800.htm" title="Vue.js 全面解析：构建现代前端应用的渐进式框架" target="_blank">Vue.js 全面解析：构建现代前端应用的渐进式框架</a> 斯~内克 <a class="tag" taget="_blank" href="/search/vue%E7%9F%A5%E8%AF%86%E7%82%B9/1.htm">vue知识点</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>一、Vue.js的核心价值与演进1.1前端框架的变革与Vue的定位根据2024年StateofJS调查报告，Vue.js以82%的开发者满意度稳居前端框架前三甲。其核心优势体现在：渐进式架构：可从轻量级视图层扩展至全栈解决方案响应式系统：基于Proxy的精准依赖追踪（Vue3）组合式API：代码复用率提升60%以上生态系统：覆盖SSR、状态管理、移动端等20+场景1.2版本演进里程碑版本发布时间里</div> </li> <li><a href="/article/1947457406875267072.htm" title="UniApp 常用UI库" target="_blank">UniApp 常用UI库</a> xkxnq <a class="tag" taget="_blank" href="/search/uniapp/1.htm">uniapp</a><a class="tag" taget="_blank" href="/search/uniapp/1.htm">uniapp</a> <div>UniApp是一个基于Vue.js的跨平台开发框架，常用于开发微信小程序、H5、App等应用。为了快速构建界面，开发者常使用一些UI库，这些库提供了预定义的组件（如按钮、列表、表单等），能显著提升开发效率。以下是一些常用的UniAppUI库及其对应的GitHub地址（开源地址），这些都是社区中广泛使用且维护活跃的项目：常用UniAppUI库及地址uViewUI简介：一个功能强大、高度可定制的UI框</div> </li> <li><a href="/article/24.htm" title="tomcat基础与部署发布" target="_blank">tomcat基础与部署发布</a> 暗黑小菠萝 <a class="tag" taget="_blank" href="/search/Tomcat+java+web/1.htm">Tomcat java web</a> <div>从51cto搬家了，以后会更新在这里方便自己查看。做项目一直用tomcat，都是配置到eclipse中使用，这几天有时间整理一下使用心得，有一些自己配置遇到的细节问题。 Tomcat：一个Servlets和JSP页面的容器，以提供网站服务。一、Tomcat安装安装方式：①运行.exe安装包 &n</div> </li> <li><a href="/article/151.htm" title="网站架构发展的过程" target="_blank">网站架构发展的过程</a> ayaoxinchao <a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/%E5%BA%94%E7%94%A8%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">应用服务器</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%AB%99%E6%9E%B6%E6%9E%84/1.htm">网站架构</a> <div>1.初始阶段网站架构：应用程序、数据库、文件等资源在同一个服务器上 2.应用服务和数据服务分离：应用服务器、数据库服务器、文件服务器 3.使用缓存改善网站性能：为应用服务器提供本地缓存，但受限于应用服务器的内存容量，可以使用专门的缓存服务器，提供分布式缓存服务器架构 4.使用应用服务器集群改善网站的并发处理能力：使用负载均衡调度服务器，将来自客户端浏览器的访问请求分发到应用服务器集群中的任何</div> </li> <li><a href="/article/278.htm" title="[信息与安全]数据库的备份问题" target="_blank">[信息与安全]数据库的备份问题</a> comsci <a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a> <div> 如果你们建设的信息系统是采用中心-分支的模式,那么这里有一个问题如果你的数据来自中心数据库,那么中心数据库如果出现故障,你的分支机构的数据如何保证安全呢? 是否应该在这种信息系统结构的基础上进行改造,容许分支机构的信息系统也备份一个中心数据库的文件呢? &n</div> </li> <li><a href="/article/405.htm" title="使用maven tomcat plugin插件debug关联源代码" target="_blank">使用maven tomcat plugin插件debug关联源代码</a> 商人shang <a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a><a class="tag" taget="_blank" href="/search/debug/1.htm">debug</a><a class="tag" taget="_blank" href="/search/%E6%9F%A5%E7%9C%8B%E6%BA%90%E7%A0%81/1.htm">查看源码</a><a class="tag" taget="_blank" href="/search/tomcat-plugin/1.htm">tomcat-plugin</a> <div>*首先需要配置好'''maven-tomcat7-plugin'''，参见[[Maven开发Web项目]]的'''Tomcat'''部分。 *配置好后，在[[Eclipse]]中打开'''Debug Configurations'''界面，在'''Maven Build'''项下新建当前工程的调试。在'''Main'''选项卡中点击'''Browse Workspace...'''选择需要开发的</div> </li> <li><a href="/article/532.htm" title="大访问量高并发" target="_blank">大访问量高并发</a> oloz <a class="tag" taget="_blank" href="/search/%E5%A4%A7%E8%AE%BF%E9%97%AE%E9%87%8F%E9%AB%98%E5%B9%B6%E5%8F%91/1.htm">大访问量高并发</a> <div>大访问量高并发的网站主要压力还是在于数据库的操作上，尽量避免频繁的请求数据库。下面简要列出几点解决方案： 01、优化你的代码和查询语句，合理使用索引 02、使用缓存技术例如memcache、ecache将不经常变化的数据放入缓存之中 03、采用服务器集群、负载均衡分担大访问量高并发压力 04、数据读写分离 05、合理选用框架，合理架构(推荐分布式架构)。 </div> </li> <li><a href="/article/659.htm" title="cache 服务器" target="_blank">cache 服务器</a> 小猪猪08 <a class="tag" taget="_blank" href="/search/cache/1.htm">cache</a> <div>Cache 即高速缓存.那么cache是怎么样提高系统性能与运行速度呢？是不是在任何情况下用cache都能提高性能？是不是cache用的越多就越好呢？我在近期开发的项目中有所体会，写下来当作总结也希望能跟大家一起探讨探讨，有错误的地方希望大家批评指正。　　1.Cache 是怎么样工作的? 　　Cache 是分配在服务器上</div> </li> <li><a href="/article/786.htm" title="mysql存储过程" target="_blank">mysql存储过程</a> 香水浓 <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div>Description:插入大量测试数据 use xmpl; drop procedure if exists mockup_test_data_sp; create procedure mockup_test_data_sp( in number_of_records int ) begin declare cnt int; declare name varch</div> </li> <li><a href="/article/913.htm" title="CSS的class、id、css文件名的常用命名规则" target="_blank">CSS的class、id、css文件名的常用命名规则</a> agevs <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/UI/1.htm">UI</a><a class="tag" taget="_blank" href="/search/%E6%A1%86%E6%9E%B6/1.htm">框架</a><a class="tag" taget="_blank" href="/search/Ajax/1.htm">Ajax</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a> <div> CSS的class、id、css文件名的常用命名规则 (一)常用的CSS命名规则　　头：header 　　内容：content/container 　　尾：footer 　　导航：nav 　　侧栏：sidebar 　　栏目：column 　　页面外围控制整体布局宽度：wrapper 　　左右中：left right </div> </li> <li><a href="/article/1040.htm" title="全局数据源" target="_blank">全局数据源</a> AILIKES <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/tomcat/1.htm">tomcat</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/jdbc/1.htm">jdbc</a><a class="tag" taget="_blank" href="/search/JNDI/1.htm">JNDI</a> <div>实验目的：为了研究两个项目同时访问一个全局数据源的时候是创建了一个数据源对象，还是创建了两个数据源对象。 1：将diuid和mysql驱动包（druid-1.0.2.jar和mysql-connector-java-5.1.15.jar）copy至%TOMCAT_HOME%/lib下；2：配置数据源，将JNDI在%TOMCAT_HOME%/conf/context.xml中配置好,格式如下：&l</div> </li> <li><a href="/article/1167.htm" title="MYSQL的随机查询的实现方法" target="_blank">MYSQL的随机查询的实现方法</a> baalwolf <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div>MYSQL的随机抽取实现方法。举个例子，要从tablename表中随机提取一条记录，大家一般的写法就是：SELECT * FROM tablename ORDER BY RAND() LIMIT 1。但是，后来我查了一下MYSQL的官方手册，里面针对RAND()的提示大概意思就是，在ORDER BY从句里面不能使用RAND()函数，因为这样会导致数据列被多次扫描。但是在MYSQL 3.23版本中，</div> </li> <li><a href="/article/1294.htm" title="JAVA的getBytes()方法" target="_blank">JAVA的getBytes()方法</a> bijian1013 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/eclipse/1.htm">eclipse</a><a class="tag" taget="_blank" href="/search/unix/1.htm">unix</a><a class="tag" taget="_blank" href="/search/OS/1.htm">OS</a> <div> 在Java中，String的getBytes()方法是得到一个操作系统默认的编码格式的字节数组。这个表示在不同OS下，返回的东西不一样！ String.getBytes(String decode)方法会根据指定的decode编码返回某字符串在该编码下的byte数组表示，如： byte[] b_gbk = "</div> </li> <li><a href="/article/1421.htm" title="AngularJS中操作Cookies" target="_blank">AngularJS中操作Cookies</a> bijian1013 <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/AngularJS/1.htm">AngularJS</a><a class="tag" taget="_blank" href="/search/Cookies/1.htm">Cookies</a> <div> 如果你的应用足够大、足够复杂，那么你很快就会遇到这样一咱种情况：你需要在客户端存储一些状态信息，这些状态信息是跨session(会话)的。你可能还记得利用document.cookie接口直接操作纯文本cookie的痛苦经历。幸运的是，这种方式已经一去不复返了，在所有现代浏览器中几乎</div> </li> <li><a href="/article/1548.htm" title="[Maven学习笔记五]Maven聚合和继承特性" target="_blank">[Maven学习笔记五]Maven聚合和继承特性</a> bit1129 <a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a> <div>Maven聚合在实际的项目中，一个项目通常会划分为多个模块，为了说明问题，以用户登陆这个小web应用为例。通常一个web应用分为三个模块： 1. 模型和数据持久化层user-core, 2. 业务逻辑层user-service以 3. web展现层user-web， user-service依赖于user-core user-web依赖于user-core和use</div> </li> <li><a href="/article/1675.htm" title="【JVM七】JVM知识点总结" target="_blank">【JVM七】JVM知识点总结</a> bit1129 <a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a> <div> 1. JVM运行模式 1.1 JVM运行时分为-server和-client两种模式，在32位机器上只有client模式的JVM。通常，64位的JVM默认都是使用server模式，因为server模式的JVM虽然启动慢点，但是，在运行过程，JVM会尽可能的进行优化 1.2 JVM分为三种字节码解释执行方式：mixed mode, interpret mode以及compiler </div> </li> <li><a href="/article/1802.htm" title="linux下查看nginx、apache、mysql、php的编译参数" target="_blank">linux下查看nginx、apache、mysql、php的编译参数</a> ronin47 <div>在linux平台下的应用，最流行的莫过于nginx、apache、mysql、php几个。而这几个常用的应用，在手工编译完以后，在其他一些情况下（如：新增模块），往往想要查看当初都使用了那些参数进行的编译。这时候就可以利用以下方法查看。 1、nginx [root@361way ~]# /App/nginx/sbin/nginx -V nginx: nginx version: nginx/</div> </li> <li><a href="/article/1929.htm" title="unity中运用Resources.Load的方法？" target="_blank">unity中运用Resources.Load的方法？</a> brotherlamp <a class="tag" taget="_blank" href="/search/unity%E8%A7%86%E9%A2%91/1.htm">unity视频</a><a class="tag" taget="_blank" href="/search/unity%E8%B5%84%E6%96%99/1.htm">unity资料</a><a class="tag" taget="_blank" href="/search/unity%E8%87%AA%E5%AD%A6/1.htm">unity自学</a><a class="tag" taget="_blank" href="/search/unity/1.htm">unity</a><a class="tag" taget="_blank" href="/search/unity%E6%95%99%E7%A8%8B/1.htm">unity教程</a> <div>问：unity中运用Resources.Load的方法？答：Resources.Load是unity本地动态加载资本所用的方法,也即是你想动态加载的时分才用到它,比方枪弹,特效,某些实时替换的图像什么的,主张此文件夹不要放太多东西,在打包的时分,它会独自把里边的一切东西都会集打包到一同,不论里边有没有你用的东西,所以大多数资本应该是自个建文件放置 1、unity实时替换的物体即是依据环境条件</div> </li> <li><a href="/article/2056.htm" title="线段树-入门" target="_blank">线段树-入门</a> bylijinnan <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E7%BA%BF%E6%AE%B5%E6%A0%91/1.htm">线段树</a> <div> /** * 线段树入门 * 问题：已知线段[2,5] [4,6] [0,7]；求点2,4,7分别出现了多少次 * 以下代码建立的线段树用链表来保存，且树的叶子结点类似[i,i] * * 参考链接：http://hi.baidu.com/semluhiigubbqvq/item/be736a33a8864789f4e4ad18 * @author lijinna</div> </li> <li><a href="/article/2183.htm" title="全选与反选" target="_blank">全选与反选</a> chicony <a class="tag" taget="_blank" href="/search/%E5%85%A8%E9%80%89/1.htm">全选</a> <div> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>全选与反选</title> </div> </li> <li><a href="/article/2310.htm" title="vim一些简单记录" target="_blank">vim一些简单记录</a> chenchao051 <a class="tag" taget="_blank" href="/search/vim/1.htm">vim</a> <div>mac在/usr/share/vim/vimrc linux在/etc/vimrc 1、问：后退键不能删除数据，不能往后退怎么办？答：在vimrc中加入set backspace=2 2、问：如何控制tab键的缩进？答：在vimrc中加入set tabstop=4 (任何</div> </li> <li><a href="/article/2437.htm" title="Sublime Text 快捷键" target="_blank">Sublime Text 快捷键</a> daizj <a class="tag" taget="_blank" href="/search/%E5%BF%AB%E6%8D%B7%E9%94%AE/1.htm">快捷键</a><a class="tag" taget="_blank" href="/search/sublime/1.htm">sublime</a> <div>[size=large][/size]Sublime Text快捷键：Ctrl+Shift+P：打开命令面板Ctrl+P：搜索项目中的文件Ctrl+G：跳转到第几行Ctrl+W：关闭当前打开文件Ctrl+Shift+W：关闭所有打开文件Ctrl+Shift+V：粘贴并格式化Ctrl+D：选择单词，重复可增加选择下一个相同的单词Ctrl+L：选择行，重复可依次增加选择下一行Ctrl+Shift+L：</div> </li> <li><a href="/article/2564.htm" title="php 引用(&)详解" target="_blank">php 引用(&)详解</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a> <div>在PHP 中引用的意思是：不同的名字访问同一个变量内容. 与Ｃ语言中的指针是有差别的．Ｃ语言中的指针里面存储的是变量的内容在内存中存放的地址变量的引用 PHP 的引用允许你用两个变量来指向同一个内容复制代码代码如下: <? $a="ABC"; $b =&$a; echo</div> </li> <li><a href="/article/2691.htm" title="SVN中trunk,branches,tags用法详解" target="_blank">SVN中trunk,branches,tags用法详解</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/SVN/1.htm">SVN</a> <div>Subversion有一个很标准的目录结构，是这样的。比如项目是proj，svn地址为svn://proj/，那么标准的svn布局是svn://proj/|+-trunk+-branches+-tags这是一个标准的布局，trunk为主开发目录，branches为分支开发目录，tags为tag存档目录（不允许修改）。但是具体这几个目录应该如何使用，svn并没有明确的规范，更多的还是用户自己的习惯。</div> </li> <li><a href="/article/2818.htm" title="对软件设计的思考" target="_blank">对软件设计的思考</a> e200702084 <a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/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/ssh/1.htm">ssh</a><a class="tag" taget="_blank" href="/search/%E6%B4%BB%E5%8A%A8/1.htm">活动</a> <div>软件设计的宏观与微观软件开发是一种高智商的开发活动。一个优秀的软件设计人员不仅要从宏观上把握软件之间的开发，也要从微观上把握软件之间的开发。宏观上，可以应用面向对象设计，采用流行的SSH架构，采用web层，业务逻辑层，持久层分层架构。采用设计模式提供系统的健壮性和可维护性。微观上，对于一个类，甚至方法的调用，从计算机的角度模拟程序的运行情况。了解内存分配，参数传</div> </li> <li><a href="/article/2945.htm" title="同步、异步、阻塞、非阻塞" target="_blank">同步、异步、阻塞、非阻塞</a> geeksun <a class="tag" taget="_blank" href="/search/%E9%9D%9E%E9%98%BB%E5%A1%9E/1.htm">非阻塞</a> <div>同步、异步、阻塞、非阻塞这几个概念有时有点混淆，在此文试图解释一下。同步：发出方法调用后，当没有返回结果，当前线程会一直在等待（阻塞）状态。场景：打电话，营业厅窗口办业务、B/S架构的http请求-响应模式。异步：方法调用后不立即返回结果，调用结果通过状态、通知或回调通知方法调用者或接收者。异步方法调用后，当前线程不会阻塞，会继续执行其他任务。实现：</div> </li> <li><a href="/article/3072.htm" title="Reverse SSH Tunnel 反向打洞實錄" target="_blank">Reverse SSH Tunnel 反向打洞實錄</a> hongtoushizi <a class="tag" taget="_blank" href="/search/ssh/1.htm">ssh</a> <div>實際的操作步驟： # 首先，在客戶那理的機器下指令連回我們自己的 Server，並設定自己 Server 上的 12345 port 會對應到幾器上的 SSH port ssh -NfR 12345:localhost:22 fred@myhost.com # 然後在 myhost 的機器上連自己的 12345 port，就可以連回在客戶那的機器 ssh localhost -p 1</div> </li> <li><a href="/article/3199.htm" title="Hibernate中的缓存" target="_blank">Hibernate中的缓存</a> Josh_Persistence <a class="tag" taget="_blank" href="/search/%E4%B8%80%E7%BA%A7%E7%BC%93%E5%AD%98/1.htm">一级缓存</a><a class="tag" taget="_blank" href="/search/Hiberante%E7%BC%93%E5%AD%98/1.htm">Hiberante缓存</a><a class="tag" taget="_blank" href="/search/%E6%9F%A5%E8%AF%A2%E7%BC%93%E5%AD%98/1.htm">查询缓存</a><a class="tag" taget="_blank" href="/search/%E4%BA%8C%E7%BA%A7%E7%BC%93%E5%AD%98/1.htm">二级缓存</a> <div>Hibernate中的缓存一、Hiberante中常见的三大缓存：一级缓存，二级缓存和查询缓存。 Hibernate中提供了两级Cache，第一级别的缓存是Session级别的缓存，它是属于事务范围的缓存。这一级别的缓存是由hibernate管理的，一般情况下无需进行干预；第二级别的缓存是SessionFactory级别的缓存，它是属于进程范围或群集范围的缓存。这一级别的缓存</div> </li> <li><a href="/article/3326.htm" title="对象关系行为模式之延迟加载" target="_blank">对象关系行为模式之延迟加载</a> home198979 <a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a><a class="tag" taget="_blank" href="/search/%E5%BB%B6%E8%BF%9F%E5%8A%A0%E8%BD%BD/1.htm">延迟加载</a> <div>形象化设计模式实战 HELLO!架构一、概念 Lazy Load：一个对象，它虽然不包含所需要的所有数据，但是知道怎么获取这些数据。延迟加载貌似很简单，就是在数据需要时再从数据库获取，减少数据库的消耗。但这其中还是有不少技巧的。二、实现延迟加载实现Lazy Load主要有四种方法：延迟初始化、虚</div> </li> <li><a href="/article/3453.htm" title="xml 验证" target="_blank">xml 验证</a> pengfeicao521 <a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a><a class="tag" taget="_blank" href="/search/xml%E8%A7%A3%E6%9E%90/1.htm">xml解析</a> <div>有些字符，xml不能识别，用jdom或者dom4j解析的时候就报错 public static void testPattern() { // 含有非法字符的串 String str = "Jamey친Ñ&#1282</div> </li> <li><a href="/article/3580.htm" title="div设置半透明效果" target="_blank">div设置半透明效果</a> spjich <a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%8D%8A%E9%80%8F%E6%98%8E/1.htm">半透明</a> <div>为div设置如下样式： div{filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 0.5;} 说明： 1、filter：对win IE设置半透明滤镜效果，filter:alpha(Opacity=80)代表该对象80%半透明，火狐浏览器不认2、-moz-opaci</div> </li> <li><a href="/article/3707.htm" title="你真的了解单例模式么？" target="_blank">你真的了解单例模式么？</a> w574240966 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E4%BE%8B/1.htm">单例</a><a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a><a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a> <div> 单例模式，很多初学者认为单例模式很简单，并且认为自己已经掌握了这种设计模式。但事实上，你真的了解单例模式了么。一，单例模式的5中写法。（回字的四种写法，哈哈。） 1，懒汉式（1）线程不安全的懒汉式 public cla</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>