vue

1、先准备好一个api接口 http://www.imooc.com/api/home/slider 2、安装插件 cnpm install --save axios 3、api/slider.js import axios from 'axios'; //获取幻灯片数据 ajax export const getSliders=()=>{ return axios.get('http://www.imooc.com/api/home/slider').then(res=>{ if(res.data.code===0){ console.log(res.data.slider); return res.data.slider;//返回是数据 } throw new Error('没有成功获取到数据'); }).catch(err=>{ console.log(err); //错误处理 return [{ linkUrl:'www.baidu.com', picUrl:require('assets/img/404.png') }] }); } 4、在 components/slider/index.vue中引入该方法 <template> <swiper ref="mySwiper" :options="swiperOptions"> <swiper-slide v-for="

效果图 src/app.vue <template> <div id="app" class="g-container"> <div class="g-header-container"> 头部导航 </div> <div class="g-view-container"> <div class="content"> 内容区域 </div> </div> <div class="g-footer-container"> <tabbar /> </div> </div> </template> <script> import Tabbar from 'components/tabbar'; export default { name: 'App', components:{ Tabbar } } </script> <style scoped> .g-container{ position: relative; width:100%; height:100%; max-width:640px; min-width:320px; margin:0 auto; overflow:hidden; } .g-header-container{ position:absolute; left:0; top:0; width:100%; z-index:999; height:64px;

这个就是最基本也是完整的vuex代码；vuex 包含有五个基本的对象： state：存储状态。也就是变量； getters：派生状态。也就是set、get中的get，有两个可选参数：state、getters分别可以获取state中的变量和其他的getters。外部调用方式： store.getters.personInfo()。就和vue的computed差不多； mutations：提交状态修改。也就是set、get中的set，这是vuex中唯一修改state的方式，但不支持异步操作。第一个参数默认是state。外部调用方式： store.commit('SET_AGE', 18)。和vue中的methods类似。 actions：和mutations类似。不过actions支持异步操作。第一个参数默认是和store具有相同参数属性的对象。外部调用方式：store.dispatch('nameAsyn')。 modules：store的子模块，内容就相当于是store的一个实例。调用方式和前面介绍的相似，只是要加上当前子模块名，如：store.a.getters.xxx()。 1.main.js中引入sotre组件。当在main.js文件中引入soter。则在全局都可以使用。this.$soter.（组件在main.js中注册，全局都可以使用。） 2

vue 源码 运行顺序 initMixin 挂载 vue.prototype._init 原型方法 再该方法内初始化了 vue 的相关方法如： vm._self = vm /* 初始化生命周期 */ initLifecycle ( vm ) /* 初始化事件 */ initEvents ( vm ) /* 初始化 render*/ initRender ( vm ) /* 调用 beforeCreate 钩子函数并且触发 beforeCreate 钩子事件 */ callHook ( vm , 'beforeCreate' ) initInjections ( vm ) // resolve injections before data/props /* 初始化 props 、 methods 、 data 、 computed 与 watch*/ initState ( vm ) initProvide ( vm ) // resolve provide after data/props /* 调用 created 钩子函数并且触发 created 钩子事件 */ callHook ( vm , 'created' ) vm 即当前 this 作用域指针 Props normalizeProps 数组的方式传 props 仅支持 string props: [‘ a ’, ‘ b

1.安装 npm i vue-preview -S 2.如果使用vue-cli生成的项目，需要修改webpack.base.conf.js文件中的loaders，添加一个loader { test:/vue-preview.src.*?js$/, loader:'babel' } 3.导入：import VuePreview from 'vue-preview' 使用： Vue.use(VuePreview) <div class="thumbs"> <img class="preview-img" v-for="(item, index) in list" :src="item.src" height="100" @click="$preview.open(index, list)" :key="item.src"> </div> 注意：img标签上的class="preview-img" 不能去掉，图片要设置宽和高 来源： https://www.cnblogs.com/huanhuan55/p/9741945.html

1.安装 webpack 和vue-cli 模块: npm install webpack -g --registry=https://registry.npm.taobao.org npm install vue-cli -g --registry=https://registry.npm.taobao.orgnpm install vue -g --registry=https://registry.npm.taobao.org或cnpm install --global vue-cli --registry=https://registry.npm.taobao.orgcnpm install --global vue --registry=https://registry.npm.taobao.org 2.进入到新建项目的目录里面执行以下命令新建项目: vue init webpack webpack_template　 3.然后进入到使用cd 命令进入到新建的webpack_template目录下面安装package.json中的模块 cnpm install --registry=https://registry.npm.taobao.org 4.然后执行命令看是否正常运行: npm run dev 5.使用WebStrom打开webpack_template项目: 6

http://lbsyun.baidu.com/ 这是申请访问应用（ak）的网站，就是百度地图的开放平台,需要先注册加入百度开发者。 进入 JavaScript API 点击账号和获取密钥，后面有详细步骤，大家应该都有百度账号，然后申请成为百度开发者， 这里正常填写 会给你发送邮件在邮件里激活一下直接点击跳转页面。 正常填写，最底下白名单填一个 * 即可。 成功后在控制台可以看到自己的AK。 剩下的就是代码端的操作了 安装百度地图的插件（项目路径cmd）。 npm install vue-baidu-map 在自己的main.js文件里加上以下内容, AK码填写自己的. import BaiduMap from 'vue-baidu-map' Vue.use(BaiduMap, { ak: 'GpR5245ss5********RRRRVl9' }); 在页面加入以下代码即可 < template > < div > < baidu-map class="map" :center="map.center" :zoom="map.zoom" @ready="handler"> <!--缩放--> < bm-navigation anchor="BMAP_ANCHOR_TOP_LEFT"></ bm-navigation > <!--定位--> < bm-geolocation

使用'xlsx、'file-saver'。 import XLSX from 'xlsx'; import {saveAs} from 'file-saver'; import moment from 'moment'; export function exportData(data: any[], header: any[], fileName: string) { const wb = XLSX.utils.book_new(); const ws = XLSX.utils.json_to_sheet(data, {header, skipHeader: true}); XLSX.utils.book_append_sheet(wb, ws, 'Sheet 1'); /* bookType can be any supported output type */ const wopts: any = {bookType: 'xlsx', bookSST: false, type: 'array'}; const wbout = XLSX.write(wb, wopts); const ts = moment().format('YYYYMMDDHHmmss'); /* the saveAs call downloads a file on the local machine */

接上篇 https://www.cnblogs.com/chenyingying0/p/12623653.html 下拉刷新 下拉刷新--变化提示文字 base/scroll/index.vue <template> <!-- wiper会实例化构造函数，生成swiper实例 --> <!-- ref="swiper"能够获取到这个swiper实例 --> <swiper :options="swiperOption" ref='swiper'> <div class="mine-scroll-pull-down" v-if="pullDown"> <!-- ref="pullDownLoading" -- 获取下拉的loading --> <me-loading :text="pullDownText" inline ref="pullDownLoading" /> </div> <swiper-slide> <slot></slot> </swiper-slide> <div class="swiper-scrollbar" v-if="scrollbar" slot="scrollbar"></div> </swiper> </template> <script> // 组件首字母大写，否则会报错 import {Swiper,SwiperSlide} from 'vue

接上篇 https://www.cnblogs.com/chenyingying0/p/12635080.html 上拉加载更多 base/scroll/index.vue <template> <!-- wiper会实例化构造函数，生成swiper实例 --> <!-- ref="swiper"能够获取到这个swiper实例 --> <swiper :options="swiperOption" ref='swiper'> <div class="mine-scroll-pull-down" v-if="pullDown"> <!-- ref="pullDownLoading" -- 获取下拉的loading --> <me-loading :text="pullDownText" inline ref="pullDownLoading" /> </div> <swiper-slide> <slot></slot> </swiper-slide> <div class="mine-scroll-pull-up" v-if="pullUp"> <!-- ref="pullUpLoading" -- 获取上拉的loading --> <me-loading :text="pullUpText" inline ref="pullUpLoading" /> </div> <div