aaassddd_a的博客

原创 uniapp中nvue与vue的区别

uni-app是逻辑和渲染分离的，渲染层在app端提供了两套排版引擎。小程序方式的webview渲染，和weex方式的原生渲染，两种渲染引擎可以自己根据需要选。vue文件走的webview渲染nvue走weex方式的原生渲染组件和js写法是一样的，css不一样，原生排版的能用的css必须是flex布局uni-app的App端内置了一个基于weex改进的原生渲染引擎，提供了原生渲染能力。在App端，如果使用vue页面，则使用webview渲染；如果使用nvue页面(native vue的缩写)，则

原创 Vue sync 修饰符 使用

简单的说 sync 就是一个能实现 prop双向绑定的语法糖，比如 在我们组件化的时候，父组件提供数据 传递给 子组件 props 接收，而子组件根据业务 需要更改 父组件的数据，此时 就能用到 sync 修饰符了//父组件<template> <div> <!-- 使用 sync 语法糖写法 --> <cell-bar :cellTitle.sync="cellTitle" /> <!-- 完整.

原创 Vue provide / inject 响应式处理(超简单)

实现方式父组件//父组件export default { data:(){ title : '传给子孙组件的' }, provide(){ return { title:() => this.title } }}子孙组件<template> <div>{{ title() }}<div/><template/>export de...

原创 Vue 面试题进阶(含底层源码原理)

前置 需要看过源码为基础，因为这些问题基本上都是从 源码中找到的答案，我只是顺便自己在看源码时记录了下来.正文1.Vue 的初始化过程（new Vue(options)）都做了什么？ 处理组件配置项 初始化根组件时进行了选项合并操作，将全局配置合并到根组件的局部配置上 初始化每个子组件时做了一些性能优化，将组件配置对象上的一些深层次属性放到 vm.$options 选项中，以提高代码的执行效率 初始化组件实例的关系属性，比如 $parent..

原创 vue-router的一些注意事项和进阶使用

1.当使用 动态路径时，使用 path 只能拼接动态路径而不能使用 params ，如是使用 params 可以配合 name 使用。2.params不单单适用于动态路径，它可以传递任何类型数据，有时可以使用 params 传递数据到指定路由 组件中，用 this.$route.params 接收3.当使用二级路由时，例如从/user/foo导航到/user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会...

原创 axios post 请求时 headers 配置 content-type

为什么要配置?默认情况下，axios将JavaScript对象序列化为JSON,也就是说 默认 请求头的content-type 是application/json格式所以发送 post 请求时将 headers的 content-type 设置为application/x-www-form-urlencodedimport qs from 'qs';const data = { 'bar': 123 };const options = { method: 'POST', he..

原创 element-ui input 框 宽高没效果的问题

使用 ::v-deep可以完美解决,::v-deep .el-input__inner { height: 40px; width: 100%; line-height: 40px;}::v-deep 是什么如果你希望scoped样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用>>>操作符：<style scoped>.a >>> .b { /* ... */ }</style>...

原创 Vue异步组件使用

什么是异步组件？异步组件就是你需要这个组件的时候才会从服务器加载这个组件模块比如后台管理系统，多选项来回切换，就可以使用异步组件没用异步组件和用异步组件的区别这里我用一个按钮控制 subs 组件是否显示<template> <div id="app"> <div> <h2>vue异步组件使用</h2> </div> <button @click="handle">

原创 Vue 源码 思维导图

原创 nginx 反向代理解决跨域问题

server{ listen 4000; server_name www.qianduan.vip; //配置静态文件名称，也就是程序的入口，如 index.html index app.js index.php index.html index.htm default.php default.htm default.html; //配置静态文件路径，也就是程序的入口 //加上上一段代码 就是 让nginx 执行 /www/wwwroot/saoma-dianca.

原创 Vue devServer 开发时代理配置(解决跨域问题),附部署时nginx反向代理

为什么跨域？ 因为浏览器是由同源策略的devServer 就是vuecli在开发环境给我们提供的一个代理服务器,(使用的是 http-proxy-middleware)devServer 就相当于 用一个 中间件服务器来访问，服务器是没有 同源策略的 devServer: { host: "localhost",//配置本项目运行主机 port: 8080,//配置本项目运行端口 //配置代理服务器来解决跨域问题 proxy: { // ‘/ap.

原创 常见的正则表达式

注意最常用的：手机号码：/^1[3456789]\d{9}$/邮箱：^([a-zA-Z]|[0-9])(\w|-)+@[a-zA-Z0-9]+.([a-zA-Z]{2,4})$一、校验数字的表达式 数字：^[0-9]*$ n位的数字：^\d{n}$ 至少n位的数字：^\d{n,}$ m-n位的数字：^\d{m,n}$ 零和非零开头的数字：^(0|[1-9][0-9]*)$ 非零开头的最多带两位小数的数字：^([1-9][0-9]*)+(.[0-

原创 vue 前端服务器代理，proxyTable简要叙述

以下是我转载的文章，大概看了下对于服务器代理讲的很全面很适合大众朋友们，易懂。博主文章链接：关于 Vue.proxyTable 是干什么的?以及如何配置? - 简书我们在使用vue-cli工具生成vue项目时 vue init webpack my-project-vue 在生成的项目结构里,会有一个index.js文件.image.png在这个index.js文件里,会有一个proxyTable的空节点.image.png...

原创 宝塔 nginx 原生模板

user www www;worker_processes auto;error_log /www/wwwlogs/nginx_error.log crit;pid /www/server/nginx/logs/nginx.pid;worker_rlimit_nofile 51200;events { use epoll; worker_connections 51200; multi_accept on; }.

原创 JS ES6 的解构、合并、展开

解构对象结构let a = {'b':'bb','c':'cc'};//对象结构，根据 key 值匹配let {b,c} = a;console.log(b) // 'cc'数组结构let arr = ['a','b','c'];//数组结构， 根据 索引 匹配let [one,two,thrre] = arrconsolelog(three);//'c'合并运算符对象合并 let a = 'aa'; let b = { 'bb': 'bb

原创 mysql 批量查询

批量查询可以使用 IN 子查询，但是 IN 的只能用 JSON 字符串，否则出错比如：//这是正确的select * from account where id in ("'123456','145236','321654'")怎么将数组自动转换为 JSON 字符串呢?let arr = ['a','b','c'];//转换为 JSON 字符串数组arr = JSON.stringify(arr); // "['a','b','c']"//最后使用字符串 截取就好arr =

原创 小程序端 获取 openid

本人手贱没用 云开发 来开发小程序端，到了推送订阅消息傻眼了，需要 openid，查了文档要在小程序端 用户登录的时候 调用 wx.loginwx.login({ success: function(res) { var that = this; var header = { 'content-type': 'application/x-www-form-urlencoded', .

原创 Vue 和 Node 的 token 使用(可直接复制使用)

token 的使用客户端使用用户名跟密码请求登录 服务端收到请求，去验证用户名与密码 验证成功后，服务端会签发一个 Token，再把这个 Token 发送给客户端 客户端收到 Token 以后可以把它存储起来，比如放在 Cookie 里或者 Local Storage 里 客户端每次向服务端请求资源的时候需要带着服务端签发的 Token 服务端收到请求，然后去验证客户端请求里面带着的 Token，如果验证成功，就向客户端返回请求的数据 APP登录的时候发送加密的用户名和密码到服务器，服务器验

原创 uniapp配置云函数 和 使用云函数来连接 mysql2 数据库

目录uniapp配置云函数云函数配置完成了。。。。。。。。。。。。。云函数链接 mysql由于 浏览器不能使用 mysql 模块，所以只能使用 云函数来调用 mysql 的数据首先要明确一点，就是小程序云开发的云函数是基于node.js的，所以我们使用node.js的mysql2模块可以直接来链接并操作mysql数据库，所以我们现在要做的就是怎么样在云函数里使用mysql2模块，并且借助这个模块类库来实现mysql数据库的链接1.获取 环境id2.打开 uniapp...

原创 better-scroll使用方法

安装npm i better-scroll -S基本使用better-scroll 只处理容器（wrapper）的第一个子元素（content）的滚动，其它的元素都会被忽略。 外盒子设置固定宽或高和属性：overflow: hidden; 当 content的高度不超过父容器的高度，是不能滚动的，而它一旦超过了父容器的高度，我们就可以滚动了，这就是 better-scroll 的滚动原理。绿色部分为 wrapper，也就是父容器，它会有固定的高度黄色部分为 content，它.

原创 vue视频播放插件vue-video-player的具体使用方法

安装npm install vue-video-player --save引入可以全局引入插件，也可以在需要用到该插件的组件内单独引入（二选一）【1】全局引用， 在main.js里面导入并引用import VideoPlayer from 'vue-video-player'import 'vue-video-player/src/custom-theme.css'import 'video.js/dist/video-js.css' Vue.use(VideoPlayer

原创 vue-awesome-swiper的安装及使用

1.安装npm install vue-awesome-swiper --save2.main.js 导入和注册//引入swiperimport VueAwesomeSwiper from 'vue-awesome-swiper'//引入swiper 样式import 'swiper/css/swiper.css'//注册插件Vue.use(VueAwesomeSwiper)3.注册组件 (实测不用在components里注册组件，直接使用标签就可以)<t...

原创 Vue 响应式原理

1.响应式原理 我们在使用 Vue 的时候，赋值属性获得属性都是i直接使用的 Vue 的实例 我们在设计属性值的时候，页面的数据更新 ES5 语法 let o = {} //等价于 let o = {} let value; Object.defineProperty(o, 'age', { //属性访问器 不能和 writable 和 value 共存 // writable: true, //可修改的 configurab..

原创 解释 vue 中的代理

解释proxy(注意这里不是es6的proxy)vue设计中，不希望访问_开头的数据vue中的潜规则:-_开头的表示私有数据，尽量不要碰-$开头的表示只读数据app.name将对_data.name的访问交给了实例重点：访问app.name就访问了app._data.name Object.defineProperty(app, name, { get() { return app._d...

原创 函数柯里化

1.函数式编程概念： 1.柯里化：一个函数原本有多个参数，只传入一个参数，并生成一个新的函数，由新函数接受剩下的参数来运行得到结果 2.偏函数：一个函数原本有多个参数，只传入一部分参数，并生成一个新的函数，由新函数接受剩下的参数来运行得到结果 3.高阶函数：一个函数参数为一个函数，该函数对这个函数进行加工，得到一个函数，这个加工用的函数就是高阶函数 为什么要用柯里化？ 提高性能，使用柯里化可以缓存一部分能力 使用两个案例说明 1 判断元素 2 虚拟 D

原创 JS常见面试题

1.冒泡排序 //冒泡排序 思路: //1.先遍历数组，然后每次遍历再套一个循环 用来 判断数值大小 //2.如果判断成立 先挪第一个元素，再挪第二个元素，否则最后一个元素不判断 //3.挪完后，内层循环次数减1，可以使用外层循环的 索引 let arr = [5, 4, 2, 6, 43, 52, 12]; let temp; for (let i = 0; i < arr.length - 1; i++) { for (let j = 0; j < ar

原创 虚拟DOM(virtualDOM)

1.为什么使用virtualDOM？主要是考虑 性能， 因为直接操作DOM页面会刷新，会对页面的内存控制等 消耗性能而virtualDOM 完全是在内存中进行操作控制

原创 数组和为数组的区别

伪数组的介绍伪数组我们可以理解为类似数组的一个集合，我们常见的有俩个，一个是arguments还有一个是DOM的children属性，获取回来的子节点集合。他们与数组一样，具有索引(下标)和length属性。可以通过for循环写循环语句去循环遍历。我们可以简单看一下伪数组的样子：伪数组和数组的区别在于__proto__如何判断伪数组？使用 Array.isArray(value)...

原创 Vue源码-数据驱动（一）

<body> <div id="app"> <p>{{name}}</p> <p>{{message}}</p> </div> <script> //1.获取根元素 let app = document.querySelector('#app') //2.准备要替换的数据 let data = { name: '张三', message: '是个男人' } /.

原创 less 使用

1.安装 lazy Less自动编译插件2.创建 .less 文件2.定义变量//定义变量@baseColor: #ff6700;@parentWidth: 100px;@bgcColor: #cccc;div { width: @parentWidth; p { background-color: @bgcColor; //计算 width: @parentWidth - 50; .active; } //嵌套 h2 是 div 的子元素..

原创 JS红宝书 第八章 对象、类与面向对象编程

8.1属性的特性属性特性包括： configurable(可配置的):表示属性是否可以删除、和重新定义 enumerable(可枚举可遍历的):表示属性是否可以通过for-in循环返回 writable(可写的):表示属性的值是否可以被修改 对象上定义的属性以上特性都为true ...