- 博客(45)
- 收藏
- 关注
RSS订阅原创 微信小程序-WXML
目录数据绑定列表渲染wx:for条件渲染[wx:if wx:elif wx:else]hidden属性模板template遇到了view块级标签, text文本行内标签, image图片标签wxs小程序的一套脚本语言小程序独自页面标题设置优先设置导航条tabBar数据绑定<view>数据绑定</view><view>{{hello}}</view>列表渲染wx:for<view>循环列表</view><view
2020-08-20 22:45:56
813
原创 简单使用mockjs模拟数据
1.src/assets/data/mock.js//引入mockjsimport Mock from 'mockjs'//使用mockjs模拟数据Mock.setup( {timeout: 400}//模拟延迟时间)Mock.mock('/mock', { "data": { "mtime": "@datetime",//随机生成日期时间 "score|1-800": 800,//随机生成1-800的数字 "rank|3
2020-08-18 22:22:43
228
原创 vue开发模式跨域ajax
1.新建文件vue.config.jsmodule.exports = { devServer: { proxy: { '/api': { //匹配路径 target: 'https://api.imjad.cn/cloudmusic/',//跨域目标 pathRewrite: { '^/api' : '/'//重新地址
2020-08-17 21:44:29
70
原创 vant简单使用
vant开发文档vant是移动端vue组件库命令安装: npm install vant --savevue ui 图形界面安装, 添加vant插件全局使用vant组件的toast提示 this.$toast.loading({ message: '刷新中...', forbidClick: true, });简单使用单元格和开关组件<template> <div cl
2020-08-04 22:23:50
1152
原创 socketio命名空间和房间
1.命名空间分隔来最大程度地减少资源（TCP连接）的数量客户端 var qq = io.connect('http://localhost:3000/qq'); qq.on('connect', function() { console.log("连接成功") }) qq.on('news', function(data) { console.log(data) }) var wx = io('http://localhost:3
2020-07-31 22:54:24
872
1
原创 聊天框项目
注意事项:图片地址要引入:imgPath: require('./assets/img/4.jpeg')遍历v-for 不加括号和key会有警告:<li v-for="(item,index) in imgData" :key="'imgData' + index">{{item.username}}局部 样式只在单独组件生效: <style scoped>, 但是要慎用...
2020-07-29 23:08:54
114
原创 v-model组件, 动态组件
1.v-model组件<div id="app"> 1. 触发父组件事件,传数据给父组件, 来修改username, 可以自定义事件属性名 <input-dom :username="username" @input-parent="changeEvent"></input-dom> 2.直接改值可以自定义事件属性名 <input-dom :username="username" @input-parent="username=$event
2020-07-27 22:32:15
216
原创 Vue组件父子传值
父传值到子组件 <div id="app"> <ul> <school schoolname="清华"></school><!--静态传值--> <school :schoolname="'北大'"></school><!-- 动态传值字符串 --> <school :schoolname='schoolData[0]'></school><!--
2020-07-24 21:51:03
87
原创 toDoList
todoList使用Vue粗糙山寨微软的To Do 中的清单实现了的功能增加清单: enter按键事件, 把单个清单任务对象, 添加清单数组,完成清单: 点击checkbox复选框, 控制在哪个列表显示, 默认事件去除本地存储: localStorage, 每次 增加, 删除, 完成 清单操作 ,都要保存删除清单: 点击删除按钮, 从清单数组删除对应的任务, splice山寨版:原版<!DOCTYPE html><html lang="en"><h
2020-07-23 23:27:36
270
1
原创 vue过渡效果，修饰符
过渡（动画）效果<style type="text/css"> .content{ width: 200px; height: 300px; background-color: red; } .slide-enter{/* 设置进入前的样式 */ transform: translateX(500px); background-color: green; } .slide-enter-to{/* 到结束时还原成原来的样式红色
2020-07-22 23:13:14
177
原创 vue样式style与class,事件修饰符
样式style与class1.菜单侧边栏(例子):<style> .index { width: 100vw; height: 100vh; background-color: indigo; position: fixed; top: 0; left: 0; } .cebianlan { width: 50vw; heig
2020-07-21 22:41:38
139
原创 async...await
async…await使用1.功能作用:async 告诉程序这是一个异步，await会暂停执行async中的代码，等待await 表达式后面的结果，跳过async 函数，继续执行后面代码async 函数会返回一个Promise 对象，那么当 async 函数返回一个值时，Promise 的 resolve 方法会负责传递这个值；当 async 函数抛出异常时，Promise 的 reject 方法也会传递这个异常值await 操作符用于等待一个Promise 对象，并且返回 Promise 对象的
2020-07-18 22:52:28
187
原创 promise
简单使用一. 作用:1.Promise对象: 代表了未来某个将要发生的事件(通常是一个异步操作)。2.可以将异步操作以同步的流程表达出来，很好地解决了回调地狱的问题（避免了层层嵌套的回调函数）。3.解决在使用ES5的时候，在多层嵌套回调时，写完的代码层次过多，很难进行维护和二次开发。** 二. 写法:**//创建promise对象var p1 =new promise(function(resolve, reject) { if(true) { reslove("数据请求成功"); }e
2020-07-17 22:08:55
83
原创 es6函数扩展
箭头函数 let d1 = document.getElementById('d1'); d1.onclick = function () { setInterval( ()=> { var rand1 = parseInt( Math.random() * 255 ); var rand2 = parseInt( Math.random() * 255 ); var rand3 = parseInt( Math.random() * 255 );
2020-07-16 22:53:55
87
原创 vuex路由状态，模块化,辅助函数，打包编译,发布到服务器
1.vuex路由状态Vuex 是一个专为 Vue.js 开发的状态管理模式，集中式存储管理，管理共享状态vue-cli创建项目时选中vuexgetState.vue文件<h1>姓名:{{$store.state.username}}</h1><h1>年龄:{{$store.state.age}}岁</h1><h1>虚年龄:{{$store.getters.xuAge}}</h1><button @click="ad
2020-07-14 21:28:36
122
原创 vue组件插槽，路由，生命周期，路由卫士
1.组件插槽<!--App.vue--><template> <div id="app"> <layout> <template v-slot:left><!--对应的组件插槽name--> <div class="left">左边</div> </template> <template v-slot:right><
2020-07-13 22:34:20
126
原创 vue入门：计算属性，双向绑定，组件
1.计算属性计算属性在处理一些复杂逻辑时是很有用的，每次访问计算属性时，如果依赖没有发生改变，它们可以立即返回结果，而不需要进行复杂的逻辑运算。而methods中的方法，只要被触发，被调用的方法就会立即执行对应函数，重新进行渲染。<template> <div id="app"> <h1>{{msg}}</h1> <h1>{{reverseMsg}}</h1>//直接使用结果 <h1>{{re
2020-07-10 23:12:01
265
原创 thinkjs操作数据库
thinkjs操作数据库1.进入目录demo1/src/config/adapter.js文件mysql: { handle: mysql, database: 'thinkjs', prefix: '', encoding: 'utf8', host: '127.0.0.1', port: '', user: 'root', password: 'root', dateStrings: true }2.读取表const
2020-07-09 23:19:31
603
原创 node服务器和thinkjs，Vue入门
node搭建express静态web服务器可以实现静态服务器功能页面，图片，样式，js文件等都能访问let express = require('express');let app = express();//实例化express模块app.use(express.static('static'));//静态地址app.get('/api/userlist', (req,res)=>{//自定义api接口 // 请求的信息：req对象 // 响应的操作和信息：res对象
2020-07-08 23:33:54
215
原创 路径模块,文件系统模块的复习
路径模块//路径模块let path = require('path');console.log(__filename);//获取当前执行文件的绝对路径console.log(__dirname);//获取当前执行文件的目录绝对路径console.log(path.dirname(__filename)); //获取文件的绝对路径目录console.log(path.extname(__filename));//获取文件的扩展名console.log(path.basename(__f
2020-07-07 21:04:56
80
原创 node文件读写删,目录列表
文件读取//同步读取let fs = require("fs");let data = fs.readFileSync("text.txt");console.log(data.toString()); //默认是二进制，要转换成字符串//异步读取let fs = require('fs');fs.readFile('text.txt', (err, data)=>{ if(!err) { console.log(data.toString());
2020-07-06 22:11:14
77
原创 node的npm简单使用
npm使用提高下载速度（选择修改源）npm config set registry https://registry.npm.taobao.orgexpress简单使用本地安装npm install express创建简单的web服务器//服务器框架expresslet express = require('express');let app = express();app.get('/',(req,res)=>{ res.send("demo2");})app.l
2020-07-06 21:50:45
58
原创 绑定事件(弹框)
弹框 <script> var btn = document.querySelector("button"); btn.onclick = function() { var zhezhao = document.createElement("div"); zhezhao.className = "zhezhao"; zhezhao.innerHTML = '<div class="alert"><div class="header"&g
2020-07-03 22:23:35
672
原创 点击轮播图下的小圆点切换对应的图
轮播图下的小圆点(显示对应的点),点击切换图<div class="dotList"> <span class="dot dotActive" data-id = "0"></span> <span class="dot" data-id = "1"></span> <span class="dot" data-id = "2"></span> <span class=
2020-07-01 22:50:21
3584
原创 轮播图
<title>轮播图</title> <style type="text/css"> *{ margin: 0; padding: 0; } .swiper { width: 1226px; height: 460px; margin: 0 auto; position: relative; } .swiper .imgList { width: 100%; height: 1...
2020-06-30 20:56:40
121
原创 js辅助响应式navigator
（获取不同的客户端版本）使用navigator.userAgent来检测当前运行浏览器的是什么设备 <title>js辅助式响应</title> <style> .iphone #icon { width: 100px; height: 100px; background-image: url(./img/iphone.png); backgr
2020-06-29 23:59:23
403
原创 rem 布局
rem布局rem是相对于html的字体大小单位。不仅是字体大小，还可以适用于各种属性的大小单位。 <title>rem布局</title><!-- css --> <style> *{ margin: 0; padding: 0; } #d1 { width: 5rem; height: 5rem;
2020-06-28 23:00:19
108
原创 js数组对象和prototype
js一切皆是对象创建数组：方法一：new数组实例 var arr = new Array("1", "2", "3");方法二：数组字面量 var arr = [1,2,3]数组的属性：属性名描述length数组的长度数组的方法：方法名描述是否改变数组arr.concat()两个数组拼接否arr.join()把数组转化为字符串，默认逗号为分隔，使用参数可以自定义分隔符否arr.toString()把数组转化为字符串
2020-06-28 00:11:59
356
原创 小米官网移动端和js复习
小米官网大致完成*{ margin: 0; padding: 0; background-repeat: no-repeat;}li { list-style: none;}body { background-color: #f5f5f5;}input::-webkit-input-placeholder{ color:rgba(0,0,0,.3); }.header { width: 375px; display: flex; f
2020-06-26 00:12:15
493
原创 小米官网头部和伪元素，清除浮动
小米官网头部<style>*{ margin: 0; padding: 0;}li { list-style: none;}input::-webkit-input-placeholder{ color:rgba(0,0,0,.3); }.header { width: 375px; display: flex; flex-direction: column; background-color: #F2F2F2;}.hea
2020-06-24 22:56:31
193
原创 游戏动画与转换
在做苹果官网时，发现有些css没接触过，特别是转换和动画帧动画（ 游戏动画） <style type="text/css"> #main { border: 1px solid #000000; position: relative; width: 500px; height: 300px; } #d1{ width: 300px; height: 200px; /* border: 1px solid #00000
2020-06-23 23:28:28
91
原创 css3动画animation和loading动画
css3动画animation<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>动画</title> <style type="text/css"> #donghua { width: 200px; height: 200px; background-color: #14569B; animatio
2020-06-22 23:35:51
174
原创 定位 position与过渡效果transition
transition:过渡动画效果的使用:transition-property 过渡的css属性transition-property: width, background-color; 可以多个属性过渡, 或者all全部transition-duration 过渡动画的时间transition-duration: .6s, 2s;多个属性分别过渡的时间transition-timing-function 过渡动画的形式, 速度曲线ease默认(慢速开始，然后变快，然后慢速结)c...
2020-06-19 23:57:57
3650
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人