- 博客(22)
- 收藏
- 关注
RSS订阅原创 vue&vuex求和案例
首先win+r，cmd，npm create ABC创建一个项目，在components中创建两个vue文件，一个用来写普通的vue求和案例，另一个用vuex来写vue求和App.vue<template> <div> <vueCount></vueCount> <hr /> <Student></Student> </div></template><scri
2022-01-10 14:20:10
1803
原创 vue- GitHub搜索案例
第一步先创建脚手架，npm create github（名字自取，影响不大）然后将APP组件清空，在components文件夹中创建search和list组件。APP.vue在APP中引入并使用<template> <div class="container"> <search /> <list /> </div></template><script> // 引入组件 import se
2022-01-04 14:47:55
488
原创 react简易todolist案例
首先先创建一个react的脚手架，npx create-react-app my-app(这边的名字自己取)，然后我在src下创建了一个todo文件夹，在文件夹里创建了一个HeaderTodo.js文件，先将src下的index.js清空然后在index.js中导入文件，添加一个页面渲染，否则页面不会有任何内容import React from 'react';import ReactDOM from 'react-dom';import App from './todo/HeaderTodo
2021-12-15 20:32:50
1069
原创 react脚手架留言板（2）简易版
简易版，在index.js一个文件中写出来，虽然是简易版的，但是麻雀虽小五脏俱全，该有的功能都在，只是样式稍微不那么好看。import React, { Component } from 'react';import ReactDOM from 'react-dom';class App extends Component { // 状态 state = { comments: [ // { // id: .
2021-12-15 19:50:43
988
原创 浏览器本地存储localstorage
本地存储一般体现在搜索记录中，用于方便用户下次搜索在浏览器的控制台中的Application中查看数据的增删 ，首先先准备四个按钮来控制<button type="button" onclick="saveDate()">点击存储数据</button> <button type="button" onclick="readDate()">点击查看数据</button> <button type="button" onclick="d
2021-12-15 19:22:40
2815
原创 react脚手架留言板（1）
首先打开cmd输入npx create-react-app my-app创建一个react库在src中找到index.js将里面内容清空然后创建四个js文件Comment，CommentBox,CommentList,CommentForm再在src下创建一个css文件夹，里面创建一个my.css首先先在index中引入组件import React from 'react';import ReactDOM from 'react-dom';import CommentBox fro
2021-12-14 20:47:15
465
原创 vue脚手架完成todolist
第一步，首先你的电脑里得安装过node.js，然后win+r，输入cmd，（或者找个空的文件夹在上方搜索栏全选输入cmd），输入命令npm create todolist（最后一个单词是项目名字，随便取什么都可以）第二步，将里面src文件夹下的App.vue里的所有代码清空，components中的helloworld删除，然后再components中新建四个Vue文件MyHeader,MyFooter,list,item，如下图：首先我们先来写APP.vue，再script标签中先引入三个组.
2021-12-14 20:23:05
578
原创 Vue组件嵌套
这个就类似于无限套娃，一层一层的，写个实例看的更清楚一些首先不要忘了引入vue.js// 创建student组件 const student = Vue.extend({ template:` <div> <h2>{{studentName}}</h2> <h2>{{age}}</h2> </div>`, data(){ return{ student
2021-12-04 11:47:12
1137
原创 Vue非单文件组件的基本使用
1.定义组件的定义:实现应用中局部功能代码和资源的集合非单文件组件:一个文件中包含n个组件单文件组件:一个文件中只包含1个组件2.使用创建组件的基本格式创建组件的基本格式:使用Vue.extend创建组件实例，并在父级实例中注册该组件组件的基本格式:与vm实例类似，但是不能有el，并且data只能是一个函数接下来我们来看实例，当然了第一步老样子引入外部的vue.js第一步先创建组件const school = Vue.extend({ template:` .
2021-12-04 09:50:14
314
原创 Vue点击按钮进行排序
首先先引入vue,js，不然一切操作均无效先用一个外部div包裹整体，然后写出基本样式，input框可以搜索显示名字，写三个按钮分别绑定点击事件，然后再用一个v-for遍历数组，显示在页面上<div id="root"> <h2>人员列表</h2> <input type="text" name="" id="" value="" placeholder="搜索" v-model="keyword" /> <button @c
2021-12-03 15:03:43
3580
原创 页面渲染：v-if,v-else-if,v-else,v-show,v-for
因为时Vue实例来写，所以要引入vue.jsv-show是用来修改style的display值的<div id="app"><h2 v-show="ww">今天的天气是炎热的</h2></div>const vm = new Vue({ el: '#app', data: { ww: false } }
2021-12-03 14:50:24
800
原创 JS数字时钟特效
我们用HTML + CSS +JS 来写一个时钟特效，成品效果图如下：首先我们先把HTML写出来<div id="box"> <h2>The Time Is Now</h2> <div id="clock"> <div> <span id="hours">00</span><span>Hours</span> </div> &l.
2021-11-30 16:08:46
1095
原创 3D表白相册
我们来用HTML加上css，来制作3d的表白相册，展现属于程序员的浪漫首先我们先来写HTML的内容<!-- 第一步准备一个容器包裹 --> <div id="box"> <!-- 第二步，先构建内部正方体 --> <span id="box-front"><img src="../img/20210710210216_e5c2b.png"></span> <span id="box-after"&g
2021-11-30 10:17:24
499
原创 JS随机点名器
用HTML+css+js写的随机点名器，也可以用来做抽奖什么的，看自己喜好就行首先我们先写一个div和一个按钮，div用来显示随机点名的内容，按钮控制开关。<div id="box"></div> <input type="button" name="" id="btn" value="开始" />然后给他们设置一个基础的css* { margin: 0; padding: 0; } #box { width:
2021-11-29 09:58:21
1944
原创 JS二级菜单
我们使用HTML+css+js来写出二级菜单的简易效果首先来看HTML的代码，这个没什么好说的<div class="box"> <div class="topbox"> <ul> <li class="bgc">春雨</li> <li>夏风</li> <li>秋雾</li> <li>冬雪</li> &l
2021-11-26 17:25:30
2174
原创 JS选项卡
我们做一个简易的选项卡，但是适用所有的选项卡（自改），首先我们来先把页面基本样式写好<ul> <li class="active">周一</li> <li>周三</li> <li>周五</li> </ul> <div class="box1 block">医务科</div> <div class="box2">警卫科</div>
2021-11-25 20:24:44
2523
原创 js工厂模式，构造函数模式，原型模式
1.工厂模式function cPerson(name, color, age) { var car = new Object(); car.name = name; car.color = color; car.age = age; car.show = function() { console.log(this.name + this.age + this.color); } return car; } var p1 =
2021-11-25 16:03:01
504
原创 HTML+css+js，写出轮播图
首先在body中先把基础的格式写好，里面的图片位置自己更改<div id="box1"> <ul id="imglist"> <li><img src="../img/001.jpeg" alt=""></li> <li><img src="../img/002.jpeg" alt=""></li> <li><img src="../img/1.jpg" al
2021-11-25 11:31:30
428
原创 js鼠标托拽移动div
首先先写好基础的样式HTML和css样式<div id="div"> 来一段文字<br>拖着看看 </div> #div { width: 150px; height: 100px; background-color: skyblue; text-align: center; line-height: 50px; position: absolute; top: 3px; }然后是在j
2021-11-23 10:12:02
681
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人