By

浏览器支持IE9+、FF4.0+、Chrome19+、Safari6+
calc() 支持四则运算 + - * /

1
2
3
4
5
6
7
8
9
10
.box{
    width: calc(100% - 20px);
}
/* 或者 */
.box{
    width: 90%; /* 写给不支持calc()的浏览器 */
    widht: calc(100% - (10px + 5px) * 2);
    widht: -moz-calc(100% - (10px + 5px) * 2);
    widht: -webkit-calc(100% - (10px + 5px) * 2);
}

学习笔记，根据自己理解简单整理的，不对的地方望指正，非常感谢。

By

1.根据列表元素索引来控制

1
2
3
4
5
<template v-for="(item, index) in items">
    <div  @click="isShow(index)">
        <div v-show="activeIndex === index"></div>
    </div>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
export default {
    data: function() {
        return {
            activeIndex: -1 // 初始化索引
        };
    },
    methods: {
        isShowInfo(index){
            this.activeIndex = index
        }
    }
}

2.将列表每一项创建为单独的一个组件，然后每个组件都有自己独立的标识

1
2
3
4
5
6
7
8
9
10
11
<!--父组件-->
<template v-for="(item, index) in items">
    <child></child>
</template>
<!--子组件-->
<template v-for="(item, index) in items">
    <div  @click="isShow">
        <div v-show="active"></div>
    </div>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
export default{
    data() {
        return {
            isActive: false
        }
    },
    methods: {
        isShow() {
            this.isActive = !this.isActive;
        }
    }
}

学习笔记，根据自己理解简单整理的，不对的地方望指正，非常感谢。

By

解决办法：

  1. 给动画的元素设置层级；
  2. 将元素的高度设置为偶数；
  3. 位置设固定值；
  4. 将transform: translate(-50%, -50%)中的y轴单位改成px；
  5. 改成transform: translate(-50%, -52%)（如果52%不行则从51%每个百分比尝试）；
  6. transform: translate3d(0, -2px, 0)。

学习笔记，根据自己理解简单整理的，不对的地方望指正，非常感谢。

By 

1
2
3
4
5
6
7
8
9
<transition name="carousel-fade">
    <div class="carousel-li"
        v-for="(item, index) in banners" :key="index"
        v-show="index === pageNumber">
        <a :href="item.sourceUrl">
            <img :src="item.imgUrl" alt="">
        </a>
    </div>
</transition>
1
2
3
4
5
6
.carousel-fade-enter-active, .carousel-fade-leave-active{
    transition: all 1.3s ease;
}
.carousel-fade-enter, .carousel-fade-leave-to{
    opacity: 0;
}

vue报错: [Vue warn]: can only be used on a single element. Use for lists.

解决办法：
v-show改为v-if,v-show:会渲染全部MOD并通过样式隐藏，v-if:不会渲染全部，只会渲染满足条件的MOD。

学习笔记，根据自己理解简单整理的，不对的地方望指正，非常感谢。

By

1.路由传值

a.在 main.js routes 中配置路由匹配规则

1
2
3
4
5
6
  routes: [
  {
    path: '/xxx/:id',
    component: xxx
  }
]

b.在点击跳转的 router-link 标签中写上路径和参数

1
<router-link :to="'/xxx/' + this.id"></router-link>

c.在跳转之后的页面，使用 $route.params 获取值

1
2
3
4
5
export default {
  created () {
    console.log(this.$route.params.id)
  }
}

2.父组件向子组件传值

a.父组件在子组件占位符上，以属性名=参数的形式写上要传递的值

1
<subComp :fatherToSon:"this.value"></subComp>

b.子组件在 props 中写上子组件占位符的属性名

1
2
3
export default {
  props: ['fatherToSon']
}

c.子组件使用 this.属性名 获取值

1
2
3
4
5
6
export default {
  created () {
    console.log(this.fatherToSon)
  },
  props: ['fatherToSon']
}

3.子组件向父组件传值

a.子组件中定义触发事件，写上自定义函数

1
<button @click="sonToFather">子组件向父组件传值</button>

b.子组件在自定义函数中使用 $emit 触发父组件函数

1
2
3
4
5
6
7
8
9
10
11
12
export default {
  data () {
    return {
      son: 222
    }
  },
  methods: {
    sonToFather () {
      this.$emit('getSonValue', this.son)
    }
  }
}

c.父组件在子组件占位符上，使用 v-on 监听子组件使用 $emit 触发的函数

1
<subComp @getSonValue="sonValue"></subCome>

d.父组件自定义函数中通过参数传递获取值

1
2
3
4
5
6
7
export default {
  methods: {
    sonValue (value) {
      console.log(value)
    }
  }
}

4.非父子组件传值

a.新建一个独立公共的vue实例

1
2
import Vue from 'vue'
export default new Vue()

b.发送方定义触发条件，写上自定义函数

1
<button @click="notFatherAndSon">非父子组件传值</button>

c.发送方导入公共vue实例，并使用 $emit 触发父组件函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import bus from '../common/common.js'
export default {
  data () {
    return {
      msg: '你好Vue'
    }
  },
  methods: {
    notFatherAndSon () {
      bus.$emit('getNotFatherAndSon', this.msg)
    }
  }
}

d.接收方导入公共vue实例，并使用 $on 监听发送发使用 $emit 触发的函数

1
2
3
4
5
import bus from '../common/common.js'
bus.$on('getNotFatherAndSon', (value) => {
  console.log(value)
})

学习笔记，根据自己理解简单整理的，不对的地方望指正，非常感谢。

By

以豆瓣API为例，情况是这样的，在router-link的to属性中链接豆瓣网址，点击之后，会在地址栏中本地之后拼接豆瓣网址，导致无法访问

1
2
3
4
5
6
7
8
9
10
<ul>
    <li v-for="item in theaters" :key="item.id">
        <div>{{item.title}}</div>
        <router-link :to="item.alt">
            <img :src="item.images.small" alt="">
        </router-link>
    </li>
</ul>
<!-- 地址栏显示： http://localhost:6060/#/https://movie.douban.com/subject/20495023/ -->
1
2
3
4
5
6
7
8
9
10
<ul>
    <li v-for="item in theaters" :key="item.id">
        <div>{{item.title}}</div>
        <a :href="item.alt">
            <img :src="item.images.small" alt="">
        </a>
    </li>
</ul>
<!-- 地址栏显示： https://movie.douban.com/subject/20495023/ -->

学习笔记，根据自己理解简单整理的，不对的地方望指正，非常感谢。

By

一般情况下，路由跳转之前不会触发函数

1
<router-link :to="'/click'" @click="getClick">点击</router-link>
1
2
3
4
5
6
7
export default {
    methods: {
        getClick () {  // getClick 函数不会被触发
            console.log('跳转之前打印')
        }
    }
}

解决方式有两种

方式一: 在事件后面添加修饰符 native

1
<router-link :to="'/click'" @click.native="getClick">点击</router-link>

方式二：使用编程式导航 router.push

1
2
3
4
5
6
7
8
export default {
    methods: {
        getClick () {
            console.log('跳转之前打印')
            this.$router.push({path: '/click'})
        }
    }
}

学习笔记，根据自己理解简单整理的，不对的地方望指正，非常感谢。

By 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
// 判断滑动方向
var startx, starty;
// 3、使用Math.atan2来计算起点与终点形成的直线角度。
// 获得角度
function getAngle(angx, angy) {
    return Math.atan2(angy, angx) * 180 / Math.PI; // Math.atan2() 获取从 x 轴到点 (x,y) 的角度;  Math.PI 圆周率
};
// 2、方向的判断：以起点做平面坐标系，与终点连线做直线，直线与x正半轴计算角度；我们以45度角为方向分割线，如：只要滑动角度大于等于45度且小于135度，则判断它方向为向上滑。
// 根据起点终点返回方向 1向上 2向下 3向左 4向右 0未滑动
function getDirection(startx, starty, endx, endy) {
    var angx = endx - startx;
    var angy = endy - starty;
    var result = 0;
// 如果滑动距离太短
    if (Math.abs(angx) < 2 && Math.abs(angy) < 2) { // 	Math.abs() 获取数的绝对值。
        return result;
    }
    var angle = getAngle(angx, angy);
    if (angle >= -135 && angle <= -45) {
        result = 1;
    } else if (angle > 45 && angle < 135) {
        result = 2;
    } else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {
        result = 3;
    } else if (angle >= -45 && angle <= 45) {
        result = 4;
    }
    return result;
}
// 1、手指在屏幕上滑动时，使用H5中的touchstart滑动开始事件和touchmove滑动中事件，获取开始时的坐标和滑动过程中的坐标；
// 手指接触屏幕
document.addEventListener("touchstart", function(e) {
    startx = e.touches[0].pageX;
    starty = e.touches[0].pageY;
}, false);
// 手指在屏幕上移动
document.addEventListener("touchmove", function(e) {
    var endx, endy;
    endx = e.changedTouches[0].pageX;
    endy = e.changedTouches[0].pageY;
    var direction = getDirection(startx, starty, endx, endy);
    setTimeout(function(){
        switch (direction) {
            case 0:
                // alert("未滑动！");
                break;
            case 1:
                // alert("向上！")
                break;
            case 2:
                // alert("向下！")
                break;
            case 3:
                // alert("向左！")
                break;
            case 4:
                // alert("向右！")
                break;
            default:
        }
    },50)
}, false);

更多详情，请参考H5案例分享：移动端touch事件判断滑屏手势的方向

By

说一个最近移动端项目中遇到的问题，在一栏通过七个圆形按钮选择星期，在iPhone设备下点击其中一个按钮时，会出现一个半透明的背景。

解决办法 -webkit-tap-highlight-color

-webkit-tap-highlight-color是css3的新属性，这个属性只用于iOS (iPhone和iPad)。当你点击一个链接或者通过Javascript定义的可点击元素的时候，它就会出现一个半透明的灰色背景。要重设这个表现，你可以设置-webkit-tap-highlight-color为任何颜色。想要禁用这个高亮，设置颜色的alpha值为0即可。

如：

1
2
3
4
html,
body{
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

这篇文章带你了解跟多css3的冷门属性，CSS3那些不为人知的高级属性

By

最近在项目开发中，遇到一个问题，当点击form标签包裹的button按钮后，就同步提交并刷新了，只能在最后return false来解决的，这岂不是麻烦的很！于是去度娘上查了一下，发现是type属性在作祟。

我们先来看看type属性的取值

1. type="submit"  button 是提交按钮（是 IE 之外的所有浏览器的默认值）
2. type="button"  button 是可点击的按钮（IE 的默认值）
3. type="reset"  button 是重置按钮（清除表单数据）

自己总结了一下

1.type属性设置为对应的值，点击会触发对应的事件；
2.没有设置type属性，在IE浏览器中，默认为button一个单纯的按钮；
3.没有设置type属性，除开IE浏览器之外的其他浏览器中，默认为submit，会触发提交事件。