Vue
文章平均质量分 67
fongdaBoy
励志做一个全栈攻城狮
展开
-
vue2.0组件如何使用高德地图
vue2.0直接使用高德地图html>html lang="en">head> meta charset="UTF-8"> title>Documenttitle> script src="vue.js">script> script type="text/javascript" src="http://webapi.amap.com/maps?原创 2017-10-10 14:56:09 · 8225 阅读 · 1 评论 -
vue2.0$nextTick监听数据渲染完成之后的回调函数
vue里面本身带有两个回调函数:一个是`Vue.nextTick(callback)`,当数据发生变化,更新后执行回调。另一个是`Vue.$nextTick(callback)`,当dom发生变化,更新后执行的回调。栗子:... {{item}}...new Vue({ el:'#demo', data:{转载 2017-10-11 11:34:46 · 19853 阅读 · 1 评论 -
6、用vue2.0extend写alert模态框弹窗组件
通过Vue.extend创建组件构造器的方法写弹窗组件alert.js文件代码import Vue from 'vue'// 创建组件构造器const alertHonor = Vue.extend(require('./alert.vue'));var currentMsg = {callback:function(){}}export default function原创 2017-10-20 16:32:05 · 2950 阅读 · 0 评论 -
7、vue2.0用Vue.extend构建消息提示组件的方法实例实现alert模态框组件(2)
话不多说直接上源码 喜欢的点赞哦alert.vue组件style> .header{ font-size:0.85rem;margin:0 0 0 0;margin-top:1.3rem; } .message{ font-size:0.8rem;color: #333;margin:0; padding:0.45rem 0.75原创 2017-10-20 17:48:48 · 1840 阅读 · 2 评论 -
vue2.0模拟锚点实现定位
vue2.0模拟锚点实现定位如果是传统项目,这个效果就非常简单。但是放到 Vue 中,就有两大难题:1. 在没有 jQuery 的 animate() 方法的情况下,如何实现平滑滚动?2. 如何监听页面滚动事件?在浏览了大量文章、进行多次尝试之后,终于解决了这些问题期间主要涉及到了 setTimeout 的递归用法,和 Vue 生命周期中的 moun转载 2017-10-12 09:52:56 · 12966 阅读 · 1 评论 -
9、vue2.0子组件触发父组件的方法,父组件接收子组件的方法
方法一:子组件: 提交export default { methods: { submit: function () { // 子组件中触发父组件方法ee并传值cc12345 this.$emit('ee', 'cc12345') } }}父组件: export defa转载 2017-10-30 09:32:28 · 937 阅读 · 0 评论 -
10、vue2.0中如何使用better-scroll
在我们日常的移动端项目开发中,处理滚动列表是再常见不过的需求了,以滴滴为例,可以是这样竖向滚动的列表,如图所示:http://www.tuicool.com/articles/ueaYBjZ也可以是横向滚动的导航栏,如图所示:可以打开“微信 —> 钱包—>滴滴出行”体验效果。我们在实现这类滚动功能的时候,会用到我写的第三方库,better-s转载 2017-11-01 11:32:51 · 2232 阅读 · 0 评论 -
vue2.0click点击事件修饰符stop阻止单击事件冒泡prevent阻止默认事件
事件修饰符在事件处理器中经常需要调用 event.preventDefault() 或 event.stopPropagation()。尽管我们在方法内可以轻松做到,不过让方法是纯粹的数据逻辑而不处理 DOM 事件细节会更好。为了解决这个问题,Vue.js 为 v-on 提供两个 事件修饰符:.prevent 与 .stop。你是否还记得修饰符是点号打头的指令后缀?原创 2017-10-16 09:51:22 · 22748 阅读 · 0 评论 -
vue-cli vue2.0如何使用引入less或者sass
首选,安装 less 和 less-loader ,在项目目录下运行如下命令npm install less less-loader --save-dev1或者用 yarn安装yarn add less less-loader --dev然后在vue里面引用就可以style lang="less" rel="stylesheet/less"> @impor原创 2017-10-16 15:18:41 · 2091 阅读 · 0 评论 -
13、vue2.0利用better-scroll实现轮播图可以自动轮播可以无限循环轮播
1.安装better-scroll在根目录中package.json的dependencies中添加:"better-scroll": "^0.2.4",然后npm install 安装2.封装代码slidertemplate> div class="slide_box"> div class="slide" ref="sli原创 2017-11-06 17:39:41 · 8956 阅读 · 1 评论 -
Vue2.0实现调用摄像头进行拍照功能以及图片上传功能引用exif.js(2)
可以在github 上下载demo链接 https://github.com/fongdaBoy/Vue2.0ComponentDemovue组件代码template> div> div style="padding:20px;"> div class="show"> div class="picture" :style="'ba原创 2017-10-01 10:43:48 · 27809 阅读 · 10 评论 -
vue2.0实现引用qrcode.js实现获取改变二维码的样式(2)
可以在github 上下载demo链接 https://github.com/fongdaBoy/Vue2.0ComponentDemovue代码template> div class="qart"> div id="qrcode" ref="qrcode"> div> input type="text" id="ge原创 2017-10-01 10:41:16 · 4526 阅读 · 0 评论 -
(vue:案例02) vue-cli 如何搭建项目
一、需要环境 安装好node.js(安装包地址 http://nodejs.cn/) (我这里安装了淘宝镜像可以是使用cnpm 不安装淘宝镜像只能使用npm,因为在国内使用淘宝镜像比较快 )淘宝镜像安装方法 :npm install -g cnpm --registry=https://registry.npm.taobao.org二、全局安装 vue-cli(只是第一次的使原创 2017-09-29 11:04:39 · 218 阅读 · 0 评论 -
vue-resource、Vue中response的get、post和jsonp请求例子
vue-resource Vue response中的 get、post和jsonp 请求例子let url = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=2';let params ={ params: { username: 'zhangSan',原创 2017-09-29 10:49:04 · 1763 阅读 · 0 评论 -
(vue2.0 案例3.0) 在vue-cli 项目中 需要知道常见的配置 防止入坑
一、配置打包后的文件路径 进入config>index.js把assetsPublicPath:'/'改成'./';build: { env: require('./prod.env'), index: path.resolve(__dirname, '../dist/index.html'), assetsRoot: path.resolve(__dirname, '..原创 2017-09-29 13:50:40 · 4944 阅读 · 2 评论 -
vue1.0和vue2.0的watch监听事件写法
watch: { aaa: { handler: function (newVal,oldVal) { console.log('当前的值:'+ newVal); console.log('旧的值' + oldVal); }, deep: true //深度监听 }}原创 2017-09-30 10:02:03 · 2624 阅读 · 0 评论 -
Vue2.0实现调用摄像头进行拍照功能以及图片上传功能引用exif.js
vue组件代码template> div> div style="padding:20px;"> div class="show"> div class="picture" :style="'backgroundImage:url('+headerImage+')'">div> div> div style="margin-t原创 2017-09-30 10:42:50 · 10744 阅读 · 5 评论 -
vue2.0实现引用qrcode.js实现获取改变二维码的样式
vue代码template> div class="qart"> div id="qrcode" ref="qrcode"> div> input type="text" id="getval" value="" placeholder="修改这个值改变二维码"> div>template>script> ex原创 2017-09-30 10:31:31 · 30432 阅读 · 3 评论 -
vue2.0子路由配置和跳转 vue-router: 嵌套路由
路由跳转/home/reg'}">router-linkto="/home/reg">注册router-link>this.$route.router.go({name: 'reg', params: {status: this.$route.params.status}});vm.$router.push({ path:"/home/reg",query转载 2017-10-18 14:18:02 · 9076 阅读 · 0 评论 -
vue2.0引用vue-awesome-swiper插件实现左右滑动轮播效果
首先需要下载依赖npm install vue-awesome-swiper --save同时引入css样式template> div> swiper :options="swiperOption" ref="mySwiper"> swiper-slide>div class="fd_slide fd_s原创 2017-10-18 18:00:40 · 7438 阅读 · 2 评论 -
js两只手指控制div图片放大缩小功能(2)
可以在github 上下载demo链接 https://github.com/fongdaBoy/hammer-pinch-masterhtml代码html>html lang="zh-cmn-Hans">head> meta charset="UTF-8"> meta name="viewport" content="user-scalab原创 2017-10-01 10:36:37 · 7319 阅读 · 2 评论 -
微信小程序 ( 1 ) mpvue 创建微信小程序项目教程
快速上手本文假设你既不会 vue 也不会小程序,如嫌拖沓,请直接快进跳读。1. 初始化一个 mpvue 项目现代前端开发框架和环境都是需要 Node.js 的,如果没有的话,请先下载 nodejs 并安装。然后打开命令行工具:# 1. 先检查下 Node.js 是否安装成功$ node -vv8.9.0$ npm -v5.6.0# 2. 由于众所周知的原因,可以考虑切换源为 taob...原创 2018-05-18 17:05:55 · 1583 阅读 · 2 评论