当前位置：首页 > news >正文

vue3 vite ts day1

news 2025/3/10 15:13:09

创建项目：

npm init vite@latest 来创建项目

第二步： y

第三步：project name ：项目名称

第四步：select a framework 选择框架熟悉那种选择那种，当前选择vue

第五步：select a variant： typeScript

项目创建完成

初始化

npm install 初始化项目

npm run dev 运行项目

关于 vue3

script 写法变化

vue2 data 里数据是通过

return 出去的

vue 3 写法每次定义变量和方法都需要手动return 出去

vue3 setup 语法糖模式大大方便书写模式

写法与传统 js 有些相识

插值表达式和一些指令和vue2使用差别不大

代码展示


<script setup lang="ts">
import { ref,reactive} from 'vue'defineProps<{ msg: string }>()//命名   ts 类型    用ref或reactive 包括才是响应式数据
const count: number = ref(0)const arr: number[] = reactive([1, 2, 3, 4, 5, 6])const div: string =  ref('<div>这是一个div</div>')const even:string= ref('click')//方法  第一种写法
function addcount() { count.value++
}//另一种写法 效果是一样的
const addcountB = () => { count.value++}function clicks() {console.log('这是一个点击事件')
}</script><template><!-- 插值表达式 -->
<div>{{ count }}<button @click.stop="addcount">点击加加++，判断变true</button>
</div>
<div>{{ count + 1  }}
</div>
<div>{{ count ? 'true' :'false'  }}
</div>
<div>{{ arr.map(v=>({ num: v})) }}
</div>
<div v-html="div"></div>
<div v-if="true">v-if使用和vue2一样，v-show 同理</div><!-- 可以动态切换的事件,事件可以通过修饰符阻止一些事件，使用方式和vue2相识 -->
<div @[even].stop="clicks" >这是一个点击事件
</div><!-- 动态css可以通过表达式来切换 --> 
<div :class="[true?'classA':'classC','classB']">
</div><!-- v-for 使用场景和vue2完全相同 -->
<div v-for="(item,index) in arr" :key="index">
</div><!-- v-once 只会渲染一次，且不会变化 -->
<div v-once>不会变化的值
</div><!-- 搭配v-for使用，数组里面的条件满足才更新，不满足，里面的数据不会更新，跳过更新 -->
<div  v-for="(item,index) in arr" :key="index" v-memo="[item==2]"></div></template><style scoped>
.read-the-docs {color: #888;
}
</style>

效果展示