1. Build Vue3 project

Using npm:

          $ npm   Init vite app project name

          $ cd   entry name

          $ npm install

          $ npm run dev

  Using yarn:

       $ yarn   Create vite app project name

       $ cd   entry name

       $ yarn

       $ yarn dev

2. Template syntax instruction

v-once    Perform one-time interpolation. When the data changes, the content at the interpolation will not be updated

<span v-once>This will not change: {{ msg }}</span>

  3. Use JavaScript expressions

{{ number + 1 }} 
{{ ok ? 'YES' : 'NO' }} 
{{ message.split('').reverse().join('')}}

4. Calculated attribute

  The expressions in the template are very convenient, but they are designed for simple operations. Putting too much logic in the template will make the template too heavy and difficult to maintain. For example, there is a nested array object:

<div id="computed-basics">
  <p>Has published books:</p>
  <span>{{ publishedBooksMessage }}</span>
</div>

Vue.createApp({
  data() {
    return {
      author: {
        name: 'John Doe',
        books: [
          'Vue 2 - Advanced Guide',
          'Vue 3 - Basic Guide',
          'Vue 4 - The Mystery'
        ]
      }
    }
  },
  computed: {
    // getter of calculated property
    publishedBooksMessage() {
      // `this` points to the vm instance
      return this.author.books.length > 0 ? 'Yes' : 'No'
    }
  }
}).mount('#computed-basics')

We can also achieve the same effect by calling methods in expressions.

<p>{{ calculateBooksMessage() }}</p>

// In component
methods: {
  calculateBooksMessage() {
    return this.author.books.length > 0 ? 'Yes' : 'No'
  }
}

  The difference between a method defined in the calculated attribute and methods

You can also define the same function as a method rather than a calculated property. The final result of the two methods is exactly the same. Calculated properties are cached based on their response dependencies, and they are re evaluated only when the relevant response dependencies change. Multiple visits   publishedBookMessage   This calculated property immediately returns the previous calculated result without having to execute the function again.

methods defines a method: whenever re rendering is triggered, the calling method will always execute the function again

5. Monitor watch

Listeners are most useful when you need to perform asynchronous or expensive operations when data changes.  

For example:

<div id="watch-example">
  <p>
    <input v-model="question" />
  </p>
  <p>{{ answer }}</p>
</div>

<script>
export default {
  data() {
      return {
        question: '',
        answer: 'I am a value'
      }
    },
    watch: {
      // newQuestion new value oldQuestion old value
      question(newQuestion, oldQuestion) {
        if (newQuestion.length > 10) {
          this.getAnswer()
        }
      }
    },
    methods: {
      getAnswer() {
        this.answer = 'Changed'
        axios
          .get('https://yesno.wtf/api')
          .then(response => {
            this.answer = response.data.answer
          })
          .catch(error => {
            this.answer = No change
          })
      }
    }
}
</script>

6. Event handling

Event modifier (common)

<!-- Prevent event bubbling -->
<a @click.stop="doThis"></a>

<!-- Block default events, submit events, and no longer reload pages -->
<form @submit.prevent="onSubmit"></form>

<!-- The click event will only be triggered once -->
<a @click.once="doThis"></a>

Key modifier

Vue provides aliases for the most commonly used keys:

• .enter
• .tab
• .delete   (capture delete and backspace keys)
• .esc
• .space
• .up
• .down
• .left
• .right

<!-- The key will only be triggered when entering -->
<input @keyup.enter="submit" />

System modifier

The following modifiers can be used to implement a listener that triggers mouse or keyboard events only when the corresponding key is pressed.

• .ctrl
• .alt
• .shift
• .meta

Mouse button modifier

• .left
• .right
• .middle

These modifiers restrict the handler to respond only to specific mouse buttons.

7. Form input binding

Modifier

<!-- In“ change"Sometimes not“ input"Update on (replaces input box listening) change Event that is triggered when the mouse is removed-->
<input v-model.lazy="msg" />

<!-- Convert user input value to numeric type -->
<input v-model.number="age" type="number" />

<!-- Automatically filter the first and last white space characters entered by the user -->
<input v-model.trim="msg" />

8.vue life cycle

Compared with vue2, the function of destruction is composed of beforeDestroy，destroyed Change to beforeUnmount, unmounted

9.setup

The execution order is before the life cycle and data, and setup   Not in option   this  

nine point one   ref   Responsive variable (for a single variable)

  
<div @click="changnum()">{{num}}</div>



import { ref } from 'vue'

const num= ref(0)
const changnum = () => {
  // Get the value of num using. Value
  console.log( num.value)
        
}
return {num,changnum}

nine point two   reactive (for objects)

import {reactive} from "vue";

const carouselItem = reactive({
      // Title of the link
      title: "",
      // Picture address
      imageUrl: "",
      // Link type
      linkType: "0",
      // link
      link: ""
})
return {carouselItem }

9.3 torefs (convert objects, use directly)   

import { reactive,toRefs} from 'vue'

const user = reactive({
      name: "kk",
	  age: 18,
	  lick: 'Wash the dishes'
})
return {...toRef(user )}

Use directly in the page  

<div> Name is{{name}}</div>
<div> Age is{{age}}</div>
<div> Hobbies are{{lick}}</div>

obtain