Detailed analysis of Vue's common instructions

1. The case of the event name of a custom event

Unlike components and props, there is no automatic case conversion for event names. Instead, the name of the triggered event needs to exactly match the name used to monitor this event. For example, if an event with the name camelCase is triggered:

this.$emit('myEvent')

Then monitoring the kebab-case version of this name will have no effect:

<my-component v-on:my-event="doSomething"></my-component>

Unlike components and props, the event name will not be used as a JavaScript variable name or property name, so there is no reason to use camelCase or PascalCase. And the v-on event listener in the DOM template will be automatically converted to all lowercase (because HTML is case-insensitive), so v-on:myEvent will become v-on:myevent-making myEvent impossible Was overheard.

Therefore, it is recommended that you always use the kebab-case event name.

2. Several commonly used commands in vue

v-bind : Binding of properties between lines or use a colon:

v-bind: title displayed on the mouse

v-bind : src bind image path

v-bind : html binds HTML text and tags

v-bind :text binding text (string)

v-bind : class binding class style (array)

v-bind : style dynamic binding style (object)

v-for : 1.x and 2.x are not the same

v-for=“i in json”

v-for="(key, value) in json"

3. What is the role of the key value in vue?

• When Vue.js uses v-for to update the list of rendered elements, it uses the "in-place reuse" strategy by default. If the order of the data items is changed, Vue will not move the
  DOM elements to match the order of the data items,
  but simply reuse each element here and ensure that it displays each element that has been rendered under a specific index. The main function of the key is to efficiently update the virtual DOM.

4. Describe vuex

Vuex is used to share data between components. Store is used as a container. State : used to store shared data. Data pool getters : used to obtain processed data. It has the function of caching. mutations : synchronous submission status changes actions : asynchronous submission status changes module : When there is more state management, use module to divide multiple modules

5. $watch

Monitor changes in the data in the object
var vue = new Vue ({el:'#root', data:{ a:"", b:""} }); Start monitoring:, the return value is to stop monitoring Function var watchA = vue.$watch('a', function(newValue, oldValue){ vue.c = vue.a // so that a change will execute the function}); Stop monitoring: watchA()

6. Global components

Component output -> package (name the package component and use it as a label name) -> output the packaged module -> Vue.use(module name) -> <global component name/>

Package the js file of the component

import cp1 from './cp1.vue'
import cp1 from './cp1.vue'
let package = {
    
    
    install(vue){
    
    
        vue.component('cp1', cp1)
        vue.component('cp2', cp2)
    }
}
export default package;
复制代码

main.js

import package from "globalCp"
Vue.use(package)
复制代码

Other vue files can be used directly

<cp1></cp1>
复制代码