认识Vue

Vue是一套用于构建用户界面的渐进式框架。

渐进式框架表示我们可以在项目中一点点来引入和使用Vue，而不一定需要全部使用Vue来开发整个项目。

如何使用Vue

一、 Vue的本质，就是一个JavaScript库：

二、安装和使用Vue的方式：

在页面中通过CDN的方式来引入：
```
<script src="https://unpkg.com/vue@next"></script>
```
Hello Vue案例的实现：
```
    <div id="app"></div>
    <script src="https://unpkg.com/vue@next"></script>
    <script>
      // Vue相关的代码
      const why = {
        template: "<h2>Hello World</h2>",
      };
      const app = Vue.createApp(why);
      // 将app挂载到id为app的div上
      app.mount("#app");
    </script>
```
什么是CDN(中文：内容分发网络，全称：Content Delivery Network)：
- 它是指通过相互连接的网络系统，利用最靠近每个用户的服务器；
- 更快、更可靠地将音乐、视频、应用程序及其他文件发送给用户；
- 来提供高性能、可拓展性及低成本的网络内容传递给用户；
- 是构建在网络之上的内容分发网络。CDN 的基本原理是广泛采用各种缓存服务器,将这些缓存服务器分布到用户访问相对集中的地区或网络中，在用户访问网站时，利用全局负载技术将用户的访问指向距离最近的工作正常的缓存服务器上，由缓存服务器直接响应用户请求，提高用户访问响应速度和命中率。CDN 的关键技术主要有内容存储技术、内容分发技术和负载均衡技术。

2.下载 Vue 的 JavaScript 文件，并且自己手动引入:

通过npm包管理工具安装使用它(webpack)；
直接通过Vue CIL创建项目，并且使用它；

Vue开发和原生开发例子

原生:命令式编程(how to do)

    <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++;
        counterEl.innerHTML = counter;
      });
      decrementEl.addEventListener("click", () => {
        counter--;
        counterEl.innerHTML = counter;
      });
     </script>

Vue:声明式编程(what to do)

    <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() {
            this.counter++;
          },
          decrement() {
            this.counter--;
          },
        },
      }).mount("#app");
    </script>

`template`属性

在使用createApp()的时候，我们传入了一个对象，代表的含义为：

template属性：它里面的HTML标签会替换掉我们挂载到的元素(比如 id 为 app 的 div)的innerHTML；

{{}}、@click等都是模板特有的语法；

template写法一：

    <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>
      Vue.createApp({
        template: "#why",
        data: function () {
          return {
            message: "Hello World",
            counter: 100,
          };
        },
        // 定义各种各样的方法
        methods: {
          increment() {
            this.counter++;
          },
          decrement() {
            this.counter--;
          },
        },
      }).mount("#app");
    </script>

temolate写法二：

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

`data`属性

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

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

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

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

`methods`属性

methods属性是一个对象：

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

methods方法绑定this：

问题：为什么不能使用箭头函数？

this必须有值，并且应该可以获取到data返回对象中的数据；
如果使用箭头函数，箭头函数不绑定this，这个this就会是window了；
如果this是window，就不可以获取到data返回对象中的数据；

认识Vue

认识Vue

如何使用Vue

Vue开发和原生开发例子

template属性

data属性

methods属性

`template`属性

`data`属性

`methods`属性