- 博客(39)
- 收藏
- 关注
RSS订阅原创 vue上拉加载数据并且先显示前面几条
结果:先获取接口的数据，使用slice截取前面几条数据并显示，代码如下:`<template> <!-- 电影列表 --> <div class="movies_list"> <div class="information"> <ul v-infinite-scroll="loadMore" infinite-scroll-disabled="isMoreLoading"
2021-12-04 10:48:52
696
1
原创 vue2 lib-flexible和px2rem-loader适配移动端方法
第一步、npm i lib-flexible --save第二步、在main.js中引入第三步、index.html中找到meta标签替换在这里插入图片描述第四步、安装px2rem-loadernpm install px2rem-loader第五步、在build文件中找到util.js，将px2rem-loader添加到cssLoaders中第六步、在generateLoaders方法中添加px2remLoader最后.项目重新启动npm run devpx自动转换为rem..
2021-11-11 01:28:04
488
原创 移动端HTML5的api使用
1.语音识别<footer> <i class="iconfont icon-yuyinhecheng" id="speech"></i> <ul> <li> <i class="iconfont icon-wenhao"></i> </li> <li> <span>语音查找</span> </li> <li> .
2021-08-26 11:02:12
459
原创 微信小程序封装网络请求和登录授权功能的实现
1.在utils下创建config.js文件const BaseUrl = "http://234.nat.ipyingshe.com"module.exports = { BaseUrl}2.创建network.jsconst Config = require(’./config.js’)function netWork(obj) {if (wx.getStorageSync(“TOKEN”) != " " && wx.getStorageSync(“TOKEN”
2021-08-05 20:45:22
280
原创 uni-app多端开发封装网络请求uni.request()并实现同步和做本地模拟数据
之前可以通过uni.request来获取接口的数据，但是无法完成数据在页面渲染的目的。是因为网络请求是异步操作，要想达成目的，需要进行同步化操作。为了能在各个页面都方便地使用这个请求，再进行一个封装并挂载到全局的操作1.建立.js文件，路径：/data/api.js2.建立server文件server.js作为本地模拟数据server.js 端口自定义3000 ,也就是本地的http://localhost:3000const http = require("http");const da
2021-08-01 23:03:24
1449
原创 elementui 的增删改查和分页的实现
html 代码 <div class="goods"> <el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item> <el-breadcrumb-item>商品管理</el-breadcrumb-item> </el
2021-07-13 20:15:17
397
原创 element-ui 的路由跳转设置
Element-Ui侧边栏实现路由跳转，代码如下//要实现侧边栏路由跳转，在中需要–:default-active=“this.$route.path”。用来绑定路由表在中需要–router------或者router=true在中的index不可缺少，为必须值，不过此处的index仅为索引，用来让当前元素下的子菜单收缩或释放。每一个submenu的index值只要不一样便可在中，index的值不可缺少，就是用这个来进行路由跳转，index的值为跳转的路径<el-menu :de
2021-07-08 15:18:51
2037
原创 原生js做购物车全选选中商品显示价格和小计的计算
html代码<div class="contain"> <table class="table table-bordered"> <thead > <tr> <th style="width:100px;"><label><input type="checkbox"id="selectAll" /> 全选</label></th>
2021-06-07 15:01:44
2289
原创 vue-cli2本地使用axios请求json数据教程
1.找到在build下的 webpack.dev.conf.js2.在里面编辑需要配置一下内容const express = require('express')const app = express()const appData = require('../db.json') // 加载本地json文件const seller = appData.movies_list // 获取对应本地数据const apiRoutes = express.Router()app.use('/api'
2021-04-23 18:53:10
245
原创 git 的使用 怎样将本地项目上传到GitHub
1.登陆后，进入Github首页，点击New repository新建一个项目2.填写相应信息后点击create repository即可3.创建成功以后，复制这个地址以后经常用到。4.下一步就是打开你的本地git,切换到你的项目下面project是我的项目名5.把github上面的仓库克隆到本地6.这个时候在你的项目下面多出来一个文件夹,这个文件夹就是你的github上面的仓库名,然后将除了多出来的文件夹之外，其他都复制在新创建的文件夹里面7.接着进入文件夹8.9.接下来依次输入
2021-04-23 18:41:12
95
原创 vue制作五星好评效果
1.先在父组件创建star组件,自定义分数,传值过去子组件2.子组件接收父组件传过来的score3. 定义一下类名的常量通过计算属性computed这里是css样式效果如下:
2021-04-19 23:44:09
518
原创 移动端框架Mint-ui的infinite scroll
HTML代码:<div class="now-content"> <div class="list"> <ul v-infinite-scroll="loadMore" infinite-scroll-disabled="isMoreLoading" infinite-scroll-distance="10" infinite-scroll-immediate-check="true" > <router-link
2021-04-05 00:03:13
116
原创 Vue中父传子,子传父,非父子通信的中央总线区别
1.父传子: pros传值法父组件代码:子组件代码:2.子传父emit触发传值法父组件代码：子组件代码:3.非父子传值遇到的效果就是:当我从一个页面跳到另外一个页面的时候，可以让非父子关系的组件实现你想要的效果a.创建中间事件总线公共实例文件bus.js,作为公共数据中央总线import Vue from 'vue'var bus = new Vue();export default bus;...
2021-04-02 09:49:12
152
原创 中国城市A-z的json所有数据
代码区:{ "city":[ { "title":"A", "lists":["阿坝","阿拉善","阿里","安康","安庆","鞍山","安顺","安阳","澳门"] }, { "title":"B", "lists":["北京","白银","保定","宝鸡","保山","包头","巴中","北海","蚌埠","本溪","毕节","滨州","百色","亳州"] }, { "title":"C",
2021-03-30 15:17:47
303
原创 在vue中使用axios跨域配置
在使用vue axios发送请求时产生跨域问题，报错如下:vueaxios Access to XMLHttpRequest at 'localhost:3000/users' from origin 'http://localhost:8080' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extens
2021-03-09 05:20:45
1331
原创 生命周期几个阶段的讲解说明
下面分别说明vue生命周期的八个阶段:1.创建前(beforeCreate)对应的钩子函数是beforeCreate。此阶段是实例初始化之后，此时的事件监察和事件机制还没有完成，不能获取DOM节点2.创建后(created)对应的钩子函数是created。这个阶段vue实例已经创建完成了，但是还不能获取dom节点3.载入前（beforeMount）对应的钩子函数是beforemount，在这一阶段，我们虽然依然得不到具体的DOM元素，但vue挂载的根节点已经创建，下面vue对DOM的操作将围绕这
2021-02-28 11:40:52
393
原创 vue 生命周期钩子
生命周期:beforecreate : 一般使用场景是在加 loading事件 的时候created ：处于loading结束后，还做一些初始化，实现函数自执行（data数据已经初始化，但是DOM结构渲染完成，组件没有加载）beforemount：处于组件创建完成，但未开始执行操作mounted ：处于发起后端请求，获取数据，配合路由钩子执行操作（DOM渲染完成，组件挂载完成 ）beforeupdate、updated：处于数据更新的前后beforeDestroy：当前组件还在的时候，想删除组件
2021-02-27 22:01:32
83
原创 在指定多少行添加省略号方法
.content{overflow : hidden;//超出隐藏text-overflow: ellipsis;//使用省略号来代替display: -webkit-box;-webkit-line-clamp: 1;//显示1行就在后面添加省略号-webkit-box-orient: vertical;从上到下垂直排列子元素word-break: break-all; /* 追加这一行代码 */可以在单词内换行}...
2021-02-24 11:25:34
80
原创 在vue-cli中如何通过axios获取本地自己创建的模拟数据
1.创建一个test.json文件，名称自己写,位置我是放在vue的index首页的{ "datalist":[ { "name": "xiaoming", "age": 20, "city": "深圳", "number": 1 }, { "name": "xiaohong", "age": 22, "city": "东莞", "number": 2 }, { "name": "siz", "age": 21, "c
2021-02-06 18:01:38
161
原创 移动端postcss-px-to-viewport的安装
1.我们先将以下命令安装到项目中npm i postcss-px-to-viewport -D2.在项目根目录下添加.postcssrc.js文件3.添加如下配置：module.exports = { plugins: { autoprefixer: {}, // 用来给不同的浏览器自动添加相应前缀，如-webkit-，-moz-等等 "postcss-px-to-viewport": { unitToConvert: "px", // 要转化的单位 vi
2021-01-17 17:56:17
854
1
原创 github的使用流程
1 github注册流程1 进入github官网:https://github.com/2 注册一个自己的github账号3 右上角选择New repository4 进入create a new repository选择你的仓库名填入: Repository name 必填:例如testDescription描述: 对仓库的描述 可选选择public选择Initialize this repository with a README 创建README文档5 创建仓库 Cr
2020-12-10 17:04:11
1490
原创 表单登录正则验证test()
代码如下: var regPhone = document.getElementById(“regPhone”);//手机号码var regPassword = document.getElementById(“regPassword”);//密码var textPhone = document.getElementById(“textPhone”);//手机号码文本提示框var textPassword = document.g
2020-10-25 13:31:16
787
原创 运用js获取短信验证码倒计时
html代码部分 <form action=" " method="post"> <input id="phone" name="phone" placeholder="手机号码" autofocus/> <input id="code" placeholder="短信验证码"/> <button id="btn>获取验证码</button> <input type="submit" val
2020-10-25 12:59:35
242
原创 js检验表单不通过不提交
校验表单的时候有两种方式:**1.**通过onsubmit()方式来检查用户密码是否输入<script> function ch() { var username = document.getElementById("name");//获取用户名的输入元素标签 if(username.value=="")//如果用户名为空，提示并返回false { alert("用户名不能为空"); return false; } pwd = document.getEl
2020-10-25 12:30:51
733
原创 Vue过滤器Filter的使用
过滤器的作用:他是可以从中取得你想要的，给哪个数据添加装饰，比如在一个价格前面给他一个￥的符号,把’Hello’变成’Hello World’,可以使用filter在后面添加World,或者把时间节点改成时间戳等.过滤器可以在new vue实例注册全局的，也可以在组件中注册局部的用法一:全局过滤器:Vuefilter(''globalFilter,function(value){ return value + '$';})局部注册:filters:{ componentFilte
2020-09-24 21:36:25
245
原创 Vue.js - 关闭 ESlint 语法检查
1，在项目初始化时就关闭当我们采用 vue-cli 脚手架工具来初始化项目时，其中有一步会提示“Use ESLint to lint your code?”，我们可以选择 no 不安装 ESLint2，在项目创建完毕后再关闭（1）可能我们一开始初始化项目的时候选择安装 ESLint，但开发过程中又想将其临时关闭。那么首先打开项目中的 build/webpack.base.conf.js 文件。（2）然后将如下代码给注释掉即可：...
2020-09-20 10:47:18
714
原创 使用element-ui图片的显示
table中代码如下:` 此处template slot-scope为固定写法(scope相当于一条数据对象)在img中使用scope（三个属性value、row、index），通过row（本条数据的数据对象）获取src字段的值Vue data代码如下:data() { return { msg : 'vue测试监听查询购物车数量以及金额变化', // input:'123' tableData: [{ src: './static/images/苹果.jpg',
2020-09-18 21:31:31
9729
1
原创 vue和elementUI的综合使用
1.安装vue-cli首先要保证自己电脑有安装过node js ,打开cmd ，输入node -v ，出现以下图片说明已经安装过了安装完成后，打开任意磁盘，新建文件夹vue-test,在cmd找到vue-test目录国内访问npm比较慢，可以使用淘宝镜像npm，输入命令 ：npm install -g cnpm --registry=https://registry.npm.taobao.org安装完成后使用命令 cnpm install vue 和 cnpm install vue-cli
2020-08-18 21:25:50
231
原创 正则表达式入门简单理解
1.入门介绍简单的说，正则表达式是一种可以用于模式匹配和替换的强有力的工具。我们可以在几乎所有的基于UNIX系统的工具中找到正则表达式的身影，例如，vi编辑器，Perl或PHP脚本语言，以及awk或sed shell程序等。此外，象JavaScript这种客户端的脚本语言也提供了对正则表达式的支持。由此可见，正则表达式已经超出了某种语言或某个系统的局限，成为人们广为接受的概念和功能。正则表达式可以让用户通过使用一系列的特殊字符构建匹配模式，然后把匹配模式与数据文件、程序输入以及WEB页面的表单输入等目标
2020-08-10 11:47:25
539
原创 animation做时钟
html代码<DOCTYPE html><html><meta charset="UTF-8"><title>时钟</title><link rel="stylesheet" style="text/css" href="css/clock.css"><body> <div class="clock"> <div class="clock1"></div>
2020-06-14 16:12:40
301
原创 拖拽操作
代码区<!DOCTYPE html><html><meta charset="UTF-8"><title>拖拽操作</title><style> .div1 { width:300px; height:300px; background-color:green; border:1px solid red; float:left; } div > p {
2020-06-14 15:53:03
146
原创 利用js做活动时间到期的时候，让倒计时停止跳动
//闪购活动var clocks = document.getElementById("clock");// alert(clocks);function leftTimer(){ var now = new Date(); //创建一个新日期 var endDate=new Date('2020/6/20 22:58'); //创建一个指定日期 var leftTime = (endDate.getTime()-now.getTime())/1000; // alert(
2020-06-14 15:41:51
791
1
原创 js无缝滚动效果
代码区<html><head><meta charset="UTF-8"><title>无缝滚动</title><style> *{ padding:0px; margin:0px; } #box{ width:800px; height:200px; background-color:green; position:relative; margin:100px au
2020-06-14 15:31:31
121
原创 js做选项卡效果
代码区<!DOCTYPE html><html><head><meta charset="UTF-8"><title>选项卡</title><style> *{ padding:0px; margin:0px; } .box{ width:600px; height:500px; background-color:green; margin:100p
2020-06-14 15:28:19
160
原创 利用js代码写日历
css代码区<style> *{ padding:0px; margin:0px; } .box{ margin:100px auto; width:400px; height:600px; background-color:#ccc; } ul{ width:350px; height:400px; margin:0px auto; list-style:none; d
2020-06-14 15:17:07
348
原创 js自动轮播
html代码区<div class="chart"> <ul class="chartlist" id="list"> <li class="chartitem"><a href=""><img src="images/chart_01.jpg" alt=""></a></li> <li class="chartitem"><a href=""><img src="images/ch
2020-06-14 15:07:51
293
原创 js菜单栏移入移出
html和css内容区<!DOCTYPE html><html><head> <title>分享到</title> <style type="text/css"> *{ padding:0px; margin:0px; } #box{ width:150px; height:200px; background-color:pink;
2020-06-14 14:50:39
295
原创 利用js实现右侧悬浮框
例子：屏幕右侧悬浮框原理：oDiv.style.top = document.documentElement.clientHeight - oDiv.offsetHeight + scrollTop + “px”;浏览器窗体的高度document.documentElement.clientHeight浏览器滚动的高度var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;html内容区<
2020-06-14 14:42:06
1133
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人