- 博客(19)
- 收藏
- 关注
RSS订阅原创 vue移动端项目概述学习总结
开发前准备1、安装node.js、git、码云、visual studi等开发所需要的软件。2、安装vue脚手架npm install @vue/cli -g 安装脚手架工具3、创建项目vue create hello-worldwindow系统，winpty vue.cmd create hello-world4、线上数据传递到码云数据库中git clone + 码云中ssh的地址 -------- git status 查看工作目录和暂存区的情况 -------- git a
2021-11-26 14:20:47
2413
原创 前端开发日常需求解决方法
1、图片动态展示<template> <div class="container"> <div class="url-container"> <ul> <li v-for="(item,index) in list" :key='index' @mouseenter="handleToEnter(item,index)" :class="[activeIndex == index? 'ac
2021-03-21 14:00:55
281
原创 前端瀑布流布局
官方链接地址：https://github.com/AwesomeDevin/vue-waterfall2/blob/master/CHINESE-README.md1.安装 npm install vue-waterfall2@1.8.20 --save （提示：一定要安装1.8.20，最新版会有一部分问题）2.打开main.js文件import waterfall from ‘vue-waterfall2’Vue.use(waterfall)3、<template>
2020-10-30 20:18:27
143
原创 mpvue小程序
1、搭建mpvue脚手架第一步，基于mpvue-quickstart模板创建新项目vue init mpvue/mpvue-quickstart my-project第二步，安装依赖和运行 cd my-project npm install npm run dev2、打开微信开发者工具 设置AppId 勾选"不校验合法域名"3、集成scssnpm i -D sass-loader node-sass由于不可描述的原因，sass-loader应该在7
2020-09-09 22:09:59
151
原创 Webpack4.0学习记录（持续更新）
webpack是一个模块打包工具运行方法： npx webpack可在package.json中通过"scripts": { "bundle": "webpack" }, 定义bundle为webpack打包项，就可以通过npm run bundle进行打包配置webpack.config.js中的配置项：1、mode模式：mode: 'production', // webpack 使用相应模式的内置优化，分为production和development（打包的文件不会压缩
2020-07-28 23:07:22
233
原创 mixins抽离公共的逻辑
创建一个mixin.js文件export default { data () { return { msg: '这是一首简单的小情歌' } }}然后在需要引入mixin.js文件的组件中import mixinmy from './mixin.js'export default { name: 'act', mixins: [mixinmy]}就可以使用mixin.js中定义的数据...
2020-07-22 20:25:59
223
原创 v-slot的用法
父组件：<home-nav> <template v-slot:helloslot> <h1>这是一首简单的小情歌</h1> </template> </home-nav>子组件<slot name="helloslot"></slot>父组件中定义的数据，可通过v-slot:绑定一个name传递给子组件...
2020-07-21 19:24:04
170
原创 vue中引用swiper插件如何将activeIndex传给data数据中
<el-row style="width: 100%;height: 7.4rem;"> <el-col :span="12"> <swiper ref="mySwiper" :options="swiperOptions"> <swiper-slide> <img src="" alt="" style="width: 100%;height: 7.4rem;"> </
2020-06-25 19:56:58
827
转载 css3给按钮一个炫酷的动画
<template> <div class="wrapper"> <a href="#">button</a> <a href="#">button</a> <a href="#">button</a> </div></template><script>export default { name: 'transition'}</script&
2020-06-16 22:04:12
178
原创 Vue+vant移动端页面的开发流程
1、开发前该准备的工具和库一、创建项目流程下载node.js和git工具在码云网站上创建仓库，在桌面上打开git bash运行git clone （加上ssh的编码）npm install -g @vue/cli 安装vue脚手架工具vue create my-project(或者winpty vue.cmd create)创建项目运行git init (此命令初始化一个新本地仓库)、git add .和git commit -m ‘message’、git remote add origi
2020-06-15 21:49:23
2449
原创 嵌套路由的使用方法
1、路由嵌套在SPA（单页页面程序中会常用到），有一部分内容固定，通过点击跳转决定 另一部分不定的内容，就可以用到路由嵌套来完成{ path: '/run/contentaaa', name: 'contentaaa', component: () => import('../views/Contentaaa/Contentaaa.vue'), children: [ { path: 'wendang', name: 'wendang', compon
2020-06-07 23:38:47
506
原创 在Vue项目中使用Echarts: Echarts中的常用组件
下面，以使用在Vue项目中使用Echarts(一)的数据, 初始化一个折现图的组件作为演示<template> <div> <div id="echartContainer" style="width:800px; height:500px"></div> </div></template> <script> const echarts = r
2020-06-05 21:09:31
508
原创 鼠标滑动显示内容的方法
通过全局事件绑定一个函数mounted() { window.addEventListener('scroll', this.handlescroll) }, destroyed () { window.removeEventListener('scroll', this.handlescroll) }引用全局事件时，记得要解绑，免得对其他组件有影响。实现滑动时渐隐渐显的效果methods:{ handlescroll () { const top = document
2020-05-24 10:47:49
755
原创 基于后端传递的数据查询位置
在vue.config.js定义接口数据module.exports = {devServer: { proxy: { '/api': { target: '', pathRewrite: { '^/api': '/moke' } } }}获取接口数据fetch(`/api/?lat=${r.point.lat}&lng=${r.point.lng}`).then((res)=>{ return res.json()}) .the
2020-05-16 18:29:43
184
原创 vue中如何添加百度地图及覆盖物小图片
1.申请AK **http://lbsyun.baidu.com/apiconsole/key**2、在vue项目的public文件夹下的index.html中引入脚本<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥"></script>定位在mounted中定义：```css mounted() { var map = new BMap.Map
2020-05-16 17:10:25
1481
原创 vue中城市页面的实现方法（带右侧字母滑动和点击）
需要引入的插件npm install better-scroll --savenpm install axios --save父组件代码<template> <div> <city-header></city-header> <city-serach :cities='cities'></city-serach> <city-list :cities='cities' :hot='hotCit
2020-05-15 22:19:14
1550
原创 ES6剩余运算符与vuex的巧妙结合
剩余运算符简介： let [a, ...b] = [1, 2, 3]; //a = 1 //b = [2, 3]与vuex的mapState、mapmutation等方法的结合import { mapState, mapMutations } from 'vuex' computed: { ...mapState({ currientcity: 'city' }) }， methods: { handleclick (city) {
2020-05-15 21:33:06
177
原创 JSON的用法简析
1、JSON语法： "name" ： "张三" JSON时一种轻量化的数据格式，通常在vue项目中作为数据，通过axios获取其数据内容，然后传给子组件使用。例如： methods: { info () { axios.get('/api/index.json').then(this.infohappen) }, infohappen (res) { res = res.data if (res.ret &
2020-05-15 21:00:18
108
原创 vue中解决浏览器兼容问题的方法
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可
2020-05-15 19:09:19
1892
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人