vuejs
lvlemo
活在当下
展开
-
WKWebView与vuejs交互
0.js点击事件,oc监听事件和参数onLineCollectionFun:function () { console.log('在线收款') window.webkit.messageHandlers.OnLineCollectionFun.postMessage({'methodsID':'1'});},1.#import <WebKit/WebKit.h&...原创 2018-04-17 15:02:44 · 2905 阅读 · 1 评论 -
localStorage使用
1.登陆存储tokenif(window.localStorage){ const tokenString = JSON.stringify(this.hwdToken) window.localStorage.setItem('hwdtoken',tokenString); Toast({ message: '登录成功!', position: 'm原创 2017-12-07 10:30:13 · 363 阅读 · 0 评论 -
json数据模拟
/** * Created by l on 17/11/13. */export default [ { "access_token": "123146", "start_time": "2017-02-03", "end_time":"2017-03-04", "keyword":"wenzhi",原创 2017-11-22 17:21:15 · 593 阅读 · 1 评论 -
vuejs实现iOS弹框 export
1.引入文件popup.css, popup.js//方式1//popup.js//导出常量export const kwidth = 200;//导出函数export function noticeHide() { document.getElementById("popup-backdrop").style.display = "none"; document.getE原创 2017-10-18 10:13:33 · 750 阅读 · 0 评论 -
push参数
this.$router.push({ name:'forgetCodeTwoModule', params:{ result:response } }) {{this.$route.params.resu原创 2017-11-20 16:22:10 · 8743 阅读 · 0 评论 -
vue 短信验证码UI
<mt-button icon="back" slot="left" class="backBox" @click="backAction">返回 <el原创 2017-11-20 15:24:24 · 2140 阅读 · 0 评论 -
vue 购物车
Title 商品名称 商品单价 商品数量 操作原创 2017-11-06 15:27:13 · 345 阅读 · 0 评论 -
vue-router获取上一页面的url信息
今天在实现一个功能的时候,遇到一个问题,使用vue-router获取上一页面的url信息,我尝试了多种方式,发现使用vue-router的beforeRouterEnter钩子实现这个功能最为方便,现在将我的实现代码总结如下: beforeRouteEnter (to, from, next) { console.log(to) console.log(fr原创 2017-11-20 11:41:51 · 22010 阅读 · 3 评论 -
vue 登录
//登录localStorage存储数据if(window.localStorage){ const tokenString = JSON.stringify(this.hwdToken) window.localStorage.setItem('hwdtoken',tokenString); Toast({ message: '登录成功!', positio原创 2017-11-20 11:31:23 · 594 阅读 · 0 评论 -
iOS与vue交互(点击网页传值到OC)
1.初始化UIWebView - (void)viewDidLoad { [super viewDidLoad]; UIWebView*webV=[[UIWebView alloc] initWithFrame:[UIScreen mainScreen].bounds]; _webView=webV; webV.backgroundColor=[UICo...原创 2017-12-07 10:28:44 · 3251 阅读 · 2 评论 -
better-scroll使用
<li class="menu-item" ref="menuList" v-for="good in goods"> {{good.name}}原创 2017-11-24 17:56:18 · 1123 阅读 · 0 评论 -
vue三级界面使用better-scroll滚动
<van-nav-bar title="商品详情" leftText="返回" leftArrow @click-left="backAction" />原创 2017-12-18 18:23:02 · 508 阅读 · 0 评论 -
Vue解决安卓4.4不兼容的问题
1.npm安装npm install babel-polyfillnpm install es6-promisepackage.json中会出现"babel-polyfill": "^6.26.0","es6-promise": "^4.1.1",2.main.js引入import 'babel-polyfill'import Es6Promise from 'es6-promise'req原创 2018-03-27 16:54:40 · 3530 阅读 · 0 评论 -
UIWebView和vue.js通信(json数据)
iOS接收Vue的json数据 methods:{ //选择某一个银行 hotBankFun:function (bank) { console.log(bank) hotBankFunClick(bank) } }- (void)w...原创 2018-03-05 09:56:30 · 1719 阅读 · 0 评论 -
02.26vue布局 tableViewCell左右布局(文字显示两行)
<div class="xyk-strategy"> <div class="title-box"> <mt-cell title="信用卡攻略" value="查看更多" is-link></mt-cell> </div> <div&原创 2018-02-24 14:13:06 · 2142 阅读 · 0 评论 -
iOS与vue交互(OC传值到Vue.js)
1、原生调用vue.js 某个vue组件下的方法。 methods:{ hwajax:function (strings) { this.tokenString=strings; } } mounted:function () { window.hwajax ...原创 2017-12-26 18:37:23 · 9301 阅读 · 2 评论 -
02.27 vue布局 collectionView
<!--模块2热门银行--><div class="hot-bank"> <div class="hot-bank-title"> <div class="left">热门银行</div> </div> <div class=&原创 2018-02-27 10:25:43 · 699 阅读 · 0 评论 -
02.26 组件间传值(controller-view)
1.控制器<template> <div class="hwd-content" v-cloak> <div class="bgBox"> <img :src="bgImg[0].src" class="bgBoxImage"> </原创 2018-02-26 10:33:05 · 178 阅读 · 0 评论 -
02.26 创建一个vue组件
1.Result.vue<template> <div class="hua-result-view" @click="cardDidClick"> <div class="result"> <div class="title">您得到了原创 2018-02-26 10:21:24 · 246 阅读 · 0 评论 -
Loading
1.Loading.vue {{loadingWord}} export default{ data:function () { return{} }, props:{ loadingWord:{ type:Str原创 2017-11-20 09:56:26 · 145 阅读 · 0 评论 -
组件 --->父控件 (事件派发 ) 生命周期
vuejs 5.6- 4:001.scroll组件methods:{ if(this.listenScroll){ let me = this; this.scroll.on('scroll',(pos)=>{ //派发事件出去,外部可监听到scroll事件,得到position me.$emit('scroll',pos)原创 2017-10-11 16:52:12 · 241 阅读 · 0 评论 -
vue导航和首页轮播图实现
vue-tabbar vue-slider1.路由结构图 index.js使用路由首先要引入Vue-router并use,并将配置好路由的vue-router实例挂载到new出来的Vue实例上,不过vue-cli已将帮我们配置好了,只需要在其基础上继续开发就行export default new Router({ routes: [ { path:'/', red原创 2017-10-17 18:23:23 · 5885 阅读 · 1 评论 -
vue编程跳转接口push 转场动画
index.js 配置路由import Vue from 'vue'import Router from 'vue-router'import SingerDetail from 'components/singer-detail/singer-detail'Vue.use(Router)export default new Router({ routes: [ { p原创 2017-10-12 17:33:42 · 1586 阅读 · 0 评论 -
1.1 vue2.0jsonp获取数据
jsonp介绍1.原理:1.写js的时候,我们会在script标签里面引入我们需要的js文件,有自己网站上的,也有别的网站上的,不管哪个网站上的js文件,只要引入了,都可以去运行,丝毫不受同源策略的影响。2.jspon能够跨域,发送的不是ajax请求,利用动态创建script标签,受同源策略的影响。src指向请求的服务端地址。 1.请求参数 url ? callback = abc. 服务原创 2017-09-29 15:40:09 · 3303 阅读 · 0 评论 -
vue路由配置
https://router.vuejs.org/zh-cn/1.main.js// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from原创 2017-08-31 16:32:54 · 453 阅读 · 0 评论 -
vue 模块通信
1、子控件传值-----> 父控件 methods: { addCart(event) { console.log(event.target); if (!event._constructed) { return } if (!this.food.count) { Vue.set(this.food, 'c原创 2017-07-28 10:42:06 · 383 阅读 · 0 评论 -
javaScript 设置磨砂背景
.header{ color: white; position: relative; } /*设置磨砂背景效果*/ .header .background{ position: absolute; top: 0; left:0; z-index: -1; width: 100%; height: 100%; fil原创 2017-07-22 15:56:09 · 1082 阅读 · 0 评论 -
javaScript vue定义组件
1.header.vue 我是HEADER export default{}2.App.vue 引用 商品 评论 商家 asdasdhelloAAAaasd import header from './compon原创 2017-07-19 15:19:47 · 169 阅读 · 0 评论 -
javaScript vue+ajax网络数据获取
1.安装资源包npm install vue-resource2.启动文件main.js,引入文件import VueResource from 'vue-resource'Vue.use(VueResource)3.request import header from './components/Header/header.vue' export default {原创 2017-07-20 11:35:12 · 400 阅读 · 0 评论 -
element-ui
1.在package.json 的 dependencies 字段下面增加 "element-ui": "^1.3.4" 官网"dependencies": { "vue": "^2.4.2", "vue-awesome-swiper": "^2.6.7", "vue-router": "^2.7.0", "element-ui": "^1.3.4" } 2.n原创 2017-10-17 19:21:04 · 704 阅读 · 0 评论 -
css设置标签背景
1.返回按钮 <div class="back" @click="backAction"></div>.back{ position: absolute; left: 10px; top: 13px; background: url("../../assets/content/nav_backbtn@2x.png"); background-size: 1原创 2017-10-18 13:05:02 · 346 阅读 · 0 评论 -
push 转场动画
transition原创 2017-10-18 13:21:47 · 226 阅读 · 0 评论 -
hwdglasses home page push
1.创建 listvc.vue<template> <div class="listBox"> test-view </div></template><script> export default{}</script><style scoped> .listBox{ position: fixed; top: 0;原创 2017-11-07 14:26:46 · 221 阅读 · 0 评论 -
vuejs创建类
创建类 song.jsexport default class Song{ constructor({id,mid,singer,name,album,duration,image,url}){ this.id = id this.mid = mid this.singer = singer this.name = name原创 2017-10-12 18:25:42 · 10408 阅读 · 1 评论 -
fixedTitle
<div class='list-fixed' v-show='fixedTitle'> <h1 class='list-title'> {{fixedTitle}}</h1></div> computed:{ fixedTitle(){ if(this.scrollY>0){ return '' } return this.原创 2017-10-11 17:58:50 · 223 阅读 · 0 评论 -
JavaScript Array map()方法
语法array.map(function(currentValue,index,arr), thisValue)currentValue:必须。当前元素的值 index:可选。当前元素的索引值 arr:可选。当前元素属于的数组对象 thisValue:可选。对象作为该执行回调时使用,传递给函数,用作 “this” 的值。可改变this指向,map() 方法返回一个新数组,数组中的元素为原始数组原创 2017-10-11 15:27:20 · 762 阅读 · 0 评论 -
vue-route 导航使用
//index.js//routr初始化import Router from 'vue-router'import Home from '../components/Home/home.vue'//注册Vue.use(Router)//路由的配置export default new Router({ routes: [ { path: '/home',原创 2017-10-13 17:28:36 · 501 阅读 · 0 评论 -
对象的扩展
对象扩展1.javaScriptObject.assign(argu1,argu2,argu3); argu1:{} argu2:原来的对象 argu3:扩展的对象var commonParams = { gender:'man', school:'sd'},const data = Object.assign({},commonParams,{ name: 'lvk原创 2017-10-10 11:17:20 · 152 阅读 · 0 评论 -
轮播图
1.定义轮播组件 slider.vue1.1结构<div class="slider" ref="slider"><div class="slider-group" ref="sliderGroup"> <div v-for="item in recommends"class="slider-item"> <a :href="item.linkUrl">原创 2017-09-30 15:00:33 · 229 阅读 · 0 评论