Life cycle of Vue
- beforeCreat
- created
- beforeCount
- counted
- beforeUpdate
- updated
- beforeDestroy
- destroyed
CSS horizontal and vertical centering method (inline elements?)
Reference CSS horizontal center + vertical center + horizontal / vertical center method summary , the summary of this article is very clear.
First, block level elements:
1. Horizontal center
(1)margin: 0 auto;， The premise of this method is that you must add width to the element.
(2) The child element is set as an inline block, and the text of the parent element is centered text align: Center;
(3) Positioning: the child has no parent phase, and the child element is set to left:50%;transform:translateX(-50%)
Left is to center the leftmost line of the child element horizontally, and translateX moves half of itself to the left, which completes the centering of the whole child element.
(4) Positioning: the child has no parent phase, and the child element is set to left: 50%; Margin left: - half of its own width px;, This method must also set the width of the child element. If margin is set as a percentage value, it is calculated based on the width of its parent element by default, not its own width.
(5) Flex layout: add display: flex to the parent element to be centered; justify-content: center;
2. Vertical center
(1) Positioning: the son has no father. Sub element: top: 50%; transform: translateY(-50%);
(2) flex layout, parent element: display: flex; align-items: center;
Second, inline elements:
1. Horizontal center
(1) Parent element setting: text align: Center;, Of course, the parent must be a block level element or an inline block.
2. Vertical center
(1) In line element (single line): the line height is equal to the box height line height
(2) In row element (multiple rows): table layout, which makes the parent element become the cell of the table, that is, the parent element sets display:table cell; And vertical align: middle;, The child elements are centered vertically. Or, the parent element display:table;, Child element display:table cell; vertical-align: middle;
Again, center horizontally and vertically:
(1) Positioning: the son has no father. Child element: top: 0; right: 0; bottom: 0; left: 0; margin: auto;
(2) Positioning: the son has no father. Sub element: left: 50%; top: 50%; Margin left: - half of the element width px; Margin top: - half of the element height px;
(3) Positioning: the son has no father. Sub element: left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); The advantage of using transform is that you can not know the width and height of child elements.
(4) flex layout: parent element: justify content: Center; align-items: center;
Communication between Vue components
Parent child component
Parent to child: props transfers data and v-bind binds data
<body>
<div id="app">
<cpn v-bind:cmovies="movies" :cmessage='message'></cpn>
</div>
<template id="cpn">
<div>
{{cmovies}}
{{cmessage}}
</div>
</template>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//The parent pass child props props are written in the child component
//Subcomponents
const cpn = {
template: '#cpn',
//props: ['cmovies', 'cmessage'],//props has many data types
props: {
//cmovies:Array,
//cmessage:String / / must be of type string
cmessage: {
type: String,
default: 'aaa', //If the default value is not transferred to cmessage, the default value will be displayed
required: true //true must pass this value, otherwise an error will be reported
},
//When the type is an object or array, the default value must be a function
cmovies: {
type: Array,
default () {
return []
}
}
},
data() {
return {} //The data of subcomponents must be a function, otherwise the data of all subcomponents are the same, and they need to have their own data
}
}
//Here, the root component is equivalent to the parent component
const app = new Vue({
el: '#app',
data: {
message: 'How do you do',
movies: ['dominant sea power', 'One Piece', 'Haier brothers ']
},
components: {
//Attribute enhanced writing
cpn
}
})
</script>
</body>
Note: when passing parameters to props, the name must be in lowercase letters, not named by hump. Because the attribute name of v-bind should be lowercase when binding.
Child to parent: custom event $emit
1. In the subcomponent, trigger the event through $emit()
2. In the parent component, listen for sub component events through v-on
<div id="app">
<cpn @itemclick="cpnClick"></cpn>
</div>
<template id="cpn">
<div>
<button v-for="item in categories" @click="btnClick(item.name)">{{item.name}}</button>
</div>
</template>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//Subcomponents
const cpn = {
template: '#cpn',
data() {
return {
categories: [{
id: 'aaa',
name: 'Popular recommendation'
},
{
id: 'bbb',
name: 'Mobile digital'
},
{
id: 'ccc',
name: 'Household Electric Appliances'
}
]
}
},
methods: {
btnClick(item) {
//Launch event
this.$emit('itemclick', item)
}
}
}
//Parent component
const app = new Vue({
el: '#app',
components: {
cpn
},
methods: {
cpnClick(item) {
console.log('itemclick', item);
}
}
})
</script>
Sibling component
No answer | 'O | | | | |'~~
Vuex,EventBus
Scope slot
The parent component replaces the label of the slot, but the content is provided by the child component. That is, the data of the child component is transferred to the parent component.
<body>
<div id="app">
<cpn>
<!-- If you don't want to li Display in a way -->
<!-- The parent component cannot be accessed directly pLanguage-->
<template slot-scope="slot">
<!-- with - Show in different ways -->
<span v-for="item in slot.data">{{item}} -</span>
</template>
</cpn>
<cpn></cpn>
<cpn @show='fun'>
{{language}}
</cpn>
</div>
<template id="cpn">
<div>
<slot v-bind:data='pLanguage'>
<ul>
<li v-for="item in pLanguage">{{item}}</li>
</ul>
</slot>
</div>
</template>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
const cpn={
template: '#cpn',
data() {
return {
pLanguage: ['JS', 'c++', 'c language', 'Java']
}
},
created(){
this.emit()
},
methods:{
emit(){
this.$emit('show',this.pLanguage);
}
}
}
const app = new Vue({
el: '#app',
data(){
return{
isShow: true,
language:[]
}
},
methods:{
fun(item){
this.language=item
}
},
components: {
cpn
}
})
</script>
</body>
The first cpn uses the method of scope slot to make the parent component access the data of the child component and change the display mode. The second cpn is the default display. There is no way to transfer the data, that is, the child component accesses the data within the scope of the child component. The third cpn uses the method of $emit to make the child component transfer the data to the parent component, which is only displayed in the form of array.
es6 syntax
- Arrow function
- const defines constants and let defines variables
- class concept
- Destructuring assignment
- Traversal mode of for in and for of
- Promise
- . . . . . .