vue3 learning road-preparation work

1. node.js upgrade

If a worker wants to do his job well, he must first sharpen his tools. First upgrade node.js

Node.js download link: https://nodejs.org/zh-cn/download/

What I downloaded here is the node-v16.16.0-x64.msi installation package, which directly overwrites the previous version and installs it with one click next.

You need to pay attention to the following points when covering the installation:

(1) In order not to repeatedly configure environment variables, we first need to know the installation path of the previous lower version node.

Check the installation path of node in the path of advanced system settings. In overlay installation, you can install it directly under the original path.

(2) After installation, check whether the installation is successful. You can enter node -v in the command window to check the node version.

2. First understanding of vue3

1. vue3 uses the MVVM architecture

2. vue3 supports two API styles

(1) Option API, similar to vue2 style

<template>
  <div></div>
</template>
<script>
export default {
  name: "Test",
  components: {},
  props: [],
  data() {
    return {};
  },
  computed: {},
  watch: {},
  mounted() {},
  methods: {},
};
</script>

(2) Component API, similar to react style


<script setup>
import { ref, onMounted } from 'vue'

// 响应式状态
const count = ref(0)

// 用来修改状态、触发更新的函数
function increment() {
  count.value++
}

// 生命周期钩子
onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
</script>

<template>
  <button @click="increment">Count is: {
   
   { count }}</button>
</template>

3. Create vue objects: the difference between vue2 and vue3

Use new Vue({}) to create Vue objects in vue2

new Vue({
  el: '#app',//el属性的作用：用于要关在要管理的元素
  router,
  components: { App },
  template: '<App/>'
})

Create Vue objects using createApp in vue3

import { createApp } from 'vue'
createApp(App).use(router).mount('#app')

vue3 learning road-preparation work

Guess you like