- 博客(88)
- 收藏
- 关注
RSS订阅原创 Vue3.x 版本的生命周期钩子函数
setup() 开始创建组件之前，在beforeCreate和created之前执行。创建的是data和method//必须先引用再使用import {onBeforeMount,onMounted,onUpdated,onBeforeUnmoun,onUnmounted} from 'vue'//组件挂载到节点上之前执行的函数onBeforeMount() //组件挂载完成后执行的函数 onMounted()//组件更新之前执行onBeforeUpdate(...
2020-11-08 15:56:23
7615
原创 在vscode 快速创建代码片段 之 vue3.x（自用供参考）
{ // Place your snippets for vue here. Each snippet is defined under a snippet name and has a prefix, body and // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are: //...
2020-11-08 11:58:21
2654
1
原创 ES6(2)
目录8. Es6中的函数和数组补漏9. Es6中的对象10. Symbol在对象中的作用(对元素的保护作用）11. set和WeakSet数据结构12. map数据结构13.proxy 代理8. Es6中的函数和数组补漏//对象的函数结构jsonlet json ={ a:'vivi', age:18, b:"薇薇"}function fun({a,b}){ console.log(a,b)//vivi 薇薇}fun(j..
2020-05-31 20:22:13
442
原创 ES6(1)
1.实时刷新1.项目初始化npm init2.安装cnpm i -g live-server3.启动live-server2.查找字符串indexOf()let blog = `向暖lalallzenm hdjhd糖糖shd`document.write(blog.indexOf('糖糖')==-1)//false
2020-05-30 08:27:34
197
原创 ES6的开发环境
1. 项目初始化npm init -y2. 全局安装babel-clinpm install -g babel-clinpm install --save-dev babel-preset-es2015 babel-cli3. 在根目录下创建.babelrc{ "presets": [ "es2015" ], "plugins": []}4. 转换输出babel src/index.js -o dist/index.js5...
2020-05-28 21:14:10
271
原创 Next.js 入门 (3)
11. 自定义Head更加友好的SEO操作import Head from 'next/head'export default function Header() { return ( <div> <Head> <title>今天星期四</title> <meta charSet="utf-8"/> ...
2020-05-28 15:28:47
288
原创 Next.js 入门(2)
目录6. 路由跳使用query传递参数和接受参数6. 路由跳使用query传递参数和接受参数Next 只能用query传递参数标签跳转Demo传递对象编程式跳转Demo
2020-05-27 08:05:22
238
原创 Next.js 入门(1)
目录1.什么是Next.js2.手动创建项目3.脚手架create-next-app快速搭建项目4. Next.js的Page和Component使用5.路由的标签跳转和编程跳转1.什么是Next.jsSPA：单页面应用React，Vue 单一页面，首页加载过慢，不能SEONext.js服务器端渲染（ssr）优点：搭建起来非常轻松 自带数据同步 丰富的插件，自己形成了生态 灵活的配置2.手动创建项目创建项目文件夹 npm init 项目初始化（默认）.
2020-05-27 07:32:23
1037
原创 2.JSX的基本使用
1.creatElement()的问题繁琐不简洁 不直观，无法一眼看出所描述的结构 不优雅，用户体验不爽2.JSX简介JSX是javsScript XML的简写，表示在javaScript代码中写XML(HTML)格式的代码优势：声明式语法更加直观，与HTML结构相同，降低了学习成本，提升开发效率JSX 是React 的核心内容3.使用步骤使用JSX语法创...
2020-04-16 12:56:13
241
原创 1.React基础
1.什么是React?React 是一个用户构建用户界面的JavaScript库。用户界面：HTML页面（前端）React主要用来写HTML页面，或构建web应用如果从MVC 的角度来看，React 仅仅是视图层（v），也就是只负责视图的渲染，而并非提供了完整的M 和C 的功能。起源于Facebook的内部项目，后又用来架设Instagram的网站，并于2013年5月开源2.Re...
2020-04-16 12:38:21
109
原创 ajax封装
var _url = 'http://xxxx'/* * AJAX针对所有的数据类型的函数 * * @param {type} sync 是否异步传输 默认是true是异步。 false就是同步传输 * @param {type} cache 是否开启缓存 * @param {type} type ajax的传输类型 POST 或 GET * @param {type} ur...
2020-03-11 16:09:04
118
原创 微信小程序-学习笔记
1.text 文本1⃣️显示连续空格<p><text space='ensp'>11</text></p><p><text space='emsp'>11</text></p><p><text space='nbsp'>111</text></p&...
2019-11-04 07:29:47
196
原创 微信小程序-请求封装
//import request from '../../utils/network.js'export const host = ''; // 域名let lock =trueexport default function request(opt){ return new Promise((resolve,reject)=>{ if (opt.isLock) { ...
2019-08-24 10:46:06
230
原创 表单：登录 注册页面
from :双标签，一般在此标签里面放置其他标签（表单元素==表单控件）:输入框，密码输入框，按钮，复选框，单选框，文件上传表单元素基本上都是input标签结合type属性来使用表单：提交数据信息提交的数据其实提交的是表单元素里面的value属性值form标签：action:信息提交的路径（后台，服务器）现在暂时用后台文件代替（java,php);method:提交...
2019-08-11 09:05:34
3338
1
原创 截取字符串substr和substring两者的区别
substr和substring两个都是截取字符串的。两者有相同点：如果只是写一个参数，两者的作用都是一样的：就是截取字符串当前下标以后直到字符串最后的字符串片段。不同点：第二个参数substr（startIndex,lenth）： 第二个参数是截取字符串的长度（从起始点截取某个长度的字符串）；substring（startIndex, endIndex）： 第二个...
2019-08-10 21:14:26
1844
原创 微信小程序-更换头像
<!-- 更换头像 --> <view class="updown-image" bindtap='upload'> <view class="personal-img"> <image src="{{head}}" mode="aspecFill"></image> </view> ...
2019-07-30 23:43:32
3471
2
原创 微信小程序-文本超出字符数量出现省略号
-当行文本(建议设置一个宽度，默认为100%).name{ width: 319rpx; display:-webkit-box; -webkit-line-clamp:1; overflow:hidden; text-overflow:ellipsis; -webkit-box-orient:vertical; word-break:break-all;...
2019-07-28 19:44:14
4901
原创 微信小程序-实现三级联动-省市区
<view class="online-con"> <text><text style="color:red;">*</text>收 货 地 址：</text> <text class="online-text" bindtap="selectArea" style="color:#646464; ">{{v...
2019-07-28 17:41:42
1676
1
原创 微信小程序-radio单选按钮选中与取消状态切换
<label catchtap='checkedTap'> <radio checked="{{checked}}" style="color:#969696;font-size:28rpx;">设为默认地址</radio></label>/* 自定义 radio 样式 */radio .wx-radio-input{ ...
2019-07-28 17:29:27
10064
1
原创 js基础-网页特效-001-自动刷新页面
实例描述有一些具有实效特点的网页，譬如股票价格，外汇牌价等，有这样的客户需求：定时自动刷新网页，把最新数据展示给客户，那么这样的效果如何实现呢？javaScript 里有一个 reload() 函数可以实现这样的效果；实现代码<!DOCTYPE html><html lang="en"><head> <meta charse...
2019-05-11 22:08:55
429
原创 网页标题添加ico图标
效果展示：1.制作ico图标http://www.bitbug.net/2.把生成的favicon.ico图标放到根目录下3.在head标签内引入 <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">...
2019-04-29 08:59:33
889
原创 响应式和自适应的区别
自适应：百分比布局，宽度使用百分比，文字使用em，现在也很多使用rem了，也就是所谓的高清方案；响应式：据屏幕的大小自动的调整页面的展现方式，以及布局；区别：两种方式的解决问题是不一样的；自适应是为了解决如何才能在不同大小的设备上呈现相同的网页； 响应式的概念应该是覆盖了自适应，但是包括的东西更多了。响应式布局可以根据屏幕的大小自动的调整页面的展现方式，以及布局...
2019-04-13 09:28:06
5641
原创 用纯css实现loading图
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...
2019-04-11 10:20:24
1011
原创 02.jQuery 选择器及应用
1.选择器案例a.点击按钮，设置层中的显示内容为：这是一个层，同时设置这个层的背景颜色(id选择器);<input type="button" value="好听的歌" id="btn"><div id="dv"></div>// 点击按钮，设置层中的显示内容为：这是一个层，同时设置这个层的背景颜色 // (id选择器);...
2019-04-07 12:31:56
376
原创 01.jQuery:介绍和体验
1.什么是javaScript库javaScript框架库：就是一个普通的js文件，封装了很多的很多的函数，封装了很多的兼容的代码；常见的框架库prototype,YUI,Dojo,ExtJS,jQuery等，这些库对javaScript进行了封装，简化了开发，这些库都是对javaScript的封装，内部都是JavaScript实现的；ps：有的需要花钱，有的做的并不是很好，...
2019-04-07 09:58:35
127
原创 36.Vue.js :Vuex
Vuex 是什么？Vuex 是一个针对Vue.js 开发的状态管理模式。说简单一点就是一个工具，可以管理（修改或设置）所有组件用到的数据，而不需要借助之前的event bus 或props在组件间传值。Vuex使用场景大型单页应用程序，存在多组件共享数据的时候，需要用到store(一个容器对象，存储Vuex 中的state.mutations,actions,actions,...
2019-04-07 06:00:34
128
原创 35.Vue.js :路由安全守卫
main.js//注册一个全局守卫，作用是在路由跳转前，对路由进行判断，防止未登录的用户跳转到其他页面去router.beforeEach((to, from, next) => { let token = localStorage.getItem('myToken'); //如果已经登录不干涉你，让你随便访问 if (token) {...
2019-04-04 15:00:54
356
原创 34.Vue.js :登录状态保存
HTTP请求是无状态的cookie保存在客户端 数据量小（很多站点对cookie的大小和数量都进行了限制） 不安全（别人可以分析存放在本地的cookie，并进行cookie欺骗，也可能被拦截）session保存在服务器端 安全 session可以依赖cookie，也可以不依赖使用 url 访问量增多，占用服务器资源，如果资源挂了，所有保存的信息都没了 token 服务器...
2019-04-04 14:44:00
846
原创 32.Vue.js :sass学习
1.变量sass 允许使用变量，所以变量以 $ 开头$blue:#1875e7;div{ color:$blue}如果变量需要镶嵌在字符串之中，就必须需要写在 #{} 之中$side: left;.rounded{ border-#{$side}-radius:5px;}2.计算功能sass允许在代码中使用算式：$var:20;body{...
2019-03-31 14:42:37
164
原创 31.Vue.js :vue -cli 脚手架工具
vue-cli 是官方的一个脚手架工具，所谓脚手架呢就是一个架子，什么架子呢？项目结构的架子，里面有一些最基本的结构配置。利用vue-cli呢，我们可以生成一个这样的脚手架，所以呢它被称为vue脚手架工具。npm install vue-cli -gvue init webpack admin npm install element-ui ...
2019-03-30 08:35:14
195
原创 30.Vue.js :生命周期
1.什么是生命周期从Vue实例创建,运行,到销毁期间,总是伴随着各种各样的事件,这些事件,统称为生命周期;2.生命周期钩子？就是生命周期的别名而已;3.主要的生命周期函数分类：✔创建期间的声明周期函数: beforeCreat:实例刚在内存中被创建出来,此时,还没有初始化好data和methods属性; created:实例已经在内存中创建ok,此时的data和...
2019-03-27 13:45:48
279
原创 29.Vue.js :路由重定向
路由重定向//第一种{ name: 'default', path: '*', redirect: '/index' }//第二种{ name: 'default', path: '*', redirect: { name: 'index' }<!DOCTYPE html><html lang="en">...
2019-03-27 11:38:13
15966
原创 28.Vue.js :监听路由参数变化
<!DOCTYPE html><html lang="en"><head> <title>路由router</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-s...
2019-03-27 11:21:59
749
原创 27.Vue.js :路由
1.路由初体验<!DOCTYPE html><html lang="en"> <head> <title>路由router</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,...
2019-03-27 01:05:54
124
原创 26.Vue.js :创建动态组件
<!DOCTYPE html><html lang="en"><head> <title>动态创建组件</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sca...
2019-03-24 19:28:00
396
原创 25.Vue.js :兄弟组件传值
eventbus //创建一个空的vue实例，作为事件总线 var eventbus = new Vue();emitBrotherMyName() { //通过事件总线发射一个事件名称和需要传递的数据 eventbus.$emit('tellBrotherMyName', this.myName); }mou...
2019-03-24 09:14:24
409
原创 24.Vue.js :子组件传值给父组件
$emit（）子组件传值给父组件需要用到 $emit()方法这个方法可以传递两个参数：一个事件名称，一个是需要传递的数据<!DOCTYPE html><html lang="en"><head> <title>子组件传值给父组件</title> <meta charset="UTF-8">...
2019-03-24 08:50:54
1141
原创 23.Vue.js :父组件传值给子组件
<!DOCTYPE html><html lang="en"><head> <title>父子组件的创建</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sc...
2019-03-23 17:55:02
261
微信小程序两种方式连接wifi，复制密码/一键连接
2023-07-28
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人