- 博客(30)
- 收藏
- 关注
RSS订阅原创 前端 vscode 常用插件
前端 vscode 常用插件Vue Language Features (Volar)Auto Close TagAuto Rename TagESLintGitLens — Git superchargedHighlight Matching TagHTML CSS SupportImage previewJavaScript (ES6) code snippetsjQuery Code SnippetsPrettier - Code formatterSassVeturPa
2022-02-22 15:05:50
628
原创 vue项目中动态控制table高度
vue项目中动态控制table高度給table加上如下属性:max-height="maxHeight"data中定义最大高度maxHeight:''在钩子函数中改变最大高度mounted(){ this.$nextTick(()=>{ this.maxHeight = document.body.offsetHeight - this.$refs.tabel.$el.getBoundingClientRect().top - 70 }) },...
2021-10-15 14:26:20
953
原创 小程序组件中的数据监听
properties:{ commentBoxId:{ type:String, observer:function(newVal,oldVal,change){ console.log(newVal, oldVal, change); if( this.data.commentBoxId && (newVal !=oldVal)){ this.getDynamicCommentList('change...
2021-06-30 14:18:59
480
原创 小程序海报生成
最近发现一个非常好用的小程序生成海报的插件;mp_canvas_drawer；目前可以支持图片，文字，块；demo体验地址git clone https://github.com/kuckboy1994/mp_canvas_drawer
2021-06-04 14:52:20
143
原创 小程序中scroll-view 阻止滑动穿透
给scroll-view上面加 catchtouchmove=“true”~ 真机查看,开发工具无效 <scroll-view scroll-y="true" catchtouchmove="true">或者在scroll-view中加入catchtouchmove事件,在js中加入这个函数<scroll-view scroll-y="true" catchtouchmove='catchTouchMove'>catchTouchMove(){ return f
2021-04-27 17:25:49
5254
2
原创 微信小程序图片上传以及剪切（image-cropper的简单使用）
微信小程序图片上传以及剪切（使用插件image-cropper）开发到了这个需求，博客鱼龙混杂搜不到合适的，记录一下；首先打开这个地址,并且可以随便看一下,顺便把文件下载下来一份;https://github.com/we-plugin/we-cropper然后打开we-cropper文件夹下的dist,这就是我们所需要的所有东西;给dist文件夹改个名字,拉到我们的项目下;(我改的名字就是we-cropper);下面我们创建一个裁剪图片的新页面(页面中添加也可以便于理解);
2021-04-26 16:15:22
3481
原创 微信小程序富文本渲染(rich-text)换行失效
微信小程序富文本渲染(rich-text)换行失效给rich-text标签加css 样式 white-space: pre;
2021-03-15 14:30:05
2348
原创 Jquery项目中使用vue.js
Jquery项目中使用vue.js最近接触到了一个原始jq的项目,代码可维护性很差,一个页面几千行jq,可维护性很差,所以想再迭代时使用vue;在这种情况下插入vue也不是一件很麻烦的事,毕竟是渐进式框架;首先我们只需要在html文件中引入vue.js文件; <!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>然
2021-01-25 01:40:09
3612
原创 vue中获取屏幕高度（封装使用）
vue中获取屏幕高度（封装使用）我们js原生获取的方法在这里就不赘述了，有需要可以自行百度在这里我们封装一个获取宽高的方法放在Vue实例上（方便我们在这个项目中进行引用），把下面这段代码放到main.js里即可；/** * 获取屏幕宽高 */Vue.prototype.$getViewportSize = function(){ return { width: window.innerWidth || document.documentElement.clientWidth ||
2020-09-15 18:11:40
4220
原创 js-cookie插件使用
一、安装npm install js-cookie --save二、引用import Cookies from 'js-cookie'三、使用1.存// 创建一个cookie，有效的跨整个网站:Cookies.set('name', 'value'); // 创建一个cookie，有效期7天从现在，有效的整个网站:Cookies.set('name', 'value', { expires: 7 }); // 创建一个过期的cookie，有效到当前页面的路径:Cookies.s
2020-08-11 15:37:32
148
原创 vue千位分隔符过滤器
vue千位分隔符过滤器filters: { ThousandSeparator(input) { return input && input.toString() .replace(/(^|\s)\d+/g, (m) => m.replace(/(?=(?!\b)(\d{3})+$)/g, ',')) } }
2020-07-27 16:49:53
1498
原创 Vue知识点总结-2
1.vue中v-if和v-show的区别 v-if和v-show都是用来控制元素的渲染 v-if是根据后面数据的真假，来判断DOM的添加删除等操作 v-show只是在修改元素的css样式（display属性值） v-if如果初始渲染条件为真，就渲染，反之就不渲染 v-show不管初始条件是否为真，都会被渲染 v-if有更高的切换消耗，不适合做频繁的切换 v-show有...
2020-03-14 01:56:34
213
原创 Vue知识点总结-1
1. 对vue的理解，有什么特点，vue为什么不能兼容IE8及以下浏览器vue是一套用于构建用户界面的渐进式框架，核心是一个响应的数据绑定系统 vue是一款MVVM框架，基于双向绑定数据，当数据发生变化时候，vue自身会进行一些运算 特点：简洁轻量、数据驱动、组件化、模块友好 vue.js使用了IE8无法模拟的 ECMAScript 5 特性，没有替代方案2. Vue双向数据绑定的原理以...
2020-03-14 01:50:19
161
原创 HTTP
基本概念HTTP，全称为 HyperText Transfer Protocol，即为超文本传输协议。是互联网应用最为广泛的一种网络协议所有的 www 文件都必须遵守这个标准http特性HTTP 是无连接无状态的HTTP 一般构建于 TCP/IP 协议之上，默认端口号是 80HTTP 可以分为两个部分，即请求和响应。http请求HTTP 定义了在与服务器交互的不同方式，最常用的方法...
2020-03-13 18:58:07
103
原创 React组件中的state属性
函数组件之状态，即无状态组件使用 useState() 进行状态管理useState()Hook 来启用函数组件中的状态useState(initialValue)的第一个参数 initialValue是状态的初始值[state, setState] = useState(initialValue)返回一个包含2个元素的数组:状态值和状态更新函数使用新值调用状态更新器函数setSt...
2020-03-04 10:43:33
968
原创 React中的组件
组件react 当中的组件：状态组件与无状态组件（函数组件）无状态组件组件的名字首字母要大写。函数的名字即是组件的名字，函数的返回值即是组件的内容返回的内容有且只能有一个根元素必须要有return实例说明<div id="root"></div><script type="text/babel"> /* react当中的组件...
2020-03-03 23:59:17
118
原创 React中的单向数据流
单项数据流ReactDOM.render()是单向数据流，当数据发生变化时，视图并不会更新<div id="root"></div><script type="text/babel"> let num = 0; ReactDOM.render(( <input type="button" onClick={(...
2020-03-03 23:39:45
1313
原创 React中的遍历
数组数据结合 { } 渲染react 可以直接展开数组，将元素渲染到页面以字符串的形式渲染到页面数组内元素是数值<script type="text/babel">// react 可以直接展开数组，将元素渲染到页面 const arr = [1, 2, 3]; ReactDOM.render(<div> {arr} ...
2020-03-03 23:28:09
2360
原创 React中的事件
事件注意：事件是需要采用驼峰命名法 on 开头，例如：onClick={事件要绑定一个函数}箭头函数<div id="root"></div><script type="text/babel"> // 事件是需要采用驼峰命名法 on开头：onClick.事件要绑定一个函数 ReactDOM.render(( &l...
2020-02-29 00:06:49
83
原创 Rex中的class
classJSX 元素不能直接使用 class 属性因为 class 在 js 语言内是一个关键字如果要使用 class 属性，需要书写成 className书写 class 样式不使用 { } 解析在标签属性内 添加 className=“bg” 属性，bg 是 class 名<head> <style> .bg { ...
2020-02-27 23:44:10
69
原创 Jsx中的差值表达式
差值表达式 { }注意：jsx:当遇到小写字母标签时，会作为普通标签。当遇到首字母大写的标签会认为是组件。当遇到{}时，内部会作为 逻辑去处理。差值表达式可以书写 函数 和 表达式，不能书写 for 循环解析变量<div id="root"></div><script type="text/babel"> const str = "花...
2020-02-27 00:16:32
160
原创 Jsx元素语法
jsx 语法List itemjsx 就是一个语法糖，更加方便的书写代码React 提供了 JSX , JSX 全名是 javascript XML因此，可以换成另一种方式进行书写引入 babel.min.js 文件【babel.min.js 文件就是帮助浏览器解析 jsx 语法】ReactDOM.render() 第 1 个参数：标签//标签就是 react 扩展的 jsx 语...
2020-02-26 23:59:42
548
原创 用react做出简易版todoList效果
todoList添加时渲染效果模糊搜索时渲染效果以下为实现代码<div id="app"></div><script type="text/babel"> // App 组件 class App extends React.Component { constructor(props) { ...
2020-02-25 23:44:43
276
原创 redux的基本概念及API见解
StoreStore: 保存数据的地方，整个应用只能有一个 Store。Redux 提供 createStore 函数来生成 StoreStateStore 对象包含所有数据，如果想得到某个时点的数据，就要对 Store 生成快照，这种时点的数据集合叫做 State当前时刻的 State 可以通过 store.getState() 得到ActionState 的变化，会导致 V...
2020-02-25 00:21:22
117
原创 react中路由的理解
路由（router） 后端路由：根据用户的请求返还不通的内容 前端路由：根据不同的url 去切换组件安装npm install react-router-dom两种模式1）历史纪录模式 BrowserRouter2) hash模式 HashRouter 用法1）在跟组件引入 ```bash import {BrowserRouter as router} f...
2020-02-23 16:01:15
644
原创 localstorage实现购物车案例
localstorage实现购物车案例localstoragelocalStorage存取功能的基本实现商品页面实现购物车页功能实现localstorage //本地存储 永久存储 存 值为字符串 取 值为字符串 //localStorage //增删改查 //增 //localStorage.setItem("username","admin"); /...
2019-11-26 14:25:38
1575
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人