- 博客(37)
- 收藏
- 关注
RSS订阅原创 vue 移动端无限瀑布流 插件使用
瀑布流插件：importwaterfallfrom'vue-waterfall2'Vue.use(waterfall) <div class="seat_box"> <div class="seat_background" v-bind:class="{ seat_background2: isChoose }"></d...
2019-12-27 15:02:24
1747
原创 vue 表单 单选 切换样式
<div class="form_input"> <span>性别</span> <label class="sex sex1" v-bind:class="{ active: isChoose1 }"><input name="sex" type="radio" value="m" v-model=...
2019-12-27 13:40:38
552
原创 vue 设置整屏背景色 音乐播放
<template> <div class="gif"> <!-- <p class="count">{{count}}</p> --> <div @click="close" class="close"> <i class="iconfont icon-shengy...
2019-12-27 11:26:46
389
原创 ts 数组的类型
let fibonacci: number[] = [1, 1, 2, 3, 5];//数组的项中不允许出现其他的类型：// let fibonacci: number[] = [1, '1', 2, 3, 5]; 报错//一个比较常见的做法是，用 any 表示数组中允许出现任意类型：let list: any[] = ['xcatliu', 25, { website: 'ht...
2019-12-26 17:08:51
3441
原创 ts数据类型
//数据类型//我们用 : 指定 person 参数类型为 stringfunction sayHello(person: string) { return 'Hello, ' + person;}let user = 'Tom';console.log(sayHello(user));//tsc hello.ts 编译后会自动生成对应的js文件//在 TypeS...
2019-12-26 17:07:58
469
原创 ts 学习1
npminstall-gtypescriptvscode写ts文件报错：tsc-init会在目录下生成一个tsconfig.json文件可识别.ts文件编译一个TypeScript文件很简单：tschello.ts 编译后会自动生成对应的js文件用TypeScript编写React时，以.tsx为后缀ts报错时，编译后也可生成js文件，如...
2019-12-26 17:06:47
302
原创 ts 日期对象
//不传参let d:Date = new Date()//传递一个整数let b:Date = new Date(1000) //从1970往后数1秒
2019-12-26 17:00:02
1844
原创 ts 联合类型
//联合类型（Union Types）表示取值可以为多种类型中的一种。let myFavoriteNumber3: string | number;myFavoriteNumber3 = 'seven';myFavoriteNumber3 = 7;//当 TypeScript 不确定一个联合类型的变量到底是哪个类型的时候，//我们只能访问此联合类型的所有类型里共有的属性或方法：...
2019-12-26 16:55:35
1629
1
原创 ts 类型推论
//类型推论//TypeScript 会在没有明确的指定类型的时候推测出一个类型，这就是类型推论// let myFavoriteNumber = 'seven';// myFavoriteNumber = 7; 会报错//如果定义的时候没有赋值，//不管之后有没有赋值，都会被推断成 any 类型而完全不被类型检查：let myFavoriteNumber2;my...
2019-12-26 16:52:35
848
原创 ts 接口
//我们定义了一个接口 Person，接着定义了一个变量 tom，它的类型是 Person。//这样，我们就约束了 tom 的形状必须和接口 Person 一致。interface Person { name:string; age:number;}let tom: Person = { name: 'Tom', age: 25};//定义的变...
2019-12-26 16:50:49
141
原创 ts 函数的类型
function sum(x: number, y: number): number { return x + y;}//输入多余的（或者少于要求的）参数，是不被允许的：//sum(1, 2, 3); 报错//sum(1); 报错//在 TypeScript 的类型定义中，=> //用来表示函数的定义，左边是输入类型，需要用括号括起来，右边是输出类型。//...
2019-12-26 16:47:05
1007
原创 vue package.json项目名 只能设置小写 办法
公司要求vue修改cil的package.json项目名称 ，name名，要求中文；npm的文档写只写是小写英文要求如下：最少配置项， package.json 必须包括以下几项："name"全部为小写字母 一个单词，无空格 允许半角破折号和下划线我是这么解决的，npm run build打包后修改dist打包目录后的index.html的 <tit...
2019-12-26 16:31:16
6386
3
原创 vue 循环遍历背景图
//循环背景图获取index<template> <div id="app"> <div class='pic' v-for="(item,index) in list" :key=index :style="{backgroundImage:'url(' + item.img+ ')', ...
2019-12-25 17:41:57
3202
原创 vue todolist
父组件todo.vue<template> <section class="real-app"> <headers></headers> <input type="text" class="add-input" auto...
2019-12-25 17:05:13
388
原创 vue 插槽 作用域插槽 控制同一子组件视图不同
爷爷组件.vue//父组件传值，控制相同子组件内部不同变化<template> <div id="app"> <!-- son组件 --> <son :show="false"> <span slot="header">我是子组件header</span> <!...
2019-12-25 16:23:59
365
原创 vue 修饰符
//修饰符<template> <div id="example-3"> <!-- lazy在“change”时而非“input”时更新 --> <input v-model.lazy="msg"> 转换数字 <input v-model.number="age" type="number"> 去收尾空格 ...
2019-12-25 15:46:53
88
原创 vue 小知识 不同元素绑定同一事件 传值
//不同元素绑定同一事件 传值<template> <div id="example-3"> <button v-on:click="say('hi')">Say hi</button> <button v-on:click="say('what')">Say what</button></div>...
2019-12-25 15:25:08
427
原创 vue 通过router路由控制 同一组件router-view视图显示位置
/app路径下视图显示：/login路径下视图显示：app.vue组件视图： 使用name属性<template> <div id="app"> <!-- 使用命名视图 控制同一个路径的视图显示位置 --> <router-view></router-view> <router-v...
2019-12-25 15:15:56
2905
原创 vue 小知识点 声明式渲染 鼠标悬停显示信息
// 声明式渲染 鼠标悬停显示信息<template> <div id="app2"> <span :title="message"> 鼠标悬停几秒钟查看此处动态绑定的提示信息！ </span></div></template><script>export default {...
2019-12-25 14:45:12
1491
原创 vue 小知识点 循环JSON数据 v-pre
<template> <div id="app"> <ul> <li v-for="(val, key,index) in obj" :key='index'> <p>{{val}}:{{key}}</p> </li> </ul>...
2019-12-25 14:42:11
439
原创 子元素相对于父元素固定定位
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="...
2019-12-25 09:45:53
1013
原创 异步笔试题
1//请写出输出内容async function async1() { console.log('async1 start'); ---2 await async2(); --遇到await跳出 console.log('async1 end'); ---6 async1 end}async function async2() { conso...
2019-12-18 13:54:49
296
原创 css面试题
BFC是什么？BFC，块状格式化上下文，其实是一个隔离的独立盒子（容器），他有以下特性：容器里面的子元素不会影响到外面的元素，容器外的元素也不会影响到里面 BFC容器会一个挨着一个排列 计算BFC的高度时，浮动元素也参与计算 BFC的区域不会与float box重叠怎样触发（创建）一个BFC？boby的根节点 浮动的元素：float除了none以外 绝对定位的元素：posi...
2019-12-18 10:36:23
159
原创 echarts 可视化数据展示 横柱状图2
效果代码initChart7() { // 带阴影柱状图 var option = { grid: { left: "left", right: "15%", top: "5%", // bottom: "20px", ...
2019-12-14 13:43:47
212
原创 echarts 可视化数据展示 竖柱状图
效果initChart6() { // 竖直柱状图 var option = { grid:{ x:20, y:20, x2:20, y2:50, containLabel:true ...
2019-12-14 11:31:52
1468
原创 echarts 可视化数据展示 漏斗图
效果 initChart1() { // 漏斗图 var option = { tooltip: { trigger: 'item', formatter: "{a} <br/>{b} : {c}%" }, ser...
2019-12-14 11:29:38
3362
原创 echarts 可视化数据展示 雷达图
效果initChart4() { // 雷达图 var option = { tooltip: { trigger: 'axis' }, radar: [ { indicator: [ ...
2019-12-14 11:18:24
909
原创 echarts 可视化数据展示 横柱状图
效果 initChart2() { var option = { grid: { //图表位置 left: "2%", // right: "4%", top: "4%", // bottom: "20px", c...
2019-12-14 11:12:29
1161
原创 echarts 可视化数据展示 饼图
效果男女饼图initChart3() { var option = { tooltip: { trigger: 'item', formatter: "{a} <br/>{b}: {c} ({d}%)" }, graphi...
2019-12-14 11:03:02
1494
原创 记录一下最近做的 echarts 可视化数据展示 全屏插件和图表自适应屏幕
整体效果全屏插件同事用的是fullscreen全屏插件要在script里面引用一下importfullscreenfrom"vue-fullscreen";Vue.use(fullscreen); //点击图标全屏 .pageWrap是第二层的div大小是 width:1920px;height: 1080px; 和设计图一样 toggle() {...
2019-12-12 11:27:16
1121
3
原创 vue 点击增大字号
//动态fontsize<template> <div id="example-3"> <div :style="{ fontSize: postFontSize + 'px' }"> 我是内容 </div> <button @click="add">点我增加</bu...
2019-12-04 15:12:03
2111
原创 vue 不同元素绑定同一事件
//不同元素绑定同一事件<template> <div id="example-3"> <button v-on:click="say('hi')">Say hi</button> <button v-on:click="say('what')">Say what</button></div>&...
2019-12-04 14:55:36
688
原创 vue 循环遍历 容器background
//循环背景图获取index<template> <div id="app"> <div class='pic' v-for="(item,index) in list" :key=index :style="{backgroundImage:'url(' + item.img+ ')', ...
2019-12-04 11:18:53
641
原创 vue 高德地图 西湖区 点标记 002
效果index.html中引入amap <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/> <script type="text/javascript" src="https://webapi.amap.com...
2019-12-04 11:11:54
293
原创 vue 高德地图 西湖区 点标记 001
效果：index.html中引入amap <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/> <script type="text/javascript" src="https://webapi.amap.co...
2019-12-04 10:41:22
411
原创 vue 倒计时2
<template> <div id="test"> {{text}}<div id="meClocker" v-show='go_study'>{{clocker}}</div> </div></template><script>export default { data() ...
2019-12-04 10:27:13
129
原创 vue 倒计时组件
startTime为开始时间戳endTime为结束时间戳<template> <!-- 倒计时封装:当小于三天的时候出现颜色变为红色 --> <div> {{text}}<div id="meClocker" :class="{three : timeobj.days <= (sign||3)}"&g...
2019-12-04 10:18:26
1434
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人