Vue3+TypeScript学习

01.邂逅Vue3和Vue3开发体验

认识vue

系统学习Vue3+TypeScript（目录）

在这里插入图片描述

如何使用Vue

在这里插入图片描述

方式一、CDN引入

在这里插入图片描述

<script src="https://unpkg.com/vue@next"></script>
1

方式二、下载和引入

在这里插入图片描述

声明式和命令式

在这里插入图片描述

MVVM模型

在这里插入图片描述

template属性

在这里插入图片描述

template写法

在这里插入图片描述

data属性

在这里插入图片描述

methods属性

在这里插入图片描述

其他属性

在这里插入图片描述

02.Vue3基础语法（一）

methods方法绑定this

问题一、不能使用箭头函数

在这里插入图片描述

问题二、this到底指向什么

在这里插入图片描述

<div id="app"></div>
    <template id="my-app">
        <h2>{{message}}</h2>
    </template>
    <script src="../js/vue.js"></script>
    <script>
        const App = {
            template: '#my-app',
            data() {
                return {
                    message: "Hello!!!!"
                }
            }
        }
        Vue.createApp(App).mount("#app");
    </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16