前端程序员需要了解的Vue3知识

前言：呜啦啦，学完了Typescript，开始了Vue3，听说vue3开发更加简易，那我们就来学学看吧

vue3响应式基础

选用选项式 API 时，会用 data 选项来声明组件的响应式状态。此选项的值应为返回一个对象的函数。Vue 将在创建新组件实例的时候调用此函数，并将函数返回的对象用响应式系统进行包装。此对象的所有顶层属性都会被代理到组件实例 (即方法和生命周期钩子中的 this) 上。

意思是组件实例代理当前的data函数返回的对象，通过this去代理修改

export default {
  data() {
    return {
      count: 1
    }
  },

  // `mounted` 是生命周期钩子，之后我们会讲到
  mounted() {
    // `this` 指向当前组件实例
    console.log(this.count) // => 1

    // 数据属性也可以被更改
    this.count = 2
  }
}

---

 

模板语法：

这里相当于复习vue2吧

1：插值表达式{{}}，里面可以js逻辑

2：v-html

3：属性绑定v-bind，绑定id或者或者html上面的标签属性的值为布尔值

4：我们仅在模板中绑定了一些简单的属性名。但是 Vue 实际上在所有的数据绑定中都支持完整的 JavaScript 表达式：不管是插值还是属性绑定

5：JavaScript 表达式可以被使用在如下场景上：

• 在文本插值中 (双大括号)
• 在任何 Vue 指令 (以 v- 开头的特殊 attribute) attribute 的值中

6：指令 ，指令参数就是比如：@后面的那个单词，一般是属性名和事件名称

7：动态参数：  <a :[attributeName]="url"> ... </a>     <a @[eventName]="doSomething">

8：动态参数中表达式的值应当是一个字符串，或者是 null

9：需要传入一个复杂的动态参数，我们推荐使用计算属性替换复杂的表达式

10：事件修饰符

---