Vue.js 注意事项

1.传递参数时,第二个参数要与前面的逗号有一个空格

window.localStorage.setItem(STORAGE_KEY, JSON.stringify(items))

2. 注意空格

正确格式

错误格式

3. 父向子组件传参

父组件中

//模板中


//Js

子组件中

4. 子向父组件传参

儿子告诉父亲 需要使用vm.$emit 和vm.$on 触发事件和监听事件

子组件中

父组件中

除了这个方法外,还有其他方法,详见Vue.js官网

• 自定义组件指定属性数据类型

export default {
  props: {
    slides: {
      type: Array,     //数组
      default: []      //默认值
    }
  },

• 在加载完毕执行某个方法

  mounted () {
    this.loadxxx()
  }

• @mouseover="xxxx" 鼠标进入(执行某个事件), @mouseout="xxxx" 鼠标移出(执行某个事件);
• transiotions动画对left和right等无效,要想实现动画效果,只能用x轴了;
• slot 插槽
• this.abc = false 等同于 this['abc'] = false
• 父组件style不添加scoped,这样他的子组件可以共用他的样式,也就是说,可以把子组件的样式,写在父组件中.

• & 代表父元素

• 1像素边框的实现
  在pc端可以通过下面的设置,来实现,

border-bottom: 1px solid rgba(7,17,27,0.1)

pc端1像素边框

但是,在移动端,由于dpi的概念,它的物理像素是设备像素的2倍(iPhone6手机),如果用上面的方法,获取到的边框线比1像素要粗!

• 引入stylus

• 一行显示 ,显示不全显示省略号

      /*设置一行显示 显示不全显示...*/
      white-space: nowrap
      overflow: hidden
      /*显示省略号*/
      text-overflow: ellipsis

• 模糊高斯效果
  1.让自身边模糊

filter: blur(10px)

让自身边模糊

2. 背景变模糊(仅仅在iOS上有效果)

backdrop-filter: blur(10px)

WechatIMG5.jpeg

• 在前端开发中,只要设置了display: flex,它就变成了水平布局.
• CSS中,上下margin是有重叠效果的,只显示一个margin的高度.
• 在chrome浏览器中,最低只能显示12px的字体,小于12px的字体按12px显示.
• CSS书写规则:
  影响布局的写在前面
  影响样式的写在后面
• img标签的宽高建议写在标签里面
  img width="57" height="57" :src="food.icon"
• Vue.js 1.0版本获取dom对象使用v-el,(Vue.js 1.0版本中v-el已经废除)

//v-el:food-wraper 注意: 用中划线连接 不能使用驼峰

调用的时候,使用驼峰

this.menuScroll = new BScroll(this.$els.foodWraper);

• 获取dom节点的高度clientHeight;

item.clientHeight;

• Math.abs()取正值 ; Math.round() 四舍五入成整数
• 参数传递@click="selectMenu($index,$event)"把index和点击事件event传递到下面的函数中

    ......

• 设置圆

border-radius: 50%

• 设置文字居中,如果把text-align: center设在当前元素上没效果,试试设置在它的父元素上看看!!!

text-align: center

• 在Vue里,如果你的props是数组或者Object, 那么它的 default 就是一个函数, 并return一个默认的值

    props: {
      selectFoods: {
        type: Array,
        /* 在Vue里,如果你的props是数组或者Object, 那么它的 default 就是一个函数, 并return一个默认的值*/
        default() {
          return [];
        }
      },
      deliveryPrice: {
        type: Number,
        default: 0
      },
      minPrice: {
        type: Number,
        default: 0
      }
    }

• forEach() 遍历

let total = 0;
this.selectFoods.forEach((food) => {
     total += food.price * food.count;
});

• 设置阴影

box-shadow: 0px 4px 8px 0 orange

购物车阴影

• 给对象添加新的属性(1)

/* 给对象新增属性 */
Vue.set(this.food, 'count', 1); // 给food对象新增了count属性,赋值为1

使用:

// 如果count的属性不存在,就新增count属性
 if (!this.food.count) {
    /* 给对象新增属性 */
    Vue.set(this.food, 'count', 1);
} else {
    this.food.count++;
}

• 给对象添加新的属性(2)

this.seller = Object.assign({}, this.seller, response.data);

• 获取dom使用v-el

• 获取子组件使用v-ref

• 主动触发浏览器重绘 let rf = el.offsetHeight;
• 组件的 私有方法 , 公有方法

私有方法,不允许外部调用的,书写规范

 methods: {
/* 如果不允许被外部调用的话,在方法前加 "_" 下划线 */
  _show() {
        this.showFlag = true;
      }
}

公有方法,允许外部调用

methods: {
   /* 该方法可以被外部调用 */
  show() {
     this.showFlag = true;
  }
}

• 设置图片宽高相等

html部分

CSS部分 => 黑魔法 设置宽高相等 当设置padding-top: 100%时,它是相对于盒子的宽度计算的

宽高相等的图片

----------------------------以下已经废掉----------------------------

• 子组件向父组件派发事件儿this.$dispatch('ratingtype.select', type);

    methods: {
      select(type, event) {
        if (!event._constructed) {
          return;
        }
        this.selectType = type;
        /* 向父组件派发事件 */
        this.$dispatch('ratingtype.select', type);
      }
    }

在父组件events方法中,监听这个事件

    events: {
      'ratingtype.select'(type) {
        this.selectType = type;
        /* 异步刷新UI */
        this.$nextTick(() => {
          this.scroll.refresh();
        });
      }
    }

------------------------------以上已经废掉-------------------------

• 数组过滤 filter()

computed: {
      /* 计算出推荐的数组 */
      positives() {
        return this.ratings.filter((rating) => {
          return rating.rateType === POSITIVE;
        });
      },
      /* 计算出吐槽的数组 */
      negatives() {
        return this.ratings.filter((rating) => {
          return rating.rateType === NEGATIVE;
        });
      }
    },

• :class如果绑定的内容是对象的话,可以为多个对象!

如下:

• 设置圆:border-radius: 50%

border-radius: 50%

• 不同结构(标签)水平布局,css需要设置vertical-align: top,
  相同结构(标签)水平布局,不需要设置。
• 给特殊尺寸屏幕做适配 @media only screen and (max-width: 320px)

.overview-left
   flex: 0 0 137px
   padding: 6px 0
   width: 137px
   border-right: 1px solid rgba(7, 17, 27, 0.1)
   text-align: center
   /* 适配小屏幕 320px 手机 */
   @media only screen and (max-width: 320px)
      flex: 0 0 120px
      width: 120px

-img标签src前面一定要交“ : ”,不然报错!!!

![](rating.avatarxcz)

• 年月日

html中

   {{rating.rateTime | formatDate}}

js中
先引用进来

import {formatDate} from 'common/js/date';

filters: {
   formatDate(time) {
     let date = new Date(time);
     return formatDate(date, 'yyyy-MM-dd hh:mm');
   }
}

时间处理

• 对象也可以是一个函数

data() {
      return {
        favorite: (() => {
          return loadFromLocal(this.seller.id, 'favorite', false); // 他的返回值是 true or false;
        })()
      };
}

• router-view的keep-alive属性,保证该视图只渲染一次,来回切换不重复渲染

router-view的keep-alive属性