- 博客(21)
- 收藏
- 关注
RSS订阅原创 layui 在Vue 项目中基础引用
layui（谐音：类 UI) 是一套开源的 Web UI 解决方案，采用自身经典的模块化规范，并遵循原生 HTML/CSS/JS 的开发方式，极易上手，拿来即用。其风格简约轻盈，而组件优雅丰盈，从源代码到使用方法的每一处细节都经过精心雕琢，非常适合网页界面的快速开发。layui 区别于那些基于 MVVM 底层的前端框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，它更多是面向后端开发者，你无需涉足前端各种工具，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。
2022-11-17 19:57:47
833
原创 微信小程序 订阅与发布
先订阅 在发布消息订阅：PubSub.subscribe(‘名字’,(msg,data){}) 回调，有两个参数msg：传递的订阅的名字data：传递的数据订阅要不取消订阅，会累加取消订阅：PubSub.unsubscribe(订阅名)取消订阅要在订阅函数里最下面 解决 点击的多次累加，取消后点击一下，执行一次放在onLoad 生命周期中 也需要取消订阅发布：PubSub.publish(‘和订阅同名’,发布的数据)注意：发布和订阅的名一样，如不一样不会触发。wx:for 默认
2021-09-24 11:57:35
260
原创 微信小程序 页面跳转
页面跳转// 窗口的底部或顶部有 tab 栏可以切换页面，可以通过 tabBar 配置项指定"tabBar": { // tab 上的文字默认颜色，仅支持十六进制颜色 "color": "#000", // tab 上的文字选中时的颜色，仅支持十六进制颜色 "selectedColor":"#f0f", // tabBar 的位置，仅支持 bottom / top "position":"bottom", // tab 的列表，详见 list 属性
2021-09-14 19:25:18
140
原创 微信小程序 封装的想法 自定义组件
封装 功能函数功能点明确函数内部应该保留固定的代码(静态的)将动态的数据抽取形参，有使用着根据自身的情况动态传入实参一个良好的功能请求函数一定要有默认值自定义组件组件对象是Component如何复用创建一个 component 目录放在那个页面使用到json文件里注册 要起个名 后面是路径 "usingComponents": { "havHeader":"/Component/header/header" } 在页面 用名字以表签形式来用传值 要在componen
2021-09-14 19:17:45
96
原创 微信小程序 交互 遍历
前后端交互在生命周期中onLoad中 wx.request({ //轮播图地址 //协议，域名 端口/接口地址 url: 'http://localhost:3000/banner', data:{type:0}, method:'GET', success:(res=>{ let banners=res.data.banners this.setData({ ba
2021-09-10 16:10:24
127
原创 微信小程序 轮播图 适量图标引用
轮播图// 滑块视图容器。其中只可放置swiper-item组件 <swiper class="banner" indicator-dots //是否显示面板指示点 indicator-color="ivory" //指示点颜色 indicator-active-color="#d43c33" //当前选中的指示点颜色 autoplay='true' //是否自动切换 current//当前所在滑块的 index 最后一张后是第一张 > <swiper-
2021-09-10 10:01:16
104
原创 微信小程序 生命周期
生命周期onLoad 监听页面加载onShow 监听页面显示onReady 监听页面初次渲染完成onHide 监听页面隐藏onUnload 监听页面卸载第一次页面加载会依次触发 onLoad ，onShow ，onReadyonHide 页面隐藏 路由 wx.navigateto 会触发onHideonUnload 页面卸载 路由 wx.reLaunch 关闭所有页面 ，wx.redirectTo 关闭当前页面 ，wx.navigateBack 关闭当前页面，返回上一页面或多级页面 都会触发
2021-09-09 15:03:48
162
原创 微信小程序 数据绑定 事件的绑定 简单路由跳转
数据绑定数据绑定分为三种，初始化数据，使用 ，修改初始化// js文件 初始化数据 data: { mag:'数据',//数据初始化 }, // 页面使用 直接用就ok 使用双大括号表达式{{msg}} <text class="userName">{{msg}}</text> // 修改 在生命周期中 onLoad: function (options) { // 修改 this.setData({}) thi
2021-09-09 11:49:55
176
原创 微信小程序 准备工作
准备工作-相关资料1.官网：https://mp.weixin.qq.com/2.微信开发工具下载地址： https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=20183153.开发文档：https://developers.weixin.qq.com/miniprogram/dev/framework/4.小程序文件a).全局配置：app.json—官网—指南—配置小程序—全局配置1.作用：对微信小程序进行全局配
2021-09-08 17:02:20
3552
原创 TypeScript 简单了解与开发环境搭建
TypeScript是什么？以JavaScript为基础构建的语言特点：可以在任何支持JavaScript的平台中执行TypeScript扩展了JavaScript，并添加了类型TS不能被JS解析器直接执行 TS兼容JSTypeScript增加了什么？类型支持ES的新特性添加ES不具备的新特性丰富的配置选项TypeScript开发环境搭建安装node.js使用npm 全局安装 typescript进入命令行输入：npm i -g typescript创建一个TS文件
2021-09-07 16:25:36
72
原创 MobX 安装 基础使用
安装 第一步yarn add mobx第二步yarn add mobx-reactmobx 和 react 关联起来用的一个包router.js 新增代码// 引入 mobx和react 绑定的包import { Provider } from 'mobx-react';// 引入store.js 要引入对应的store的文件import FirstStore from './store/store';// 对应使用 第一种 或 第二种 方式// 第一种 只能传递一个// c
2021-08-17 11:08:02
187
原创 react 强化 数据传递comext
import React, { Component } from 'react'// 两个页面组件import Child2 from './index copy'import Home from '../home/index'// 引入 的js公共文件import {ResumeContext} from './store'class view extends Component{ constructor(props) { super(props) this.state
2021-08-10 16:09:10
75
原创 react 数据传递comext
comextContext 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。有一个公共的 js 存值的创建 store.js 文件1.引入 react 包2.设置数据初始化3.创建 context 着三步import React from "react";//定义初始值export const Resume = { nase: { name: "", age: "", }, exp: { year: "", job: "", },
2021-08-09 11:37:49
85
原创 react 路由初始设置和 简单跳转
先 安装 reactr 路由包yarn add react-router-dom新建一个 Router.js 与 app.js 、index.js 并列 在 src 文件下Router 里的代码import React from "react";import { BrowserRouter, HashRouter, Route, Link, Switch,} from "react-router-dom";import App from "./App.js";const Ro
2021-07-26 10:05:16
459
原创 scss的基础使用
变量sass 可以存储信息在将来重复利用的一种方式，在样式表中都可以访问，可以存颜色、字体或 css 值。sass 使用$符号 作为变量的标志// 这个 是scss 写的样式// 在scss文件中 定义一个样式$img:url('./img/logo.png') no-repeat 0 0;$font-color:#02a2ed;div{ width:100px; height:100px; margin: 0 auto; ul{ li{ // 直接这样 使
2021-07-23 15:58:59
157
原创 React 阻止默认事件和阻止冒泡
给 a 标签添加一个事件阻止默认事件e.preventDefault();class view extends Component { onAtag(e) { // 阻止默认事件 放置跳转 e.preventDefault(); console.log("烦烦烦滚滚"); } render() { return ( <div> <a href='true' onClick={(e) => { this.on.
2021-07-16 10:58:21
975
原创 React 简单的tab切换
import React, { Component } from 'react'class view extends Component{ constructor(props) { super(props) this.state = { current:1, } } // 封装 点击事件 tabSwitch(index,name) { this.setState({ [name]:index }) } // 封装 的
2021-07-15 10:00:42
292
原创 React 事件和 解决指向问题
事件驼峰形式的 onClickclass view extends Component { onLog() { console.log("第一次"); console.log(this); // 此时 this是undefined } render() { return ( <div> 普通事件 <input onClick={this.onLogFn()} type='button' value='登录' /> </div>
2021-07-15 08:37:50
151
原创 React props传参
父组件传子组件子组件 this.props 接收的几种 使用方法// 父组件import React, { Component } from "react";import One from "./one";import Two from "./two";import Three from "./three";import Fove from "./fove";import Five from "./five";import Five2 from "./five2";class view
2021-07-08 17:13:33
237
原创 React 两种组件
函数组件// 写 函数组件function Home() { return ( // 最外层 有一个大的标签 jsx 的语法 不可以并列 // class名 要写 className='' <div className='home'>这是一个函数组件</div> )}// es6 箭头函数 写法const Home = () => { return ( <div className='home'>这是一个函数组
2021-07-08 11:06:35
133
原创 React 项目创建
1、 node 版本 查看node版本 node -v 查看node版本一般会安装nvm来管理node 版本2、 npx create-react-app my-app官方标准命令，my-app 为项目名称3、 git add . 添加git commit -m ‘first’ 提交4、 cd my-app 进入项目目录 进入到当前项目5、 yarn ejectnpm run eject 开启配置文件新增config和scripts 文
2021-07-07 11:10:30
75
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人