前端
文章平均质量分 65
S S Q
这个作者很懒,什么都没留下…
展开
-
vue脚手架创建时出错
使用vue脚手架直接创建vue项目时出现了错误解决方法:先清楚cnpm的缓存cnpm cache clean --force再找到一个文件C:\Users\shangsiqi.vuerc修改文件中的配置把高亮的部分设成true(原先为false){"useTaobaoRegistry": true,“latestVersion”: “4.2.3”,“lastChecked”...原创 2020-03-19 17:55:00 · 1629 阅读 · 0 评论 -
element.insertAdjacentHTML
js:向某元素中添加一个元素可以使用element.insertAdjacentHTML(position,str)position :beforebegin, afterbegin, beforeend, afterend第二个参数是字符串避免了先 document.createElement(’…’) 再ele.innerHTML=…直接在元素内部或外部添加元素...原创 2020-02-22 00:01:49 · 231 阅读 · 0 评论 -
logo书写与搜索引擎的搭配
logo是作为背景图片展现在页面上<div class="logo"> <h1> <a href="index.html"> 品质优购 </a> </h1></div>这么显示是为了搜索引擎可以识别这个标题主要是h1的作用但是图片显示时是不允许出现a中的文字的css文件中.logo a{ dis...原创 2020-01-31 21:19:28 · 269 阅读 · 0 评论 -
create-react-app与antd&antd-mobile结合使用
ant-design官网当用create-react-app搭建好一个项目之后就要使用antd&antd-design来描绘页面引入的方式分为:1.全部引入2.按需引入全部引入:不需要安装任何额外的插件,不用配置任何额外的文件(1)引入所需组件(2)引入css(3)引入js样式按需引入:一. 安装第三方包cnpm i react-app-rewired custo...原创 2019-12-10 17:46:16 · 568 阅读 · 0 评论 -
create-react-app 项目目录 报错
Installing packages. This might take a couple of minutes.Installing react, react-dom, and react-scripts...'npm' 不是内部或外部命令,也不是可运行的程序或批处理文件。Aborting installation. npm install --save --save-exact...原创 2019-12-10 11:23:00 · 287 阅读 · 0 评论 -
在react中当父组件给孙组件传值时(使用context)
正常情况下父组件想孙组件传值:父组件把值传给子组件,子组件把值传给孙组件其实还是有另一种方法在父组件中设置方法getChildContext一.在父组件中定义方法getChildContext(){ return { color:this.state.color }}二.在父组件中设置数据类型导包import ReactTypes from 'prop-types'...原创 2019-12-09 10:34:30 · 706 阅读 · 0 评论 -
面向对象的程序设计-对象的属性
es5以及之前版本的ECMAScript是没有类(对某些抽象的类型的属性和方法的封装)的概念的,不像java一些语言中,要先声明一个类再去new出这个对象.在es5中使用构造函数(原则上也是一种函数)实现了对属性和方法的封装,更方便去定义相似的实实例的对象的创建方式javascript中想要创建一个对象还挺容易的var person=new Object()person.name='ja...原创 2019-12-09 10:13:23 · 1268 阅读 · 0 评论 -
面向对象程序设计-对象接口创建模式
上篇文章已经提到过创建对象的方式:1. 通过Object来创建对象2. 通过字面量来创建对象3. 通过一些模式来实现接口,更方便的创建对象说到模式要存在很多模式:1. 工厂模式2. 构造函数模式3. 原型模式4. 组合使用构造函数模式和原型模式5. 动态原型模式6. 寄生构造函数模式7. 稳妥构造函数模式当然这里主要讲解的是组合使用构造函数模式和原型模式一般都会使用这种模...原创 2019-12-09 10:03:00 · 157 阅读 · 0 评论 -
markdown-navbar
首先安装cnpm i markdown-navbar引入markdown-navbar和cssimport MarkNav from 'markdown-navbar'import 'markdown-navbar/dist/navbar.css'//使用MarkNav标签const content = '## Heading One...\n\n## Heading Two.....原创 2019-12-07 18:42:23 · 969 阅读 · 0 评论 -
react-markdown
在react的框架中如何在页面显示用markdown语法写的文字首先安装cnpm i react-markdown -S之后在要使用的页面中引入react-markdownimport ReactMarkDown from 'react-markdown'//在jsx语法中引入<ReactMarkDown source={显示的数据} //escapeHtml={false}...原创 2019-12-07 18:05:19 · 566 阅读 · 0 评论 -
react中props的属性值类型的设置与默认值的设置
当父组件给子组件传值时通常以键值对的形式在引入子件的标签中为子组件传值,而在子组件中使用该值时要使用this.props.xxx获取传来的值,但是有时父组件不传值的时候,我们还是希望会有一个默认值于是就要在子组件的类中设置一个静态的属性,对象中为子组件设置默认值static defaultProps={ xxx:yyy}当子组件接收父组件传来的值时,想确保数据的类型时就要用到prop...原创 2019-12-04 14:41:55 · 1484 阅读 · 0 评论 -
antd & antd-mobile的使用
链接: antd官网首先安装antdcnpm i antd主要是全部引入与按需导入全局引入import { DatePicker } from 'antd'手动引入样式import 'antd/dist/antd.css';按需导入首先配置文件// .babelrc 或者 webpack.config.js中的 babel-loader option{ "plugi...原创 2019-12-03 13:03:10 · 1259 阅读 · 0 评论 -
react中的路由
首先cnpm i react-router-dom在需要路由模块的文件中按需导入路由模块import {HashRouter,Router,Link} from 'react-router-dom'HashRouter:表示路由的跟容器,所有路由相关,都包裹在它里面,一个网站出现一次就好Route:表示一个路由规则,Route上两个重要属性,path,componentLin...原创 2019-12-03 13:03:03 · 65 阅读 · 0 评论 -
react中为组件的jsx添加样式
一.在jsx中以 style={对象形式,映射样式}行内样式import React from 'react'class Person extends React.Component{ constructor(props){ super(props) this.state={ } } render(){ return <div style={{fontS...原创 2019-12-01 22:56:15 · 1624 阅读 · 0 评论 -
react中自定义组件(构造函数方式)
当react中需要一个组件时一般采用构造函数的方式定义自定义组件function Hello(){ //return null //当组件中不定义任何内容时要返回null,不可以什么都不返回 return <div>哈哈哈</div>}使用自定义组件<Hello></Hello>当需要给自定义组件内部传值时var obj={...原创 2019-11-29 20:51:21 · 948 阅读 · 0 评论 -
webpack中配置文件扩展名(extensions)和别名(alias)
当在入口文件中引入一些文件时,默认js,json不用写扩展名,但是当引入例如jsx文件时默认是不可以不写后缀名的,如果不想写后缀名可以在wepack.config.js文件中进行配置resolve:{ extensions:['.js','.jsx','.json'], //表示在import 文件时文件后缀名可以不写 alias:{ '@':path.join(__dirname,'....原创 2019-11-29 20:36:31 · 4235 阅读 · 0 评论 -
react引包 && jsx语法的转换使用webpack打包工具
使用react框架要先安装react的一些包npm i react -Snpm i react-dom -s在使用webpack打包工具的前提下在index.js文件中引入两个包import React from 'react' import ReactDom from 'react-dom'//当需要创建虚拟dom对象(以dom元素的结构创建js对象)时const mydi...原创 2019-11-29 20:28:03 · 370 阅读 · 0 评论 -
Function.prototype.bind方法的实现原理
Function.prototype.bind = Function.prototype.bind || function(context) { var me = this; var args = Array.prototype.slice.call(arguments, 1); return function() { ...原创 2019-11-29 10:24:04 · 280 阅读 · 0 评论 -
mongodb在mongoose的操作下的多表查询
当一个表中的结构中有一个属性是另一个表的_id其实质上是一个表的外键指向另一个表的主键并且会涉及到多表查询相关信息首先要在这个外键的表(集合)设置schema时为这个属性定义为如下:category: { type: mongoose.Schema.Types.ObjectId, ref: 'Category(主表的model)' }在查询时为查到另...原创 2019-11-26 18:33:49 · 294 阅读 · 0 评论 -
使用watch监听 # 后路由的改变
一般监听路由时是无法给路由添加事件的,但是vm实例中有个非常好的属性watch可以监听data,props中的数据和路由的改变watch与data和methods同级watch:{ '$route.path':function(newValue,oldValue){ if(newValue=='xxx'){ } }}...原创 2019-11-16 18:54:30 · 357 阅读 · 0 评论 -
js中数组转化成字符串
var arr=['apple','orange','banana']arr.join() //得到的结果 'apple,orange,banana'arr.join('-') //得到的结果 'apple-orange-banana'原创 2019-11-16 13:04:48 · 108 阅读 · 0 评论 -
vue中父子组件传值出现undefined
当父子组件需要用到对方的值的时候是不能访问对方data中的数据或methods的那么当父向子传值的时候就在父组件中引入的子组件的标签上绑定属性再把值传递过去在子组件中要先把属性放入props数组中,才能使用而子向父传值就要父组件提供方法给子组件,(在父组件中找到子组件引入的标签,标签上@xxx=“父组件方法名”)在子组件中调用父组件的方法并把值传给他(子组件中直接调用this.$em...原创 2019-11-15 11:11:38 · 8499 阅读 · 0 评论 -
获取页面中dom对象的位置domObject.getBoundingClientRect()
首先要获取页面中元素的dom对象var domPosition=domObject.getBoundingClientRect()domPosition.left;domPosition.right;domPosition.top;domPosition.bottom;原创 2019-11-14 18:21:18 · 205 阅读 · 0 评论 -
vue的缩略图vue-preview插件的使用
安装插件npm i vue-preview -S在入口文件中配置import VuePreview from 'vue-preview'Vue.use(VuePreview)在页面中,也就是组件中的template中插入标签<template> <vue-preview :slides="slide1" @close="handleClose"><...原创 2019-11-13 15:28:41 · 580 阅读 · 0 评论 -
移除webpack打包文件中的严格模式
首先安装包npm i babael-plugin-transform-remove-strict-mode包安装成功后在babel.config.js文件中添加下面配置{ "plugins":["transform-remove-strict-mode"]}原创 2019-11-13 14:27:23 · 394 阅读 · 0 评论 -
css3 flex布局中元素左右分布
display:flex;justify-content:space-between原创 2019-11-11 12:34:29 · 5903 阅读 · 0 评论 -
mint-ui的使用
mint ui不同于bootstrap它是只能与vue结合使用的移动端的组件//首先安装npm i mint-ui -S//在入口文件中引入import 'mint-ui/lib/style.css'//引入样式/ 引入全部组件import Vue from 'vue';import Mint from 'mint-ui';Vue.use(Mint);// 按需引入部分组件...原创 2019-11-10 19:35:24 · 154 阅读 · 0 评论 -
webpack结合使用vue-router
首先要先安装vue-routernpm i vue-router -D在入口文件中引入vue-routerimport Vue from 'vue'import vueRouter from 'vue-router'//手动安装vueRouterVue.use(vueRouter)var router=new VueRouter({ routes:[ {path:'',c...原创 2019-11-10 13:56:15 · 80 阅读 · 0 评论 -
export default和export
vue文件中可以在标签中定义组建的模板,在标签中定义模板的数据和方法,组件中的data要用方法来定义,return数据在node 中暴露成员一般使用module.exports覆盖掉之前的modlue对象exports.xxx=yyy添加module对象中的属性和值在es6中向外暴露成员可以使用export default和export而使用import来接受暴漏来的成员,或者引入文件,...原创 2019-11-10 12:18:34 · 71 阅读 · 0 评论 -
webpack中使用vue组件
当在wepack的入口文件中引入的是全的vue包时可以使用components来进行组件的渲染的但是如果引入的是不全的runtime-only包的时候就要结合vue文件和render进行页面的渲染的1.vue文件中结构<template></template><script>/script><style></style>...原创 2019-11-10 11:50:02 · 269 阅读 · 0 评论 -
webpack中使用vue
首先要安装vuenpm i vue -S在入口文件中导入vue包,书写如下代码import Vue from 'vue'var vm = new Vue({ el: '#app', data: {}, methods: {},})如果此时index.html中id=app的元素中想使用...原创 2019-11-10 11:10:11 · 46 阅读 · 0 评论 -
webpack配置postCss
不同浏览器对样式的兼容性不同,针对不同的浏览器要手动为css添加前缀保证他在各个浏览器的兼容性,但是可以通过打包工具中配置postCss自动为css样式添加前缀1.首先npm install postcss-loader autoprefixer -D2.在项目根目录中创建一个配置文件postcss.config.js,并进行配置let autoprefixer=require('au...原创 2019-11-08 10:38:34 · 1037 阅读 · 0 评论 -
webpack打包处理js高级语法babel
安装babel转换器相关包npm i babel-loader @babel/core @babel/runtime -D安装babel语法插件相关的包npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D创建babel.config.js配置文...原创 2019-11-08 09:51:48 · 521 阅读 · 5 评论 -
webpack处理url地址
首先安装第三方模块npm install url-loader file-loader -D配置文件中配置module.exports={ module:{ rules:[ {test:/\.(jpg|png|gif|bmp|jpeg|ttf|eot|svg|woff|woff2)$/,use:'url-loader?limit=图片字节值&name=[hash:8]-...原创 2019-11-08 09:37:58 · 649 阅读 · 0 评论 -
loader有关css文件的配置webpack
挡在入口文件中import一个css文件,打包成功并引入页面后会报错,因为此时无法处理css文件,要想处理此文件,就要安装第三方插件style-loader,css-loadernpm install style-loader css-loader -D module: { rules: [{ test: /\.css$/, u...原创 2019-11-08 09:07:07 · 145 阅读 · 0 评论 -
open 等参数配置的第二种方法(比较麻烦)
let webpack=require('webpack')//导入webpackmodule.exports={ devServer:{ open:true, port:3000, contentbase:"src", hot:true }, plugins:[ new webpack.HotMOduleReplacementPlugin()//new一个热更新的模块对象 ...原创 2019-11-07 22:49:01 · 81 阅读 · 0 评论 -
webpack4的webpack-dev-server与html-webpack-plugin的使用
前面提到webpack一些基本的使用初始化文件根目录(建包,npm init),本地安装webpack,webpack-cli这时再有个入口文件,然后在控制台上输入命令(webpack)就可以打包了,这是在没有配置文件的环境下,当然有了配置文件就更好了,可以配置出口文件,入口文件,模式(production/development)但是呢这样每次修改了入口文件或者引入的文件都要在控制台...原创 2019-11-07 21:28:28 · 182 阅读 · 1 评论 -
webpack 4的使用(安装与简单的配置文件设置)
webpack是前端项目构建工具当请求服务器得到页面资源时由于页面中会有许多的href,src…等请求,就会增加静态资源的请求次数,使加载变慢webpack会把这些静态资源打包到一个文件(入口文件)中(css,js,图片,字体图标…),并且将es6的代码转化成es5的建立项目根目录文件夹在文件夹下初始化npm init -y先安装npm install webpack webpa...原创 2019-11-07 19:45:40 · 108 阅读 · 0 评论 -
webpack的使用(及各种报错)
webpack是前端项目构建的工具,适用于整个项目使用webpack之前先安装webpack(全局)npm install webpack -g此时可以全局使用webpack命令webpack 要打包的文件 -o 打包到的文件要是出现下面这个错误One CLI for webpack must be installed. These are recommended choices...原创 2019-11-06 17:54:09 · 194 阅读 · 0 评论 -
ajax跨域
当在前端页面使用ajax请求到的网址为不同协议或不同ip不同端口号时,就是跨域请求浏览器为了安全问题会阻止跨域请求,xhr(xmlhttprequest)请求跨域时会被限制要解决跨域问题1.可以接触浏览器的限制2.也可以使用jsonp请求,动态生成script(script中的src可实现跨域)(img的src也可以跨域)接收一个js文件,也就是收说后台要传来js语句这样ajax就...原创 2019-11-03 23:49:21 · 123 阅读 · 0 评论