怎么在vue2基础上快速掌握vue3

目录

    • 一、Vue3 的 script 现在支持三种写法:
      • 1、最基本的 Vue2 写法
      • 2、setup() 属性
      • 3、 script setup
    • 二、如何使用 script setup 编写组件
      • 1、data
      • 2、methods
      • 3、props
      • 4、emits 事件
      • 5、computed
      • 6、watch
      • 7、生命周期

一、Vue3 的 script 现在支持三种写法:

1、最基本的 Vue2 写法

<template>
  <div>{{ count }}div>
  <button @click="onClick">
    增加 1
  button>
template>

<script>
export default {
  data() {
    return {
      count: 1,
    };
  },
  methods: {
    onClick() {
      this.count += 1;
    },
  },
}
script>

2、setup() 属性

<template>
  <div>{{ count }}div>
  <button @click="onClick">
    增加 1
  button>
template>

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

  // 注意这部分
  setup() {
    let count = ref(1);
    const onClick = () => {
      count.value += 1;
    };
    return {
      count,
      onClick,
    };
  },
  
}
script>

3、 script setup

<template>
  <div>{{ count }}div>
  <button @click="onClick">
    增加 1
  button>
template>

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

const count = ref(1);
const onClick = () => {
  count.value += 1;
};
script>

在代码精简度上,

你可能感兴趣的:(vue,vue.js,前端,javascript)