vue3+ts极简教程

一、依次执行以下四步，即可极速创建项目，跟着敲一次，你会放下2.x

1.npm init @vitejs/app my-vite-vue
2.cd my-vite-vue
3.npm install
4.npm run dev

二、通过两种不同方式编写简单组件与方法，推荐方式一，编码高效

App.vue

<script setup lang="ts">
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <HelloWorld msg="唤醒VUE3.X" />
</template>

HelloWorld.vue

<!-- 方式一 script setup -->
<script setup lang="ts">
import { computed, ref, watch } from 'vue'

defineProps<{ msg: string }>()

const count = ref(0)

const double = ref(0)

// 普通方法
const addcount = () => {
  count.value++
}
let alertMsg = () => {
  alert(count.value)
}

// 监听方法
watch(count, (item) => {
  double.value = item * 2
})

// 计算属性字符反转
const message = 'abcd'
const reversedMessage = computed(() => {
  return message.split('').reverse().join('')
})
</script>

<template>
  <!-- 样式绑定 -->
  <h1 :style="{ color: count > 3 ? 'red' : 'blue' }">{{ msg }}</h1>
  <button type="button" @click="addcount">count is: {{ count }}</button>
  <button type="button" @click="alertMsg">alert</button>
  <p>{{ double }}</p>
  <p>原始字符串: {{ message }}</p>
  <p>计算后反转字符串: {{ reversedMessage }}</p>
</template>

<!-- 方式二 export setup -->
<!-- <script lang="ts">
import { computed, ref, watch } from 'vue'
export default {
  props: {
    msg: String,
  },
  setup(props: any) {
    const msg = props.msg
    const count = ref(0)

    const double = ref(0)

    // 普通方法
    const addcount = () => {
      count.value++
    }
    let alertMsg = () => {
      alert(count.value)
    }

    // 监听方法
    watch(count, (item) => {
      double.value = item * 2
    })

    // 计算属性字符反转
    const message = 'abcd'
    const reversedMessage = computed(() => {
      return message.split('').reverse().join('')
    })
    return {
      count,
      message,
      addcount,
      alertMsg,
      reversedMessage,
    }
  },
}
</script> -->