- 博客(61)
- 资源 (6)
- 收藏
- 关注
RSS订阅原创 让sublime认识wxml和wcss
让sublime认识wxml和wcss打开view选项卡，选择语法，这里的√表示当前文件的语法，并且在首项（Open all with 。。。。）中可以指定一个语法，指定后，sublime就能识别这种文件了...
2020-03-25 00:48:50
248
原创 微信小程序
微信小程序微信小程序账号与工具在线文档：https://mp.weixin.qq.com/debug/wxadoc/dev/小程序开发者账号注册微信公众平台：https://mp.weixin.qq.com/小程序开发者账号注册：https://mp.weixin.qq.com/wxopen/waregister?action=step1微信开发者工具微信开发者工具：https:...
2020-03-22 01:53:03
134
原创 flex弹性伸缩盒模式
flex弹性伸缩盒模式消除浮动的影响在浮动元素的父元素:overflow:hidden不使用浮动，在本来需要浮动的元素的父元素使用display:flex，实现伸缩布局，默认水平排列flex配置 /* flex方向 */flex-direction: column ;/* 伸缩盒换行 */flex-wrap: wrap;...
2020-03-21 16:20:38
154
原创 React组件生命周期
React组件生命周期生命周期的概念：每个组件的实例，从创建、到运行、直到销毁，在这个过程中，会触发一系列事件，这些事件叫做组件的生命周期函数react组件生命周期分为三部分组件创建阶段：一个组件一次componentWillMount：render：componentDidMount：组件运行阶段：按需根据props属性或state状态的改变，有选择性的执行0到多次compone...
2020-03-20 19:22:25
95
原创 React修改state
React修改stateimport React from 'react'export default class BindEvent extends React.Component { constructor(){ super() this.state = { msg: 'haha' } } render(){ return <div> Bind...
2020-03-20 17:46:57
146
原创 React事件
React事件import React from 'react'export default class BindEvent extends React.Component { constructor(){ super() this.state = {} } render(){ return <div> BindEvent <hr /> ...
2020-03-20 16:01:50
71
原创 React使用css样式表及其模块化
React使用css样式表出现问题直接import导入组件样式表，默认是在全局上，整个项目都会生效解决方案在webpack.config.js中通过modules参数启用模块化模块化只对类选择器和Id选择器有效{ test: /\.css$/, use: 'style-loader','css-loader?modules'}...
2020-03-20 11:32:51
382
原创 React-在组件中使用style行内样式
React-在组件中使用style行内样式import React, {Component} from 'react'import CmtItem from '@/components/CmtItem'export default class CmtList extends Component{ constructor(){ super() this.state = { C...
2020-03-19 22:32:43
1696
原创 React评论列表
React评论列表index.jsimport React from 'react'import ReactDOM from 'react-dom'import CmtList from '@/components/CmtList'ReactDOM.render(<div> <CmtList></CmtList></div>, do...
2020-03-19 19:54:07
203
原创 webpack设置根目录
webpack设置根目录index.jsimport Hello from '@/components/Hello.jsx'webpack.config.jsresolve:{ extensions: ['.js','.jsx','.json'],//后缀省略设置 alias: { '@' : path.join(__dirname, './src') } }...
2020-03-19 11:00:30
493
原创 React中创建组件
React中创建组件第一种方式使用构造函数来创建组件，如果要接收外界传递的数据，需要在构造函数的参数列表中使用props来接收；必须要向外return一个合法的JSX创建的虚拟DOM父组件向子组件传递参数使用{...obj}属性扩散传递数据(ES6展开运算符)将组件封装到单独的文件中组件的名称首字母一定要大写function Hello() { return <div&g...
2020-03-19 10:56:06
79
原创 React中的key
React中的key在React中，需要把key 添加到被foreach或map或for循环直接控制的元素import React from 'react'import ReactDOM from 'react-dom'//这两个导入的时候必须用这样的接收名称let arrStr = ['jack','lisa','anni']const nameArr = []arrStr.for...
2020-03-18 20:19:16
93
原创 虚拟DOM--React.js
React.js虚拟DOM（Virtual Document Object Model）DOM：用JS对象来表示页面上的元素，并提供操作DOM对象的API虚拟DOM：用JS对象来模拟页面上的DOM和DOM嵌套实现虚拟DOM的作用：为了实现页面中，DOM元素的高效更新即用JS手动模拟两棵新旧DOM树的页面嵌套关系然后进行对比实现按需更新Diff算法tree diff：新旧两棵DOM树，...
2020-03-18 20:04:17
128
原创 webpack、Node与Chrome之间的关系
webpack、Node与Chrome之间的关系因为webpack基于Node构建，webpack支持Node所有API和语法而Node基于Chrome浏览器V8引擎，所以Chrome浏览器支持的API和语法都适合Node...
2020-03-18 17:44:14
228
原创 三大主流框架
三大主流框架Angular.js:出来比较早的前端框架，学习路线比较陡，NG1学起来比较麻烦，NG2~NG5开始，进行了一系列的改革，也提供了组件化开发的概念，从NG2开始，也支持使用TS（TypeScript）进行编程Vue.js：最火的一门前端框架，中国开发。React.js: 最流行的一门框架，因为它的设计很优秀...
2020-03-18 09:30:54
157
原创 MUI
MUI官网提供代码段需要到github手动下载解压拷贝（把里面的dist拷贝到自建lib中改名mui）在入口main.js中import './lib/mui/css/mui.min.css'然后直接找到要用的代码复制使用...
2020-03-18 00:46:55
162
原创 Mint-UI
Mint-UI基于Vue.js的移动端组件库文档观测台安装Vue1.0运行npm install mint-ui@1 -SVue2.0运行npm install mint-ui -S引用全部引用import Vue from 'vue'import Mint from 'mint-ui'Vue.use(Mint)按需引用import { Cell, Checklist...
2020-03-18 00:37:18
100
原创 export default 和 export
export default 和 export作用：都是暴露成员export defaultexport default 向外暴露的成员，可以使用任意变量来接收在一个模块中，export default 只允许向外暴露一次在一个模块中，可以同时使用export default 和 export向外暴露成员export使用export向外暴露的成员，只能使用{}的形式来接收，即按...
2020-03-17 22:47:02
53
原创 webpack和Vue
webpack导入Vue在webpack.config.js中const path = require('path')module.exports = { entry: path.join(__dirname, './src/main.js'), output:{ path: path.join(__dirname, './dist'), filename: 'bundle.js...
2020-03-17 21:35:33
69
原创 Vue-render渲染组件
Vue-render渲染组件<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, inital-scale=1.0"> <meta http-equiv...
2020-03-17 20:31:01
108
原创 面向对象编程与webpack中的babel
ES6中的面向对象class Person { static info = { name: 'jack',age: 20 }}这些高级的ES6语法webpack无法处理，webpack只能处理一些ES6语法并不是全部Babel这个时候我们需要Babel将高级语法转换为低级语法安装执行：cnpm i babel-core babel-loader babel-plugin-tran...
2020-03-17 19:22:35
132
原创 webpack-loader
loaderwebpack默认只能打包处理JS类型文件，无法处理其他的非JS类型文件，如果要处理非JS类型文件则需要安装合适的loader加载器，如想要打包css文件配置针对 css安装执行cnpm i style-loader css-loader -D操作main.js引入import './css/index.css'webpack.config.json文件配置mod...
2020-03-17 12:24:34
74
原创 webpack
webpack加载网页的各种资源速度太慢需要把资源合并打包，webpack是一个解决这种问题的项目构建工具。安装1.运行npm i webpack -g全局安装webpack ，这样就能在全局使用webpack的命令或者2.在项目根目录中运行npm i webpack --save-dev安装到项目依赖中基本使用通常我们会在src源代码目录下新建main.js作为所有引用js文件的入口...
2020-03-17 01:12:35
93
原创 nrm
nrm提供一些最常用的npm包镜像地址，能够让我们快速切换安装包的服务器地址运行npm i nrm -g全局安装nrm包使用nrm ls查看当前所有可用的镜像源地址以及当前所使用的镜像源地址使用nrm use npm 或nrm use taobao 切换不同的镜像源地址注意：nrm只是单纯的提供几个常用的下载包的URL地址，并能够方便在它们之间切换，但是，每次装包的时候，使用的装包工具...
2020-03-16 10:34:34
118
原创 Vue监听数据变化watch、computed
Vue监听数据变化watch()watch()可以监视data中指定数据的变化<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, inital-scale=1....
2020-03-16 09:35:14
441
原创 Vue-router路由
Vue-router路由后端路由对于普通的网站，所有的超链接都是URL地址，所有的URL地址都会赢服务器上对应的资源前端路由对于单页面应用程序来说，主要通过URL中的hash（#号）来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容，所以，单页面程序中的页面跳转主要用hash实现安装到资源传送门下载然后直接在Vue.js后引用<scri...
2020-03-15 01:38:36
234
原创 Vue跑马灯字符串
Vue跑马灯字符串<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, inital-scale=1.0"> <meta http-equiv="X-U...
2020-03-14 15:34:39
99
原创 Vue组件-评论区
Vue组件-评论区<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, inital-scale=1.0"> <meta http-equiv="X-...
2020-03-14 01:05:26
1205
原创 Vue组件
Vue组件定义:组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来的某些时刻，需要什么样的功能，就可以调用对应的组件组件化和模块化的不同模块化是从代码逻辑的角度划分的，方便代码分层管理，保证每个功能模块的职能单一组件化是从UI界面的角度进行划分的，前端的组件化，方便UI组建的重用全局组件定义的三种方式使用Vue.extend 配合V...
2020-03-13 00:40:05
141
原创 Vue动画
Vue动画没有C3的炫酷，只有简单的动画使用过渡类名实现动画需要过渡样式，还有transition标签包裹需要执行动画的元素<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=devic...
2020-03-12 22:13:08
88
原创 购物车小红球
购物车小红球<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, inital-scale=1.0"> <meta http-equiv="X-UA-C...
2020-03-12 21:31:40
66
原创 Vue.$http全局配置
全局配置数据接口的根域名Vue.http.options.root = 'http://vue.studyit.io/'getAllList() { this.$http.get('api/getprodlist').then(result =>{ var result = result.body if (result.status === 0) { ...
2020-03-12 10:52:55
1135
原创 JSONP原理
JSONP原理由于浏览器的安全性限制，不允许Ajax访问协议不同、域名不同、端口号不同的数据接口，浏览器认为这样的访问是不安全的，为了解决这个问题，可以通过动态创建script标签的形式，把script标签的src属性，指向数据接口的地址，因为script标签不存在跨域限制，这种数据获取方式，称为JSONP（根据原理，可得JSONP只支持Get请求）客户端<!DOCTYPE html&...
2020-03-12 00:41:06
127
原创 Vue-resource实现Ajax请求
Vue-resource实现Ajax请求依赖于Vue挂载要注意先后顺序<script src="vue.js"></script><script src="vue-resource.js"></script>增幅为Vue实例加载了this.$http属性，通过它能调用一系列方法this.$http.jsonpGetgetInfo()...
2020-03-12 00:09:52
104
原创 Vue生命周期钩子函数
Vue生命周期钩子函数Vue实例的生命周期从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期别称：生命周期钩子=生命周期函数=生命周期事件主要的生命周期函数：创建期间的生命周期函数beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好data和methods属性created：实例已经在内存中创建OK，此时data和methods...
2020-03-11 23:39:58
74
原创 Vue自定义指令和钩子函数
Vue自定义指令应用场景需要在页面刷新或者进入时就立即在指定位置获取鼠标焦点自定义指令和钩子函数定义时不需要v-但调用时需要和行为相关的操作一般放在inserted中执行<label>请输入搜索的关键字:<input type="text" class="form-control" v-model="keywords" v-focus></label>...
2020-03-11 23:23:55
275
原创 String.prototype.padStart()
String.prototype.padStart()ES6字符串新方法:填充字符串String.prototype.padStart(maxLength,fillString=’’)String.prototype.padEnd(maxLength,fillString=’’)应用场景时钟字符串分钟数前加0...
2020-03-11 19:53:05
1732
原创 Vue-devtools安装
Vue-devtools安装vue-devtools是一款基于chrome浏览器的插件，用于vue应用的调试，这款vue调试神器可以极大地提高我们的调试效率。帮助我们快速的调试开发vue应用。...
2020-03-11 02:12:20
91
原创 账本管理Vue
账本管理Vue<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, inital-scale=1.0"> <meta http-equiv="X-UA...
2020-03-10 20:12:45
280
原创 Vue.js
Vue.jsVue.js是什么？是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。安装下载传送门兼容性Vue 不支持 IE8 及以下版本，因为 Vue 使用了 I...
2020-03-10 01:15:46
130
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人