vue2 + vuex + vue-router + webpack + ES6/7 + fetch + sass + flex + svg
npm run dev 访问 http://localhost:9090
npm run build 生成的dist文件夹放在服务器即可正常访问
<transition name="fade" mode="out-in">
<router-view></router-view>
</transition>
<transition name="fade"></transition>
.fade-enter-active, .fade-leave-active {
transition: all .3s;
transform: translateY(0);
}
.fade-enter, .fade-leave-active {
opacity: 0;
transform: translateY(-100%);
}@click="$router.go(-1)"
this.$router.go(-1);
this.$router.push({path:'/delial', query:{id}}) http://localhost:9090/#/delial?id=22
this.$route.query.id; 获取从页面传递过来的参数 22
this.$router.push({path: '/search/' + geohash}); http://localhost:9090/#/search/wtw3sm0q087
this.geohash = this.$route.params.geohash; 获取从页面传递过来的参数,非query wtw3sm0q087
<router-link :to="'/search/' + geohash" slot="search"></router-link>
<router-link to="/home" slot="msite-title"></router-link>
<router-link :to="userInfo? '/profile':'/login'"></router-link><ul class="citylistul clear">
<router-link tag="li" v-for="item in hotcity" :to="'/city/' + item.id" :key="item.id">
{{item.name}}
</router-link>
</ul>
<ul>
<li v-for="(value, key, index) in sortgroupcity" :key="key">
<h4 class="city_title">{{key}}
<span v-if="index === 0">（按字母排序）</span>
</h4>
<ul>
<router-link tag="li" v-for="item in value" :to="'/city/' + item.id" :key="item.id">
{{item.name}}
</router-link>
</ul>
</li>
</ul>console.log(String.fromCharCode(65)) 'A'this.cityid = this.$route.params.cityid;@click.prevent="" @click.prevent
@click.stop="" @click.stop<span :class="{right_phone_number:rightPhoneNumber}"></span>async getVerifyCode(){
if (this.rightPhoneNumber) {
this.computedTime = 60;
this.timer = setInterval(() => {
this.computedTime --;
if (this.computedTime == 0) {
clearInterval(this.timer)
}
}, 1000)
//判读用户是否存在
let exsis = await checkExsis(this.phoneNumber, 'mobile');
if (exsis.message) {
this.showAlert = true;
this.alertText = exsis.message;
return;
}else if(!exsis.is_exists) {
this.showAlert = true;
this.alertText = '您输入的手机号尚未绑定';
return;
}
//发送短信验证码
let res = await mobileCode(this.phoneNumber);
if (res.message) {
this.showAlert = true;
this.alertText = res.message;
return;
}
this.validate_token = res.validate_token;
}
}父组件
<alert-tip v-if="showAlert" :showHide="showAlert" @closeTip="closeTip" :alertText="alertText"></alert-tip>
methods: {
closeTip(){
this.showAlert = false;
}
}
子组件
<div class="confrim" @click="closeTip">确认</div>
methods: {
closeTip(){
this.$emit('closeTip')
}
}
父组件 当前引人alertTip组件中的触发this.$emit('closeTip')自定义事件
<alert-tip v-if="showAlert" @closeTip="showAlert = false" :alertText="alertText"></alert-tip>
methods: {
closeTip(){
this.$emit('closeTip')
}
}let res = [a, b, c, d, e, f, g, h];
let resLength = res.length;
console.log(res); // [a, b, c, d, e, f, g, h];
let resArr = res.concat([]); // 返回一个新的数组
let foodArr = [];
for (let i = 0, j = 0; i < resLength; i += 8, j++) {
foodArr[j] = resArr.splice(0, 8);
}
console.log(foodArr); // [[a, b, c, d], [e, f, g, h]];
this.foodTypes = foodArr;import 'src/plugins/swiper.min.js'
import 'src/style/swiper.min.css'
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- 如果需要滚动条 -->
<div class="swiper-scrollbar"></div>
</div>
//初始化swiper
new Swiper ('.swiper-container', {
direction: 'vertical',
loop: true,
// 如果需要分页器
pagination: '.swiper-pagination',
// 如果需要前进后退按钮
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
// 如果需要滚动条
scrollbar: '.swiper-scrollbar',
})
eg:
msiteFoodTypes(this.geohash).then(res => {
let resLength = res.length;
console.log(res); //[a, b, c, d, e, f, g, h];
let resArr = res.concat([]); // 返回一个新的数组
let foodArr = [];
for (let i = 0, j = 0; i < resLength; i += 8, j++) {
foodArr[j] = resArr.splice(0, 8);
}
console.log(foodArr); //[[a, b, c, d], [e, f, g, h]]
this.foodTypes = foodArr;
}).then(() => {
//初始化swiper
new Swiper ('.swiper-container', {
loop: true,
// 如果需要分页器
pagination: '.swiper-pagination',
// 如果需要前进后退按钮
// nextButton: '.swiper-button-next',
// prevButton: '.swiper-button-prev',
})
})<ul v-load-more="loaderMore">
</ul>
import {loadMore, getImgPath} from './mixin'
mixins: [loadMore, getImgPath]
mixin.js
export const loadMore = {
directives: {
'load-more': {
bind: (el, binding) => {
xxxxx
}
}
}
};
export const getImgPath = {
methods: {
getImgPath(path) {
xxxxx
}
}
}https://www.npmjs.com/package/better-scroll
<section id="scroll_section">
xxxxx
...
</section>
import BScroll from 'better-scroll'
//一般在请求获取到数据之后new BScroll
this.$nextTick(() => {
new BScroll('#scroll_section', {
deceleration: 0.001, //deceleration: 0.001 滚动动量减速越大越快，建议不大于0.01
bounce: true, //bounce: true 是否启用弹力动画效果，关掉可以加速
swipeTime: 1800, //swipeTime: 2500 swipe 持续时间
click: true, //click: true 是否启用click事件
});
})<form action="" v-on:submit.prevent>
xxx
...
<button @click.prevent="submitThing">确定</button>
</form><span>¥</span>
<span>{{String(item.amount).split('.')[0]}}</span>
<span>.</span>
<span>{{String(item.amount).split('.')[1]||0}}</span>methods: {
download(){
try {
let elemIF = document.createElement("iframe");
elemIF.src = 'http://static10.elemecdn.com/uploads/androidapp/eleme6_4_1476672934695.apk';
elemIF.style.display = "none";
document.body.appendChild(elemIF);
} catch (e) {
alert('下载失败')
}
}
}<section v-html="markdownText" class="markdown"></section>
import showdown from 'showdown'
computed: {
markdownText: function (){
//转换markDown格式
let converter = new showdown.Converter();
return converter.makeHtml(this.question.detail);
}
}const bar = ["a", "b", "c"];
Array.from(bar);
// ["a", "b", "c"]
Array.from('foo');
// ["f", "o", "o"]
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent