开篇

• 1.什么是Vue?
  
  • Vue.js是一套构建用户界面的框架，它不仅易于上手，还可以与其它第三方库整合(Swiper、IScroll、...)。
• 2.框架和库的区别?
  
  • 框架：是一套完整的解决方案；对项目的侵入性较大，项目如果需要更换框架，则需要重构整个项目。
  • 库（插件）：提供某一个小功能，对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其它库实现需求。
    • 例如: 从jQuery 切换到 Zepto, 无缝切换
    • 从IScroll切换到ScrollMagic, 只需要将用到IScroll的代码替换成ScrollMagic代码即可
• 3.为什么要学习框架?
  
  • 提升开发效率：在企业中，时间就是效率，效率就是金钱；
  • 前端提高开发效率的发展历程：原生JS -> jQuery之类的类库 -> 前端模板引擎 -> Vue / React / Angular
• 4.框架有很多, 为什么要先学Vue
  
  • Vue、Angular、React一起，被称之为前端三大主流框架！
    • 但是Angular、React是老外编写的, 所以所有的资料都是英文的
    • 而Vue是国人编写的,所以所有的资料都是中文的,并且Vue中整合了Angular、React中的众多优点
    • 所以为了降低我们的学习难度,我们先学Vue, 学完之后再学习Angular和React
• 5.使用Vue有哪些优势?
  
  • 5.1Vue的核心概念之一:
    • 通过数据驱动界面更新,无需操作DOM来更新界面
      • 使用Vue我们只需要关心如何获取数据,如何处理数据,如何编写业务逻辑代码,我们只需要将处理好的数据交给Vue, Vue就会自动将数据渲染到模板中(界面上)
  • 5.2Vue的核心概念之二:
    • 组件化开发，我们可以将网页拆分成一个个独立的组件来编写，将来再通过封装好的组件拼接成一个完整的网页
    • 思维导图：https://cn.vuejs.org/images/components.png

Vue基本模板

• 1.Vue框架使用方式
  
  • 1.1传统下载导入使用
  • 1.2vue-cli安装导入使用
• 2.Vue框架使用步骤
  
  • 2.1下载Vue框架
  • 2.2导入Vue框架
  • 2.3创建Vue实例对象
  • 2.4指定Vue实例对象控制的区域
  • 2.5指定Vue实例对象控制区域的数据

Vue数据单向传递

• 1.MVVM设计模式
  
  • 在MVVM设计模式中由3个部分组成
    • M : Model 数据模型(保存数据, 处理数据业务逻辑)
    • V : View 视图(展示数据, 与用户交互)
    • VM: View Model 数据模型和视图的桥梁(M是中国人, V是美国人, VM就是翻译)
  • MVVM设计模式最大的特点就是支持数据的双向传递
    • 数据可以从 M -> VM -> V
    • 也可以从 V -> VM -> M
• 2.Vue中MVVM的划分
  
  • Vue其实是基于MVVM设计模式的
    • 被控制的区域: View
    • Vue实例对象 : View Model
    • 实例对象中的data: Model
• 3.Vue中数据的单向传递
  
  • 我们把"数据"交给"Vue实例对象","Vue实例对象"将数据交给"界面"
  • Model -> View Model -> View

{{ name }}


Vue数据双向传递

• 1.Vue调试工具安装
  
  • 如果你能打开谷歌插件商店, 直接在线安装即可
    https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=zh-CN
  • 由于国内无法打开谷歌国外插件商店, 所以可以离线安装
    https://www.chromefor.com/vue-js-devtools_v5-3-0/
• 2.安装步骤:
  
  • 2.1下载离线安装包
  • 2.2打开谷歌插件界面
  • 2.3直接将插件拖入
  • 2.4报错程序包无效:"CRX_HEADER_INVALID",可以将安装包修改为rar后缀,解压之后再安装
  • 2.5重启浏览器
• 3.数据双向绑定
  
  • 默认情况下Vue只支持数据单向传递 M -> VM -> V,但是由于Vue是基于MVVM设计模式的,所以也提供了双向传递的能力
  • 在、 及元素上可以用v-model指令创建双向数据绑定</li> </ul> </li> </ul> <blockquote> 注意点:<br> v-model 会忽略所有表单元素的value、checked、selected 特性的初始值,而总是将 Vue 实例的数据作为数据来源<br /> </blockquote> 常用指令-v-once <ul> <li> 1.什么是指令?<br /> <ul> <li>指令就是Vue内部提供的一些自定义属性,这些属性中封装好了Vue内部实现的一些功能，只要使用这些指令就可以使用Vue中实现的这些功能</li> </ul> </li> <li> 2.Vue数据绑定的特点<br /> <ul> <li>只要数据发生变化, 界面就会跟着变化</li> </ul> </li> <li> 3.v-once指令<br /> <ul> <li>让界面不要跟着数据变化, 只渲染一次</li> </ul> </li> <li> 4.v-model指令<br /> <ul> <li>渲染多次</li> <li>示例</li> </ul> </li> </ul> <blockquote><code>{{ name }}<br /> {{ name }}<br /> </code></blockquote><br /> 常用指令-v-cloak <ul> <li> 1.Vue数据绑定过程<br /> <ul> <li>1.1会先将未绑定数据的界面展示给用户</li> <li>1.2然后再根据模型中的数据和控制的区域生成绑定数据之后的HTML代码</li> <li>1.3最后再将绑定数据之后的HTML渲染到界面上 <ul> <li>正是在最终的HTML被生成渲染之前会先显示模板内容，所以如果用户网络比较慢或者网页性能比较差, 那么用户会看到模板内容</li> </ul> </li> </ul> </li> <li> 2.如何解决这个问题<br /> <ul> <li>利用v-cloak配合 [v-cloak]:{display: none}默认先隐藏未渲染的界面，等到生成HTML渲染之后再重新显示</li> </ul> </li> <li> 3.v-cloak指令作用:<br /> <ul> <li>数据渲染之后自动显示元素</li> <li>示例：</li> </ul> </li> </ul> <blockquote><code> [v-cloak] { display: none }{{ name }}<br /> </code></blockquote><br /> 常用指令v-text和v-html <ul> <li> 1.什么是v-text指令<br /> <ul> <li>v-text就相当于过去学习的innerText</li> <li>会覆盖便签内原有的内容</li> <li>不会解析html</li> </ul> </li> <li> 2.什么是v-html指令<br /> <ul> <li>v-html就相当于过去学习的innerHTML</li> <li>会覆盖便签内原有的内容</li> <li>会解析html</li> </ul> </li> </ul> <blockquote><code>++++{{ name }}++++<br /> ++++{{ msg }}++++<br /> ++++++++<br /> ++++++++<br /> ++++++++<br /> ++++++++<br /> </code></blockquote><br /> 常用指令v-if/v-else <ul> <li> 1.什么是v-if指令<br /> <ul> <li>条件渲染: 如果v-if取值是true就渲染元素, 如果不是就不渲染元素</li> </ul> </li> <li> 2.==v-if特点==:<br /> <ul> <li>如果条件不满足根本就不会创建这个元素</li> </ul> </li> <li> 3.v-if注意点<br /> <ul> <li>v-if可以从模型中获取数据</li> <li>v-if也可以直接赋值一个表达式</li> </ul> </li> </ul> <blockquote><code>我是true<br /> 我是false<br /> </code></blockquote><br /> <ul> <li>4.v-else指令 <ul> <li>v-else指令可以和v-if指令配合使用 <ul> <li>当v-if不满足条件时就执行v-else就显示v-else中的内容</li> </ul> </li> </ul> </li> </ul> <blockquote><code>= 18">成年人<br /> 未成年人<br /> </code></blockquote><br /> 5.v-else注意点<br /> <ul> <li>v-else不能单独出现</li> <li>v-if和v-else中间不能出现其它内容</li> </ul> <blockquote><code>// 错误写法= 18">成年人<br /> 中间的内容<br /> 未成年人<br /> </code></blockquote><br /> <ul> <li>6.v-else-if指令 <ul> <li>v-else-if可以和v-if指令配合使用 <ul> <li>当v-if不满足条件时就依次执行后续v-else-if, 哪个满足就显示哪个</li> </ul> </li> </ul> </li> </ul> <blockquote><code>= 80">优秀<br /> = 60">良好<br /> 差<br /> </code></blockquote><br /> <ul> <li>7.v-else-if注意点 <ul> <li>v-else-if不能单独出现</li> <li>v-if和v-else-if中间不能出现其它内容</li> </ul> </li> </ul> 常用指令v-show <ul> <li> 1.什么是v-show指令<br /> <ul> <li>v-show和v-if的能够一样都是条件渲染, 取值为true就显示, 取值为false就不显示</li> </ul> </li> <li> 2.==v-show特点==<br /> <ul> <li>如果条件不满足根本就不会创建这个元素</li> </ul> </li> <li> 3.v-show注意点<br /> <ul> <li>v-show可以从模型中获取数据</li> <li>v-show也可以直接赋值一个表达式</li> </ul> </li> </ul> v-if和v-show区别 <ul> <li> 区别1：元素是否存在<br /> <ul> <li>v-if: 只要取值为false就不会创建元素</li> <li>v-show: 哪怕取值为false也会创建元素, 只是如果取值是false会设置元素的display为none</li> </ul> </li> <li> 区别2：应用场景<br /> <ul> <li>由于取值为false时v-if不会创建元素,所以如果需要切换元素的显示和隐藏,每次v-if都会创建和删除元素</li> <li>由于取值为false时v-show会创建元素并设置display为none,所以如果需要切换元素的显示和隐藏,不会反复创建和删除,只是修改display的值</li> <li>所以: 如果企业开发中需要频繁切换元素显示隐藏, 那么推荐使用v-show, 可以提高性能，否则使用v-if</li> </ul> </li> </ul> 常用指令v-for <ul> <li> 1.什么是v-for指令<br /> <ul> <li>相当于JS中的for in循环,可以根据数据多次渲染元素</li> </ul> </li> <li> 2.v-for特点<br /> <ul> <li>可以遍历 数组, 字符, 数字（输出是从1开始的）, 对象</li> <li>示例：</li> </ul> </li> </ul> <blockquote><code> <ul> <li v-for="(value, index) in list">{{index}}-- - {{value}}</li>// 遍历数组 <li v-for="(value, index) in 'abcdefg'">{{index}}-- - {{value}}</li>// 遍历字符串 <li v-for="(value, index) in 6">{{index}}-- - {{value}}</li>// 遍历数字 <li v-for="(value, key) in obj">{{key}}---{{value}}</li> // 遍历对象 </ul></code></blockquote><br /> ==注意点== <ul> <li> 1.v-for注意点<br /> <ul> <li>1.1v-for为了提升性能,在更新已渲染过的元素列表时，会采用“就地复用”策略。也正是因为这个策略,在某些时刻会导致我们的数据混乱 <ul> <li>例如: 在列表前面新增了内容</li> </ul> </li> <li>1.2为了解决这个问题,我们可以在渲染列表的时候给每一个元素加上一个独一无二的key <ul> <li>v-for在更新已经渲染过的元素列表时,会先判断key是否相同, 如果相同则复用, 如果不同则重新创建</li> </ul> </li> </ul> </li> <li> 2.key属性注意点<br /> <ul> <li>不能使用index的作为key,因为当列表的内容新增或者删除时index都会发生变化 <ul> <li>添加到列表的末尾，index到不会发生变化，但是添加到列表头的话，整体的index都会发生变化</li> </ul> </li> </ul> </li> <li>示例：<br /> </li> </ul> <blockquote><code> <form> <input type="text" v-model="name"> <input type="submit" value="https://www.it610.com/article/添加" @click.prevent="add"> </form> <ul> <li v-for="(person,index) in persons" :key="person.id"> <input type="checkbox"> {{index}} --- {{person.name}} </li> </ul></code></blockquote><br /> 常用指令v-bind <ul> <li> 1.什么是v-bind指令<br /> <ul> <li>给"元素的==属性=="绑定数据,就必须使用v-bind <ul> <li>不同于给"元素"绑定数据,我们可以使用{{}}, v-text, v-html</li> </ul> </li> </ul> </li> <li> 2.v-bind格式<br /> <ul> <li><code>v-bind:属性名称="绑定的数据"</code></li> <li><code>: 属性名称="绑定的数据"</code></li> </ul> </li> </ul> <blockquote><code><input type="text" v-bind:value="https://www.it610.com/article/age"> <input type="text" :value="https://www.it610.com/article/age"></code></blockquote><br /> <ul> <li>3.v-bind特点 <ul> <li>赋值的数据可以是任意一个合法的JS表达式</li> <li>例如: <code>:属性名称="age + 1"</code> </li> </ul> </li> </ul> 绑定类名 <ul> <li> 1.v-bind指令的特殊作用<br /> <ul> <li>v-bind指令给"任意标签"的"任意属性"绑定数据,对于大部分的属性而言我们只需要直接赋值即可, 例如:value="https://www.it610.com/article/name"</li> <li>但是对于class和style属性而言, 它的格式比较特殊</li> </ul> </li> <li> 2.通过v-bind绑定类名格式<br /> <ul> <li> <code>:class="['需要绑定类名', ...]"</code> 普通格式</li> <li> <code>:class="[flag?'active':'']"</code>数组的每一个元素都可以是一个三目运算符按需导入</li> <li> <code>:class="[{'active': true}]"</code>通过对象来决定是否需要绑定</li> <li> <code>:class="对象名"</code>（==这种方法不错==，修改方便）——使用Model中的对象来替换数组 <ul> <li>绑定的类名太多可以将类名封装到Model中例如：obj: {'color': true,'size': true,'active': false}</li> </ul> </li> </ul> </li> </ul> <blockquote> 注意点:<br> 1.(:class="需要绑定类名")直接赋值一个类名(没有放到数组中)默认回去Model中查找，但是Model中没有对应的类名, 所以无效<br> 2.(:class="[需要绑定类名]")如果想让v-bind去style中查找类名,那么就必须把类名放到数组中，但是放到数组中之后默认还是回去Model中查找<br /> </blockquote> <ul> <li>4.绑定类名企业应用场景 <ul> <li>从服务器动态获取样式后通过v-bind动态绑定类名，这样就可以让服务端来控制前端样式</li> <li>常见场景: 618 双11等</li> </ul> </li> </ul> 绑定样式 <ul> <li> 通过v-bind给style属性绑定数据<br /> <ul> <li>1.将数据放到对象中 <ul> <li><code>:style="{color:'red','font-size':'50px'}"</code></li> </ul> </li> <li>2.将数据放到Model对象中 <ul> <li><code>:style="obj"</code></li> <li>Model对象中: <ul> <li>obj: {color: 'red','font-size':'80px'}</li> </ul> </li> </ul> </li> <li>3.如果需要绑定Model中的多个对象,可以放到一个数组中赋值 <ul> <li><code>:style="[obj1,obj2]"</code></li> <li>Model对象中: <ul> <li>obj1: {color: 'red','font-size':'80px'}</li> <li>obj2: {'background-color': 'blue'}</li> </ul> </li> </ul> </li> </ul> </li> <li>示例：<br /> </li> </ul> <blockquote><code>我是段落<br /> 我是段落<br /> 我是段落<br /> </code></blockquote><br /> <ul> <li>==重点==： <ul> <li>属性和取值都用引号括起来 <ul> <li>个别属性不用，但是都括起来没毛病</li> </ul> </li> </ul> </li> </ul> <blockquote> 注意点:<br> 如果属性名称包含-, 那么必须用引号括起来<br /> </blockquote> 常用指令-v-on <ul> <li> 1.什么是v-on指令?<br /> <ul> <li>v-on指令专门用于给元素绑定监听事件</li> </ul> </li> <li> 2.v-on指令两种格式<br /> <ul> <li><code>v-on:事件名称="回调函数名称"</code></li> <li><code>@事件名称="回调函数名称"</code></li> <li>示例：</li> </ul> </li> </ul> <blockquote><code><button @click="myFn">我是按钮</button></code></blockquote><br /> <blockquote> 注意点:<br> v-on绑定的事件被触发之后,会去Vue实例对象的methods中查找对应的回调函数<br /> </blockquote> v-on修饰符 <ul> <li> 1.v-on修饰符<br /> <ul> <li>在事件中有很多东西需要我们处理,例如事件冒泡,事件捕获,阻止默认行为等.那么在Vue中如何处理以上内容呢,我们可以通过v-on修饰符来处理</li> </ul> </li> <li> 2.常见修饰符<br /> <ul> <li> <code>.once</code> <ul> <li>只触发一次回调。</li> </ul> </li> <li> <code>.prevent</code> <ul> <li>调用 event.preventDefault()。阻止事件默认行为</li> </ul> </li> <li> <code>.stop</code> <ul> <li>调用 event.stopPropagation()。</li> <li>默认情况下载嵌套的元素中,如果都监听了相同的事件,那么会触发事件冒泡，这个stop就是阻止事件冒泡</li> </ul> </li> <li> <code>.self</code> <ul> <li>当前元素触发事件的时候才触发回调。</li> </ul> </li> <li> <code>.capture</code> <ul> <li>添加事件侦听器时使用 capture 模式。</li> <li>默认情况下是事件冒泡,如果想变成事件捕获, 那么就需要使用.capture修饰符</li> </ul> </li> </ul> </li> </ul> <ul> <li>示例：</li> </ul> <blockquote><code> *{ margin: 0; padding: 0; } .a{ width: 300px; height: 300px; background: red; } .b{ width: 200px; height: 200px; background: blue; } .c{ width: 100px; height: 100px; background: green; }</code></blockquote><br /> v-on注意点 <ul> <li> 1.绑定回调函数名称的时候,后面可以写()也可以不写<br /> <ul> <li>v-on:click="myFn"</li> <li>v-on:click="myFn()"</li> </ul> </li> <li> 2.可以给绑定的回调函数传递参数<br /> <ul> <li>v-on:click="myFn('lnj', 33)"</li> <li>示例：</li> </ul> </li> </ul> <blockquote><code> <button @click="myFn('ws',29)">按钮</button></code></blockquote><br /> <ul> <li>3.如果在绑定的函数中需要用到data中的数据必须加上this <ul> <li>示例：</li> </ul> </li> </ul> <blockquote><code> <button @click="myFn('ws',29,$event)">按钮</button></code></blockquote><br /> v-on按键修饰符 <ul> <li> 1.什么是按键修饰符<br /> <ul> <li>我们可以通过按键修饰符监听特定按键触发的事件</li> <li>例如: 可以监听当前事件是否是回车触发的, 可以监听当前事件是否是ESC触发的等</li> </ul> </li> <li> 2.按键修饰符分类<br /> <ul> <li>2.1系统预定义修饰符 <ul> <li>.enter/.tab/.delete (捕获“删除”和“退格”键)/.esc/.space/.up/.down/.left/.right等</li> </ul> </li> <li>2.2自定义修饰符 <ul> <li>可以使用 <code>v-on:keyup.自定义按键名称</code> <ul> <li>Vue.config.keyCodes.自定义按键名称 = 查询keycode列表里自定义按键对应的值</li> </ul> </li> </ul> </li> </ul> </li> </ul> <blockquote><code><input type="text" @keyup.f2="myFn"></code></blockquote><br /> 自定义指令 <ul> <li> 1.自定义全局指令<br /> <ul> <li>在Vue中除了可以使用Vue内置的一些指令以外, 我们还可以自定义指令</li> </ul> </li> <li> 2.自定义全局指令语法<br /> <ul> <li>格式如下：</li> </ul> </li> </ul> <blockquote><code> </code></blockquote><br /> <ul> <li>3.指令生命周期方法 <ul> <li>自定义指令时一定要明确指令的业务逻辑代码更适合在哪个阶段执行</li> <li>例如: 指令业务逻辑代码中没有用到元素事件, 那么可以在bind阶段执行</li> <li>例如: 指令业务逻辑代码中用到了元素事件, 那么就需要在inserted阶段执行</li> <li>示例：</li> </ul> </li> </ul> <blockquote><code><input type="text" v-focus></code></blockquote><br /> <blockquote> 自定义指令注意点：<br> 使用时需要加上v-, 而在自定义时不需要加上v-<br /> </blockquote> 自定义指令参数 <ul> <li> 1.自定义指令参数<br /> <ul> <li>在使用官方指令的时候我们可以给指令传参</li> <li>例如: v-model="name"在我们自定义的指令中我们也可以传递传递</li> </ul> </li> <li> 2.获取自定义指令传递的参数<br /> <ul> <li>在执行自定义指令对应的方法的时候,除了会传递el给我们,还会传递一个对象给我们，这个对象中就保存了指令传递过来的参数</li> <li>示例：</li> </ul> </li> </ul> <blockquote><code>我是段落<br /> </code></blockquote><br /> 自定义局部指令 <ul> <li> 1.自定义全局指令的特点<br /> <ul> <li>在任何一个Vue实例控制的区域中都可以使用</li> </ul> </li> <li> 2.自定义局部指令的特点<br /> <ul> <li>只能在自定义的那个Vue实例中使用</li> </ul> </li> <li> 3.如何自定义一个局部指令<br /> <ul> <li>给创建Vue实例时传递的对象添加</li> <li>格式如下：</li> </ul> </li> </ul> <blockquote><code> </code></blockquote><br /> <ul> <li>示例：</li> </ul> <blockquote><code>我是段落<br /> 我是段落<br /> </code></blockquote><br /> 计算属性 <ul> <li> 1.插值语法特点<br /> <ul> <li>可以在{{}}中编写合法的JavaScript表达式</li> </ul> </li> <li> 2.在插值语法中编写JavaScript表达式缺点<br /> <ul> <li>2.1没有代码提示</li> <li>2.2语句过于复杂不利于我们维护</li> </ul> </li> <li> <strong>【vue指令、过滤器、动画】</strong>3.如何解决?<br /> <ul> <li>对于任何复杂逻辑，你都应当使用计算属性computed</li> <li>示例：</li> </ul> </li> </ul> <blockquote><code>{{msg2}}<br /> </code></blockquote><br /> <blockquote> 注意点:<br> 虽然在定义计算属性的时候是通过一个函数返回的数据，但是在使用计算属性的时候不能在计算属性名称后面加上()<br> 因为它是一个属性不是一个函数(方法)<br /> </blockquote> 计算属性和函数的区别 <ul> <li> 1.计算属性和函数的共同点<br /> <ul> <li>通过计算属性或者通过函数我们都能拿到处理后的数据</li> </ul> </li> <li> 2.计算属性和函数的区别<br /> <ul> <li>2.1函数"不会"将计算的结果缓存起来,每一次访问都会重新求值</li> <li>2.2计算属性"会"将计算的结果缓存起来, 只要数据没有发生变化, 就不会重新求值</li> </ul> </li> <li> 3.计算属性应用场景<br /> <ul> <li>计算属性:比较适合用于计算不会频繁发生变化的的数据，这样会比使用函数的性能高</li> <li>函数：经常发生变化的数据</li> </ul> </li> </ul> <blockquote><code>{{msg1()}}<br /> {{msg1()}}<br /> {{msg1()}}<br /> {{msg2}}<br /> {{msg2}}<br /> {{msg2}}<br /> </code></blockquote><br /> 自定义全局过滤器 <ul> <li> 1.什么是过滤器?<br /> <ul> <li>过滤器和函数和计算属性一样都是用来处理数据的,但是过滤器一般用于格式化插入的文本数据</li> </ul> </li> <li> 2.自定义全局过滤器的特点<br /> <ul> <li>在任何一个Vue实例控制的区域中都可以使用</li> </ul> </li> <li> 3.如何自定义全局过滤器Vue.filter<br /> <ul> <li>Vue.filter(参数1,参数2); <ul> <li>第一个参数: 过滤器名称</li> <li>第二个参数: 处理数据的函数</li> </ul> </li> </ul> </li> </ul> <blockquote> 注意点:<br> 默认情况下处理数据的函数接收一个参数,就是当前要被处理的数据<br /> </blockquote> <ul> <li> 4.如何使用全局过滤器<br /> <ul> <li><code>{{msg | 过滤器名称}}</code></li> <li><code>:value="https://www.it610.com/article/msg | 过滤器名称"</code></li> </ul> </li> <li> 5.过滤器注意点<br /> <ul> <li>5.1只能在插值语法和v-bind中使用</li> <li>5.2过滤器可以连续使用</li> <li>示例：</li> </ul> </li> </ul> <blockquote><code>{{name | formartStr1 | formartStr2}}<br /> </code></blockquote><br /> 自定义局部过滤器 <ul> <li> 1.自定义局部过滤器的特点<br /> <ul> <li>只能在自定义的那个Vue实例中使用</li> </ul> </li> <li> 2.如何自定义一个局部指令<br /> <ul> <li>给创建Vue实例时传递的对象添加</li> <li>格式如下：</li> </ul> </li> </ul> <blockquote><code>filters: { // key: 过滤器名称 // value: 过滤器处理函数 '过滤器名称': function (value) { 过滤器处理函数 } } </code></blockquote><br /> <ul> <li>示例：</li> </ul> <blockquote><code>{{name | formartStr}}<br /> {{name | formartStr}}<br /> </code></blockquote><br /> <ul> <li>==注意点== <ul> <li>在使用过滤器的时候,可以在过滤器名称后面加上()</li> <li>如果给过滤器的名称后面加上了(),那么就可以给过滤器的函数传递参数</li> <li>示例：</li> </ul> </li> </ul> <blockquote><code>{{time | filter1('yyyy-MM-dd')}}<br /> </code></blockquote><br /> 过渡动画 1.默认类名(v-xxx)来指定过渡动画 <ul> <li>如何给Vue控制的元素添加过渡动画 <ul> <li>1.将需要执行动画的元素放到transition组件中</li> <li>2.transition组件中会自动查找 <ul> <li>显示时会自动查找<code>.v-enter/.v-enter-active/.v-enter-to</code>类名</li> <li>隐藏时会自动查找<code>.v-leave/ .v-leave-active/.v-leave-to</code>类名</li> </ul> </li> <li>3.我们只需要在<code>.v-enter</code>和<code>.v-leave-to</code>中指定动画动画开始的状态</li> <li>4.在<code>.v-enter-active</code>和<code>.v-leave-active</code>中指定动画执行的状态</li> <li>5.即可完成过渡动画</li> <li>示例：</li> </ul> </li> </ul> <blockquote><code> *{ margin: 0; padding: 0; } .box{ width: 200px; height: 200px; background: red; } .v-enter{ opacity: 0; } .v-enter-to{ opacity: 1; } .v-enter-active{ transition: all 3s; } .v-leave{ opacity: 1; } .v-leave-to{ opacity: 0; } .v-leave-active{ transition: all 3s; }<button @click="toggle">我是按钮</button> <transition></transition></code></blockquote><br /> ==注意点== <ul> <li> 1.初始动画设置<br /> <ul> <li>默认情况下第一次进入的时候没有动画的</li> <li>如果想一进来就有动画,我们可以通过给transition添加appear属性的方式,告诉Vue第一次进入就需要显示动画</li> </ul> </li> <li> 2.如何给多个不同的元素指定不同的动画<br /> <ul> <li>如果有多个不同的元素需要执行不同的过渡动画,那么我们可以通过给transition指定name的方式,来指定"进入之前/进入之后/进入过程中,离开之前/离开之后/离开过程中"对应的类名,来实现不同的元素执行不同的过渡动画</li> </ul> </li> </ul> <blockquote> 注意点：<br> transition中只能放一个元素, 多个元素无效<br> 如果想给多个元素添加过渡动画, 那么就必须创建多个transition组件<br /> </blockquote> <blockquote><code> *{ margin: 0; padding: 0; } .box{ width: 200px; height: 200px; background: red; } .one-enter{ opacity: 0; } .one-enter-to{ opacity: 1; margin-left: 500px; } .one-enter-active{ transition: all 3s; } .two-enter{ opacity: 0; } .two-enter-to{ opacity: 1; margin-top: 500px; } .two-enter-active{ transition: all 3s; }<button @click="toggle">我是按钮</button> <transition appear name="one"></transition> <transition appear name="two"></transition></code></blockquote><br /> 2.JS钩子函数来指定过渡动画 <ul> <li> 1.当前过渡存在的问题<br /> <ul> <li>通过transition+类名的方式确实能够实现过渡效果，但是实现的过渡效果并不能保存动画之后的状态</li> <li>因为Vue内部的实现是在过程中动态绑定类名, 过程完成之后删除类名</li> <li>正是因为删除了类名, 所以不能保存最终的效果</li> </ul> </li> <li> 2.在Vue中如何保存过渡最终的效果<br /> <ul> <li>通过Vue提供的JS钩子来实现过渡动画 <ul> <li><code>v-on:before-enter="beforeEnter"</code> 进入动画之前<br /> </li> <li><code>v-on:enter="enter"</code> 进入动画执行过程中<br /> </li> <li><code>v-on:after-enter="afterEnter"</code> 进入动画完成之后<br /> </li> <li><code>v-on:enter-cancelled="enterCancelled"</code> 进入动画被取消<br /> </li> <li><code>v-on:before-leave="beforeLeave"</code> 离开动画之前<br /> </li> <li><code>v-on:leave="leave"</code> 离开动画执行过程中<br /> </li> <li><code>v-on:after-leave="afterLeave"</code> 离开动画完成之后<br /> </li> <li><code>v-on:leave-cancelled="leaveCancelled"</code> 离开动画被取消<br /> </li> </ul> </li> </ul> </li> <li> 3.JS钩子实现过渡注意点<br /> <ul> <li>3.1在动画过程中必须写上el.offsetWidth或者el.offsetHeight</li> <li>3.2在enter和leave方法中必须调用done方法,否则after-enter和after-leave不会执行</li> <li>3.3若需要添加初始动画,那么需要把done方法包裹到setTimeout方法中调用</li> <li>示例：</li> </ul> </li> </ul> <blockquote><code> <button @click="toggle">我是按钮</button> <transition appear v-bind:css="false" v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:after-enter="afterEnter"></transition></code></blockquote><br /> 配合使用第三方 JavaScript 动画库,实现过渡动画 <ul> <li>配合Velocity实现过渡动画 <ul> <li>在Vue中我们除了可以自己实现过渡动画以外,还可以结合第三方框架实现过渡动画 <ul> <li>1.导入Velocity库</li> <li>2.在动画执行过程钩子函数中编写Velocity动画</li> <li>示例：</li> </ul> </li> </ul> </li> </ul> <blockquote><code> *{ margin: 0; padding: 0; } .box{ width: 200px; height: 200px; background: red; }<button @click="toggle">我是按钮</button> <transition appear v-bind:css="false" v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:after-enter="afterEnter"></transition></code></blockquote><br /> 使用自定义类名的方式来指定过渡动画 <ul> <li> 1.自定义类名动画<br /> <ul> <li>1.在Vue中除了可以使用默认类名(v-xxx)来指定过渡动画</li> <li>2.除了可以使用自定义类名前缀(yyy-xx)来指定过渡动画(transition name="yyy")</li> <li>3.除了可以使用 JS钩子函数来指定过渡动画以外</li> <li>4.还可以使用自定义类名的方式来指定过渡动画 <ul> <li> <code>enter-class</code> 进入动画开始之前</li> <li> <code>enter-active-class</code> 进入动画执行过程中</li> <li> <code>enter-to-class</code> 进入动画执行完毕之后</li> <li> <code>leave-class</code> 离开动画开始之前</li> <li> <code>leave-active-class</code> 离开动画执行过程中</li> <li> <code>leave-to-class</code> 离开动画执行完毕之后</li> </ul> </li> </ul> </li> <li>示例：<br /> </li> </ul> <blockquote><code> *{ margin: 0; padding: 0; } .box{ width: 200px; height: 200px; background: red; } .a{ opacity: 0; } .b{ opacity: 1; margin-left: 500px; } .c{ transition: all 3s; }<button @click="toggle">我是按钮</button> <transition appear enter-class="a" enter-active-class="c" enter-to-class="b"></transition></code></blockquote><br /> 配合使用第三方 CSS 动画库Animate.css实现过渡动画 <ul> <li>配合Animate.css实现过渡动画步骤 <ul> <li>1.导入Animate.css库</li> <li>2.在执行过程中的属性上绑定需要的类名</li> <li>示例：</li> </ul> </li> </ul> <blockquote><code><link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css"><button @click="toggle">我是按钮</button> <transition appear enter-active-class="animated bounceInRight"></transition></code></blockquote><br /> 过渡动画（添加多个） <ul> <li>如何同时给多个元素添加过渡动画 <ul> <li>通过transition可以给单个元素添加过渡动画，如果想给多个元素添加过渡动画,那么就必须通过transition-group来添加</li> <li>transition-group和transition的用法一致,只是一个是给单个元素添加动画,一个是给多个元素添加动画而已</li> <li>示例(不是最终版，里面还有bug，下面有讲注意点)：</li> </ul> </li> </ul> <blockquote><code> *{ margin: 0; padding: 0; } .v-enter{ opacity: 0; } .v-enter-to{ opacity: 1; } .v-enter-active{ transition: all 3s; } .v-leave{ opacity: 1; } .v-leave-to{ opacity: 0; } .v-leave-active{ transition: all 3s; }<form> <input type="text" v-model="name"> <input type="submit" value="https://www.it610.com/article/添加" @click.prevent="add"> </form> <ul> <transition-group appear> <li v-for="(person,index) in persons" :key="person.id" @click="del(index)"> <input type="checkbox"> {{index}} --- {{person.name}} </li> </transition-group> </ul></code></blockquote><br /> 注意点: <ul> <li> 1.标签问题<br /> <ul> <li>默认情况下transition-group会将动画的元素放到span标签中 <ul> <li>解决方法：我们可以通过tag属性来指定将动画元素放到什么标签中（把html里面对应的标签删除，tag属性就会自动添加标签）</li> </ul> </li> </ul> </li> <li> 2.transition-group动画混乱问题<br /> <ul> <li>一般情况下组动画出现动画混乱都是因为v-for就地复用导致的 <ul> <li>解决方案：我们只需要保证所有数据key永远是唯一的即可</li> </ul> </li> <li>示例（上面示例就有这个bug），解决如下： <ul> <li>1.data里面新增一个id，赋值为3（list的长度）</li> <li>2.add方法中 <ul> <li>添加<code>this.id++</code> </li> <li> <code>let lastPerson = this.persons[this.persons.length - 1]; </code>删除</li> <li> <code>let newPerson = {name: this.name, id: lastPerson.id + 1}; </code>改成<code>let newPerson = {name: this.name, id: this.id}; </code> </li> <li>成品View Model如下：</li> </ul> </li> </ul> </li> </ul> </li> </ul> <blockquote><code> </code></blockquote><br /> </p> <div class="dede_pages"><ul></ul></div> <div class="pcd_ad"> <center><div class="_ahwullr0ac"></div> <script type="text/javascript"> (window.slotbydup = window.slotbydup || []).push({ id: "u6834461", container: "_ahwullr0ac", async: true }); </script> <script type="text/javascript" src="//cpro.baidustatic.com/cpro/ui/cm.js" async="async" defer="defer" > </script></center> </div> <div class="mbd_ad"> <div style=margin-top:10px;margin-bottom:10px;> <div class="_i7aftr79jl"></div> <script type="text/javascript"> (window.slotbydup = window.slotbydup || []).push({ id: "u5950612", container: "_i7aftr79jl", async: true }); </script> <!-- ����������½ű�ֻ������һ�� --> <script type="text/javascript" src="//cpro.baidustatic.com/cpro/ui/cm.js" async="async" defer="defer" > </script> </div> </div> <h3>推荐阅读</h3> <ul class="post-loop post-loop-default cols-0"> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/3745467.html" title="兄弟打印机废墨垫怎样换-兄弟D700W怎样更换废墨仓"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="兄弟打印机废墨垫怎样换-兄弟D700W怎样更换废墨仓" src="http://img.readke.com/231225/033244D95-0-lp.jpg"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/3745467.html"> <b>兄弟打印机废墨垫怎样换-兄弟D700W怎样更换废墨仓 </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/1794923.html" title="怎么找回抖音密码"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="怎么找回抖音密码" src="http://img.readke.com/230426/1452554461-0-lp.jpg"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/1794923.html"> <b>怎么找回抖音密码 </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/0Z21340242021.html" title="你想不想像“点石成金”一样学知识（）"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="你想不想像“点石成金”一样学知识（）" src="/images/defaultpic.gif"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/0Z21340242021.html"> <b>你想不想像“点石成金”一样学知识（） </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/3716676.html" title="结婚26年是属于什么婚"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="结婚26年是属于什么婚" src="http://img.readke.com/231222/1125231931-0-lp.jpg"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/3716676.html"> <b>结婚26年是属于什么婚 </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/1339906.html" title="奔腾4相当于酷睿几 奔腾4处理器"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="奔腾4相当于酷睿几 奔腾4处理器" src="/images/defaultpic.gif"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/1339906.html"> <b>奔腾4相当于酷睿几 奔腾4处理器 </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/4073064.html" title="redis怎么和数据库交互 redis数据结合"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="redis怎么和数据库交互 redis数据结合" src="/images/defaultpic.gif"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/4073064.html"> <b>redis怎么和数据库交互 redis数据结合 </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/3776417.html" title="一 安卓 微信 6.3.27,微信版本回顾回顾"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="一 安卓 微信 6.3.27,微信版本回顾回顾" src="/images/defaultpic.gif"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/3776417.html"> <b>一 安卓 微信 6.3.27,微信版本回顾回顾 </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/2239637.html" title="别克君越怎么设置音响均衡 别克君越音响怎么调节效果好"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="别克君越怎么设置音响均衡 别克君越音响怎么调节效果好" src="http://img.readke.com/230525/19514a003-0-lp.jpg"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/2239637.html"> <b>别克君越怎么设置音响均衡 别克君越音响怎么调节效果好 </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/2575604.html" title="2023咸阳杏花赏花指南 咸阳礼泉杏花"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="2023咸阳杏花赏花指南 咸阳礼泉杏花" src="http://img.readke.com/230625/0612313453-0-lp.jpg"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/2575604.html"> <b>2023咸阳杏花赏花指南 咸阳礼泉杏花 </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/1266560.html" title="素颜霜晚上不洗的危害"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="素颜霜晚上不洗的危害" src="/images/defaultpic.gif"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/1266560.html"> <b>素颜霜晚上不洗的危害 </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/020J405N2022.html" title="摘抄《励志》集"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="摘抄《励志》集" src="/images/defaultpic.gif"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/020J405N2022.html"> <b>摘抄《励志》集 </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/4095278.html" title="逻辑分析仪 教程,rp2040逻辑分析仪"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="逻辑分析仪 教程,rp2040逻辑分析仪" src="/images/defaultpic.gif"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/4095278.html"> <b>逻辑分析仪 教程,rp2040逻辑分析仪 </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/537261.html" title="第1674期商标公告 商标公告到什么时间了，商标公告时间"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="第1674期商标公告 商标公告到什么时间了，商标公告时间" src="/images/defaultpic.gif"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/537261.html"> <b>第1674期商标公告 商标公告到什么时间了，商标公告时间 </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/12093532912021.html" title="Android使用acoco统计代码行覆盖率介绍"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="Android使用acoco统计代码行覆盖率介绍" src="/images/defaultpic.gif"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/12093532912021.html"> <b>Android使用acoco统计代码行覆盖率介绍 </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/3314690.html" title="插叙在文中起的作用是什么 插叙在文中起的作用介绍"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="插叙在文中起的作用是什么 插叙在文中起的作用介绍" src="http://img.readke.com/231030/122511D56-0-lp.jpg"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/3314690.html"> <b>插叙在文中起的作用是什么 插叙在文中起的作用介绍 </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/1333892.html" title="教你如何克服周一恐惧症"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="教你如何克服周一恐惧症" src="http://img.readke.com/230320/191HI956-0-lp.jpg"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/1333892.html"> <b>教你如何克服周一恐惧症 </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/3586073.html" title="两高盗伐林木案件的相关司法解释内容"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="两高盗伐林木案件的相关司法解释内容" src="http://img.readke.com/231128/03252435F-0-lp.jpg"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/3586073.html"> <b>两高盗伐林木案件的相关司法解释内容 </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/1915359.html" title="西班牙签证照片尺寸 西班牙签证照片大小"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="西班牙签证照片尺寸 西班牙签证照片大小" src="http://img.readke.com/230503/1604055S6-0-lp.jpg"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/1915359.html"> <b>西班牙签证照片尺寸 西班牙签证照片大小 </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/989139.html" title="韩版三星w21多少钱 韩版i9000"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="韩版三星w21多少钱 韩版i9000" src="/images/defaultpic.gif"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/989139.html"> <b>韩版三星w21多少钱 韩版i9000 </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/3117069.html" title="你认为最感人、最鼓舞人心的电视剧是哪个？可以推荐一下吗？"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="你认为最感人、最鼓舞人心的电视剧是哪个？可以推荐一下吗？" src="http://img.readke.com/230905/23034TU8-0-lp.jpg"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/3117069.html"> <b>你认为最感人、最鼓舞人心的电视剧是哪个？可以推荐一下吗？ </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> </ul> <p><br /><ul class="post-loop post-loop-list cols-4"><li><a href="/c/021T5L132022.html" title="一个人的碎碎念" target="_blank">一个人的碎碎念 </a></li> <li><a href="/c/021T5L112022.html" title="野营记-第五章|野营记-第五章 讨伐梦魇兽" target="_blank">野营记-第五章|野营记-第五章 讨伐梦魇兽 </a></li> <li><a href="/c/021T5K912022.html" title="Shell-Bash变量与运算符" target="_blank">Shell-Bash变量与运算符 </a></li> <li><a href="/c/021T5K512022.html" title="清明，是追思、是传承、是感恩。" target="_blank">清明，是追思、是传承、是感恩。 </a></li> <li><a href="/c/021T5K022022.html" title="牛人进化+|牛人进化+ 按自己的意愿过一生" target="_blank">牛人进化+|牛人进化+ 按自己的意愿过一生 </a></li> <li><a href="/c/021T5Ja2022.html" title="vue-cli|vue-cli 3.x vue.config.js 配置" target="_blank">vue-cli|vue-cli 3.x vue.config.js 配置 </a></li> <li><a href="/c/021T5J562022.html" title="七老修复好敏感、角质层薄、红血丝" target="_blank">七老修复好敏感、角质层薄、红血丝 </a></li> <li><a href="/c/021T5J532022.html" title="华为旁！大社区、地铁新盘，佳兆业城市广场五期！" target="_blank">华为旁！大社区、地铁新盘，佳兆业城市广场五期！ </a></li> <li><a href="/c/021T5J2H022.html" title="2020-04-07vue中Axios的封装和API接口的管理" target="_blank">2020-04-07vue中Axios的封装和API接口的管理 </a></li> <li><a href="/c/021T5IV2022.html" title="标签、语法规范、内联框架、超链接、CSS的编写位置、CSS语法、开发工具、块和内联、常用选择器、后代元素选择器、伪类、伪元素。" target="_blank">标签、语法规范、内联框架、超链接、CSS的编写位置、CSS语法、开发工具、块和内联、常用选择器、后代元素选择器、伪类、伪元素。 </a></li> </ul></p> <div class=entry-copyright> <p></p> </div> </div> <div class="entry-footer"> <div class="prev-next sb br mb clearfix"> <p class="post-prev fl ellipsis">上一篇：<a href='/c/0ZQK04H021.html'>课程7.2之内部类和匿名内部类</a> </p> <p class="post-next fr ellipsis">下一篇：<a href='/c/0ZQK0492021.html'>J先生的生活记录</a> </p> </div> </div> </div> </article> </main> <aside class="sidebar"> <div class="widget widget_post_thumb"> <h3 class="widget-title"><span>更多...</span></h3> <ul> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/12263TW42021.html" title="教练笔记5——个体的差异"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="教练笔记5——个体的差异" src="/images/defaultpic.gif"> </a></div> <div class="item-content"> <p class="item-title"><a href="/c/12263TW42021.html" title="教练笔记5——个体的差异">教练笔记5——个体的差异</a></p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/10012624R2021.html" title="Python3"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="Python3" src="/images/defaultpic.gif"> </a></div> <div class="item-content"> <p class="item-title"><a href="/c/10012624R2021.html" title="Python3">Python3</a></p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/02164531342022.html" title="聪明人的交际处事原则"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="聪明人的交际处事原则" src="/images/defaultpic.gif"> </a></div> <div class="item-content"> <p class="item-title"><a href="/c/02164531342022.html" title="聪明人的交际处事原则">聪明人的交际处事原则</a></p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/09242420342021.html" title="这3点，使职场新人快速上位，很有用！"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="这3点，使职场新人快速上位，很有用！" src="/images/defaultpic.gif"> </a></div> <div class="item-content"> <p class="item-title"><a href="/c/09242420342021.html" title="这3点，使职场新人快速上位，很有用！">这3点，使职场新人快速上位，很有用！</a></p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/092R524622021.html" title="这可能是我最走心的一次聊天了"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="这可能是我最走心的一次聊天了" src="/images/defaultpic.gif"> </a></div> <div class="item-content"> <p class="item-title"><a href="/c/092R524622021.html" title="这可能是我最走心的一次聊天了">这可能是我最走心的一次聊天了</a></p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/0919224L02021.html" title="解决unix:///tmp/supervisor.sock|解决unix:///tmp/supervisor.sock no such file的问题"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="解决unix:///tmp/supervisor.sock|解决unix:///tmp/supervisor.sock no such file的问题" src="/images/defaultpic.gif"> </a></div> <div class="item-content"> <p class="item-title"><a href="/c/0919224L02021.html" title="解决unix:///tmp/supervisor.sock|解决unix:///tmp/supervisor.sock no such file的问题">解决unix:///tmp/supervisor.sock|解决unix:///tmp/supervisor.sock no such file的问题</a></p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/0925245F02021.html" title="长得俊-梦中人1"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="长得俊-梦中人1" src="/images/defaultpic.gif"> </a></div> <div class="item-content"> <p class="item-title"><a href="/c/0925245F02021.html" title="长得俊-梦中人1">长得俊-梦中人1</a></p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/110230644H021.html" title="Angular--模拟数据服务器"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="Angular--模拟数据服务器" src="/images/defaultpic.gif"> </a></div> <div class="item-content"> <p class="item-title"><a href="/c/110230644H021.html" title="Angular--模拟数据服务器">Angular--模拟数据服务器</a></p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/11243394112021.html" title="虚拟内存之建置"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="虚拟内存之建置" src="/images/defaultpic.gif"> </a></div> <div class="item-content"> <p class="item-title"><a href="/c/11243394112021.html" title="虚拟内存之建置">虚拟内存之建置</a></p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/09212316132021.html" title="籠統的東西與專業無關。"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="籠統的東西與專業無關。" src="/images/defaultpic.gif"> </a></div> <div class="item-content"> <p class="item-title"><a href="/c/09212316132021.html" title="籠統的東西與專業無關。">籠統的東西與專業無關。</a></p> </div> </li> </ul> </div> </aside> </div> </div> <footer class="footer"> <div class="container"> <div class="clearfix"> <div class="footer-col footer-col-logo"> <!--<img src="/skin/images/logo-footer.png">--></div> <div class="footer-col footer-col-copy"> <ul class="footer-nav hidden-xs"> <li class="menu-item menu-item-706"><a href="/baike/">生活百科</a></li> <li class="menu-item menu-item-706"><a href="/it/">it技术</a></li> </ul> <div class="copyright"> <p>Copyright © 2017-2022 锐客网 <a href="http://beian.miit.gov.cn/" target="_blank" rel="nofollow">京ICP备11041112号-41</a> </p> </div> </div> <div class="footer-col footer-col-sns"> <div class="footer-sns"> </div> </div> </div> </div> </footer> <div class="action action-style-0 action-color-0 action-pos-1" style="bottom:15%;"> <div class="action-item gotop j-top"> <i class="web-icon wi action-item-icon"><svg aria-hidden="true"> <use xlink:href="#wi-arrow-up-2"></use> </svg></i></div> </div> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?79e4e485d34c6fc717489eaa10b314e3"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </div> <script>var _web_js={};</script> <script src="/skin/js/index.js"></script> </body> </html>