第一章、Vue3高级

• 一、Vue3初体验
  • 1、初体验案例
  • 2、template写法
  • 3、调试vue3源码
• 二、Vue3基本指令
  • 1、methods方法绑定this
  • 2、webstorm设置文件模板
  • 3、双大括号语法
  • 4、v-once
  • 5、v-text
  • 6、v-html
  • 7、v-pre
  • 8、v-cloak
• 三、v-bind和v-on
  • 1、v-bind基本使用
  • 2、v-bind绑定class
  • 3、v-bind绑定style
  • 4、v-bind动态属性名
  • 5、v-bind值为对象
  • 6、v-on基本使用
  • 7、v-on参数传递
  • 8、v-on修饰符
• 四、条件渲染
  • 1、v-if
  • 2、v-if和template结合使用
  • 3、v-if和v-show区别
• 五、列表渲染
  • 1、v-for
  • 2、v-for和template结合使用
  • 3、数组检测
  • 4、v-for中的key

一、Vue3初体验

1、初体验案例

2、template写法

3、调试vue3源码

* 下载Vue3源码：
    - https://codeload.github.com/vuejs/core/zip/refs/tags/v3.0.11
    - 初始化git版本库
* Vue3.0.11使用yarn包管理工具：
    - npm install yarn -g
    - yarn install
* package.json脚本修改：
    - "dev": "node scripts/dev.js --sourcemap"
    - yarn dev
* html引入：
    - packages/vue/dist/vue.global.js

二、Vue3基本指令

1、methods方法绑定this

* 问题一：为什么不能使用箭头函数？
    - 箭头函数不绑定this，this会指向window
* 问题二：this的指向是什么？
    - this指向组件实例的代理对象
      （packages/runtime-core/src/componentOptions.ts:627）

2、webstorm设置文件模板

* file -> settings -> file and code templates
    - name：模板名
    - extension：扩展名
    - enable live templates：启用实时模板（右击创建文件时显示文件模板）

3、双大括号语法

4、v-once

5、v-text

6、v-html

7、v-pre

8、v-cloak

三、v-bind和v-on

1、v-bind基本使用

2、v-bind绑定class

3、v-bind绑定style

4、v-bind动态属性名

5、v-bind值为对象

6、v-on基本使用

7、v-on参数传递

8、v-on修饰符

四、条件渲染

1、v-if

2、v-if和template结合使用

3、v-if和v-show区别

五、列表渲染

1、v-for

2、v-for和template结合使用

3、数组检测

4、v-for中的key