宝典
数组连接为字符串，数组所有值之和积
var a=[1,2,8]
var b=a.reduce(function (a,b) {
return //a*b所有值乘积 // a+'' +b连接数组//a+b所有值之和
})
console.log(b)
多元运算
function test(p){
var a=5,b=12;
return p>1?p<b?p=4:p=6:p=3
}
var a = test(0)
当前时间
const current = new Date().getFullYear() +
'-' +
(new Date().getMonth() + 1) +
'-' +
new Date().getDate() +
'-' +
new Date().getHours() +
':' +
new Date().getMinutes() +
':' + new Date().getSeconds()
时间
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-2.2.4.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue-router.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
</style>
</head>
<body>
<div class="app">
<!-- 生命周期 -->
<h2>{{mag}}</h2>
<h2>{{mags}}</h2>
<!-- <div>{{formatDate}}</div> -->
<!-- 时间 -->
<div>{{date|formatDate}}</div>
</div>
</body>
<script type="text/javascript">
var padDate=function(value){
return value<10?'0'+value:value
}
var app=new Vue({
el:'.app',
data:{
mag:"生命周期",
mags:"过滤器",
date:new Date()
},
filters:{
formatDate:function(value){
var date=new Date(value);
var year=date.getFullYear();
var month=padDate(date.getMonth()+1);
var day=padDate(date.getDate());
var hours=padDate(date.getHours());
var minutes=padDate(date.getMinutes());
var seconds=padDate(date.getSeconds());
return year+'-'+month+'-'+day+'-'+hours+':'+minutes+':'+seconds;
}
},
methods:{
},
beforeCreate() {
console.log("创建前")
},
created() {
console.log("创建后")
},
mounted() {
this.formaDate
console.log("挂载后")
var _this=this;
this.timer=setInterval(function(){
_this.date=new Date
},1000)
},
beforeMount() {
console.log("挂载前")
},
beforeUpdate() {
console.log("更新前")
},
updated() {
console.log("更新后")
},
beforeDestroy() {
if(this.timer){
clearInterval(this.timer)
}
console.log("销毁前")
},
deactivated() {
console.log("销毁后")
},
})
</script>
</html>
轮播图
var index=1;
left.onclick=function () {
index++
if (index>3) {
index=0
}
one.style.left=-index*800+"px"
}
right.onclick=function () {
index--
if (index<0) {
index=3
}
one.style.left=-index*800+"px"
}
识别电话
https://zhidao.baidu.com/question/455762432046249965.html
<a class="a" href="wtai://wp/mc;17789521870">17789521870</a>
<a href="javascript:phone(" +xgfPhone+")" id=" xgfPhone"></a>
<!-- 跳转到电话代码 -->
<a class="a" href="wtai://wp/mc;17789521870">17789521870</a>
<!-- 跳转到微信代码 -->
<a href="weixin://" οnclick="PIWI_SUBMIT.Weixin_Open()"><img src="img/tp.jpg"/></a>
<!-- 跳转到qq代码 -->
<a <a href="mqqwpa://im/chat>打开qq聊天框</a><br>
</body>
<script type="text/javascript">
function phone( xgfPhone) {
alert("xgfPhone--" + xgfPhone )
window. location.href = 'tel://' + xgfPhone;
$("#xgfPhone") . text(xgfPhone );
}
<div class="app">
<conet :level="2" title="特性">特性</conet>
</div>
</body>
</script> -->
<script type="text/javascript">
Vue.component('conet',{
template:'#conet',
props:{
level:{
type:Number,
required:true,
},
title:{
type:String,
default:''
}
},
render(createElement) {
return createElement(
'h'+this.level,
[
createElement(
'a',
{
domProps:{
href:'#'+this.title
}
},
this.$slots.default
)
]
)
},
})
X47tu6y密码
hjyfLPLI账号
Echarts
https://echarts.apache.org/examples/zh/index.html#chart-type-radar
npm install echarts --save
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
脚手架时间
<template>
<div class="home">{{currentTime}}</div>
</template>
<script>
export default {
name: "five",
data() {
return {
timer: "",//定义一个定时器的变量
currentTime: new Date(), // 获取当前时间
}
},
filters:{
appendZero(obj) {
if (obj < 10) {
return "0" + obj;
} else {
return obj;
}}
},
created() {
var _this = this; //声明一个变量指向Vue实例this，保证作用域一致
this.timer = setInterval(function() {
_this.currentTime = //修改数据date
new Date().getFullYear() +
"-" +
(new Date().getMonth() + 1) +
"-" +
new Date().getDate() +
" " +
new Date().getHours() +
":" +
new Date().getMinutes() +
": " +
new Date().getSeconds();
}, 1000);
},
beforeDestroy() {
if (this.timer) {
clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
}}
};
</script>
<style lang="less" scoped>
.five-page {
width: 100%;
height: 5rem;
}
</style>
点击跳转
},
async getHomes(item) {
let temp = await http.getHome();
let type = [];
this.content.push(type);
this.show = type;
for (var i = 0; i < temp.length; i++) {
if (item === temp[i].gameLabel) {
type.push(temp[i]);
console.log(item);
// console.log(temp[i].gameLabel);
console.log(type);
} else if (item === this.lables[0]) {
// console.log(this.lables[0]);
this.show.push(temp[i]);
}
}
},
时间戳与对象之间的转化
changeOrigin: true,//是否允许跨越
// 获取某个时间格式的时间戳
var stringTime = "2014-07-10 10:21:12";
var timestamp2 = Date.parse(new Date(stringTime));
timestamp2 = timestamp2 / 1000;
console.log(timestamp2)
var newDay = new Date();
console.log(Date.parse(newDay));
var newDay = +new Date();
console.log(newDay);
var newDate = new Date(1611309731000); //实例化一个Date对象，将时间戳直接传入，注意一定是13位
var time_str = newDate.toLocaleDateString(); //毫秒转化为时间
console.log(time_str)
Get/post
export function getreportlook (parameter) {
return request({
url: api.reportlook,
method: 'get',
params: parameter
})
}
// 朋友圈详情
export function getselectUser (parameter) {
return request({
url: api.selectUser + '?id=' + parameter,
method: 'post',
params: parameter
})
}
字符串解决
// 视频处理
if (item.video) {
var temp = []
temp = item.video.split('"')
item.video = temp[3]
this.videoarray.push(item)
}
})
console.log(this.videoarray)
})
<div class="instruction">
<div class="tab-tilte">
<p><strong>1.数据列表</strong></p>
Tab切换
<div @click="cur=0" :class="{active:cur==0}">数据统计</div>
<div @click="cur=1" :class="{active:cur==1}">用户总人数</div>
<div @click="cur=2" :class="{active:cur==2}">举报列表</div>
<div @click="cur=3" :class="{active:cur==3}">朋友圈</div>
<div @click="cur=4" :class="{active:cur==4}">群聊列表</div>
<div @click="cur=5" :class="{active:cur==5}">图片视频信息</div>
<p><strong>2.表单页</strong></p>
<div @click="cur=6" :class="{active:cur==6}">标题三</div>
<div @click="cur=7" :class="{active:cur==7}">标题四</div>
<div @click="cur=8" :class="{active:cur==8}">标题四</div>
</div>
<div class="tab-content">
<!-- 数据页 -->
<div v-show="cur==0">内容一</div>
<div v-show="cur==1">内容二</div>
<div v-show="cur==2">内容三</div>
<div v-show="cur==3">内容四</div>
<div v-show="cur==4">内容一</div>
<div v-show="cur==5">内容二</div>
<!-- 表单页 -->
<div v-show="cur==6">内容三</div>
<div v-show="cur==7">内容四</div>
<div v-show="cur==8">内容四</div>
</div>
</div>
</template>
下拉框
<select ref="newText" style="width:80px;" @change="getTitle(text.userId, $refs.newText.value
)">
<option v-for="(item, index) in sel" :key="index" :value="item.value">{{ item.time }}</option>
</select>
Data
values: 3600000,
sel: [
{
value: '请选择',
time: '请选择'
},
{
value: 3600000,
time: '1小时'
},
{
value: 3600000 * 2,
time: '2小时'
},
{
value: 3600000 * 3,
time: '3小时'
},
{
value: 3600000 * 24,
time: '1天'
},
{
value: 3600000 * 48,
time: '2天'
},
{
value: 3600000 * 72,
time: '3天'
},
{
value: 31536000 * 70000,
time: '永久'
}
],
Js
getTitle (a, values) {
gettitle(a, values).then(res => {
values = this.$refs.newText.value
console.log(this.$refs.newText.value)
})
},
https://www.kanzhun.com/jiaocheng/216017.html
导出表格方法vue
npm install vue-json-excel
import JsonExcel from 'vue-json-excel'
Vue.component('downloadExcel', JsonExcel)
<template>
<div class="home">
<download-excel
:data = "json_data"
:fields = "json_fields"
name = "用户统计列表">
导出Excel
</download-excel>
</div>
</template>
<script>
export default {
data() {
return {
json_fields: { //导出Excel表格的表头设置
'序号': 'type',
'姓名': 'userName',
'年龄': 'age',
'手机号': 'phone',
'注册时间': 'createTime',
},
json_data:[
{"userName":"张三","age":18,"phone":15612345612,"createTime":"2019-10-22"},
{"userName":"李四","age":17,"phone":15612345613,"createTime":"2019-10-23"},
{"userName":"王五","age":19,"phone":15612345615,"createTime":"2019-10-25"},
{"userName":"赵六","age":18,"phone":15612345618,"createTime":"2019-10-15"},
]
};
},
methods: {
},
created() {},
};
</script>
<style lang="less" scoped >
.three-page {
width: 100%;
height: 5rem;
}
</style>
获取当前城市
<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
<script type="text/javascript">
console.log(returnCitySN)
</script>
小写转大写
c=b.toUpperCase()
大小转小写
m=b.toLowerCase()
// 字符串加密
var toUode =function (str){
var key = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ"
var l=key.length
var a=key.split('')
var s='',b,b1,b2,b3,b4
for (var i=0;i<str.length;i++) {
b=str.charCodeAt(i)
b1=b%l
b=(b-b1)/l
b2=b%l
b=(b-b2)/l
b3=b%l
s+=a[b3]+a[b2]+a[b1]
}
return s
}
var m="java中国"
toUode(m)
console.log(toUode(m))
// 解密
var fromCode =function (str){
var key = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ"
var l=key.length
var a=key.split('')
var b, b1, b2, b3, d=0, s
s=new Array(Math.floor(str.length/3))
b=s.length
for (var i=0;i<b;i++) {
b1=key.indexOf(str.charAt(d))
d++
b2=key.indexOf(str.charAt(d))
d++
b3=key.indexOf(str.charAt(d))
d++
s[i]=b1*l*l+b2*l+b3
}
b=eval("String.fromCharCode("+ s.join(',') +")")
return b
}
var m="java中国"
fromCode(m)
console.log(fromCode(m))
Vuex
1. state：vuex的基本数据，用来存储变量
2. geeter：从基本数据(state)派生的数据，相当于state的计算属性
3. mutation：提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。
回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，提交载荷作为第二个参数。
4. action：和mutation的功能大致相同，不同之处在于 ==》1. Action 提交的是 mutation，而不是直接变更状态。 2. Action 可以包含任意异步操作。
5. modules：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。
一安装 npm install vuex --save
二Main.js
import '../src/store/index.js'
import Vuex from 'vuex'
Vue.use(Vuex)
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
三创建store文件
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
count: 100
},
mutations: {
increment (state) {
state.count++
},
reduce (state){
state.count-=5
}
},
actions: {
},
modules: {
}
})
四：用法
<template>
<div class="home">
{{count}}
<button @click="red()">点击</button>
</div>
</template>
<script>
// import http from "../services/http-service";
import store from '../store/index.js'
export default {
name: "HomePage",
data() {
return {
}
},
methods: {
red(){
this.$store.commit("reduce")
}
},
computed: {
count () {
return store.state.count
}
}
};
</script>
<style lang="less" scoped>
// 函数合成
var compose = function (f, g) {
return function (x) {
return f(g(x))
}
}
var add =function (x){
return x+1
}
var mul =function (x){
return x*5
}
compose(mul, add)(2)
console.log(compose(mul, add)(2))
//函数节流平凡调用
var o = {
id: null,
f: function (e) {
e.innerHTML = e.innerHTML + 'ok'
},
e: function (box) {
clearTimeout(this.id)
var that = this
this.id = setTimeout(function () {
that.f(box)
},100)
}
}
var div =document.getElementById("box")
div.onmousemove = function () {
o.e(box)
// console.log(o.e(box))
}
qq中有10000个好友，每秒中渲染20个好友：
var timeChunk = function(arr, fn, count) {
var t;
var start = function() {
for(var i = 0; i < Math.min(count || 1, arr.length); i++) {
var obj = arr.shift();
fn(obj)
}
}
return function() {
t = setInterval(function() {
if(arr.length == 0) {
return clearInterval(t)
}
start();
}, 1200)
}
}
var arr = [];
for(var i = 0; i < 1000; i++) {
arr.push(i)
}
var renderList = timeChunk(arr, function(n) {
var div = document.createElement('div');
div.innerHTML = n;
document.body.appendChild(div);
}, 8)
renderList()
//泛型函数
Function.prototype.uncurry = function () {
var self = this;
return function () {
return Function.prototype.apply.apply(self, arguments);
}
}
var push = Array.prototype.push.uncurry()
var obj = {};
push(obj, [3,4,5]); //可以把数组转换为类数组
console.log(obj)
Array.prototype.push.apply(obj, [3,4,5])
// {0: 3, 1: 4, 2: 5, length: 3}
// 递归运算
var f=function (x) {
if (x<2)
return 1
else
return x*arguments.callee(x-1)
}
console.log(f(4))
登录
function myFunction() {
var message, x;
message = document.getElementById("p01");
message.innerHTML = "";
x = document.getElementById("demo").value;
try {
if(x == "") throw "值是空的";
if(isNaN(x)) throw "值不是一个数字";
x = Number(x);
if(x > 10) throw "太大";
if(x < 5) throw "太小";
}
catch(err) {
message.innerHTML = "错误: " + err + ".";
}
finally {
document.getElementById("demo").value = "";
}
}
本文来自博客园，作者：zjxgdq，转载请注明原文链接：https://www.cnblogs.com/zjxzhj/p/14493505.html
