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/1835512920797179904.htm" title="element实现动态路由+面包屑" target="_blank">element实现动态路由+面包屑</a> 软件技术NINI <a class="tag" taget="_blank" href="/search/vue%E6%A1%88%E4%BE%8B/1.htm">vue案例</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi</div> </li> <li><a href="/article/1835437775344726016.htm" title="博客网站制作教程" target="_blank">博客网站制作教程</a> 2401_85194651 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a> <div>首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java</div> </li> <li><a href="/article/1835331375377510400.htm" title="【前端】vue 报错:The template root requires exactly one element" target="_blank">【前端】vue 报错:The template root requires exactly one element</a> 程序员-张师傅 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>【前端】vue报错:Thetemplaterootrequiresexactlyoneelement在Vue.js中，当你遇到错误“Thetemplaterootrequiresexactlyoneelement”时，这通常意味着你的Vue组件的模板（template）根节点不是单一的元素。Vue要求每个组件的模板必须有一个根元素来包裹所有的子元素。这个错误通常出现在以下几种情况：模板中有多个并行</div> </li> <li><a href="/article/1835249513875468288.htm" title="说说在 Vue.js 中如何实现组件间通信" target="_blank">说说在 Vue.js 中如何实现组件间通信</a> deniro <div>1用法假设父组件的模板包含子组件，我们可以通过props来正向地把数据从父组件传递给子组件。props可以是字符串数组，也可以是对象。html：js：Vue.component('deniro-component',{props:['message'],template:'{{message}}'});varapp=newVue({el:'#app',data:{}});渲染结果：＂嫦娥四号＂成功</div> </li> <li><a href="/article/1835019650895802368.htm" title="python基于django/flask的NBA球员大数据分析与可视化python+java+node.js" target="_blank">python基于django/flask的NBA球员大数据分析与可视化python+java+node.js</a> QQ_511008285 <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/django/1.htm">django</a><a class="tag" taget="_blank" href="/search/flask/1.htm">flask</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%88%86%E6%9E%90/1.htm">数据分析</a> <div>前端开发框架:vue.js数据库mysql版本不限后端语言框架支持：1java(SSM/springboot)-idea/eclipse2.Nodejs+Vue.js-vscode3.python(flask/django)--pycharm/vscode4.php(thinkphp/laravel)-hbuilderx数据库工具：Navicat/SQLyog等都可以本文针对NBA球员的大数据进行</div> </li> <li><a href="/article/1835019524521422848.htm" title="Java基于spring boot的国产电影数据分析与可视化python+java+node.js" target="_blank">Java基于spring boot的国产电影数据分析与可视化python+java+node.js</a> QQ_511008285 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%88%86%E6%9E%90/1.htm">数据分析</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/django/1.htm">django</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/flask/1.htm">flask</a> <div>前端开发框架:vue.js数据库mysql版本不限后端语言框架支持：1java(SSM/springboot)-idea/eclipse2.Nodejs+Vue.js-vscode3.python(flask/django)--pycharm/vscode4.php(thinkphp/laravel)-hbuilderx数据库工具：Navicat/SQLyog等都可以该系统使用进行大数据处理和</div> </li> <li><a href="/article/1834955336226795520.htm" title="Vue插槽：提升Vue组件灵活性的利器" target="_blank">Vue插槽：提升Vue组件灵活性的利器</a> anyup_前端梦工厂 <a class="tag" taget="_blank" href="/search/Vue.js/1.htm">Vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a> <div>一.介绍什么是插槽插槽是Vue.js中一种强大的组件封装机制，用于在组件间复用可以动态填充的内容。简而言之，插槽允许我们在组件的模板中定义一些可变的区域，在使用组件时，可以灵活地填充不同的内容进入这些区域。当我们的组件有一些需要在使用组件时才能确定的内容时，比如按钮、文字、图标等，使用插槽可以非常方便地将这些内容传递给组件。二.基础插槽1.单个插槽单个插槽也可以称为默认插槽（DefaultSlot</div> </li> <li><a href="/article/1834920164567642112.htm" title="前端同学必备：教你如何安装、使用Chrome的vue-devtools插件" target="_blank">前端同学必备：教你如何安装、使用Chrome的vue-devtools插件</a> 界忆 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E7%BC%96%E7%A8%8B/1.htm">前端编程</a><a class="tag" taget="_blank" href="/search/Vue-devtools%E6%8F%92%E4%BB%B6/1.htm">Vue-devtools插件</a><a class="tag" taget="_blank" href="/search/chrome/1.htm">chrome</a><a class="tag" taget="_blank" href="/search/devtools/1.htm">devtools</a> <div>I.介绍vue-devtools插件Vue-devtools是一个Chrome浏览器插件，它是一个浏览器调试工具，用于开发Vue.js应用程序。它可以用于Vue.js应用程序的调试，可以更好地了解应用程序的结构和状态，以及帮助快速修复代码错误。Vue-devtools插件的作用和优势如下：1.调试Vue.js应用程序：Vue-devtools是一个强大的调试工具，可以帮助开发人员正确地调试应用程序</div> </li> <li><a href="/article/1834880085786718208.htm" title="python毕业设计作品：python闲置物品二手交易平台系统设计与实现毕业设计源代码（Django框架）" target="_blank">python毕业设计作品：python闲置物品二手交易平台系统设计与实现毕业设计源代码（Django框架）</a> 黄菊华老师 <a class="tag" taget="_blank" href="/search/%E6%AF%95%E8%AE%BE%E8%B5%84%E6%96%99/1.htm">毕设资料</a><a class="tag" taget="_blank" href="/search/python%E4%BA%8C%E6%89%8B%E4%BA%A4%E6%98%93%E5%B9%B3%E5%8F%B0%E7%B3%BB%E7%BB%9F/1.htm">python二手交易平台系统</a> <div>博主介绍：黄菊华老师《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者，CSDN博客专家，在线教育专家，CSDN钻石讲师；专注大学生毕业设计教育和辅导。所有项目都配有从入门到精通的基础知识视频课程，学习后应对毕业设计答辩。项目配有对应开发文档、开题报告、任务书、PPT、论文模版等项目都录了发布和功能操作演示视频；项目的界面和功能都可以定制，包安装运行！！！如果需要联系我，可以在CSD</div> </li> <li><a href="/article/1834768522685804544.htm" title="uni-app开发微信小程序" target="_blank">uni-app开发微信小程序</a> hong161688 <a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">微信小程序</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a> <div>uni-app是一个使用Vue.js开发所有前端应用的框架，它支持编译到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/字节跳动/QQ/京东等）平台。使用uni-app开发微信小程序，可以充分利用Vue.js的开发效率和小程序平台的原生能力，实现跨平台的高效开发。以下将详细介绍使用uni-app开发微信小程序的全过程，包括项目搭建、开发、调试、测试及发布等环节，内容将尽量达到或超</div> </li> <li><a href="/article/1834756301549301760.htm" title="使用 uni-app 开发微信小程序：深入教程与技巧" target="_blank">使用 uni-app 开发微信小程序：深入教程与技巧</a> 代码伐木匠 <a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0%E6%9C%AC/1.htm">笔记本</a><a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">微信小程序</a><a class="tag" taget="_blank" href="/search/notepad%2B%2B/1.htm">notepad++</a> <div>使用uni-app开发微信小程序：深入教程与技巧uni-app是一个使用Vue.js语法开发跨平台应用的框架，能够编译到iOS、Android、H5、微信小程序等多个平台。通过uni-app，你可以一套代码同时生成多个端的应用，极大提升开发效率。本文将带你深入了解如何使用uni-app开发微信小程序，并提供大量实践经验与技巧。1.环境配置与项目创建要开始使用uni-app开发微信小程序，首先需要搭</div> </li> <li><a href="/article/1834738272555855872.htm" title="Vue Router push方法的使用" target="_blank">Vue Router push方法的使用</a> hzw0510 <a class="tag" taget="_blank" href="/search/Vue/1.htm">Vue</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>VueRouterpush方法的使用this.$router.push是VueRouter提供的一个方法，用于在Vue.js应用中进行编程式导航。它的作用是将用户导航到应用中的不同路由。基本作用this.$router.push方法会在浏览器历史记录中添加一个新的记录，并导航到指定的路由。它的工作方式类似于点击一个组件，或者在浏览器中手动输入URL后点击回车。使用示例以下是一些使用this.$ro</div> </li> <li><a href="/article/1834671207056764928.htm" title="组件通信——provide 和 inject 实现爷孙组件通信" target="_blank">组件通信——provide 和 inject 实现爷孙组件通信</a> 你不讲 wood <a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>provide和inject实现爷孙组件通信介绍provide和inject是Vue.js提供的一种在组件之间共享数据的机制，它允许在组件树中的任何地方注入依赖项。这对于跨越多个层级的组件间通信特别有用，因此无需手动将prop数据逐层传递下去。provide：在一个组件中使用provide方法来定义要提供的数据或方法。provide方法返回一个对象，该对象包含了要提供的数据或方法。inject：在</div> </li> <li><a href="/article/1834655323768582144.htm" title="vue.js在js里获取属性，触发vue.js内的方法" target="_blank">vue.js在js里获取属性，触发vue.js内的方法</a> 摸鱼的张三 <a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/flutter/1.htm">flutter</a> <div>在script标签内把appVue设置varvarappVue=newVue({})appVue不能跨标签也就是说不能这样写varappVue=newVue({})console.log(appVue)上面这个是错的varappVue=newVue({})console.log(appVue)这个是vue2.js的版本这样写可以vue3.js是没有的然后拿到appVue就可以绑定原生事件触发app</div> </li> <li><a href="/article/1834631489283780608.htm" title="Vue 图片预览功能实现指南" target="_blank">Vue 图片预览功能实现指南</a> 繁依Fanyi <a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>1.介绍在现代web应用程序中，图片预览功能提升了用户体验，使用户可以在上传图片之前查看图片内容。本文将详细介绍如何在Vue.js应用中实现图片预览功能，包括基本实现、进阶功能、与ElementUI的集成、常见优化技巧以及与其他库的结合使用。2.基本功能实现2.1环境准备确保你的开发环境已经配置好，包括VueCLI和Node.js。如果还没有安装VueCLI，你可以通过以下命令安装：npminst</div> </li> <li><a href="/article/1834617504568274944.htm" title="前后端分离，Asp.net core webapi 如何配置跨域" target="_blank">前后端分离，Asp.net core webapi 如何配置跨域</a> 代码掌控者 <a class="tag" taget="_blank" href="/search/C%23/1.htm">C#</a><a class="tag" taget="_blank" href="/search/asp.net/1.htm">asp.net</a><a class="tag" taget="_blank" href="/search/core/1.htm">core</a><a class="tag" taget="_blank" href="/search/.net/1.htm">.net</a><a class="tag" taget="_blank" href="/search/core/1.htm">core</a><a class="tag" taget="_blank" href="/search/%E7%BB%8F%E9%AA%8C%E5%88%86%E4%BA%AB/1.htm">经验分享</a><a class="tag" taget="_blank" href="/search/c%23/1.htm">c#</a> <div>前言可以说，前后端分离已经成为当今信息系统项目开发的主流软件架构模式，微服务的出现，让前后端分离发展更是迅速，大量优秀的前端框架如vue.js、react的出现，也让前后端分离趋势加快。所谓的前后端分离软件架构模式，就是指将前端和后端的开发完全分离，后端负责提供API接口和数据处理，而前端通过各种现代的JavaScript技术如AJAX或者Fetch等，来调用后端提供的API接口获取数据，从而构建</div> </li> <li><a href="/article/1834610822148616192.htm" title="Uni-app 开发微信小程序" target="_blank">Uni-app 开发微信小程序</a> vvvae1234 <a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a> <div>随着移动互联网的发展，微信小程序已经成为一种流行的应用开发模式。Uni-app作为一种跨平台的开发框架，使用Vue.js语法，能够方便快速地开发出微信小程序、H5、App等多端应用。本指南将引导您从环境配置到实战案例开发，帮助您快速掌握使用Uni-app开发微信小程序的技巧。2.Uni-app概述2.1什么是Uni-app？Uni-app是一个使用Vue.js语法的跨平台开发框架，允许开发者用一套</div> </li> <li><a href="/article/1834590657881141248.htm" title="前后端时间转换的那些常见问题及处理方法" target="_blank">前后端时间转换的那些常见问题及处理方法</a> 繁依Fanyi <a class="tag" taget="_blank" href="/search/%E7%8A%B6%E6%80%81%E6%A8%A1%E5%BC%8F/1.htm">状态模式</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/github/1.htm">github</a> <div>在现代的Web开发中，前后端分离的架构已经成为主流，尤其是在SpringBoot和Vue.js的组合中。开发者在这种架构下经常遇到的一个问题就是如何处理时间的转换和显示。前端和后端对时间的处理方式不同，可能会导致时间在传递过程中出现问题，比如时区不同步、格式不一致等。因此，本文将详细讨论在SpringBoot+Vue前后端分离架构中如何处理时间转换问题，并提供一些解决方案。一、前后端时间处理的常见</div> </li> <li><a href="/article/1834480753681985536.htm" title="cross-plateform 跨平台应用程序-06-uni-app 介绍" target="_blank">cross-plateform 跨平台应用程序-06-uni-app 介绍</a> 知识分享官 <a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a> <div>详细介绍一下uni-app？whatuni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一次代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/京东/美团/钉钉/淘宝）、快应用等多个平台。以下是uni-app的一些核心特性和优势：使用Vue.js开发：uni-app基于Vue.js，这意味着如果你已经熟悉Vue.js</div> </li> <li><a href="/article/1834147716041633792.htm" title="从学习vue到uni-app的心得感悟" target="_blank">从学习vue到uni-app的心得感悟</a> crazy_章鱼哥 <a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>前言你是否想过，只用一套代码，就能开发出适用于多个平台的前端应用？你是否想过，只用Vue.js这样一个简洁强大的框架，就能实现各种炫酷的功能和效果？你是否想过，只用uni-app这样一个神器，就能成为一个高手？如果你有这样的想法，那么就跟我一起来学习uni-app吧！uni-app是一个基于Vue.js的全端开发框架，它可以让你用一套代码，同时运行在H5、小程序、App等多个平台上。它具有跨平台、</div> </li> <li><a href="/article/1834134354851360768.htm" title="基于java+SpringBoot+Vue的小徐影城管理系统设计与实现" target="_blank">基于java+SpringBoot+Vue的小徐影城管理系统设计与实现</a> paterWang <a class="tag" taget="_blank" href="/search/Java%E7%B2%BE%E5%93%81%E6%AF%95%E8%AE%BE%E5%AE%9E%E6%88%98/1.htm">Java精品毕设实战</a><a class="tag" taget="_blank" href="/search/%E8%AE%A1%E7%AE%97%E6%9C%BA%E6%AF%95%E4%B8%9A%E8%AE%BE%E8%AE%A1/1.htm">计算机毕业设计</a><a class="tag" taget="_blank" href="/search/Java/1.htm">Java</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a> <div>开发语言:Java数据库:MySQL技术:SpringBoot+MyBatis工具:IDEA/Ecilpse、Navicat、Maven系统简介小徐影城管理系统是一款基于Java、SpringBoot和Vue.js技术开发的影院管理系统，旨在为用户提供一个便捷、高效的在线购票和影院管理平台。系统通过B/S架构，实现了管理员和用户两端的功能操作，使得影院管理更加系统化、规范化。整体功能包含：电影信息</div> </li> <li><a href="/article/1834077372249370624.htm" title="vue前端性能优化之cdn的使用" target="_blank">vue前端性能优化之cdn的使用</a> 不cong明的亚子 <a class="tag" taget="_blank" href="/search/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/1.htm">性能优化</a><a class="tag" taget="_blank" href="/search/vue%2Belement/1.htm">vue+element</a><a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a> <div>优化原因项目中首页加载过慢，原因是js,css静态资源第一次加载的时间长vue.config.js'usestrict'......constcdn={js_cdn:['https://cdn.jsdelivr.net/npm/moment@2.27.0/moment.min.js','https://unpkg.com/vue@2.6.10/dist/vue.js','https://unpkg</div> </li> <li><a href="/article/1833949559944998912.htm" title="vue浏览器缓存sessionStorage、localStorage、Cookie" target="_blank">vue浏览器缓存sessionStorage、localStorage、Cookie</a> Liumoui <a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E7%BC%93%E5%AD%98/1.htm">缓存</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>在Vue.js项目中，管理浏览器缓存是常见的需求，主要可以通过sessionStorage、localStorage和Cookie来实现。下面分别介绍这三种方式及其用法。1.sessionStoragesessionStorage用于存储在会话（即浏览器窗口关闭前）期间的数据。每次打开一个新的窗口或标签页都会有一个新的会话。使用方法存储数据sessionStorage.setItem('key',</div> </li> <li><a href="/article/1833928246610194432.htm" title="vuex快速入门" target="_blank">vuex快速入门</a> 弓弓弓長 <a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a> <div>vuex是什么*1.Vuex的状态存储是响应式的2.你不能直接改变store中的状态。改变store中的状态的唯一途径就是显式地提交(commit)mutation。vuex是一个专门为vue.js应用程序开发的状态管理模式。vuex中，有默认的五种基本的对象：state：存储状态（变量）getters：对数据获取之前的再次编译，可以理解为state的计算属性。mutations：修改状态，并且是</div> </li> <li><a href="/article/1833920558622928896.htm" title="vue2快速入门" target="_blank">vue2快速入门</a> m0_66357705 <a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>vue2创建HTML界面，引用Vue.js文件编写视图 {{message}} {{type}}:插值表达式变量三元运算符函数调用算数运算在JS代码区域,创建Vue核心对象,定义数据模型 --> //创建一个新的Vue实例 newVue({ //指定Vue实例挂载到的DOM元素，使用'#app'选择器找到id为app的元素 el:"#app", //</div> </li> <li><a href="/article/1833832556395589632.htm" title="Vue实现双向数据绑定" target="_blank">Vue实现双向数据绑定</a> 眉间是银河 <a class="tag" taget="_blank" href="/search/flutter/1.htm">flutter</a> <div>在Vue.js中，双向数据绑定是通过v-model指令实现的。v-model是Vue.js提供的一个语法糖，它能够在表单元素和组件上实现数据的双向绑定。基本用法假设我们有一个简单的输入框，我们希望输入框的值能够实时反映到Vue实例的数据中，并且当Vue实例的数据发生变化时，输入框的值也会自动更新。你输入的内容是:{{message}}exportdefault{data(){return{mess</div> </li> <li><a href="/article/1833801035320225792.htm" title="Vue 生命周期与 TypeScript：深入理解组件生命周期" target="_blank">Vue 生命周期与 TypeScript：深入理解组件生命周期</a> shiming8879 <a class="tag" taget="_blank" href="/search/typescript/1.htm">typescript</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>Vue生命周期与TypeScript：深入理解组件生命周期引言Vue.js作为一种流行的前端框架，其组件生命周期是开发过程中不可或缺的一部分。理解并正确利用Vue的生命周期，可以帮助开发者构建更加健壮和可维护的应用。而当TypeScript与Vue结合使用时，这种优势得到了进一步的增强。TypeScript作为一种强类型语言，提供了类型检查和代码清晰性，使得Vue组件的生命周期管理变得更加高效和可</div> </li> <li><a href="/article/1833745183905247232.htm" title="vue3 什么是Composition API 我为什么要使用它？" target="_blank">vue3 什么是Composition API 我为什么要使用它？</a> 软件技术NINI <a class="tag" taget="_blank" href="/search/vue%E6%A1%88%E4%BE%8B/1.htm">vue案例</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>CompositionAPI（组合式API）是Vue3中引入的一组全新的API，旨在提供一种更加灵活和可组合的方式来组织和复用组件逻辑。这一改变是Vue.js向函数式编程和更现代的开发方式迈出的重要一步。以下是CompositionAPI的详细解析：一、基本概念定义：CompositionAPI是一组允许开发者以函数式编程风格组织Vue组件逻辑的API。目的：提高代码的可读性、可维护性、复用性和类</div> </li> <li><a href="/article/1833707106495197184.htm" title="Vue3异步请求的最佳实践：async/await 与 Promise.then()，Vue3请求接口数据，以及TypeScript中的泛型和任意类型（Vue3请求API，TS中的T 和 any）" target="_blank">Vue3异步请求的最佳实践：async/await 与 Promise.then()，Vue3请求接口数据，以及TypeScript中的泛型和任意类型（Vue3请求API，TS中的T 和 any）</a> 北城笑笑 <a class="tag" taget="_blank" href="/search/VueJS/1.htm">VueJS</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a> <div>前言在Vue3开发中，异步请求是非常常见的操作，特别是在与后端API交互时。虽然Vue.js自带了一些对异步数据的处理方式，但合理使用异步操作是确保应用顺畅运行的关键。这里我分享一下Vue3异步请求的最佳实践，并探讨async/await和Promise.then()两种处理异步操作的方式，简单记录一下1.请求接口的实现这里，我们使用一个请求接口callAskRecordList，它会从/gpt/</div> </li> <li><a href="/article/1833627924675260416.htm" title="Vue解說" target="_blank">Vue解說</a> 白总Server <a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93%E6%9E%B6%E6%9E%84/1.htm">数据库架构</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%8D%8F%E8%AE%AE/1.htm">网络协议</a><a class="tag" taget="_blank" href="/search/ssl/1.htm">ssl</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a> <div>Vue.js（通常简称为Vue）是一个开源的JavaScript框架，用于构建用户界面和单页应用程序（SPA）。它由前谷歌工程师尤雨溪（EvanYou）创建，并首次发布于2014年。Vue被设计为易于上手、灵活且高效，它允许开发者通过组件化的方式构建复杂的前端应用。Vue.js的关键特点：渐进式框架：Vue可以从简单的界面元素开始，逐步扩展到复杂的单页应用。响应式数据绑定：Vue使用双向数据绑定，</div> </li> <li><a href="/article/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>