TypeScript 核心语法与 Vue2 指令知识点

kai825

724人浏览 · 2025-09-07 17:40:01

kai825 · 2025-09-07 17:40:01 发布

一、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: string
  private 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>

亚马逊云科技技术品牌专区

更多推荐

2026年麒麟KYCP云计算认证深度解析：高级信创云人才的能力标尺

麒麟KYCP云计算是信创云平台高级运维认证，由工信部与麒麟软件联合颁发，聚焦KVM虚拟化、Kubernetes编排及信创云安全架构。考试含100题（单选70+多选20+判断10），90分钟需达70分合格，较初级KYCA难度显著提升。持证者可胜任政企信创云架构师等岗位，契合2026年信创规模化落地的人才缺口。备考建议分四阶段：基础巩固（1周）、K8s进阶（2-3周）、安全强化（1周）及模拟冲刺，需重