Learn Vue, learn Vue JSX

Time:2021-4-27

Only inrenderFunctionJSXIs that right

Of course not. You can define itmethod, and thenmethodBack insideJSX, and thenrenderThis method is called in the function, not only that,JSXYou can also assign values to variables directly, such as the following code

methods: {
     $_renderFooter() {
       return (
         
           determine
           cancel
         
       )
     }
   },
   render() {
     const buttons = this.$_renderFooter()
     return (
       
         Here's a big chunk of content
         {buttons}
       
     )
   }

 

Even if I don’t have dinner today, I’ll give you the instructions

 

Basic usage

Although most of the built-in instructions are not directly available in theJSXIt can be used inside, but custom instructions can be used insideJSXIf you use it inside, take itelement-uiOfv-loadingIn terms of instructions, it can be used in this way

render() {
     /**
      *A component can use multiple instructions, so it is an array
      *Name corresponds to the name of the instruction. You need to remove the v-prefix
      *Value corresponds to value in 'v-loading = "value'"
      */
     const directives = [{ name: 'loading', value: this.loading }]
     return (
       
     )
   }

 

Modifier

Some instructions can also use modifiers, such as in the example abovev-loadingYou can use the modifier to specify whether to mask the full screen and lock the scrolling of the screen. This is what you need to writev-loading.fullscreen.lock = "loading"

render() {
     /**
      *Modifiers specifies the modifier. If a modifier is used, the value of the modifier is true
      *If it is not used, it can be set to false or deleted directly
      */
     const directives = [
       {
         name: 'loading',
         value: this.loading,
         modifiers: { fullscreen: true, lock: false }
       }
     ]
     return (
       
     )
   }

 

 

summary

Well, I’ve finished talking about Vue JSX. This is basically enough. If you think it’s helpful, please give me a compliment. Thank you very much. I will continue to put out new high-quality articles to share with you, learning and progress together.