12 2020 档案

React中使用路由
摘要：安装 npm i react-router-dom 在app.js或者index.js中使用 class App extends Component { render() { return ( <BrowserRouter> <Switch>{/*只访问一个*/} <Route exact path 阅读全文
posted @ 2020-12-21 17:13 病阳阳 阅读(64) 评论(0) 推荐(0)
NPM搭建React开发环境
摘要：前提是安装了npm和node npm或cnpm命令创建项目： cnpm install -g create-react-app >>（ npm install -g create-react-app ） create-react-app my-app (my-app是你自己的项目名称 自定义) 创建 阅读全文
posted @ 2020-12-18 11:07 病阳阳 阅读(201) 评论(0) 推荐(0)
列表 & key
摘要：渲染多个组件 function NumberList(props) { const numbers = props.numbers; const listItems = numbers.map((number) => //不写key会看到警告 a key should be provided for 阅读全文
posted @ 2020-12-16 15:59 病阳阳 阅读(80) 评论(0) 推荐(0)
条件渲染
摘要：逻辑与运算符 && true && expression ： 返回expression false && expression ：忽略并跳过 三元运算 condition ? true : false 阻止组件渲染 ： 给props传入一个bool值 如果为假render方法返回null 而不进行任 阅读全文
posted @ 2020-12-16 14:49 病阳阳 阅读(67) 评论(0) 推荐(0)
事件处理
摘要：传统HTML： <button onclick = "f1()"> Activate Lasers </button> React： <button onclick = {f1()}> Activate Lasers </button> 绑定this：==> onClick = {this.hand 阅读全文
posted @ 2020-12-15 17:56 病阳阳 阅读(92) 评论(0) 推荐(0)
State & 生命周期
摘要：生命周期： mount（挂载） uunmount（卸载） componentDidMount() 组件渲染到DOM后运行 未完待续... 阅读全文
posted @ 2020-12-15 17:20 病阳阳 阅读(67) 评论(0) 推荐(0)
函数组件与class组件
摘要：定义javascript函数组件： function zjName (props) { return <h1>Hello, {props.name}</h1>; } 使用ES6的class定义组件： class zjName extends React.Component { render() { 阅读全文
posted @ 2020-12-15 15:12 病阳阳 阅读(86) 评论(0) 推荐(0)
Canvas
摘要：doocument.querySelector('canvas') 获取画布 var a = canvas.getContext() 生成画笔 a.moveTo(x,y) 将画笔移动到某一点 a.lineTo(x,y) 从一点到另一点画一条直线吧 a.stroke() 描边 a.closePath( 阅读全文
posted @ 2020-12-14 18:05 病阳阳 阅读(82) 评论(0) 推荐(0)
Css
摘要：css 超出部分滚动并隐藏滚动条 name::-webkit-scrollbar{ display: none; } 阅读全文
posted @ 2020-12-04 14:51 病阳阳 阅读(59) 评论(0) 推荐(0)
Vue-cli中使用VueRouter
摘要：创建路由文件 在项目的`src`目录下，创建`router.js`文件，用来专门管理路由，接下来所有的路由都写在这个文件中。 1.在router.js中导入vue-router import Vue from "vue";import VueRouter from "vue-router";Vue. 阅读全文
posted @ 2020-12-04 14:20 病阳阳 阅读(148) 评论(0) 推荐(0)
Vue自定义指令
摘要：注册全局自定义指令 `v-focus` Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el) { // 聚焦元素 el.focus() }}) 注册局部指令（directives ） directives: { 阅读全文
posted @ 2020-12-03 12:04 病阳阳 阅读(41) 评论(0) 推荐(0)
Vue多组件嵌套
摘要：注册局部组件 1 引入组件import Users from './components/Users.vue'import Header from './components/Header.vue'import Footer from './components/Footer.vue'export 阅读全文
posted @ 2020-12-02 16:44 病阳阳 阅读(144) 评论(0) 推荐(0)
Vue-router 按需加载
摘要：component: () => import() //需要babel插件 否则import报错 const App = () => import('../component/Login.vue'); 阅读全文
posted @ 2020-12-02 16:39 病阳阳 阅读(85) 评论(0) 推荐(0)
Vue项目中常用的生命周期
摘要：Vue项目中常用的生命周期和参数 <script> import Confin from '@/components/sub/Confin'; export default { name: 'Fist', components: {Confin}, //注册组件,比如要插入另外一个写好的VUE文件买 阅读全文
posted @ 2020-12-02 16:38 病阳阳 阅读(129) 评论(0) 推荐(0)
Vue.use()用法：
摘要：1.创建如下图中的文件夹和文件 2.在 Loading.vue 中定义一个组件 <template> <div class="loading-box"> Loading... </div> </template> 3.在 index.js 中 引入 Loading.vue ，并导出 // 引入组件 阅读全文
posted @ 2020-12-01 15:33 病阳阳 阅读(171) 评论(0) 推荐(0)