vue 学习笔记 2016-8-17

标签：

终于踏上vue.js的学习之旅，想想就好激动，今天正式开始使用，总结一下今天遇到的种种问题。

1. vuex 状态管理架构

1.1 核心概念

store：容器，包含了state 和 mutations 两个属性。

state：状态，通过 store.state 来读取 state 对象

mutations：变更，通过 dispatch 某 mutation 的名字来触发状态变更

actions：动作，把 action 暴露到组件的方法中，用于分发 mutations 的函数

getter：通过在 vuex.getters 选项里定义的 getter 方法来读取状态

1.2 数据流

1)用户在组件中的操作触发 action 调用；

比如，用户点击，输入，或他什么操作，绑定action即可。

2)Actions 通过分发 mutations 来修改 store 实例的状态；

action会dispatch mutations 来改变store的state的内容。

3)Store 实例的状态变化反过来又通过 getters 被组件获知。

在通过getters将改变的内容反映到相应的组件上去。

2.vue 列表渲染

vue可以使用v-for指令基于一个数组渲染一个列表，然而，我想要渲染一个双层的数组列表

<div :gutter="0" v-for="days in dayArr">
    <p class="order-time">{{days.day}}</p>
    <p :gutter="0" v-for="order in days.order" track-by="$index">
      <span>{{order.name}}</span>
      <span>{{order.title}}</span>
      <span>{{order.price}}</span>
      <span>{{order.address}}</span>
    </p>
</div>

在第二层里 in 要根据第一层的结果来写。

3.inline-block

以前也经常遇到两个div变成inline-block的情况，父容器设置line-height，div设置vertical-align就搞定了。然而，vue里出现了和原生一样的问题，inline-block之间有个间距，只好依然给父容器设置font-size: 0 来解决。

除此之外，还有许多别的方法，参考去除inline-block元素间间距的N种方法--张鑫旭。

4.array.map

参考例子：将数组中的单词转换成对应的复数形式.写下了下面这样的代码

var dailyOrder=[{day:1,times:2,hours:4},{day:2,times:4,hours:6}]
var newArr = []
var groupDataByDay = dailyOrder => {
  if (newArr.length > 0) {
    if (newArr[(newArr.length - 1)].day === dailyOrder.day) {
      newArr[(newArr.length - 1)].order.push(dailyOrder)
    } else {
      newArr.push({
        day: dailyOrder.day,
        order: [dailyOrder]
      })
    }
  } else {
    newArr.push({
      day: dailyOrder.day,
      order: [dailyOrder]
    })
  }
  return newArr
}
console.log(dailyOrder.map(groupDataByDay));

然而得到的并不是我想要的

[Array[2], Array[2]]

[[{
    day: 1,
    order: [{
        day: 1,
        hours: 4,
        times: 2
    }]
},
{
    day: 2,
    order: [{
        day: 2,
        hours: 6,
        times: 4
    }]
}], [{
    day: 1,
    order: [{
        day: 1,
        hours: 4,
        times: 2
    }]
},
{
    day: 2,
    order: [{
        day: 2,
        hours: 6,
        times: 4
    }]
}]]

一番改造后

var dailyOrder=[{day:1,times:2,hours:4},{day:2,times:4,hours:6}]
var newArr = []
var groupDataByDay = dailyOrder => {
  if (newArr.length > 0) {
    if (newArr[(newArr.length - 1)].day === dailyOrder.day) {
      newArr[(newArr.length - 1)].order.push(dailyOrder)
    } else {
      newArr.push({
        day: dailyOrder.day,
        order: [dailyOrder]
      })
    }
  } else {
    newArr.push({
      day: dailyOrder.day,
      order: [dailyOrder]
    })
  }
}
dailyOrder.map(groupDataByDay);
console.log(newArr);

总算得到了我想要的

[Object, Object]

[{
    day: 1,
    order: [{
        day: 1,
        hours: 4,
        times: 2
    }]
},
{
    day: 2,
    order: [{
        day: 2,
        hours: 6,
        times: 4
    }]
}]

恩，就这样子结束了~

vue 学习笔记 2016-8-17

标签：

原文地址：http://www.cnblogs.com/jun3101s/p/5781721.html