Vue3+TS系统学习二 - 邂逅Vue3开发

2021年6月19日 342点热度 0人点赞 0条评论

本教程有对应的视频配套学习,需要的同学可以添加我的微信coderwhy002(有其他任何一个微信都可以)

一. 认识Vue.js

1.1. 认识Vue

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架

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

1.2. Vue的安装

Vue是一个JavaScript的库,刚开始我们不需要把它想象的非常复杂,我们就把它理解成一个已经帮助我们封装好的库,在项目中可以引入并且使用它即可。

那么安装和使用Vue这个JavaScript库有哪些方式呢?

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

1.2.1. CDN方式引入

什么是CDN呢?CDN称之为内容分发网络(Content Delivery Network或Content Distribution Network,缩写:CDN

  • 它是指通过相互连接的网络系统,利用最靠近每个用户的服务器;

  • 更快、更可靠地将音乐、图片、视频、应用程序及其他文件发送给用户;

  • 来提供高性能、可扩展性及低成本的网络内容传递给用户;

    图片
    CDN服务器作用

常用的CDN服务器可以大致分为两种:

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

Vue的CDN引入:

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

Hello Vue案例的实现:

<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的链接:

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

通过script标签,引入刚才的文件:

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

你好啊,Vuejs案例的实现:

<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. 计数器案例

如果我们希望实现一个计数器的案例:

  • 点击+1,那么内容会显示数字+1;
  • 点击-1,那么内容会显示数字-1;

我们可以选择很多种方式来实现,在这里我们就对比原生和Vue的实现方式的不同。

1.3.1. 原生实现计数器

原生的实现代码如下:

<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的实现代码如下:

<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. 声明式和命令式

在原生的实现过程中,我们是如何操作的呢?

  • 我们每完成一个操作,都需要通过JavaScript编写一条代码,来给浏览器一个指令:

  • 这样的编写代码的过程,我们称之为命令式编程;

  • 在早期的原生JavaScript和jQuery开发的过程中,我们都是通过这种命令式的方式在编写代码的;

在Vue的实现过程中,我们是如何操作的呢?

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

1.3.4. MVVM开发模式

通常情况下,我们也经常称Vue是一个MVVM的框架。

什么是MVVM吗?

  • MVVM是一种软件的体系结构,是Model-View-ViewModel的简称;
图片
MVVM

Vue官方其实有说明,Vue虽然并没有完全遵守MVVM的模型,但是整个设计是受到它的启发的。

图片
Vue的MVVM

二. createApp对象参数

在使用createApp的时候,我们传入了一个对象,接下来我们详细解析一下之前传入的属性分别代表什么含义。

2.1. template属性

template表示的是Vue需要帮助我们渲染的模板信息:

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

但是这个模板的写法有点过于别扭了,并且IDE很有可能没有任何提示,阻碍我们变成的效率。

Vue提供了两种方式:

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

方式一:使用script标签

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

方式二:使用template

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

这个时候,在createApp的对象中,我们需要传入的template以 # 开头:

  • 如果字符串是以 # 开始,那么它将被用作 querySelector,并且使用匹配元素的 innerHTML 作为模板字符串;

2.2. data属性

data属性是传入一个函数,并且该函数需要返回一个对象:

  • 在Vue2.x的时候,也可以传入一个对象(虽然官方推荐是一个函数);
  • 在Vue3.x的时候,比如传入一个函数,否则就会直接在浏览器中报错;

data中返回的对象会被Vue的响应式系统劫持,之后对该对象的修改或者访问都会在劫持中被处理:

  • 所以我们在template中通过 {{counter}} 访问counter,可以从对象中获取到数据;
  • 所以我们修改counter的值时,template中的 {{counter}}也会发生改变;

具体这种响应式的原理,我们后面会有专门的篇幅来讲解。

2.3. methods属性

methods属性是一个对象,通常我们会在这个对象中定义很多的方法:

  • 这些方法可以被绑定到 template 模板中;
  • 在该方法中,我们可以使用this关键字来直接访问到data中返回的对象的属性;

对于有经验的同学,在这里我提一个问题,官方文档有这么一段描述:

  • 问题一:为什么不能使用箭头函数(官方文档有给出解释)?
  • 问题二:不使用箭头函数的情况下,this到底指向的是什么?(可以作为一道面试题)
图片
官方文档关于methods的定义

关于这个问题的答案可以查看我公众号关于this的文章,后续我也会出对应的视频来讲解this的指向。

2.4. 其他属性

当然,这里还可以定义很多其他的属性,我们会在后续进行讲解:

  • 比如props、computed、watch、emits、setup等等;
  • 也包括很多的生命周期函数;

不用着急,我们会一个个学习它们的。

44020Vue3+TS系统学习二 - 邂逅Vue3开发

这个人很懒,什么都没留下

文章评论