01 2021 档案
摘要：对Vuex的理解 Vuex是一个专为Vue.js应用程序开发的状态管理模式，它采用集中式存储管理应用的所有组件的状态 你可以简单的将其看成把需要多个组件共享的变量全部存储在一个对象里，然后将这个对象放在顶层的Vue实例中，让其它组件可以使用，那么，多个组件就可以共享这个对象中的所有变量了，这些变量相
阅读全文
摘要：v-once 该指令表示元素和组件值渲染一次，不会随着数据的改变而改变 <script type="text/javascript"> const app = new Vue({ el: "#app", data: { message: "你好", firstName: "kobe", lastNa
阅读全文
摘要：传递参数有两种类型： params和query params类型 配置路由格式：/router/:id 传递的方式：在path后面跟上对应的值 传递后形成的路径：/router/123，/router/abc ①路由配置格式，使用冒号':' { path: '/user/:user_id', com
阅读全文
摘要：vue-router的定义 这里的路由并不是我们平时所说的硬件路由器，这里的路由就是单页面应用1的路径管理器 vue-router是Vue.js官方提供的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。 vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径与组件映射起
阅读全文
摘要：v-on的介绍 在Vue中，常使用v-on指令用于监听事件的发生，v-on指令就类似于JavaScript中的addEvelistener()方法 v-on的基本使用 <div id="app"> <h2>{{counter}}</h2> <!-- 监听一个click鼠标点击事件 --> <butt
阅读全文
摘要：v-for的引入 当我们需要对一组数据进行渲染时，我们就可以使用v-for来完成 v-for遍历数组 格式：v-for="(item, index) in items"。（也许是因为item显得更加重要，所以将item排在前面） 格式说明：index为可选参数，当不需要获取每一项的索引值时，可以省略
阅读全文
摘要：toast弹框的作用 toast弹框顾名思义，就是为了弹出一个提示框，效果如图： 使用toast弹框可以可用户带来更好的交互体验 toast弹框的使用 Toast组件 制做出toast的样式以及出现的条件 <template> <div class="toast" v-show="isShow">
阅读全文
摘要：Promise的理解 Promise是对异步操作的一种解决方案，一般情况下，如果有异步操作，就需要使用Promise对这个异步操作进行封装 使用Promise后可以使代码看起来更加优雅并且易于维护 使用定时器模拟一个异步请求 Promise接收一个函数作为参数，而这个函数又接收两个参数，这两个参数分
阅读全文
摘要：理解keep-alive keep-alive是Vue内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染 router-view也是一个组件，如果直接被keep-alive包在里面，所有路径匹配到的视图都会被缓存 <keep-alive> <router-view></router-view
阅读全文
摘要：组件化思想 如果我们将一个页面中的所有处理逻辑全部放在一起，处理起来就会变得非常复杂，而且不利于后续的管理和扩展。但如果，我们将一个页面拆分成一个个小的功能块，每个功能块完成属于自己这部分独立的功能，那么整个页面的管理和维护就会变得非常容易了 组件的定义 组件是一个单独功能模块的封装，在这个模块中，
阅读全文
摘要：axios的定义 axios是一个基于Promise，用于浏览器和node的HTTP客户端 axios的功能特点 在浏览器中发送 XMLHttpRsquests 请求 在node.js中发送http请求 支持Promise API 拦截请求和响应 转换请求和响应数据 等等 axios框架的基本使用
阅读全文
摘要：为什么需要图片懒加载 简而言之就是为了提高前端性能。 图片在需要的时候才加载，减轻服务的负担，提高页面的加载速度，提高用户体验。 图片懒加载的使用 ①npm安装 npm install vue-lazyload -S ②安装图片懒加载插件 // main.js import VueLazyLoad
阅读全文
摘要：认识懒加载 路由中通常会定义很多不同的页面，这些页面通常情况下会被打包到一个js文件中，如果我们一次性请求完这些页面，可能会花费一定的时间，甚至用户的电脑都可能会出现短暂的白屏，为了避免这种情况，就必须使用路由懒加载 路由懒加载的作用就是路由对应的组件会被打包成一个个js代码，只有在这个路由被访问到
阅读全文
摘要：为什么要使用fastclick 移动设备上的浏览器默认会在用户点击屏幕大约延迟300毫秒后才会触发点击事件，这是为了检查用户是否在做双击。为了能够立即响应用户的点击事件，才有了fastclick。 fastclick的使用 fastclick的使用非常简单 ①npm安装 npm install fa
阅读全文
摘要：为什么要用计算属性 我们知道，在模板中，我们可以直接通过插值语法显示一些data中的数据，但是在某些情况下，我们可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示。 比如我们有firstName和lastName两个变量，而如果我们需要显示完整的名称，可能就需要写上{{first
阅读全文
摘要：认识better-scroll better-scroll是一款重点用于解决移动端（已支持PC）各种滚动场景需求的插件，可使页面滚动效果更加流畅且富有弹性 better-scroll是用纯JavaScript编写的，这意味着它是无依赖的 better-scroll的原理 BetterScroll是作
阅读全文
摘要：父子组件关系图 子组件通过props属性拿到父组件的内容，父组件通过接受子组件发射的事件拿到子组件内容 父组件向子组件传递数据 在父组件里以标签的形式写入子组件 通过v-bind动态绑定子组件的属性来获取父组件的数据，此时banners=bbanners <home-swiper :banners=
阅读全文
摘要：什么是导航守卫 vue-router提供的导航守卫主要用来监听路由的进入和离开 vue-router提供了beforeEach()和afterEach()等钩子函数，这些钩子函数分别会在路由改变前后触发，正是这些钩子函数构成了导航守卫 记住参数或查询的改变并不会触发进入/离开的导航守卫 导航守卫的使
阅读全文
摘要：插槽的功能 插槽是为了使设备具有扩展性，而组件中的插槽同样是为了使组件具有扩展性 插槽的使用方式 抽取共性，保留不同 将共性抽取到组件中，将不同暴露为插槽 一旦我们预留了插槽，就可以让使用者根据自己的需求，决定插槽中插入什么内容 插槽的基本使用 使用特殊标签<slot></slot>即可设置一个插槽
阅读全文
摘要：表单绑定v-model v-model的引入 表单控件在实际开发中是非常常见的，特别是对于用户信息的提交，需要大量的表单。 Vue中使用v-modle可以实现表单元素与数据的双向绑定 什么叫双向绑定? 在为文本框绑定v-model属性后，在文本框中输入的任意内容都会的传递给message，messa
阅读全文
摘要：列表循环 wx:for="数组或对象" wx:for-item="循环项名称" wx:for-index="循环项索引" wx:for-key="唯一值"，用于提高列表渲染的性能 wx:for-key="*this"，遍历数组的每一项，要求当前数组每一项不能有重复 如果只有一层循环，(wx:for-
阅读全文
摘要：wxss与css的比较 样式rpx rpx是可以根据屏幕自适应的单位 view{ width: 200rpx; height: 200rpx; background-color: aqua; } 样式引入 通过@import引入 引入的路径必须是相对路径 @import "../../styles/
阅读全文
摘要：pages 页面路径的存放列表 通过手写页面路径可以在对应目录下自动创建对应文件 "pages": [ "pages/demo3/demo3", "pages/demo1/demo1", "pages/index/index", windows 全局的默认窗口表现 "window": { // 设置
阅读全文
摘要：小程序中支持es7的async语法 es7的 async 号称是解决回调的最终⽅案 在⼩程序的开发⼯具中，勾选 es6转es5语法 下载 facebook的regenerator库中的 在⼩程序⽬录下新建⽂件夹 lib/runtime/runtime.js ，将代码拷⻉进去 在每⼀个需要使⽤asyn
阅读全文
摘要：scroll-view scroll-view是可滚动的区域，在这个区域中如果内部的内容超出了这个区域，就可以通过滚动查看超出区域的内容，因此使用scroll-view时通常要为它设置一个具体高度 <scroll-view scroll-y class="left_menu" style="heig
阅读全文
摘要：父组件向子组件传递数据 在父组件的文件夹中的.json文件下引入子组件 { "usingComponents": { //"Tab" 是自己定义的组件名称 //"../../components/Tab/Tab" 是组件的路径 "Tab":"../../components/Tab/Tab" } }
阅读全文
摘要：显示加载中的提示框 wx.showLoading() 当我们正在在进行网络请求时，常常就需要这个提示框 手动调用wx.hideLoading()方法才能够关闭这个提示框，通常在数据请求完毕时就应该关闭 如果一个页面中同时有多个请求，必须要等请求都完毕时才能关闭这个提示框 通常我们可以设置一个变量ax
阅读全文
摘要：button button属性非常多，在此只列举部分常用属性 属性 类型 默认值 说明 size string default/mini 按钮的大小 type string default/primary/warn 按钮的样式类型，控制颜色 plain boolean false 背景色是否透明 d
阅读全文
摘要：v-bind v-bind的引入 内容的绑定可以通过mustache语法，而属性的绑定往往需要通过v-bind 如动态绑定img的src属性 如动态绑定div的class属性 如动态绑定li元素的style属性 动态绑定src属性 <div id="app"> <img v-bind:src="
阅读全文
摘要：Markdown编辑器怎么用 1.代码块 快速创建一个代码块 // 语法： // ```+语言名称，如```java，```c++ 2.标题 语法：#+空格+标题名字，一个#表示一级标题，两个#表示二级标题，依次类推 # 标题名称 3.字体 //加粗：加粗：在要加粗的文字两侧各写两个星号** **想
阅读全文
摘要：MVVM（Model View VueModel） View层： 视图层 在我们前端开发中，通常就是DOM层 主要的作用就是给用户展示各种信息 Model层： 数据层 数据可能是我们固定的死数据，更多的是来自我们的服务器，从网络上请求的数据 VueModel层： 视图模型层 视图模型层是View和M
阅读全文
摘要：我们都知道，vue.js是一款渐进式的JavaScript框架，那么什么是渐进式呢？简单来说，如果你已经有一个现成的服务端应用，也就是[非单页应用](https://www.cnblogs.com/jincanyu/p/14259556.html "vue整个项目就是一个单页面应用，整个webapp
阅读全文
