Vue Settings Page Return The page is not refreshed, that is, the cache is reserved

* * keep alive. Include and exclude include and deactivated include and exclude meta **<br> **activated Otherwise, there is no **<br> ** life cycle execution order **<br> **1. Create --> Mounted --> Destroyed **<br> **2 If keep-alive is used, beforeRouteEnter --> created --> Mounted --> activated --> deactivated**<br> **3 BeforeRouteEnter -->activated --> deactivated**<br> ** After entering the list page, set the scrolling distance in the activated life cycle. The specific code depends on the HTML structure of the page. ** ** Short: This method only applies to projects that use vue-router routing. For multi-page solutions, there is currently no good solution in mind. **<br> ** As <keep-alive> wraps two components: component A and component B. When switching to component A for the first time, both the Created and activated life cycle functions of component A are executed. Click the event to change the color of component A's text. When switching to component B, the deactivated life cycle function of component A is triggered. When switching back to component A, component A's Activated life cycle function is triggered, but its Created life cycle function is not triggered, and component A's text color is the same as we set earlier. **Copy the code

From:Blog.csdn.net/Chenming_32…

The HEIGHT of the CSS implementation div fills the remaining space

** highly adaptive problem, I am very resistant to using JS to solve, because it is not easy to maintain, also not natural, **Copy the code
#nav {
    background-color: #85d989;
    width: 100%;
    height: 50px;
}
#content {
    background-color: #cc85d9;
    width: 100%;
    position: absolute;
    top: 50px;
    bottom: 0px;
    left: 0px;
}
Copy the code

The dynamic parameters

As of 2.6.0, you can use JavaScript expressions enclosed in square brackets as arguments to an instruction

🌰

<a v-bind:[attributeName]="url">... </a>Copy the code

When there’s an attributeName in the data example, and the value is “href”, it’s equivalent to v-bind:href=” URL “.

<a v-on:[eventName]="doSomething">... </a>Copy the code

Similarly, when eventName is set to “focus”, V-on :[eventName] is equivalent to the constraint on the dynamic parameter value v-on:focus. The dynamic parameter is expected to evaluate to a string, null in exceptional cases, and null can be explicitly used to remove the binding. Anything else that is not a string will trigger a warning

FormData object use,,,

1. Use key-value pairs to simulate a series of form controls: assemble the names and values of all the form elements in the form

let formData = new FormData()
formData.append('user'.'zhang'The get () to obtain formData'user'//zhang delete formdata.delete ('user')
Copy the code

2. Use the FormData object to send files

  • Vue handles the boundaryParent, $refs(that is, parent and child components call each other’s inner instance properties and methods)

    The vUE child component can access the attributes and methods of the parent component instance through the root and parent attributes, but the difference is that if there are multiple levels of child components, parent accesses the nearest parent component and root accesses the root parent component. Refs defines the ref attribute on the child component tag. Refs can be used to access child component instances in the parent component
refView() {
    console.log(this.$refs.baseInput)
    this.$refs.baseInput.$el.focus()
}
Copy the code

About vue V-for loop filter

v-for="(supplierItem,i) of supplierCollectList.filter((supplierItem, i) => i < 5 ? supplierItem : false)"
Copy the code

About vuex

Refer to the link: www.jianshu.com/p/2e5973fe1…

About vUE listening for route changes

Method 1: Watch; Method 2: Vue-Router hook function beforeRouteEnter beforeRouteUpdate beforeRouteLeave

BeforeRouteEnter (to, from, next) {beforeRouteEnter (to, from, next) {beforeRouteEnter (to, from, next) {beforeRouteEnter (to, from, next) { Can!!!! }, beforeRouteUpdate (to, from, next) {// Called when the current route changes but the component is being reused. For example, For a path /foo/:id with dynamic parameters, the component instance will be reused as // renders the same foo component when jumping between /foo/1 and /foo/2. And the hook will be called in that case. // Call beforeRouteLeave (to, from, next) {// Call beforeRouteLeave (to, from, next) {Copy the code

The beforeRouteEnter guard cannot access this because the guard is called before navigation confirmation, so the upcoming new component has not yet been created. Workaround: You can access the component instance by passing a callback to Next. The callback is executed when the navigation is validated, and the component instance is taken as an argument to the callback method.

BeforeRouteEnter (to, from, next) {next(vm => {// beforeRouteEnter cannot access the component instance through this, However, the component instance console.log(vm.demodata) //vm.demodata is this.demodata})}Copy the code