- 博客(295)
- 收藏
- 关注
RSS订阅原创 (精华2020年5月24日更新) react基础篇 pwa的配置
首先npm i workbox-webpack-plugin在到webpack配置文件中添加插件const WorkboxWebpackPlugin = require('workbox-webpack-plugin')plugins: [ new MiniCssExtractPlugin({ filename: '[name].css' }), new WorkboxWebpackPlugin.GenerateSW({
2020-05-24 08:41:36
17743
原创 (精华2020年5月24日更新) react基础篇 组件的生命周期
import React from 'react';import logo from './logo.svg';import './App.css';class App extends React.Component{ constructor(props){ super(props) this.state = { msg:'第一次的消息' } } componentWillMount(){ console.log(this.state.msg);
2020-05-24 00:41:25
15137
原创 (精华2020年5月23日更新) react基础篇 脚手架版todolist的实现
app.jsimport React from 'react'import TodoMain from './components/TodoMain';import TodoHeader from './components/TodoHeader';import TodoFooter from './components/TodoFooter';class App extends React.Component{ constructor(props){ super(props)
2020-05-23 00:19:34
15009
原创 (精华2020年5月23日更新) react基础篇 html版 todolist的实现
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>todoList</title></head><body> <div id=
2020-05-22 23:04:01
15638
原创 (精华2020年5月22日更新) react基础篇 父组件传值到子组件prop的使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>prop</title></head><body> <div id="app"&
2020-05-22 22:50:16
14861
原创 (精华2020年5月22日更新) react基础篇 this的指向问题
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>this</title></head><body> <div id="app
2020-05-22 22:41:07
15438
原创 (精华2020年5月22日更新) react基础篇 组件的使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>简单组件</title></head><body> <div id="app
2020-05-22 22:40:15
14917
原创 (精华2020年5月22日更新) react基础篇 html中使用react
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>hello</title></head><body> <div id="ap
2020-05-22 22:18:56
15684
原创 (精华2020年5月21日更新) vue实战篇 实时通信websocket的封装结合vue的使用
import webSocket from '../webSocket.js';export default { isIosAndroid() { var u = navigator.userAgent; var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //android终端 isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
2020-05-21 23:00:37
15934
原创 (精华2020年5月21日更新) vue实战篇 缓存页面的强制更新
页面缓存后，页面是不会变化的。要使缓存页面变化可以利用路由的钩子函数beforeRouteLeave。<template> <div </div></template><script>export default { methods: { }, beforeRouteLeave(to, from, next) { // 导航离开该组件的对应路由时调用 // 可以访问组件实例 `this` console
2020-05-21 22:21:56
16051
1
原创 (精华2020年5月17日更新) vue实战篇 手写vue底层源码
MYvue.js 主要作用监听属性变化class MYvue { constructor(options) { this.$options = options; this.$data = options.data; //数据劫持 this.observe(this.$data); this.$el = options.el; //包含Watcher创建 new Complie(optio
2020-05-17 10:32:17
15314
原创 (精华2020年5月16日更新) vue实战篇 mixin插件开发
插件开发以vue-router为例import Vue from 'vue'// import VueRouter from 'vue-router'import VueRouter from '../MYRouter/index.js'Vue.use(VueRouter)// 执行install方法const routes = [ { path:'/', redirect:'/goods' }, { path: '/goods', name: 'g
2020-05-16 22:12:47
15738
原创 (精华2020年5月16日更新) vue实战篇 vuex的多store仓库的使用
const state = { country: '中国'}const getters = { getCountry(state) { return state.country }}const mutations = { updateCountry(state, payload) { state.country = payload.country; }}//用来管理mutationsconst actions = { updateCountry({
2020-05-14 23:15:02
18578
原创 (精华2020年5月14日更新) vue实战篇 vuex的使用和vuex辅助函数的使用
vuex的基本使用store.jsimport Vue from 'vue';import Vuex from 'vuex';Vue.use(Vuex);//定义属性var state = { count:6, country:'中国'};//定义gettersvar getters = { count(state){ return state.count }, isEvenOrOdd(state){ return
2020-05-14 22:56:36
15303
原创 (精华2020年5月14日更新) vue实战篇 element-ui日历实现日程安排和区间查询
首先在template加如下代码<el-calendar v-model="日期"> <template slot="dateCell" slot-scope="{date, data}"> <div class="date-cell" :class="data.isSelected ? 'is-selected' : ''"> <div class="calendar-day">
2020-05-14 08:50:57
18652
原创 (精华2020年5月14日更新) vue实战篇 vue-router动态路由的实现权限控制
router.jsimport Vue from "vue";import VueRouter from "vue-router";Vue.use(VueRouter);import home from '../pages/home.vue';import news from '../pages/news.vue';var allRoutes = [{ path:'/login', name:'login', meta:{ title:'登陆'
2020-05-12 23:55:58
15434
原创 (精华2020年5月12日更新) vue实战篇 axio.js封装和环境配置
首先安装npm i cross-env package.jsom"scripts": { "test":"cross-env scene=test webpack --config webpack.config.js", "dev": "cross-env scene=dev webpack-dev-server --config webpack.config.js", "build": "cross-env scene=prod webpack --config webpa
2020-05-12 23:04:48
14938
原创 (精华2020年5月17日更新) vue实战篇 vue.config.js配置详解
新版vue脚手架中webpack已经封装好看不见，需要vue.config.js代替配置module.exports = { publicPath:'/wuhan', //部署应用包时的基本 URL。用法和 webpack 本身的 output.publicPath 一致 outputDir:'dist3', //打包路径地址,Default: 'dist' ,代替 output.path assetsDir:'assets1', //放置生成的静态资源 (js、css、img、
2020-05-10 18:06:29
15483
原创 (精华2020年5月12日更新) vue教程篇 webpack配置详解
package.json的启动"scripts": { "build":"rimraf dist && webpack --config webpack.config.js --mode production", "dev": "webpack-dev-server --config webpack.config.js" }基本共用配置文件webpack.common.jsvar webpack = require('webpack');var path = r
2020-05-10 10:24:21
16012
原创 (精华2020年5月8日更新) vue教程篇 手写脚手架vue-cli
首先先上脚手架目录webpack-demowebpack-demo|-index.html|- src---- |-main.js 入口文件------|-App.vue vue文件|-package.json 工程文件|-webpack.config.js webpack配置文件|-.babelrc Babel配置文件安装如下包npm install vue -Snpm install webpack -Dnpm install webpack-cli -D
2020-05-08 23:44:40
15550
原创 (精华2020年5月8日更新) vue教程篇 vue-router路由的权限控制
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>权限控制- filters</title> <style> .active { font-size: 20px; color: #ff7300; text-decoration: none; } .main-menu a { display
2020-05-08 22:38:38
14678
原创 (精华2020年5月8日更新) vue教程篇 vue-router路由的使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>路由基本用法</title> <style> /* .router-link-active{ font-size:20px; color:#ff7300;...
2020-05-06 23:54:36
14774
原创 (精华2020年5月6日更新) vue教程篇 slot插槽（内容分发）的使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>slot内容分发</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></scri...
2020-05-06 23:51:42
14844
原创 (精华2020年5月6日更新) vue教程篇 非父子组件相互传参（发布订阅）
第三个vue实例实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>非父子组件间的通信</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&...
2020-05-06 23:48:53
15522
原创 (精华2020年5月20日更新) vue教程篇 父子组件相互传参
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>父子组件传参组件<...
2020-05-06 23:33:38
15660
原创 (精华2020年5月6日更新) vue教程篇 模板template的使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>引用模板</t...
2020-05-06 23:21:50
15224
原创 (精华2020年5月6日更新) vue教程篇 组件component的使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>定义组件的方式<...
2020-05-06 23:18:33
15916
原创 (精华2020年5月6日更新) vue教程篇 动画transition的使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>动画</titl...
2020-05-05 09:14:10
14859
原创 (精华2020年5月5日更新) vue教程篇 简单小结(2)-元素拖动
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>练习：自定义指令实例（元素拖动）</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">&...
2020-05-05 08:40:50
14774
原创 (精华2020年5月5日更新) vue教程篇 自定义指令directive的使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>自定义指令</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script&...
2020-05-05 08:33:23
15156
1
原创 (精华2020年5月5日更新) vue教程篇 数据监听watch的使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>监视数据的变化：$wa...
2020-05-05 08:30:11
15699
原创 (精华2020年5月5日更新) vue教程篇 vue实例属性的使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>vue实例的属性和方...
2020-05-04 18:15:44
14642
原创 (精华2020年5月4日更新) vue教程篇 计算属性computed的使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>计算属性</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script&...
2020-05-04 17:57:27
14536
原创 (精华2020年5月4日更新) vue教程篇 vue组件生命周期
<!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-UA-Com...
2020-05-04 17:56:55
15495
原创 (精华2020年5月4日更新) vue教程篇 axio的使用
地址为本地，需要请求数据科研自己搭建后端api，或者用mock<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>发送AJAX请求</title> <script src="https://cdn.jsde...
2020-05-04 12:55:35
15831
原创 (精华2020年5月4日更新) vue教程篇 filter过滤器的使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>自定义过滤器</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script...
2020-05-04 12:16:55
14826
原创 (精华2020年5月4日更新) vue教程篇 v-text,v-html,v-once,v-pre,v-cloak的使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>模板</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>...
2020-05-04 12:08:45
15645
原创 (精华2020年5月4日更新) vue教程篇 class和style的使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>class和styl...
2020-05-04 08:30:03
15580
原创 (精华2020年5月4日更新) vue教程篇 v-bind的使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>属性绑定和属性的简写</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></sc...
2020-05-04 07:48:53
14502
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人