Vue Learning Note 2016-8-17

Finally embark on the study of Vue.js, think about the excitement, today formally began to use, summed up the various problems encountered today.

1. VUEX State Management Architecture 1.1 core concepts

Store: A container that contains state and mutations two properties.

State: States, reading the status object through Store.state

Mutations: Change to trigger a state change by dispatch a mutation name

Actions: Actions that expose an action to a component's methods for distributing mutations functions

Getter: Read status by getter method defined in the Vuex.getters option

1.2 Data Flow

1) User actions in the component trigger action call;

For example, the user clicks, enters, or does what he does, binds the action.

2) Actions to modify the status of the store instance by distributing mutations;

The action will dispatch mutations to change the contents of the store's state.

3) The status change of the Store instance is then learned through the getters by the component.

The content of the change is reflected in the corresponding component by getters.

2.vue List Rendering

Vue can use the V-FOR directive to render a list based on an array, however, I want to render a double-decker array list

<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 the second layer in order to write according to the results of the first layer.

3.inline-block

In the past, often encountered two div into Inline-block, the parent container set LINE-HEIGHT,DIV settings vertical-align will be done. However, there is a problem with the original in Vue, there is a gap between the inline-block, but still to the parent container set font-size:0 to solve.

In addition, there are many other methods, referring to the removal of inline-block element spacing between the N method-Zhang Xin Asahi.

4.array.map

Reference example: Converts a word in an array to a corresponding plural form. Write down the following code

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));

But what I get is not what I want.

[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
}]
}]]

After the transformation

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);

I finally got what I wanted.

[Object, Object]

[{
Day:1,
Order: [{
Day:1,
Hours:4,
Times:2
}]
},
{
Day:2,
Order: [{
Day:2,
Hours:6,
Times:4
}]
}]

Well, that's the end of it ~

Vue Learning Note 2016-8-17