- 博客(28)
- 收藏
- 关注
RSS订阅原创 vue 动态路由
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
2019-09-27 16:48:20
130
原创 vue 之select
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
2019-09-27 16:44:03
160
原创 vue 之radio
radio 互斥，是通过 v-model 的变量名一致产生的如果没有设置value, 则不会变为boolean如果要设置默认选中，则v-model 变量的值和选中的值保持一致<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name...
2019-09-27 16:29:13
2984
原创 vue input笔录
v-model.lazy：输入时不会更改，光标离开时才更改v-model.trim：去掉前后空格v-model.number：输入的要为数字 <!-- 输入时不会更改，光标离开时才更改 --> <input v-model.lazy='username' />{{username}}</div><div> <...
2019-09-27 16:26:05
170
原创 vue 表单操作之checkbox
input type=‘checkbox’如果input 没有设定 value，则是boolean值如果是多选即同name, 我们需要v-model设置相同的变量名，并且是使用数组如果想默认选中，则把v-model的值设置选中的值即可<!DOCTYPE html><html lang="en"><head> <meta charse...
2019-09-27 16:22:21
533
原创 vue props验证
单个约束props:{ name:String,//单个约束 title:Number,}多个约束props:{ // 多个约束 title:[String,Number]}多个约束&必传props:{ title:{ type:[String,Number], required:true //...
2019-09-27 16:17:00
335
原创 vue props接收笔录
直接接收 props: ['theme', 'userObj']对象接收可以对接收的参数做一些验证 // props: ['title',"name"] props: { // 只能是 Boolean 类型 // title: Boolean // title的数据类型是 String , Boolean, Number 其中之一 title: [...
2019-09-27 16:10:31
313
原创 vue组件基础
定义全局组件Vue.component(‘组件名’, Vue配置信息{})template 定义的是显示的html代码，用 `` 来写字符串，方便编写和阅读Vue.component('my-component',{ template: ` <div> <div>我是一个全局组件</div> ...
2019-09-27 15:58:54
173
原创 vue计算computed与监听watch
computed计算，针对多个数据，影响一个数据，如以下的，price或者num变化时，从而计算总价total computed: { //total根据price、num的变化而变化 total: function () { return this.price * this.num; } }watch 一个数据...
2019-09-27 15:50:04
185
原创 js将一个字符串倒序排列
js中如何实现将一个字符串换倒序排列呢，方法还是挺多的，如sort等等，这里介绍一种比较简单的方法，如下，需要用到的js方法：split()reverse()join()split()将字符串按特定的方式分割重组为一个数组reverse()用于颠倒数组中元素的顺序join()将数组按特定的方式重组为一个字符串举例：将字符串hello倒序var str="hello"var sp...
2019-09-26 22:23:47
2431
原创 vue中class与样式style绑定
这里记录vue中class与style的绑定，参考官方文档：class与style绑定class绑定方法：1、直接使用变量2、对象3、数组4、数组和对象1、直接使用变量<!-- :class='变量' --><div :class="redColor">阿斯蒂芬1</div> 2、对象red和font32是字符串类名，会根据条件isTr...
2019-09-26 21:05:39
217
原创 vue键盘事件、键盘码
在vue中可以用v-on来监听键盘事件参考文档:按键修饰符1、用按键修饰符@keyup.按键修饰符=“事件方法”<input type="text" placeholder="up" @keyup.up="upAction"><input type="text" placeholder="down" @keyup.down="downAction"><in...
2019-09-26 20:14:05
1011
原创 vue事件修饰符.stop、.prevent、.capture、.self、.once
阻止默认事件.prevent阻止a标签默认跳转<a href="http:www.baidu.com" @click.prevent>点我</a>阻止事件冒泡.stop<div class="littlebox" @click.stop='littleActionDefault()'>#####修饰符可以串联<a v-on:click.st...
2019-09-26 19:53:04
291
原创 vue学习笔记--常用命令（一）
{{ }}两对花括号用来显示渲染DOM：{{变量或方法(js代码)}}<div>{{username}}</div>//直接显示变量<div>{{index+1}}</div>//可以进行运算<div>{{testAction()}}</div>//可以调用方法v-text文本显示，有点类型{{}}显示，用这种可...
2019-09-26 17:11:56
160
原创 如何将本地git与github建立连接
将git与github联系起来，注册github查找本地的ssh秘钥，git里面输入ssh-keygen找到路径后进入找到id_rsa.pub复制—回到GitHub–右上角个人信息----setting-----左侧SSH and GPG key----填写SSH keys1、检查git与github是否已连接：1）新建项目文件夹，进入，右键Git Bash Here输入 git ...
2019-09-26 09:57:32
468
原创 git的常用命令
git是一种版本管理器，像一种后悔药。把工作区的新增或者修改的文件放到 “暂存区” stagegit add 文件名git add a.js把暂存区的代码提交git commit -m ‘提交版本文字说明’查看日志git loggitgit reflog查看文件修改的内容git diff 文件名git diff a.js回退到某个历史版本git reset --har...
2019-09-24 09:02:58
292
3
原创 redux学习笔记（二），redux的store数据的操作
该博文的内容紧跟上一篇博文：redux学习笔记（一）地址：redux学习笔记（一）Redux Dev Tools的安装之前已经制作了Redux中state仓库，也可以从仓库中取出数据了。接下来我们需要在控制台调试这些仓库里的数据，需要使用Redux DevTools。安装这个是需要科学上网的，或者谷歌助手或自己找一些插件，所以你需要先找一个好梯子(如果没有安装的话，也不影响redux的使用)...
2019-09-18 20:40:15
937
2
原创 redux学习笔记（一）初步搭建redux环境，获取store里的数据
目标：本编博客内容相对简单，算是redux最基础的讲解，适合初学者按照以下方法，可以初步完成一个列表框的增加、删除功能，通过功能一步步的实现，从而逐步了解redux。ps:初学的朋友，只要按照以下我的代码敲一遍，一定能对redux的流程有个清晰的了解初始化项目安装脚手架工具npm install -g create-react-app创建项目creat-react-app myred...
2019-09-18 19:24:15
419
原创 将NPM切换到淘宝镜像
为了使用npm安装一些第三方包或者插件时速度更快，我们可以将npm切换到淘宝镜像，方法cmd中先输入(可以复制粘贴进去)：npm config set registry https://registry.npm.taobao.org --global按回车，不会有任何提示，只要不报错就行，接着再输入：npm config set disturl https://npm.taobao.o...
2019-09-18 16:45:05
359
原创 React路由重定向Redirect
react路由重定向 <Switch> {/* <Route path="/" exact component={NewsPage} /> */} <Route path="/my" component={MyPage} /> <Route path="/news...
2019-09-17 21:31:18
2946
原创 react脚手架的快速安装
安装create-react-app直接cmd中全局安装npm isntall -g create-react-app检查是否安装好，可以查看一下版本create-react-app --version创建react项目这里的my-app是项目名，可任写create-react-app my-app运行等待项目创建好后，在项目目录下cmd中输入npm start 或 np...
2019-09-17 21:24:42
134
原创 react路由router
安装如果你没有安装脚手架工具，你需要安装一下:npm install -g create-react-app直接使用脚手架工具创建项目在项目跟目录下安装npm install --save react-router-domindex.js中引入import React from 'react';import ReactDOM from 'react-dom';impo...
2019-09-17 21:14:56
238
原创 vscode 快速创建react 模板
问题描述每次创建react文件时都需要书写重复的代码，为保证效率，练就老司机般的金手指，vscode为我们提供了一款强大的插件安装到vs扩展工具中找到simple react snippets使用安装好之后，使用其为我们提供的快捷键，我们就可以体验飞一般的体验，快捷键太多，这里举例两种，其他的还需自己根据实际情况查阅使用新建号react 的js文件后，输入imrc，按tab键则...
2019-09-17 21:02:34
5772
1
原创 React.Fragment
文章参考官方链接：https://zh-hans.reactjs.org/docs/react-api.html#reactfragment作用React.Fragment 组件能够在不额外创建 DOM 元素的情况下，让 render() 方法中返回多个元素。比如：在render()中不需要最外层再包裹一层div，而用Fragment代替，这样不会影响弹性盒的布局<Fragmen...
2019-09-17 20:46:58
162
原创 React 表单text、select、checkbox、radio、ref
import React,{Component} from 'react'class FormDemo01 extends Component { constructor (props) { super (props) // ref 先创建一个引用对象,新版本官方推荐这种ref的使用方法， //在DOM不存在的情况下不会报错 ...
2019-09-17 20:02:44
559
原创 react中安装使用sass
一、引入sass库npm install node-sass sass-loader --save二、使用方法方法1：定义UserInfo.scss文件.UserInfo{ color: red; }jsx引入scss文件import './UserInfo.scss'export default class Login extends React.Component {...
2019-09-17 19:47:18
3031
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人