The meaning of instructions starting with v-
vue component
The files of vue subcomponents are globally effective by default:
①In a single-page application, all DOM elements of the component are presented based on the only index.html
②The style of each component can affect the elements in the entire html
So in this environment, style conflicts are prone to occur.
scoped and deep
① If scoped is added to the style in the component, the attributes of data-v-xxx will be automatically added to all elements of the component to prevent style conflicts between attributes.
② If you use scoped and want to add styles to child elements, something like: p[data-v-xxx] will appear. The effective approach should be
[data-v-xxx]p. Therefore, we need to add deep to the style.
/deep/.pp {
color: red;
font-size: 20px;
padding: 20px;
}
vue template compiler
The browser cannot recognize the vue file. The vue template compiler vue-template-compiler helps compile the vue file into js.
Component life cycle
The component is a template structure when it is defined. When we reference its tag, an instance of it will be created immediately.
The life cycle of a component is a phase of creation-run-destroy, which emphasizes a period of time. The life cycle function is provided by Vue's built-in function and will be executed automatically along with the life cycle.
① The earliest stage to complete rendering data props methods is created. At this time, a data request is initiated.
② The earliest completion of rendering the HTML structure to the browser is the mounted stage.
③ After the component creation phase ends, it will enter the component running phase.
④ The updated and beforeupdate stages are different from the previous ones and will only be executed when the data changes. Execution times 0-n times
data transfer
Parent components pass data to child components using custom properties.
Child components pass data to parent components using custom events.
To transfer data between sibling components, eventbus is required.
EventBus usage steps:
① Create eventBus.js module and share an instance object externally.
② On the sender side of the data, call the bus (instance object shared externally by eventbus).$emit('event name', 'data to be sent') method to trigger the custom event.
③ On the data receiver, call the bus.$on('event name', 'event handler') method to register a custom event.
EventBus.js file
import Vue from 'vue'
export default new Vue()
Left.vue statement
<script>
import bus from './EventBus'
export default {
data() {
return {
msg: 'Life is divided into two halves, generally in God's hands, that is fate; generally in one's own hands, that is desperate effort'
}
},
methods: {
clickEvt() {
bus.$emit("strEvt", this.msg)
}
}
}
</script>
Right.vue text
<script>
import bus from './EventBus'
export default {
data() {
return {
count: 0,
msg: ''
}
},
methods: {
addCount() {
this.count ++;
this.$emit("countEvt", this.count)
}
},
// Register the event in create. At this time, the data of the component has been created.
created() {
bus.$on('strEvt', (val)=> {
this.msg = val
})
}
}
</script>
Why not use this, because this in left.vue and right.vue point to different instances. The operations are not the same instance.
ref gets DOM element
Advantages of vue: mvvm, programmers do not need to operate dom, only need to maintain data. Therefore, it is not recommended to operate dom.
If you do not operate the dom, but want to get a reference to the dom. You can use ref in vue component
Assign a value to the ref attribute of the dom element that needs to be obtained, and then obtain the dom element through this.$refs.xxx.
<p ref="abb">{ { count }}</p>
abcon() {
//Change dom element style
this.$refs.abb.style.color="red"
console.log(this.$refs.abb)
}
If the ref attribute has the same name, it will be overwritten by the last one. Ref can also get instances of subcomponents.
$nextTick
The established this.$nextTick(cb) method will delay the execution of cb until after the DOM update cycle. In layman's terms, the callback function is executed after all the DOM components have been updated, in order to ensure that the function can operate the latest DOM elements.
Review Arrays
①
The performance of foreach is relatively poor. Once started, it cannot be stopped in the middle;
After some finds the selected item, you can terminate the loop by returning true fixed syntax.
arr.some((item, index) => {
if (item == '121') {
return true;
}
})
② every loop
As long as all the values are true, it returns true. If any one of the values is false, it returns false.
const res = arr.every(item=>item.status)
③ reduce accumulator
arr.filter(a=>a.status).reduce(('accumulated result', 'current loop value') => {}, initial value)
const res = arr.filter(a=>a.status).reduce((awt ,item) => awt += item.x , 0)