- 博客(90)
- 收藏
- 关注
RSS订阅原创 Vue基本原理、模板和配置
vue入门 {ignore}前言6天的目标是什么？能够使用vue开发大部分应用的常见功能对vue的核心原理有一定认识需要的知识html+css知识javascript知识部分ES6知识（本节课需要用到字符串模板、速写方法、速写属性）如何学习？理解老师讲的内容课后独立完成课堂上的练习如果还有额外的精力，自行脑补更多的功能，并尝试实现编辑器和插件编辑...
2020-02-25 19:52:59
596
原创 React：axios、proxy(服务器代理)
axios：npm install axios --saveimport React, { Component } from 'react';import './App.css';import axios from "axios"class App extends Component { render() { return ( <div clas...
2020-02-06 19:36:11
789
原创 React-高阶组件
参考博客（高阶组件）：https://blog.csdn.net/sinat_17775997/article/details/100761756高阶函数：如果一个函数 接受一个或多个函数作为参数或者返回一个函数 就可称之为 高阶函数function withGreeting(greeting = () => {}) { return greeting;}高阶组件...
2020-02-04 17:01:07
201
原创 React-redux
redux是专门为react设计的状态管理工具。虽然专门为react设计，但是也可以脱离react独自使用。redux的状态管理思想是：将整个应用的所有状态都集中在一个唯一的store中进行管理，store中的状态只能通过设定的方法进行修改。这样做的好处是可以保证store中的状态都是以可预测的形式进行变化，易维护，易监听。在react项目中使用redux要下载redux和react-...
2020-02-03 19:09:22
135
原创 Vue回顾篇
vue指令：v-bind 简写 : 属性绑定 v-if v-else 条件渲染 v-for 列表渲染 v-on 简写 @ 事件绑定 v-model 双向数据绑定 v-cloak 防止闪烁 v-show 条件渲染 v-html 渲染一段html字符串 v-text 绑定一个普通的文本 v-once ...
2020-02-03 18:59:09
195
原创 React：路由（二级路由)
路由： npm install react-router-dom --saveApp.jsimport React, { Component } from 'react';// import logo from './logo.svg';import './App.css';// 导入路由模板// Route：定义一条路由规则// Switch/Router：在Switch/...
2020-01-16 10:35:50
1149
原创 React：列表渲染、条件渲染、双向绑定
列表渲染、条件渲染、双向绑定：App.js:import React, { Component } from 'react';import './App.css';import MyList from "./Components/MyList/MyList"class App extends Component { constructor(props){ super...
2020-01-14 18:45:38
341
原创 React：class和style绑定、ref、children、步进器
class和style绑定：import React, { Component } from 'react';import "./MyCom.css"class MyCom extends Component { constructor(props){ super(props) this.state = { a: 10,...
2020-01-14 18:41:52
992
原创 React：组件传参、事件、周期函数
App.jsimport React from 'react';import logo from './logo.svg';import './App.css';// 导入组件import MyCom from "./Components/MyCom/MyCom"// 在react框架中，一个组件由js和css两个文件组成。其中在js文件中定义组件（function或class...
2020-01-13 21:21:59
313
原创 React基本使用
基本使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-eq...
2020-01-13 21:17:22
230
原创 React介绍
react是facebook团队开发的一款前端框架。它的优势在于使用了虚拟DOM进行页面逻辑修改，对于DOM的修改和操作都只在虚拟DOM中进行，修改完毕之后再一次性同步到页面真实DOM中。在页面中直接使用react.js 需要下载react.js和react-dom.jsreact.js是react框架的核心代码，其中实现了组件功能。而react-dom是react框架在前端页面中的支...
2020-01-13 21:16:04
1844
原创 百度地图
百度地图资源：http://lbsyun.baidu.com/index.php?title=jspopular3.0<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=d...
2020-01-02 21:52:51
273
原创 获取地理位置
获取地理位置：<script> navigator.geolocation.getCurrentPosition(function (pos) { // 获取位置成功的回调函数 console.log("成功"); console.log(pos); }, function (err) { // 获...
2020-01-02 21:48:35
225
原创 浏览器本地存储
本地存储：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-e...
2020-01-02 21:46:50
149
原创 touch事件
touch事件<template> <div class="scrollview" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend" @touchcancel="touchcancel" > <div class="c...
2019-12-27 20:20:02
165
原创 npm run build
使用npm run build命令进行打包，直接打开index.html是无法看到内容的1.全局安装express-generator生成器。express-generator是express新版本分离出来的命令工具，想要使用express命令必须装这个依赖。npm install express-generator -g //也可使用cnpm比较快2.创建一个expres...
2019-12-27 09:41:04
2105
原创 10. 安装脚手架
安装：安装node需要下载node: nodejs.org查看node版本：node -vnode >8.9如果之前已经安装过旧版本（非3.x）脚手架，需先卸载旧版本：npm uninstall vue-cli -gnpm install -g @vue/cli 安装脚手架，用于生成项目npm install -g @vue/cli-service-global ...
2019-12-27 09:39:07
176
原创 9. ref 引用
vue.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equi...
2019-12-27 09:38:58
185
原创 8. 组件数据传递&属性校验
vue.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equi...
2019-12-27 09:38:41
113
原创 7. 初识组件
vue.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equi...
2019-12-26 21:32:27
106
原创 6. 计算属性和侦听器
vue.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equi...
2019-12-26 21:31:36
311
原创 5. 双向数据绑定
vue.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equi...
2019-12-26 21:30:48
99
原创 4. 列表渲染
vue.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equi...
2019-12-26 21:29:27
99
原创 3. 条件渲染
vue.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equi...
2019-12-26 21:27:00
81
原创 2. v-(bind、on)，绑定class、style
vue.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equi...
2019-12-26 21:26:05
192
原创 1. 创建一个vue实例
vue.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equi...
2019-12-26 21:24:17
595
原创 0. vue介绍
课程介绍1. 带领大家 入门 vue2. 同学们需要掌握 html、css、js什么是vue?Vue (读音 /vjuː/，类似于 view)，是一套用于构建用户界面的渐进式框架。框架和库的区别？库是将代码集合成一个产品，供开发者去使用，开发者去调用库中的方法去实现自己的功能。 例：jquery、zepto框架是为了解决一类问题而开发出来的产品，基于自身的特点向用户...
2019-12-26 21:21:33
131
原创 axios、rem设置、服务器代理
axios、rem设置：main.jsimport Vue from 'vue'import App from './App.vue'import router from './router'import store from './store'import axios from 'axios'// 把axios添加到Vue的原型中，所有的组件（页面）（其实都是一个Vue对...
2019-12-26 19:16:31
192
原创 ajax文件上传（单张上传、多张上传）
server.jsvar express = require("express");var app = express();app.use(express.static("www"));var bodyparser = require("body-parser");app.use(bodyparser.urlencoded({ extended: false}));v...
2019-12-26 19:11:49
199
原创 前端学习网站大全
CSDN -专业IT技术社区：https://www.csdn.net/GitHub：https://github.com/jQuery插件库 - 收集最全最新最好的jQuery插件：http://www.jq22.com/Iconfont - 阿里巴巴矢量图标库：https://www.iconfont.cn/菜鸟教程 - 学的不仅是技术，更是梦想!：https://www.r...
2019-12-25 19:53:59
358
原创 Vuex
详情使用移步官网文档：https://vuex.vuejs.org/zh/./src/store.jsimport Vue from 'vue'import Vuex from 'vuex'// 在vue单文件项目开发中使用vuex必须先注册这个插件Vue.use(Vuex)// Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组...
2019-12-25 19:40:05
129
原创 Vux配置
详细使用方法翻阅官网：https://vux.li/配置vux： 在网上搜了会，发现几乎都是vue-cli旧版的配置方法，有一些已经不能用了，在这里整理下正确的配置方法 安装各插件 1、在项目里面安装vuxnpm install vux --save 2、安装vux-loader（必须安装）npm install vux-loader --save-dev 3、安装less...
2019-12-25 19:34:56
467
原创 Vue：二级路由，导航守卫（导航钩子）
二级路由，导航守卫（导航钩子）：import Vue from 'vue'import VueRouter from 'vue-router'import Home from '../views/Home.vue'Vue.use(VueRouter)const routes = [{ path: '/', name: 'home', component:...
2019-12-24 19:50:22
534
原创 Vue：动态组件、事件的发射、自定义指令、过滤器
动态组件：<body> <div id="app"> <button @click="btnClick('com1')">首页</button> <button @click="btnClick('com2')">动态</button> <!-- 在模板中使用...
2019-12-24 19:45:48
754
1
原创 基于fs.readFile封装一个支持promise的myReadFile方法
fs模块的异步文件操作不返回promise，例如fs.readFile,返回值为空。请你基于fs.readFile自己封装一个支持promise的myReadFile方法var fs = require("fs");function myReadFile(){ return new Promise(function(resolve,reject){ fs.read...
2019-12-23 21:27:53
1181
原创 原型和原型链、闭包、reduce方法
原型链（图）：原型：不使用原型 function People(name, age) { this.name = name; this.age = age; this.speak = function () { console.log(this.name + ": 在说话"); } ...
2019-12-23 21:24:56
187
原创 同步与异步
同步与异步： <script> /* * 浏览器端的运行环境是单线程 * Js引擎，渲染引擎 * 读取代码时按照从上往下的顺序执行 * * 任务的执行分两种：同步任务和异步任务 * * 同步任务： 任务的排列顺序与执行顺序...
2019-12-23 10:13:52
138
原创 Vue小知识点、Ajax
设置非父子通信：bus.js文件（和main.js同级）import Vue from 'vue';export default new Vue();需要在哪使用就在那导入：import bus from "./bus";main.js文件 ：// main.js所导入的资源，任何vue文件都可以直接使用// 导入css样式 样式覆盖import './as...
2019-12-18 21:40:36
138
原创 Vue项目简单介绍
项目文件结构展示：pages>HomePage.vue<template> <div> <!-- 菜鸟教程布局举例 --> <first-content></first-content> <!--<second-content></second-content>...
2019-12-16 21:36:25
1080
原创 创建一个Vue项目步骤
保证一个前提：当前的运行环境中，必须先全局安装webpacknpm install webpack -gnpm install webpack-cli -gvue-cli 是依赖于webpack全局安装模块之后，任意一个文件位置都可以使用这个命令1.全局安装vue-cli模块 和 vue/cli-init模块 cli：commond-line interface 命令行...
2019-12-16 21:25:21
223
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人