TypeScript 核心语法与 Vue2 指令知识点
一、TypeScript 核心语法
1. 基础类型
TypeScript 在 JavaScript 基础上新增类型约束，常用基础类型如下：
- 布尔值（boolean）：仅包含
true和false - 数字（number）：支持整数、浮点数、十六进制等
- 字符串（string）：支持单引号、双引号
- 数组：两种声明方式，一是“类型+[]”，二是“Array<类型>”
- 枚举（enum）：为一组数值赋予友好名称，默认从 0 开始编号，也可自定义值，如：
enum Color { Red, Green, Blue } let c: Color = Color.Green; // 1（默认编号） // 自定义值 enum Color2 { Red = 1, Green = 2, Blue = 4 } - null/undefined：是所有类型的子类型
2. 接口（Interface）
用于定义对象的“形状”，约束对象的属性名和属性类型，支持可选属性、只读属性：
// 基础接口
interface Person {readonly id: number; // 只读属性，初始化后不可修改name: string;age?: number; // 可选属性，可存在或不存在
}// 使用接口约束对象
let person: Person = {id: 1,name: "Alice"// age 可选，可省略
};
person.id = 2; // 报错：只读属性不可修改
3. 函数类型
约束函数的参数类型和返回值类型，有两种声明方式：
- 直接声明：明确参数和返回值类型，如：
// (参数1: 类型, 参数2: 类型) => 返回值类型 function add(a: number, b: number): number {return a + b; } - 接口定义函数类型：通过接口复用函数类型，如：
interface AddFunc {(a: number, b: number): number; } let add: AddFunc = (a, b) => a + b; - 可选参数与默认参数：可选参数用
?标记，默认参数直接赋值，如：// 可选参数（必须放在必填参数后） function greet(name: string, age?: number): string {return age ? `Hi ${name}, ${age}` : `Hi ${name}`; } // 默认参数 function getPrice(price: number, discount: number = 0.8): number {return price * discount; }
4. 类（Class）
TypeScript 增强了 ES6 类的功能，支持访问修饰符、类实现接口、继承等：
- 访问修饰符：控制属性/方法的访问权限：
public（默认）：类内、类外、子类均可访问；private：仅类内可访问；protected：类内和子类可访问。
class Animal {public name: string; // 等同于 name: stringprivate age: number;protected type: string;constructor(name: string, age: number, type: string) {this.name = name;this.age = age;this.type = type;}public sayName(): void {console.log(this.name);console.log(this.age); // 类内可访问 private 属性} }class Dog extends Animal {constructor(name: string, age: number) {super(name, age, "dog");}sayType(): void {console.log(this.type); // 子类可访问 protected 属性// console.log(this.age); // 报错：private 属性子类不可访问} }let cat = new Animal("Tom", 3, "cat"); console.log(cat.name); // 可访问 public 属性 // console.log(cat.age); // 报错：private 属性类外不可访问
5. 泛型（Generic）
解决“类型复用”问题，在定义函数、接口、类时不指定具体类型，使用时再传入类型，如：
- 泛型函数：
// <T> 是泛型参数，代表“任意类型”，使用时传入具体类型 function getArray<T>(items: T[]): T[] {return [...items]; }// 使用时指定类型（也可省略，TS 自动推断） let numArr: number[] = getArray<number>([1, 2, 3]); let strArr: string[] = getArray(["a", "b"]); // 自动推断为 string 类型
二、Vue2 指令知识点
1. 插值表达式
用于将数据渲染到页面，语法为 {{ 数据 }}，支持简单运算和表达式
- 基础用法：渲染
data中的数据，如：<template><div><p>姓名：{{ name }}</p><p>年龄：{{ age + 1 }}</p> <!-- 支持简单运算 --></div> </template><script> export default {data() {return {name: "张三",age: 20};} }; </script>
2. Vue2 常用指令
指令是带有 v- 前缀的特殊属性，用于操作 DOM、绑定数据等，常用指令如下：
（1）v-text
渲染文本，功能与插值表达式类似，但会覆盖元素内所有内容（插值表达式仅替换自身）：
<template><div v-text="name"></div> <!-- 等同于 <div>{{ name }}</div> --><div>前缀：{{ name }}</div> <!-- 插值表达式可保留其他内容 -->
</template>
（2）v-html
渲染原始 HTML
<template><div v-html="htmlContent"></div>
</template><script>
export default {data() {return {htmlContent: "<h1>这是一个标题</h1>" // 页面会渲染为 <h1> 标签};}
};
</script>
（3）v-bind
动态绑定 HTML 属性（如 src、class、style、自定义属性等），可简写为 :：
- 绑定普通属性：
<template><img :src="imgUrl" :alt="imgAlt"> <!-- 绑定 src 和 alt 属性 --><div :id="boxId"></div> <!-- 绑定 id 属性 --> </template><script> export default {data() {return {imgUrl: "https://example.com/img.jpg",imgAlt: "示例图片",boxId: "container"};} }; </script> - 绑定 class：支持对象、数组两种写法：
<template><!-- 对象写法：键是类名，值是布尔值（true 则添加类） --><div :class="{ active: isActive, red: isRed }"></div><!-- 数组写法：直接传入类名数组 --><div :class="[activeClass, redClass]"></div> </template><script> export default {data() {return {isActive: true,isRed: false,activeClass: "active",redClass: "red"};} }; </script>
（4）v-on
绑定事件监听器，可简写为 @，支持事件修饰符（如 stop、prevent）和按键修饰符（如 enter）：
- 基础用法：
<template><button @click="handleClick">点击按钮</button><input @input="handleInput" placeholder="输入内容"> </template><script> export default {methods: {handleClick() {alert("按钮被点击");},handleInput(e) { // e 是原生事件对象console.log("输入内容：", e.target.value);}} }; </script> - 事件修饰符：通过“
.”添加，常用修饰符：stop：阻止事件冒泡；prevent：阻止默认行为（如表单提交、链接跳转）；
<template><div @click="parentClick"><!-- stop 阻止冒泡：点击按钮不会触发 parentClick --><button @click.stop="childClick">子按钮</button></div><!-- prevent 阻止默认行为：点击链接不会跳转 --><a @click.prevent href="https://example.com">不跳转链接</a><!-- once 只触发一次 --><button @click.once="onceClick">只点一次</button> </template>
（5）v-model
实现表单元素（输入框、单选框、复选框等）与数据的“双向绑定”
- 输入框（text/textarea）：
<template><input v-model="message" placeholder="输入内容"><p>输入的内容：{{ message }}</p> </template><script> export default {data() {return {message: "" // 输入框内容变化时，message 自动更新；反之亦然};} }; </script> - 单选框（radio）：
<template><label><input type="radio" v-model="gender" value="male"> 男</label><label><input type="radio" v-model="gender" value="female"> 女</label><p>选择的性别：{{ gender }}</p> </template><script> export default {data() {return {gender: "male" // 默认选中“男”};} }; </script> - 复选框（checkbox）：单个复选框绑定布尔值，多个复选框绑定数组：
<template><!-- 单个复选框：绑定布尔值 --><label><input type="checkbox" v-model="isAgree"> 同意协议</label><!-- 多个复选框：绑定数组 --><div><label><input type="checkbox" v-model="hobbies" value="game"> 游戏</label><label><input type="checkbox" v-model="hobbies" value="reading"> 阅读</label></div><p>是否同意：{{ isAgree }}</p><p>爱好：{{ hobbies }}</p> </template><script> export default {data() {return {isAgree: false,hobbies: [] // 选中的爱好会添加到数组中};} }; </script>
（6）v-for
基于数组或对象循环渲染 DOM，语法为 v-for=“(item, index) in 数组”（数组）或 v-for="(value, key, index) in 对，搭配 key 属性唯一标识，提升渲染性能：
- 循环数组：
<template><ul><li v-for="(item, index) in list" :key="index">{{ index + 1 }}. {{ item.name }} - {{ item.age }}岁</li></ul> </template><script> export default {data() {return {list: [{ name: "张三", age: 20 },{ name: "李四", age: 22 }]};} }; </script>
（7）v-if / v-else-if / v-else
根据条件渲染 DOM（条件不满足时，元素会被从 DOM 中移除），与 v-show 的区别：v-show 是通过 CSS display: none 隐藏元素（元素始终存在于 DOM 中）：
<template><div v-if="score >= 90">优秀</div><div v-else-if="score >= 80">良好</div><div v-else-if="score >= 60">及格</div><div v-else>不及格</div><!-- v-show 隐藏元素（DOM 中存在） --><div v-show="isShow">通过 CSS 隐藏</div>
</template><script>
export default {data() {return {score: 85,isShow: false};}
};
</script>