![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
starcpdk微信~
这个作者很懒,什么都没留下…
展开
-
微信小程序初识——了解数据绑定、事件以及简单wx:for循环
home.wxml文件中进行html页面组件的设计::1.小程序的数据绑定: // 用{{ js 文件中的 data数据的变量 }} 用{{ }} 包住 js文件中的 data 数据的变量 <view> 我的年龄:{{age}} </view>2.列表的遍历:: // wx:for = ""的方式遍历......原创 2020-03-02 22:11:13 · 893 阅读 · 0 评论 -
微信小程序之购物车
微信小程序之购物车car.wxml文件car.wxss文件car.js文件fonticon文件可去finticon的文件下载地址下载car.wxml文件<view class="item" wx:for="{{goodslist}}"> <view data-id="{{item.id}}" bindtap="select" class="check iconfont ......原创 2020-04-08 16:01:05 · 524 阅读 · 0 评论 -
微信小程序之调用腾讯地图接口获取当前地理位置
真机调试的bug出现服务器忙连接断开等提示可以选择换个网络或者换成手机4G信号试试获取地理位置的方式:getlocation() {//调用getlocation()这个接口 wx.getLocation({ altitude: 'altitude', complete: (res) => {}, fail: (res) => {}......原创 2020-04-14 13:26:16 · 3646 阅读 · 0 评论 -
微信小程序之封装获取位置距离的方法
效果图:1. mine.js代码/** * $convertAddressListToLication 将地址名称集合 转换为 地址坐标集合 * $getDistanceOneToMany 计算地址之间的距离 * $getLocation 获取当前位置的坐标 */ import { $convertAddress...原创 2020-04-16 20:46:45 · 698 阅读 · 0 评论 -
微信小程序之wx.getLocation()封装
腾讯地图API若要使用getLocation方法必须在app.json中声明permission关键字腾讯地图api地址:https://lbs.qq.com/复制生成的keyid代码实现:app.json"permission": { "scope.userLocation": { "desc": "你的位置信息将用于小程序位置接口的效果展示" }......原创 2020-04-14 19:10:06 · 2507 阅读 · 0 评论 -
wx.request封装
说明:参数为三个参数:_this传参为this指针 , url为接口地址 , list为page页面data中定义的集合的名称,形式为字符串函数为getListsByGet getListsByPost引入方法:import {$getListsByGet} from ‘…/…/utils/ajax.js’;存在问题接口中的集合名称需要在此工具文档中...原创 2020-04-12 13:47:48 · 189 阅读 · 0 评论 -
nginx如何配置使服务器资源可以让用户输入域名就可以以目录树的方式访问到
首先看看效果这样的效果怎么实现的呢我们首先需要对nginx的配置进行修改做这样一个配置 , 我们的服务器 root配置的那个目录就可以以目录树的方式展示给用户了原创 2021-05-16 11:34:53 · 130 阅读 · 0 评论 -
Vue项目整体添加加载中Loading页面
因为Vue通过axios请求后端数据 , 请求过程始终是异步的 , 开始想着用一个变量标识 , 进而让他显示加载中或者隐藏掉加载中的界面后来发现页面中多模块都发起了不同的请求,这样的话 , 全部是异步的 , 该什么时候隐藏加载中模块就不得而知了因此基于上面的问题 , 我在拦截器中进行了处理让其在request请求拦截器中进行展示加载中页面让其在response响应拦截器中进行隐藏加载中页面代码如下这是我的发起请求的封装的工具类import axios from 'axios'import原创 2021-09-28 15:21:35 · 3311 阅读 · 0 评论 -
VUE代码片段
在vscode中创建代码片段起一个后缀名为.code-snippets的文件名我起的名字为vue-html.code-snippetsvue htm 即为代码生成的快捷键{ "vue htm": { "scope": "html", "prefix": "vuehtml", "body": [ "<!DOCTYPE html>", "<html lang=\"en\">", "", "<head>",原创 2020-06-22 23:50:25 · 3594 阅读 · 1 评论 -
vscode的初使用
安装插件:Chinese (Simplified) Language Pack for Visual Studio Code中文简体插件Live Server内置服务器Vetur 、 vue-helpervue相关插件在资源管理器中创建一个新文件夹在vscode中打开刚创建的文件夹将工作区另存为 存到刚创建的文件夹中然后起个名字工作区就建好了...原创 2020-06-22 00:27:07 · 133 阅读 · 0 评论 -
babel转换es6到es5
下载babel-clinpm install --global babel-cli查看是否安装成功babel --version初始化项目npm init -y写一段es6代码es6文件夹下创建01.js文件// 转码前// 定义数据let input = [1, 2, 3]// 将数组的每个元素 +1input = input.map(item => item + 1)console.log(input)在项目下创建配置文件.babelrc{ "pre原创 2020-06-26 09:46:42 · 244 阅读 · 0 评论 -
js的模块化
es5模块化调用//创建js方法// 定义成员:const sum = function(a , b){ return parseInt(a) + parseInt(b)}const subtract = function(a , b){ return parseInt(a) - parseInt(b)}//设置哪儿些方法可被其他js调用module.exports = { sum, subtract}//调用01.js的方法//1. 引入01.j原创 2020-06-26 15:15:27 · 118 阅读 · 0 评论 -
vue-element-admin框架
官网:https://panjiachen.github.io/vue-element-admin-site/zh/guide/#%E5%AE%89%E8%A3%85一.使用克隆项目git clone https://github.com/PanJiaChen/vue-element-admin.git进入cmd窗口执行npm install启动项目npm run dev二.框架介绍引言该框架是整合elementUI和vue的一个前端框架有两个入口 , 其中之一是index.htm原创 2020-06-27 16:51:22 · 793 阅读 · 0 评论 -
webpack打包
安装webpack , 执行命令 全局安装 npm install -g webpack webpack-cli查看安装版本号 webpack -v初始化项目 webpack -vsrc目录下创建common.js 、 utils.js 、 main.js创建webpack.config.js文件执行编译命令webpack #有黄色警告 webpack --mode=development #没有警告src/common.jsexports.info = fun.原创 2020-06-26 17:05:32 · 81 阅读 · 0 评论 -
npm基础命令
npm -v 查看当前版本号npm init 初始化项目npm install 依赖名称 下载依赖npm init执行后会生成package.json{ "name": "npmdemo", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" },原创 2020-06-26 09:07:11 · 321 阅读 · 0 评论 -
vue的简单初使用
一般用于标签属性中单向绑定<h1 v-bind:title="message"> {{content}}</h1><!-- 简写 --><h1 :title="message"> {{content}}</h1><script> new Vue({ el: '#app', data: { content: '原创 2020-06-23 07:34:19 · 100 阅读 · 0 评论 -
axios+vue进行ajax请求
引入axios.min.js文件<body> <div id="app"> <table border="1"> <tr v-for="item in userList"> <td>{{item.name}}</td> <td>{{item.age}}</td> </tr原创 2020-06-25 21:57:47 · 120 阅读 · 0 评论 -
vue生命周期
<div id="app"> <h1> {{hello}} </h1> </div> <script src="vue.min.js"></script> <script> new Vue({ el: '#app', data: { hello:"h.原创 2020-06-25 19:42:46 · 90 阅读 · 0 评论 -
echarts的简单使用
官网:https://echarts.apache.org/zh/index.html下载echarts:npm install echarts<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="echarts.m转载 2020-08-02 21:49:55 · 93 阅读 · 0 评论 -
NUXT框架使用
NUXT框架是什么呢?他是一个前端框架 , 相对于传统的ajax请求 , 这个框架的请求是通过服务端npm调用统一处理后将数据返回前端 , 因此这个框架解决了传统的ajax请求带来的弊端 , ajax请求有什么弊端呢?ajax请求是异步请求 , 页面先渲染出来数据才会到 , 因此会造成 搜索引擎搜索关键字时匹配度降低很多 , 而这个框架可以更好地实现SEO , 即可以解决异步请求,增加搜索匹配度.NUXT目录结构:(1)资源目录 assets 用于组织未编译的静态资源如 LESS、SAS原创 2020-08-16 20:27:58 · 785 阅读 · 0 评论 -
npm安装时间太久解决方案
npm安装等待一个小时甚至更久下载安装不上怎么办呢?解决方案一:使用cnpm安装解决方案二:通过registry参数指定镜像服务地址npm config set registry http://registry.npm.taobao.org原创 2021-02-23 21:42:00 · 1076 阅读 · 0 评论 -
为网页添加背景音乐组件
Aplayer + meting-js 实现<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <!-- require APlayer --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.c原创 2021-02-22 12:04:38 · 460 阅读 · 0 评论 -
vue项目整合semanticUI
从搭建vue项目开始为大家讲解Vue项目搭建如果我们的电脑从来没有安装过vue项目环境 , 那么我们需要先为电脑安装node环境 node官网然后我们使用npm全局安装cnpmnpm install cnpm -g # 全局安装然后我们安装vue-clinpm install vue-cli -g查看vue创建模板 , 确保vue-cli安装成功vue list # 这条命令可以查看vue可以通过哪儿些模板创建vue程序全局安装webpack原创 2021-02-24 18:28:39 · 2254 阅读 · 1 评论 -
网页中的动漫人物互动——看板娘
相信我们在很多博客页面中看到过页面下面有个动漫人物的 , 人物还可以互动 , 那么这是怎么实现的呢?实现功能很简单 , 我们只需要添加如下三行代码在html中即可<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font原创 2021-02-21 13:05:03 · 3117 阅读 · 0 评论 -
深入探究Vue
vue 集成了React、Angular的优点 , MVVM + Dom让我们来看看第一个vue程序<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><!--导入vue.js---><script src="htt原创 2021-01-25 20:25:02 · 273 阅读 · 0 评论 -
炫酷的进入页面的动画效果
如何实现网页中某些元素从左边弹出来或者从右边淡入淡出类似的相关效果这样的效果怎么实现呢?这里为大家提供一个提供这些效果的网站https://www.webhek.com/post/css3-animation-sniplet-collection.html#/大家可以去这个网站看看 , 找到一种自己喜欢的效果 , 然后跟着我进行操作吧复制完之后 , 我们在我们的html中引入我们自己的css文件然后在对应的元素的class内容中添加对应的css样式...原创 2021-02-23 00:27:53 · 1999 阅读 · 0 评论 -
炫酷的页面点击效果
我们需要先安装一个nvm的包 , 下载地址 nvm查看nvm安装是否成功 , 在cmd中输入 nvm v这条命令查看可用node版本号 nvm ls anaillable安装node nvm install node版本号原创 2021-02-25 12:59:51 · 362 阅读 · 0 评论 -
Vue中使用setInterval函数实现定时任务
我是想做一个网站建站时间的检测显示 , 所以我想使用这个函数定时循环执行一段代码使用起来很简单:在mounted钩子函数中使用就可以 mounted() { let that = this this.timer = setInterval(that.createTime(), 1000); },来看看我的<script> export default { name: "Footer", data() { retur原创 2021-02-24 21:52:03 · 2291 阅读 · 0 评论 -
网页建站时间的显示
我们常常会看到网页中最下面的底部栏会有一个动态的网页建站时间的显示像下图这样的效果那么这是怎么实现的呢?我在这里为大家展示两种代码 , 一种是在vue中的实现 , 一种是在html中的实现vue中的实现<template> <div> <!--底部footer--> <footer class="ui inverted vertical segment m-padded-tb-massive m-opacity-tiny animat原创 2021-02-25 13:12:00 · 467 阅读 · 0 评论 -
vue+semanticUI构建项目+页面动态炫酷效果
在Vue项目中 , 需要全局引用的js代码在index.html中引入即可项目构建页面看板娘音乐播放组件页面搞笑标题炫酷页面点击效果页面动画网页建站时间天气插件原创 2021-02-25 13:37:42 · 1409 阅读 · 0 评论 -
页面搞笑标题效果
我们常常会看到网页中我们换到别的标签页 , 网页上面的标签中的文字会发生动态的改变 , 我们就为大家讲解下这是怎么实现的吧我们只需要在需要添加这样效果的网页中添加这段js代码就可以了’<!--浏览器搞笑标题--><script> // 浏览器搞笑标题 var OriginTitle = document.title; var titleTime; document.addEventListener('visibilitychange', function ()原创 2021-02-25 13:02:17 · 280 阅读 · 0 评论 -
网页中天气显示
我们常常会看到在网页中的导航栏处有一个天气的显示这样的一个效果是通过一些第三方天气插件实现的 ,这里为大家讲解的是html实现和vue实现这里的插件是从天气网插件找到的 天气插件网HTML实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&原创 2021-02-25 13:20:55 · 1774 阅读 · 0 评论 -
对导航栏的滚动侦测实现导航栏随也没内容下滑后固定
我们常常看到一些网站的内容下滑时 , 导航栏就固定在顶部 , 这样的功能是怎样实现的呢?我这里是vue的实现在vue的钩子函数中将下面的代码粘贴进去 ,然后我们在自己导航栏的那个标签上加上一个id = "inner"的属性mounted() { //导航栏随页面滚动检测 // 在页面中的nav标签加上id="inner"这洋一个属性 let obj11 = document.getElementById("inner"); let top11 = ge原创 2021-03-02 14:40:19 · 502 阅读 · 0 评论 -
vue集成MarkDown编辑器插件
安装mavon-editor插件npm install mavon-editor --save在main.js中引入mavon-editor// 导入markdown编辑器import mavonEditor from "mavon-editor";import "mavon-editor/dist/css/index.css";3// 使用MarkDown编辑器Vue.use(mavonEditor);在组件中使用<template> <div cla.原创 2021-03-02 15:14:19 · 1303 阅读 · 2 评论 -
文章内容排版以及代码高亮
代码高亮官网进入官网后下载js和css文件下载后将css和js文件引入到项目中这里我用的是vue , 引入方式如下引入后代码即可高亮了事例代码<pre><code class="language-css">p { color: red }</code></pre>效果文章内容排版官网下载后将typo.css引入项目即可......原创 2021-03-03 14:39:58 · 212 阅读 · 1 评论 -
通过网页内容生成目录
下载安装命令npm install --save tocbot下载后将dist目录下面的内容copy到自己的项目目录下然后在组件中引入这个插件的css和js在组件的mounted钩子函数中添加这段代码// 生成目录插件初始化 tocbot.init({ // Where to render the table of contents. tocSelector: '.js-toc', // 生成的目录放在哪儿 , 这里用css选中原创 2021-03-03 16:15:12 · 826 阅读 · 2 评论 -
网页生成二维码
插件官网下载后导入将里面得js文件copy到自己得项目中然后在自己得项目组建中引入js文件最后就是使用我们需要在钩子函数mounted中添加如下代码// 生成二维码的图标 var qrcode = new QRCode("qrcode", { // 这里的test就是指定元素的id , 就是生成得二维码要放到哪儿个标签下面 text: "http://jindo.dev.naver.com/collie", width: 100, hei原创 2021-03-03 19:20:58 · 379 阅读 · 1 评论 -
回到顶部实现
添加如下js代码即可 , #toTopButton锁定到一个button , 用于确定点击哪儿个按钮触发这个事件$('#toTopButton').click(function () { $(window).scrollTop(0 , 500) // 第一个参数是滚动到什么位置 , 第二个参数是滚动的时间})...原创 2021-03-03 19:30:41 · 108 阅读 · 1 评论 -
滚动侦测 ,让右下角的内容在页面最上方不显示 , 随鼠标下滑而显示
下载插件下载后把图中两个js文件引入自己的项目中然后在组件中引入这个js在mounted的钩子函数中添加这部分内容// 滚动侦测 var waypoint = new Waypoint({ element: document.getElementById('waypoint'), // 这里代表检测的什么标签 handler: function(direction) { if (direction == "down"){ // 滚动原创 2021-03-03 20:14:48 · 264 阅读 · 1 评论 -
vue中通过props实现父组件向子组件传递参数
首先我们看一个例子下面的例子是父组件中的引入HelloWorld这个子组件在子组件标签中用单项绑定绑定一个变量在这里 , msg就是子组件中接受父组件变量值的变量text 就是在父组件中的data中定义的一个变量这里的意思就是 , 把父组件中的变量text的值传递给子组件的变量msg在子组件中 , 我们使用props: [‘msg’],去获取父组件传递的值并将值赋值给子组件中的msg这个变量这样 , 在子组件中就可以通过this.msg去拿到父组件传递的那个值了这里需要注意 , 在子组件原创 2021-03-03 21:35:25 · 1179 阅读 · 1 评论