The pit that was stepped on vue

1. The first is the separation of the front and rear ends, using the mock to create data

2. Component registration -> global registration -> import xx from '.... in main.js .' Then register Vue.component('xxx',xxx) and then call the component

->local registration in the page -> import xx from '...' in the partial page and then in components:{xx} then Call

3. The common subcomponents are placed in separate folders. The page opens and uses the operae('method', parameter) to be named. The commit function is unified using the commit ('method') naming to avoid post-refactoring too much trouble.

4. Parent and child component pass-value -> parent-child -> use <Sub @getUrl="getUrl" :details="details"></Sub> (: for value, @ for receiving, receiving Can only use methods, can not use the value in data, the method has a parameter, the parameter can be an array of objects or different variables, etc.)

->子传父-> this.$emit('getUrl', parameter) ( Parameters can be variables, arrays, etc.)

When the attribute value is an array, the pop and push operations of the array are synchronized to the parent component.

5.ref Problem: ref is used to specify ordinary elements or subcomponents. The specified elements are on the $refs object. The elements defined by ref cannot be accessed during initial rendering. They do not exist yet. They can only be in The component can only be accessed after it has been rendered. When used with v-if, the $refxTick can effectively use the ref object. The difference between

6.v-if and v-show: v-if is a real conditional rendering. When the condition is true, the rendering component is recreated. If the condition is false, the component is destroyed. v-show is equivalent to changing the display to none. The effect is that the component is initially created, and the condition is false, only the component is hidden. V-if brings frequent switching costs.

7.Route switch: this.$router.push({path:'/Item'});

8.Json problem: When assigning values ​​to arrays and objects, pass an address, if you only want Passing a value can get an unrelated object via JSON.parse(JSON.stringify(object))

9. Callback function problem: When there is a callback function in the method, if there is a vue in the callback function The value of var that =this can be set outside the callback function to hold an external this.

10.slot: Specify the element to insert the subcomponent: slot="" subcomponent <slot name=""></slot>

11.v-bind:is switch between different components, switch Used when the component is used. . . Used less, the general widgets are written in a page, and then can be controlled directly through v-if and v-show. V-bind: The way to switch components is also to destroy the rebuild. <keep-alive> is generally used in conjunction with v-bind:is to save inactive components and eliminate the need to create them the next time, reducing consumption.

12. Lifecycle: beforeCreate: Do nothing; created:this.$data is initialized, data is created; beforeMount: pre-mount state, this.$el is initialized, but there is no specific dom, this .$data is initialized; mounted:this.$el has dom; beforeUpdata: before component update; updated: after component update; beforeDestroy: before component is destroyed; destroyed component is destroyed.

13.vue project is not compatible with IE browser: the installation of vue-cli project needs to install babel-polyfill, and IE has a strict attribute that cannot have multiple values. .

14.Object.freeze(obj) can freeze objects and improve performance. Frozen objects cannot be modified. Usage of

 return {       form:Object.freeze({id:1})     }

15.is: Only the <li> element in the <ul> element will be treated as valid content. Adding is='component name' in li can avoid potential browser parsing errors

16.v-on listens for DOM events: v-on:click="function | expression"

17.$event access to the original DOM event: v-on:click="function($event)", this event Can be used to navigate to the current element, then do some operations

18. Event modifiers: more commonly used stop and prevent, v-on:click.prevent() can be used to block the default behavior, v-on:click. Stop() can be used to prevent event bubbling

19. Button modifiers: v-on:keyup.enter="submit" and .tab, .delete and other key aliases

20. Disable feature inheritance: inheritAttrs: false You can not inherit properties from the root element of the component, you can choose the local inheritance properties and property values.

21.About the project problem deployed on the server: Sometimes we deploy multiple projects on the server, which may cause the same '/' route to control multiple pages and multiple jumps. Define a home page route on your own project, so you can avoid jumping to '/' when you log out.

22.IE browser compatibility issue, IE does not support ES6 syntax, you need to convert ES6 to ES5

23 by installing babel-polyfill. Understanding of element, in the el-dialog component of element The .sync property belongs to the initial loading mode. A change of true or false will only hide the component. If the component needs to be destroyed, you can add a v-if.