1、环境安装
# 创建项目
$ npm init vite vue-vite-ts
Need to install the following packages:
[email protected]
Ok to proceed? (y) y
√ Select a framework: » Vue
√ Select a variant: » TypeScript
Scaffolding project in D:\vscode\vue-vite-ts...
Done. Now run:
cd vue-vite-ts
npm install
npm run dev
# 切换目录
$ cd vue-vite-ts
# 安装依赖
$ pnpm i
# 运行
$ pnpm dev
2、如何修改启动端口号
- 修改package.json
"scripts": {
"dev": "vite --port 80",
"build": "vue-tsc && vite build",
"preview": "vite preview"
},
3、父组件给子组件传值
- 父组件：通过属性msg传值
<script setup lang="ts">
import HelloWorld from './components/HelloWorld.vue'
</script>
<template>
<HelloWorld msg="Vue + Vite" :id="23"/>
</template>
- 子组件：通过defineProps拿到父组件属性值
- 因为id是number，需要前面加上冒号
- string可以直接不用加冒号
<script setup lang="ts">
defineProps<{ msg: string,id:number }>()
</script>
<template>
<h1>{{ msg }}</h1>
</template>
4、模板语法
- 支持运算和方法调用
<script setup lang="ts">
import { ref } from 'vue';
defineProps<{ msg: string, id: number }>()
const name = ref('周末快乐')
// age=0为假反之为真
const age: number = 2
const temp = ref('周,末,快,乐')
</script>
<template>
<h1>msg:{{ msg }}</h1>
<h1>id:{{ id }}</h1>
<h2>{{name}},{{age}}</h2>
<!-- 使用表达式 -->
<h2>{{ age ? '我是真的' : '我是假的' }}</h2>
<h2>{{ temp.split(',') }}</h2>
<h2>{{ temp.split(',').map(i => ` 【${i}】 `) }}</h2>
</template>
5、指令
-
v- 开头都是vue 的指令
-
v-text 用来显示文本
-
v-html 用来展示富文本
-
v-if 用来控制元素的显示隐藏（切换真假DOM）
-
v-else-if 表示 v-if 的“else if 块”。可以链式调用
-
v-else v-if条件收尾语句
-
v-show 用来控制元素的显示隐藏（display none block Css切换）
-
v-on 简写@ 用来给元素添加事件
-
v-bind 简写: 用来绑定元素的属性Attr
-
v-model 双向绑定
-
v-for 用来遍历元素
-
v-on修饰符 冒泡案例