小羽向前跑

config文件夹下新建global.jsconst BASE_URL = 'http://xxxxxxx'export default { BASE_URL}main.js添加到全局import global_ from '../config/global'Vue.prototype.GLOBAL = global_;组件里使用： created() {...

瀑布流插件：importwaterfallfrom'vue-waterfall2'Vue.use(waterfall) <div class="seat_box"> <div class="seat_background" v-bind:class="{ seat_background2: isChoose }"></d...

<div class="form_input"> <span>性别</span> <label class="sex sex1" v-bind:class="{ active: isChoose1 }"><input name="sex" type="radio" value="m" v-model=...

<template> <div class="gif"> <!-- <p class="count">{{count}}</p> --> <div @click="close" class="close"> <i class="iconfont icon-shengy...

父组件todo.vue<template> <section class="real-app"> <headers></headers> <input type="text" class="add-input" auto...

爷爷组件.vue//父组件传值，控制相同子组件内部不同变化<template> <div id="app"> <!-- son组件 --> <son :show="false"> <span slot="header">我是子组件header</span> <!...

//不同元素绑定同一事件 传值<template> <div id="example-3"> <button v-on:click="say('hi')">Say hi</button> <button v-on:click="say('what')">Say what</button></div&gt...

/app路径下视图显示：/login路径下视图显示：app.vue组件视图： 使用name属性<template> <div id="app"> <!-- 使用命名视图 控制同一个路径的视图显示位置 --> <router-view></router-view> <router-v...

//动态fontsize<template> <div id="example-3"> <div :style="{ fontSize: postFontSize + 'px' }"> 我是内容 </div> <button @click="add">点我增加</bu...

//不同元素绑定同一事件<template> <div id="example-3"> <button v-on:click="say('hi')">Say hi</button> <button v-on:click="say('what')">Say what</button></div>&...

//循环背景图获取index<template> <div id="app"> <div class='pic' v-for="(item,index) in list" :key=index :style="{backgroundImage:'url(' + item.img+ ')', ...

效果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...

效果：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...

<template> <div id="test"> {{text}}<div id="meClocker" v-show='go_study'>{{clocker}}</div> </div></template><script>export default { data() ...

startTime为开始时间戳endTime为结束时间戳<template> <!-- 倒计时封装:当小于三天的时候出现颜色变为红色 --> <div> {{text}}<div id="meClocker" :class="{three : timeobj.days <= (sign||3)}"&g...

<template> <div class="studentRoom"> <div class="blackboard">当前时间是：{{currentTime}}</div> </div></template><script>export default { name: 'stud...

在element上传前的钩子里： beforeAvatarUpload1(file) { var file =file constisSize=newPromise(function(resolve,reject){constimg=newImage()const_URL=window.URL||window....

vue中写好一个组件功能<template> <div id="app"> <div class="popwin"> <p class="info">{{info}}</p> <button class="close_popwin" @click="close...

安装：npmiv-chartsecharts-S入口文件main.js里面：importVChartsfrom'v-charts'Vue.use(VCharts)组件使用：<template> <div id="app"> <ve-line :data="chartData"></ve-line&gt...

index.html里面引入amap：首先你要去https://lbs.amap.com/注册一个属于自己的key注册好账号后--点击右上角‘控制台’--左侧边栏‘应用管理--我的应用’---点击创建应用---点击加号选择开发平台--添加key<script type="text/javascript" src="https://webapi.amap.com/maps?...

新建js文件：/** * 获取当前时区*/export const offset = function() { var nowTime = new Date() var offset1 = nowTime.getTimezoneOffset() / 60 return -offset1 } 组件中使用：<script>impor...

全局前置守卫to:router即将进入的路由对象 from:当前导航即将离开的路由 next:Function,进行管道中的一个钩子，如果执行完了，则导航的状态就是 confirmed （确认的）；否则为false，终止导航。router.beforeEach((to,from,next)=>{ let token = getCookie("token"); consol...

最终功能： showblogs.vue所有代码：1.获取数据：将获取到的数据赋给 data（）中  blogs 数组，this.blogs = data.body.slice(0, 10);2.监听用户输入：v-model="search"，3.筛选用户输入的内容，match() 方法可在字符串内检索指定的值 用户输入筛选后的数据赋给data（）中  blogs 数组...

最终效果：代码：<template> <div id="box"> <input type="text" v-model="msg"> <button @click="add">发布</button> <ul> <li v-for="(v,i) in arr">...

效果展示：安装：npmivue-scroller-Dmain.js引入：import VueScroller from 'vue-scroller'Vue.use(VueScroller)代码：<template> <div> <scroller :on-refresh="refr...

效果：代码： <template> <div class="delete"> <div class="slider"> <div class="content" @touchstart='touchStart' ...

最终效果：组件代码： <template> <div class="todolist"> <!-- header --> <div class="header"> 任务计划列表 </div> <!-- 添加任务 -->...

最终效果:安装插件：npm install clipboard --save全部代码：<template id="t"> <div class="sn Lfll Lmr20">订单编号： <span data-clipboard-action="copy" class="cobyOrderSn" :data-clipboard-text...

最终效果：APP.vue<template> <div id="app"> <h4>在线翻译</h4> <h5>简单/易用/方便</h5> <!-- 表单组件 --> <translateForm @formSubmit='translateText'>...

<template> <div> 判断页面是首次进入还是再次刷新 </div></template> <script>export default { data(){ return{ } }, m...

最终效果组件代码<template> <!-- 拖拽交换位置效果 --> <transition-group tag="div" class="container"> <!-- 循环出三个颜色不同的div --> <div class="item" v-for="(item,index) ...

效果：增删改功能tree.vue组件代码：<template> <div> <div class="all-div" v-if="model.name"> <div class="itemRow" :style="{ marginLeft:model.level*20+'px' }"> &lt...

功能展示输入文字点击播放调用语音直接上代码<template> <div> <!-- 语音播放功能 --> <div> <input type="text" id="ttsText"> <input type="button" id="tts_btn" @click="myplay()" ...

防抖（debounce）所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。防抖就是将一段时间内连续的多次触发转化为一次触发。节流（throttle）所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。防抖节流函数js文件/** * 函数防抖 (只执行最后一次点击) * @param fn * ...

代码：<template> <div id="fullscreen"> <div class="btn-fullscreen" @click="handleFullScreen"> <el-tooltip effect="dark" :content="fullscreen ? `取消全屏`:`全屏`" plac...

安装这三个依赖npminstallxlsxfile-saver-Snpminstallscript-loader-S-D组件代码<template> <div> <el-button type="primary" @click="exportExcel">导出文件</el-button>...

文件目录：功能展示：路由配置：{ path: '/account', component: ()=> import('../components/home/home.vue'), //布局页面 redirect: '/account/all-account/list', //定向到list路径 name: '账号管理', ...

引入：CKEditor去官网下载文件包https://ckeditor.com/ckeditor-4/download/解压程序包到vue-cli的静态资源目录/static中在index.html页面引入ckeditor.js文件，尽量采用绝对路径引入（刷新页面时，会根据路由相对路径加载该js文件，采用相对路径会有时会导致找不到该文件！）<sc...

功能如下：搜索框搜索---自动下拉---点击数据---数据显示在搜索框里---点击新增--数据显示在下方--点击删除--删除当前代码：首先去百度开发者申请一个key然后将key引入到项目的 index.html：<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&...

功能：点击单行的button改变其状态代码部分：判断表格中scope.row.status和identity的状态 来设置不同的可见的button <el-table-column prop="customerName" label="操作" min-width="80" align="center...