©2020-2024 ioDraw All rights reserved
一、依次执行以下四步，即可极速创建项目，跟着敲一次，你会放下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> -->