邂逅Vue3

认识 Vu3

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

如何使用 Vue

在页面中通过 CDN 方式引入
下载 Vue 的 JavaScript 文件，并且自己手动引入
通过 npm 包管理工具安装使用它
直接通过 Vue Cli 创建项目，并使用它

什么是 CDN

CDN 称之为内容分发网络（Content Delivery Network 或 Content Distribution Network）

它是指通过 相互连接的网络系统，利用 最靠近 每个用户的服务器
更快、更可靠的将 音乐、图片、视频、应用程序及其他文件 发送给用户
来提供 高性能、可扩展及低成本的 网络内容传递给用户
核心点：缓存、回源

比如北京一个用户想要看图片

如果是一个 CDN 服务器地址，会找距离用户最近的边缘节点进行查找
有可能边缘节点没查找到就会找对应的父节点
如果父节点也没找到就会去原站下载
下载的话会先把对应文件下载到父节点，再由父节点分发到边缘节点
下次用户访问就会直接去边缘节点拿

html

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

CDN 域名回源：

搜索引擎的蜘蛛在爬行过程中直接抓取源地址上的内容而不是存在各个节点的缓存内容
常规的 CDN 都是回源的，即：当有用户访问某一个 URL 的时候，如果被解析到的那个 CDN 节点没有缓存相应内容（缓存已经到期），就会回源站去获取。如果没有人访问，那么 CDN 节点不会主动去源站拿的

计数器案例

原生

html

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

html

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

<script>
  Vue.createApp({
    template: `
      <div>
        <h2>{{counter}}</h2>
        <button @click='increment'>+1</button>
        <button @click='decrement'>-1</button>
      </div>
    `,
    data() {
      return {
        counter: 100
      }
    },
    methods: {
      increment() {
        console.log("点击了+1");
        this.counter++;
      },
      decrement() {
        console.log("点击了-1");
        this.counter--;
      }
    },
  }).mount('#app')
</script>

声明式和命令式

原生开发和 Vue 开发的模式特点，我们会发现是完全不同的，这里其实涉及到两种不同的编程范式：

命令式编程 关注的是 "how to do"，声明式编程 关注的是 "what to do"，由框架完成 "how" 过程
命令式：每完成一个操作，都需要通过 JavaScript 编写一条代码，来给浏览器一个指令
声明式：在 createApp 传入的对象中声明需要的内容，模板 template、数据 data、方法 methods

MVC 和 MVVM 都是一种软件的体系结构

MVC 是 Model-View-Controller 的简称
MVVM 是 Model-View-ViewModel 的简称

Vue 官方文档说明，Vue 虽然并没有完全遵循 MVVM 的模型，但是整个设计是受到它的启发的

createApp 对象参数

tempalte 属性

template：Vue 需要帮助我们渲染的模板信息

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

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

但是这个模板的写法有点别扭，并且 IDE 很有可能没有任何提示

Vue 提供了两种方式：

使用 script 标签，并且标记它的类型为 x-template，设置 id

html

<script type="x-template" id="why">
  <div>
    <h2>{{counter}}</h2>
  </div>
</script>
<script>
  Vue.createApp({
    template: '#why',
    data: function() {
      return {
        counter: 100
      }
    }
  }).mount('#app');
</script>

使用任意标签（通常使用 template　标签，因为不会被浏览器渲染），设置 id
template 元素是一种保存客户端内容的机制，该内容在加载页面时不会被呈现，但随后可以在运行时使用 JavaScript 实例化
html
```
<template id="why">
  <div>
    <h2>{{counter}}</h2>
  </div>
</template>
<script>
  Vue.createApp({
    template: '#why',
    data: function() {
      return {
        counter: 100
      }
    }
  }).mount('#app');

</script>
```
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
如果字符串是以 # 开始，那么它会被作 querySelector

data 属性

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

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

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

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

methods 属性

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

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

邂逅Vue3 ​

认识 Vu3 ​

如何使用 Vue ​

计数器案例 ​

声明式和命令式 ​

createApp 对象参数 ​

tempalte 属性 ​

data 属性 ​

methods 属性 ​

邂逅Vue3

认识 Vu3

如何使用 Vue

计数器案例

声明式和命令式

createApp 对象参数

tempalte 属性

data 属性

methods 属性