前端框架
文章平均质量分 54
guoxiaxing
这个作者很懒,什么都没留下…
展开
-
react---jsx语法
1.引入的文件:<script src='react.js'></script><script src='react-dom.js'></script><script src='babel.min.js'></script>2.代码:HTML:<div id='example'></div&g原创 2018-06-12 19:00:19 · 243 阅读 · 0 评论 -
react--烧水demo(利用组件传值实现)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>react--父子组件通信</title> <script src='react.js'></script&原创 2018-06-17 21:47:19 · 205 阅读 · 0 评论 -
react ---选项卡
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>react--父子组件通信</title> <script src='react.js'>&原创 2018-06-18 17:39:48 · 1128 阅读 · 0 评论 -
react--仿百度搜索(原生jsonp)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>react--父子组件通信</title> <script src='react.js'>&原创 2018-06-18 18:38:10 · 657 阅读 · 0 评论 -
react--仿百度搜索(jQuery--jsonp)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>react--父子组件通信</title> <script src='react.js'>&原创 2018-06-18 18:57:02 · 594 阅读 · 0 评论 -
vue--练习(登录demo)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vue</title> <script src='jquery.min.js'></script>原创 2018-06-28 20:38:19 · 1051 阅读 · 0 评论 -
vue封装一个移动阴影的盒子
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>自定义指令</title> <script src='./node_modules/vue/dist/vue.min.js'>&原创 2018-08-06 21:56:04 · 715 阅读 · 0 评论 -
vue-轮播图
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>轮播图</title> <style> #app{ width: 570px; height: 280px;原创 2018-08-06 23:47:10 · 194 阅读 · 0 评论 -
vue动画实现循环切换
注意动画的钩子函数的判断逻辑,注意动画编写时类名的顺序!!<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vue</title> <style> .box{ w原创 2018-08-12 19:06:43 · 2769 阅读 · 0 评论 -
vue动画+animate.css
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vue</title> <script src='vue.min.js'></script> &a原创 2018-08-12 19:44:13 · 435 阅读 · 0 评论 -
vue自定义一个拖拽指令
<!DOCTYPE html><html><head> <title>vue自定义指令</title> <script type="text/javascript" src='vue.js'></script> <style type="text/css"> *{ margin: 0;...原创 2019-07-30 19:24:53 · 249 阅读 · 0 评论 -
react小demo----烧水(函数与jsx结合)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>react--父子组件通信</title> <script src='react.js'></script&原创 2018-06-17 21:05:43 · 296 阅读 · 0 评论 -
react-router 路由嵌套 以及路由无限循环
App.js:import React, { Component } from 'react';import { BrowserRouter as Router, Route, Link } from "react-router-dom";import './App.css';//定义组件的三种方式// 1class Home extends Component{ render(){...原创 2018-06-25 09:14:13 · 3307 阅读 · 0 评论 -
react 组件,props传值,state状态
1.需要引入的文件:<script src='react.js'></script><script src='react-dom.js'></script><script src='babel.min.js'></script>2.代码:html:<div id='example'></div&原创 2018-06-12 19:31:39 · 1362 阅读 · 0 评论 -
react组件---数字时钟
1.需要引入的文件:<script src='react.js'></script><script src='react-dom.js'></script><script src='babel.min.js'></script>2.HTML结构:<div id='example'></div&原创 2018-06-14 10:17:35 · 1325 阅读 · 1 评论 -
react--- 加减数字框组件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>react</title> <script src='react.js'></script> &am原创 2018-06-14 10:41:34 · 4561 阅读 · 1 评论 -
react---拖拽组件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>drag--react</title> <script src='react.js'></script>原创 2018-06-14 16:02:50 · 5977 阅读 · 0 评论 -
react---双向数据绑定的实现
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>react的双向数据绑定</title> <script src='react.js'></script&g原创 2018-06-14 17:08:41 · 1660 阅读 · 0 评论 -
react---组件的生命周期
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src='react.js'></script>原创 2018-06-15 16:39:04 · 147 阅读 · 0 评论 -
react--表单与交互
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>React表单与交互</title> <script src='react.js'></script>原创 2018-06-15 17:33:20 · 809 阅读 · 0 评论 -
react---父组件向子组件传值以及组件复用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>react--父子组件通信</title> <script src='react.js'></script&原创 2018-06-17 20:17:08 · 2939 阅读 · 0 评论 -
react---子组件向父组件传值
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>react--父子组件通信</title> <script src='react.js'></script&原创 2018-06-17 20:35:16 · 1966 阅读 · 0 评论 -
react -- router 使用(1)
create-react-app脚手架所建文件的App.js中进行书写相关代码:APP.js:import React, { Component } from 'react';import { BrowserRouter as Router, Route, Link } from "react-router-dom";import './App.css';//定义组件的三种方式// 1c...原创 2018-06-25 09:12:22 · 236 阅读 · 0 评论 -
使用vue实现一个点击换色的指令
html代码:<div v-random-color style='width:100px;height:100px;background-color:red;position:absolute;'></div>script代码:// vue自定义指令,点击可以让元素随机换色Vue.directive('randomColor', function(){ ...原创 2019-07-30 19:36:34 · 809 阅读 · 0 评论