Vue3+TypeScript系统学习：邂逅Vue3开发

2022-10-2421:44:06WEB前端开发Comments1,165 views字数 4582阅读模式

一. 认识Vue.js文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/29832.html

1.1. 认识Vue

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/29832.html

全程是Vue.js或者Vuejs；
什么是渐进式框架呢？表示我们可以在项目中一点点来引入和使用Vue，而不一定需要全部使用Vue来开发整个项目；

1.2. Vue的安装

Vue是一个JavaScript的库，刚开始我们不需要把它想象的非常复杂，我们就把它理解成一个已经帮助我们封装好的库，在项目中可以引入并且使用它即可。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/29832.html

那么安装和使用Vue这个JavaScript库有哪些方式呢？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/29832.html

方式一：在页面中通过CDN的方式来引入；
方式二：下载Vue的JavaScript文件，并且自己手动引入；
方式三：通过npm包管理工具安装使用它（webpack再讲）；
方式四：直接通过Vue CLI创建项目，并且使用它；

1.2.1. CDN方式引入

什么是CDN呢？CDN称之为内容分发网络（Content Delivery Network或Content Distribution Network，缩写：CDN）文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/29832.html

它是指通过相互连接的网络系统，利用最靠近每个用户的服务器；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/29832.html
更快、更可靠地将音乐、图片、视频、应用程序及其他文件发送给用户；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/29832.html
来提供高性能、可扩展性及低成本的网络内容传递给用户；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/29832.html
CDN服务器作用

常用的CDN服务器可以大致分为两种：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/29832.html

自己的CDN服务器：需要购买自己的CDN服务器，目前阿里、腾讯、亚马逊、Google等都可以购买CDN服务器；
开源的CDN服务器：国际上使用比较多的是unpkg、JSDelivr、cdnjs；

Vue的CDN引入：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/29832.html

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

Hello Vue案例的实现：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/29832.html

<body>  <div id="app"></div>  <script src="https://unpkg.com/vue@next"></script>  <script>    // Vue相关的代码    const app = Vue.createApp({      template: <h2>Hello Vue3</h2>    });    // 将app挂载到id为app的div上    app.mount("#app");  </script></body>

1.2.2. 下载并且引入

下载Vue的源码，可以直接打开CDN的链接：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/29832.html

打开链接，复制其中所有的代码；
创建一个新的文件，比如vue.js，将代码复制到其中；

通过script标签，引入刚才的文件：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/29832.html

<script src="../js/vue.js"></script>

你好啊，Vuejs案例的实现：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/29832.html

<body>  <div id="app"></div>    <script src="../js/vue.js"></script>  <script>    const app = Vue.createApp({      template: `<h2>你好啊, Vue3</h2>`    });    app.mount(#app);  </script></body>

1.3. 计数器案例

如果我们希望实现一个计数器的案例：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/29832.html

点击+1，那么内容会显示数字+1；
点击-1，那么内容会显示数字-1；

我们可以选择很多种方式来实现，在这里我们就对比原生和Vue的实现方式的不同。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/29832.html

1.3.1. 原生实现计数器

原生的实现代码如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/29832.html

<body>    <h2 class="title"></h2>  <button class="increment">+1</button>  <button class="decrement">-1</button>  <script>    // 1.获取DOM原生    const titleEl = document.querySelector(".title");    const btnInEl = document.querySelector(.increment);    const btnDeEl = document.querySelector(.decrement);    // 2.默认设置的是Hello World    let counter = 0    // 3.设置titleEl的内容    titleEl.innerHTML = counter;    // 4.监听按钮的点击    btnInEl.addEventListener(click, () => {      counter += 1;      titleEl.innerHTML = counter;    })    btnDeEl.addEventListener(click, () => {      counter -= 1;      titleEl.innerHTML = counter;    })  </script></body>

1.3.2. Vue实现计数器

Vue的实现代码如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/29832.html

<body>  <div id="app"></div>  <script src="../js/vue.js"></script>  <script>    const App = {      template: `        <div>          <h2>{{counter}}</h2>          <button @click=increment>+1</button>          <button @click=decrement>-1</button>        </div>      `,      data() {        return {          counter: 0        }      },      methods: {        increment() {          this.counter++;        },        decrement() {          this.counter--;        }      }    }    Vue.createApp(App).mount(#app);  </script></body>

1.3.3. 声明式和命令式

在原生的实现过程中，我们是如何操作的呢？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/29832.html

我们每完成一个操作，都需要通过JavaScript编写一条代码，来给浏览器一个指令：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/29832.html
这样的编写代码的过程，我们称之为命令式编程；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/29832.html
在早期的原生JavaScript和jQuery开发的过程中，我们都是通过这种命令式的方式在编写代码的；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/29832.html

在Vue的实现过程中，我们是如何操作的呢？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/29832.html

我们会在createApp传入的对象中声明需要的内容，模板template、数据data、方法methods；
这样的编写代码的过程，我们称之为是声明式编程；
目前Vue、React、Angular的编程模式，我们称之为声明式编程；

1.3.4. MVVM开发模式

通常情况下，我们也经常称Vue是一个MVVM的框架。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/29832.html

什么是MVVM吗？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/29832.html

MVVM是一种软件的体系结构，是Model-View-ViewModel的简称；

Vue官方其实有说明，Vue虽然并没有完全遵守MVVM的模型，但是整个设计是受到它的启发的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/29832.html

二. createApp对象参数

在使用createApp的时候，我们传入了一个对象，接下来我们详细解析一下之前传入的属性分别代表什么含义。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/29832.html

2.1. template属性

template表示的是Vue需要帮助我们渲染的模板信息：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/29832.html

目前我们看到它里面有很多的HTML标签，这些标签会替换掉我们挂载到的元素（比如id为app的div）的innerHTML；
模板中有一些奇怪的语法，比如 {{}}，比如 @click，这些都是模板特有的语法，我们会在后面讲到；

但是这个模板的写法有点过于别扭了，并且IDE很有可能没有任何提示，阻碍我们变成的效率。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/29832.html

Vue提供了两种方式：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/29832.html

方式一：使用script标签，并且标记它的类型为 x-template；
方式二：使用任意标签（通常使用template标签，因为不会被浏览器渲染），设置id；
- template元素是一种用于保存客户端内容的机制，该内容在加载页面时不会被呈现，但随后可以在运行时使用JavaScript实例化；

方式一：使用script标签文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/29832.html

  <script type="x-template" id="my-app">    <div>      <h2>{{counter}}</h2>      <button @click=increment>+1</button>      <button @click=decrement>-1</button>    </div>  </script>

方式二：使用template文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/29832.html

  <template id="my-app">    <div>      <h2>{{counter}}</h2>      <button @click=increment>+1</button>      <button @click=decrement>-1</button>    </div>  </template>

这个时候，在createApp的对象中，我们需要传入的template以 # 开头：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/29832.html