front
~
wangfy_
这个作者很懒,什么都没留下…
展开
-
button
html: <div class="Submit"> <button onclick="f_Input_onclick()">Save   Task</button> <div style="clear:both;"></div> <...原创 2019-04-09 09:26:16 · 128 阅读 · 0 评论 -
清除浮动
转自:http://www.divcss5.com/rumen/r424.shtml仅做个人笔记DIVCSS5案例说明:这里设置一个css宽度(css width)为500px;盒子,css边框(css border)为红色,css背景(css background)为黑色、css padding为10px盒子,里面包裹着2个小盒子,一个css 浮动靠右(float:right)、一个cs...转载 2019-04-09 09:05:45 · 286 阅读 · 0 评论 -
swiper vue(nuxt)
文档或参考:https://github.com/surmon-china/vue-awesome-swiper/blob/master/examples/nuxt-ssr-example/nuxt-ssr-example.vuehttps://www.swiper.com.cn/plus/search.php?kwtype=0&q=slidesPerViewhttps://w...原创 2019-07-22 11:32:10 · 562 阅读 · 0 评论 -
转载:Vue添加中间层--service层
转自:https://blog.csdn.net/weixin_43452622/article/details/86606196service层service层主要是新建一个js文件,用来写用到的方法。import axios from "axios";//使用假数据const isRealData = require("../../static/serverconfig")....转载 2019-04-28 12:03:10 · 1477 阅读 · 0 评论 -
vuex+axios——将get到的数据存到store中
Home.vue:router_submit () { this.$store.dispatch('getResult') this.$router.push({ path: '/Questions' })}store.js:import Vue from 'vue'import Vuex from 'vuex'import axios from 'axios...原创 2019-04-26 16:22:10 · 4080 阅读 · 0 评论 -
父子组件demo
<html><head> <title>vue</title> <link rel="stylesheet" href="./index.css"></head><body> <div id="app"> <!-- 答题卡子组件 --> ...原创 2019-04-16 14:00:37 · 189 阅读 · 0 评论 -
子组件和父组件之间的传值
https://www.cnblogs.com/daiwenru/p/6694530.htmlhttps://blog.csdn.net/u011175079/article/details/79161029总结一下父组件向子组件传值:子组件在props中创建一个属性,用以接收父组件传过来的值 父组件中注册子组件 在子组件标签中添加子组件props中创建的属性 把需要传给...转载 2019-04-16 10:53:07 · 277 阅读 · 0 评论 -
data: function () { return {}} ——你不应该在一个子组件内部改变 prop
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行。这样会防止从子组件意外改变父级组件的状态,从而导致你的应用的数据流向难以理解。额外的,每次父级组件发生更新时,子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了,Vue 会在浏览器的控制台中发出警告。...转载 2019-04-16 10:13:53 · 2157 阅读 · 0 评论 -
组件化答题页面
初衷: 后台实际化——结合后台操作,面向实际需求 组件实际化——使在网页的任意位置只要加入一个标签就可以引入到页面实现该块功能(跨页面引入时,现在看来比较绕的传值操作显得有用起来),即页面组件化整个页面为父组件。----------------------------------------------答题卡子组件(封装题号功能):【 index的传入(当前题...原创 2019-04-15 20:39:13 · 818 阅读 · 0 评论 -
vue基础
数据与方法除了数据属性,Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀$,以便与用户定义的属性区分开来。例如:var data = { a: 1 }var vm = new Vue({ el: '#example', data: data})vm.$data === data // => truevm.$el === document.getElem...原创 2019-04-15 08:41:16 · 194 阅读 · 0 评论 -
简单介绍 Vue 核心最基本的功能
指令你看到的v-bind特性被称为指令。指令带有前缀v-,以表示它们是 Vue 提供的特殊特性。可能你已经猜到了,它们会在渲染的 DOM 上应用特殊的响应式行为。在这里,该指令的意思是:“将这个元素节点的title特性和 Vue 实例的message属性保持一致”。HTML:<div id="app-2"> <span v-bind:title="m...原创 2019-04-14 22:26:24 · 1137 阅读 · 0 评论 -
conifg[process.env.PRO_ENV]
https://blog.csdn.net/GreekMrzzJ/article/details/83270543node中有全局变量process表示当前node进程,process(进程)其实就是存在nodejs中的一个全局变量,process.env包含着关于系统环境的信息。但是process.env中并不存在NODE_ENV这个东西。其实NODE_ENV只是一个用户自定义的变量。w...原创 2019-06-13 11:29:54 · 443 阅读 · 0 评论 -
项目里的package.json、package-lock.json、yarn.lock文件
package.json和package-lock.json的区别https://blog.csdn.net/c2311156c/article/details/80320046package.json:主要用来定义项目中需要依赖的包package-lock.json:在 `npm install`时候生成一份文件,用以记录当前状态下实际安装的各个npm package的具体来源和版本号...转载 2019-04-24 14:38:43 · 4583 阅读 · 0 评论 -
npm全局安装和局部文件安装区别
转自:https://www.jianshu.com/p/e839326ce30d上图是从网上找的webpack 安装的步骤,我们看到除了要全局安装之外,还需要本地安装,那么这两者有什么区别呢?本文以Windows平台上做测试,以webpack为示例做教程。全局安装安装位置全局安装方式是键入命令:npm install webpack -g 或 npm inst...转载 2019-04-03 15:41:24 · 12369 阅读 · 1 评论 -
package.json文件字段详解
转自:http://javascript.ruanyifeng.com/nodejs/packagejson.html,仅做个人备份,以备自己后期查看概述每个项目的根目录下面,一般都有一个package.json文件,定义了这个项目所需要的各种模块,以及项目的配置信息(比如名称、版本、许可证等元数据)。npm install命令根据这个配置文件,自动下载所需的模块,也就是配置项目所需...转载 2019-07-12 15:16:02 · 2096 阅读 · 0 评论 -
div横向排列
转自:https://blog.csdn.net/zmhawk/article/details/73293366#t2仅做个人笔记所有途径最佳途径(其他略)【第一行】给父元素设置display: flex;【第二行】通过justify-content属性调整子元素的水平对齐方式:1. flex-start: 默认2.flex-end:...转载 2019-04-15 20:52:59 · 3991 阅读 · 0 评论 -
bootstrap响应式设计——媒体查询实例
转自:https://blog.csdn.net/u010372981/article/details/47406023仅做个人笔记css实例:body { background-color: white;}@media screen and (max-width: 960px){ body { background-color: red;}}@media scree...转载 2019-04-11 09:42:06 · 689 阅读 · 0 评论 -
bootstrap3——列重置之清除浮动
转自:https://blog.csdn.net/qq_36748278/article/details/60468580仅做个人笔记在小型屏幕上,我们希望看到这种情况:在超小型屏幕下我们希望看到这样的情况:可是由于所有的col-样式都是左浮动的,可能出现这种情况:在超小型屏幕(xs)的情况下,div3应该在下一行,但由于div1的内容比较长,所以div3直接浮动到了d...转载 2019-04-10 23:54:09 · 661 阅读 · 0 评论 -
一些前端的开发环境配置
开发工具nvm :node 版本管理器简介:node 版本管理器安装地址:https://github.com/creationix/nvm#installation-and-update里找到nvm-windows:https://github.com/coreybutler/nvm-windows里找到:Download Now,点击下载 nvm-setup.zip...原创 2019-04-03 19:50:34 · 2585 阅读 · 0 评论 -
react 进入页面以后自动 focus 到某个输入框
调用input.focus()的 DOM APIReact.js 当中提供了ref属性来帮助我们获取已经挂载的元素的 DOM 节点class AutoFocusInput extends Component { componentDidMount () { this.input.focus() } render () { return ( ...转载 2019-04-01 10:27:00 · 3410 阅读 · 0 评论 -
进一步把渲染单独一个用户的结构抽离出来作为一个列表组件
把负责展示用户数据的 JSX 结构抽离成一个组件User,并且通过props把user数据作为组件的配置参数传进去;这样改写Index就非常清晰了,看一眼就知道负责渲染users列表,而用的组件是User。const users = [ { username: 'Jerry', age: 21, gender: 'male' }, { username: 'T...原创 2019-03-29 18:37:33 · 201 阅读 · 0 评论 -
组件的组合、嵌套和组件树
现在让组件多起来。我们来构建额外的组件来构建页面,假设页面是由Header、Main、Footer几个部分组成,由一个Index把它们组合起来。import React, { Component } from 'react';import ReactDOM from 'react-dom';class Title extends Component { render (...原创 2019-03-29 13:37:47 · 852 阅读 · 0 评论 -
react
React.js 将帮助我们将界面分成了各个独立的小块,每一个块就是组件,这些组件之间可以组合、嵌套,就成了我们的页面。一个组件的显示形态和行为有可能是由某些数据决定的。而数据是可能发生改变的,这时候组件的显示形态就会发生相应的改变。而 React.js 也提供了一种非常高效的方式帮助我们做到了数据和组件显示形态之间的同步。React.js 不是一个框架,它只是一个库。它只提供 UI (v...原创 2019-03-29 11:15:32 · 171 阅读 · 0 评论 -
用 React.js 构建未读消息组件
题目:使用 React.js 构建一个未读消息组件Notification。通过getNotificationsCount()来获取未读消息的数量 ,如果有未读消息N条,而且N > 0,那么Notification组件渲染显示:a<span>有(N)条未读消息</span>否则显示:<span>没有未读消息<...原创 2019-03-29 11:03:38 · 982 阅读 · 0 评论 -
vue-axios前端与beego后端,请求数据的交互方式
1. url批量参数形式,后端无需做截取前端: data() { return { tableData: [], total: 0, pageSize: 10, limit: 10, offset: 0, formInline: { title: "", content: ""...原创 2019-07-07 14:32:56 · 1370 阅读 · 0 评论 -
nuxt 中引入 vcharts (echarts的vue版)
0. 引入:npm i v-charts -S1. plugins下建vcharts.js文件 内容:import VCharts from 'v-charts'import Vue from 'vue'Vue.use(VCharts)2.nuxt.config.js 加入: plugins: [ '@/plugins/vcharts' ],3...原创 2019-07-02 11:30:09 · 1931 阅读 · 3 评论 -
一点nuxt
1. layouts和pages及components(1)整个后台页面分为两个(种)布局:所有的页面(pages目录下的)都默认使用default布局,login和register页面使用login布局(需要在pages/login.vue里单独设置layout: "login",)(2)2. 路由鉴权设置login页面例外:3. 页面请求数据流...原创 2019-06-27 10:45:06 · 185 阅读 · 0 评论 -
antd:formItemLayout 暂记
const formItemLayout = { labelCol: { span: 4 }, // 左边留白大小 wrapperCol: { span: 17 }, // 内容区大小(两者和不能!>24)};import React, { PureComponent } from 'react';import { connect } from 'dva';i...原创 2019-06-20 11:35:54 · 5983 阅读 · 2 评论 -
antd的请求数据流
一些参考:https://blog.csdn.net/ws995339251/article/details/88089418https://blog.csdn.net/zl1zl2zl3/article/details/81357146antd+bus的请求数据流:(自上而下)antd的请求数据流里的参数传递:三个文件:equipment/in...原创 2019-06-12 16:51:41 · 1093 阅读 · 0 评论 -
ts/es6/js相关
ts是js的超集,是面向对象的js,适合大型应用程序,ts编译成js运行js可以运行在浏览器或是nodejs环境中ts基础:https://www.runoob.com/typescript/ts-basic-syntax.html...原创 2019-08-03 15:38:07 · 767 阅读 · 0 评论 -
js事件
转自:http://www.runoob.com/js/js-events.html目录常见的HTML事件全部事件鼠标事件键盘事件框架/对象(Frame/Object)事件表单事件剪贴板事件打印事件拖动事件多媒体(Media)事件动画事件过渡事件其他事件常见的HTML事件<button onclick="getEle...转载 2019-04-08 13:53:04 · 126 阅读 · 0 评论 -
JS中的DOM与BOM
转自:https://www.cnblogs.com/vmax-tam/p/4104304.html目录一)BOM(borwserObjectModel)1)window:当前的窗口2)地址栏对象3)屏幕对象二)Dom编程(DocumentObjectModel)A)几种得到标签节点的方法:B)创建、删除、插入节点C)利用节点实现标签间的互...转载 2019-04-08 12:59:41 · 570 阅读 · 0 评论 -
js引用类型
转自:https://www.cnblogs.com/ljuyi/p/6100071.htmljs中的数据类型有以下几种:Number Boolean undefined Object Function String Null基本类型:Number Boolean String undefined null引用类型:Object Functi...转载 2019-04-08 11:06:50 · 164 阅读 · 0 评论 -
js数据类型
转自:https://www.cnblogs.com/xuniannian/p/7452086.html目录typeof 操作符基本数据类型1.Number类型2.String类型3.Boolean类型4.Undefined类型5.Null类型6.Object类型三大引用类型1.Object类型2.Array类型3 Function类型...转载 2019-04-08 10:45:55 · 100 阅读 · 0 评论 -
JS校验实例
NO.1 —— return true 式<script> function check(){ var a = document.thisFormFromWangfy.a.value; var whiceCalculator = document.thisFormFromWangfy.whiceCalculator.value; var b = d...原创 2018-04-15 10:00:24 · 291 阅读 · 0 评论