1. Vue3的引入

1.1 CDN

  <div id="app">
    <h2>Hello World</h2>
  </div>

  <script src="https://unpkg.com/vue@next"></script>
  <script>
    const why = {
      template: '<h2>Hello World</h2>'
    }

    const app = Vue.createApp(why);
    app.mount("#app")
  </script>

1.2 本地引用

  <div id="app"></div>

  <script src="../js/vue.js"></script>
  <script>
    Vue.createApp({
      template: `<h2>你好啊, 李银河</h2>`
    }).mount("#app");
  </script>

2. 计数器案例

先来个计数器案例来体验一下vue的使用吧。有两个按钮，点击+1和点击-1。

2.1 原生实现

    <h2 class="counter">0</h2>
    <button class="increment">+1</button>
    <button class="decrement">-1</button>

    <script>
      // 1.获取所有的元素
      const counterEl = document.querySelector(".counter");
      const incrementEl = document.querySelector(".increment");
      const decrementEl = document.querySelector(".decrement");

      // 2.定义变量
      let counter = 100;
      counterEl.innerHTML = counter;

      // 3.监听按钮的点击
      incrementEl.addEventListener("click", () => {
        counter += 1;
        counterEl.innerHTML = counter;
      });
      decrementEl.addEventListener("click", () => {
        counter -= 1;
        counterEl.innerHTML = counter;
      });
    </script>

2.2 vue实现

  <div id="app"></div>

  <script src="../js/vue.js"></script>
  <script>
    Vue.createApp({
      template: `
        <div>
          <h2>{{message}}</h2>
          <h2>{{counter}}</h2>
          <button @click='increment'>+1</button>
          <button @click='decrement'>-1</button>
        </div>
      `,
      data: function() {
        return {
          message: "Hello World",
          counter: 100
        }
      },
      // 定义各种各样的方法
      methods: {
        increment() {
          console.log("点击了+1");
          this.counter++;
        },
        decrement() {
          console.log("点击了-1");
          this.counter--;
        }
      }
    }).mount('#app');
  </script>

3. Vue.createApp的参数

3.1 template

写法一 es6模板字符串

    Vue.createApp({
      template: `
        <div>
          <h2>{{message}}</h2>
          <h2>{{counter}}</h2>
          <button @click='increment'>+1</button>
          <button @click='decrement'>-1</button>
        </div>
      `,
    })

写法二 script标签

  <!-- 制定type类型 加一个id属性 -->
  <script type="x-template" id="why">
    <div>
      <h2>{{message}}</h2>
      <h2>{{counter}}</h2>
      <button @click='increment'>+1</button>
      <button @click='decrement'>-1</button>
    </div>
  </script>

  <script>
    Vue.createApp({
      template: '#why',  // #why
    }).mount('#app');
  </script>

写法三

  <template id="why">
    <div>
      <h2>{{message}}</h2>
      <h2>{{counter}}</h2>
      <button @click='increment'>+1</button>
      <button @click='decrement'>-1</button>
      <button @click="btnClick">按钮</button>
    </div>
  </template>

  <script>
    Vue.createApp({
      template: '#why',  // #why
    }).mount('#app');
  </script>

template元素是一种用于保存客户端内容的机制，该内容再加载页面时不会被呈现，但随后可以在运行时使用JavaScript实例化；该标签是html原生标签。

3.2 data属性

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

在Vue2.x的时候，也可以传入一个对象（虽然官方推荐是一个函数）；
在Vue3.x的时候，必须传入一个函数，否则就会直接在浏览器中报错；

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

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

3.3 methods属性

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

这些方法可以被绑定到 template 模板中；
在该方法中，我们可以使用this关键字来直接访问到data中返回的对象的属性；
不能使用箭头函数，this指向了window。

不使用箭头函数的情况下，this到底指向的是什么（面试）？

事实上Vue的源码当中就是对methods中的所有函数进行了遍历，并且通过bind绑定了this

image.png

4. vue3源码查看

在GitHub上搜索 vue-next，下载源代码（最好是tag到稳定版本）；这里推荐通过 git clone 的方式下载；
第二步：安装Vue源码项目相关的依赖:

yarn install

第三步：对项目执行打包操作:

image.png

执行yarn dev。
通过 packages/vue/dist/vue.global.js 调试代码（debugger）

一、Vue3初体验