Tracy vue3 小笔记 1 - 如何使用 VUE， MVC, MVVM, Template， Vue 源码

Vue Demo code 计数器那么安装和使用Vue这个JavaScript库有哪些方式呢？
方式一：在页面中通过CDN的方式来引入；
方式二：下载Vue的JavaScript文件，并且自己手动引入；
方式三：通过npm包管理工具安装使用它（webpack再讲）；
方式四：直接通过Vue CLI创建项目，并且使用它

Vue Demo code 计数器

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

  <script src="https://unpkg.com/vue@next"></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>

 JS 原生 Demo code 计数器

 <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>

JS 原生：命令式变成

Vue: 声明式编程

MVC: Model - View- Controller（以前很常用的架构模式）

- 如：ios开发，js 原生的前端开发等

MVVM : Model - View - ViewModel （是目前非常流行的架构模式）

- Vue 采取的就是 MVVM,虽然没有完全遵守但是整个设计师收到它启发的 

Template 两种方式

1.Script 方式
  <div id="app">哈哈哈哈啊</div>

  <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 src="../js/vue.js"></script>
  <script>
    document.querySelector("#why")
    Vue.createApp({
      template: '#why',
      data: function() {
        return {
          message: "Hello World",
          counter: 100
        }
      },
      // 定义各种各样的方法
      methods: {
        increment() {
          console.log("点击了+1");
          this.counter++;
        },
        decrement() {
          console.log("点击了-1");
          this.counter--;
        }
      }
    }).mount('#app');
  </script>

2.Template 方式

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

  <template id="why">
    <div>
      <h2>{{message}}</h2>
      <h2>{{counter}}</h2>
      <button @click='increment'>+1</button>
      <button @click='decrement'>-1</button>
      <button @click="btnClick">按钮</button>
      <button @click="btn2Click">按钮</button>
    </div>
  </template>
<script src="../../dist/vue.global.js"></script>
  <script>
  	debugger
    Vue.createApp({
      template: '#why',
      data: function() {
        return {
          message: "Hello World",
          counter: 100
        }
      },
      // 定义各种各样的方法
      methods: {
        increment() {
          console.log("点击了+1");
          this.counter++;
        },
        decrement() {
          console.log("点击了-1");
          this.counter--;
        },
        btnClick: () => {
          // 不可以这样写箭头函数！！
          // 结论：箭头函数时, 这个this就是window
          console.log(this);
        },
        btn2Click: function() {
          //this 指向代理，这样才能找到我们的 data 等里面的东西
          console.log(this);
          //具体 this 指向的问题，可以查看文章： https://mp.weixin.qq.com/s/hYm0JgBI25grNG_2sCRlTA
        }
      }
    }).mount('#app');

  </script>

Vue3 源码

https://github.com/

搜 vue-next ： https://github.com/vuejs/vue-next

下载打了 tag 的稳定版本，不要下载 branch 版本

下面直接下载开始，不过这种方式的下载可能运行不起来，推荐还是用 git Clone 来下载

 

 

 在想要的文件夹中 打开命令行 git clone https://github.com/vuejs/vue-next.git

如果是直接 download 的话，下载好之后打开命令行执行如下命令

npm install  yarn -g (因为 vue 是通过 yarn 来管理的)

git init

git add .

git commit -m "安装"

删除 yarn.lock 文件

yarn install

yarn run dev

package/vue/examples/tracy/demo.html 新建文件

package/vue/dist/vue.global.js 是 vue 项目打包之后的文件

package.js 里配置 --sourcemap，然后再 yarn run dev 这样 debugger 的时候就可以直接进入各自分包的源码查看 vue3 是如何通过 typescrpit  写的源码

这样 yarn run dev 之后会生成 package/vue/dist/vue.global.js.map

在 demo.html 文件 debugger 的时候就会进入 package 里具体的文件来查看了 具体的 .ts 文件里是怎么写的了