Vue3开发网页

Vue3是一种流行的JavaScript前端框架。
本地访问是：localhost:加上你的端口号
这是部署的vue3+typescript项目，浏览器访问：
https://shdily.com
以下介绍vue3的语法糖

1、Template Refs

<template>
  <div>
    <input type="text" ref="myInput">
    <button @click="focusInput">Focus Input</button>
  </div>
</template>

<script>
import {
      
       ref } from 'vue';

export default {
      
      
  setup() {
      
      
    const myInput = ref(null);

    function focusInput() {
      
      
      myInput.value.focus();
    }

    return {
      
      
      myInput,
      focusInput
    }
  }
}
</script>

它是Vue.js的最新版本。相对于Vue2，Vue3有很多改进和更新，包括更快的渲染速度、更小的包大小、更好的TypeScript支持、更好的响应式系统和更灵活的组件API等等。

2、Reactive Properties

<template>
  <div>
    <p>{
   
   { message }}</p>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

<script>
import {
      
       reactive } from 'vue';

export default {
      
      
  setup() {
      
      
    const data = reactive({
      
      
      message: 'Hello World!'
    });

    function updateMessage() {
      
      
      data.message = 'New Message';
    }

    return {
      
      
      ...data,
      updateMessage
    }
  }
}
</script>

其中最显著的一项改进是使用了新的虚拟DOM引擎，这使得Vue3在性能上比Vue2有了很大的提升。同时，Vue3还添加了许多新功能，例如Composition API，它可以更好地组织和重用代码。

3、Computed Properties

<template>
  <div>
    <p>{
   
   { fullName }}</p>
    <input type="text" v-model="firstName">
    <input type="text" v-model="lastName">
  </div>
</template>

<script>
import {
      
       computed, reactive } from 'vue';

export default {
      
      
  setup() {
      
      
    const data = reactive({
      
      
      firstName: '',
      lastName: ''
    });

    const fullName = computed(() => {
      
      
      return `${ 
        data.firstName} ${ 
        data.lastName}`;
    });

    return {
      
      
      ...data,
      fullName
    }
  }
}
</script>

并简化复杂组件的开发过程。总之，Vue3为现代Web开发提供了强大而灵活的工具，可以帮助开发人员更高效地构建可维护和可扩展的应用程序。

4、Lifecycle Hooks

<template>
  <div>
    <p>{
   
   { message }}</p>
  </div>
</template>

<script>
import {
      
       reactive, onMounted } from 'vue';

export default {
      
      
  setup() {
      
      
    const data = reactive({
      
      
      message: ''
    });

    onMounted(() => {
      
      
      data.message = 'Component Mounted';
    });

    return {
      
      
      ...data
    }
  }
}
</script>

猜你喜欢