Vue + Vite + Ts 学习笔记

1、环境安装

# 创建项目
$ npm init vite vue-vite-ts
Need to install the following packages:
  create-vite@3.2.0
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修饰符 冒泡案例

原文地址：http://www.cnblogs.com/his365/p/16858768.html