Vue的简单介绍

淩亂°似流年 2023-09-28 14:54 2阅读 0赞

#### 文章目录 ####

*   *  Vue的介绍
     *  Vue的使用
     *   *  方式一: CDN引入
         *  方式二: 下载和引入
     *  声明式和命令式
     *  MVVM模型
     *  Vue的属性
     *   *  data属性
         *  methods属性
         *   *  问题一: 不能使用箭头函数
             *  问题二: this到底指向什么
         *  其他属性

### Vue的介绍 ###

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

*  **全称是Vue.js或者Vuejs**；
 *  它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型；
 *  帮助你高效地开发用户界面，无论任务是简单还是复杂；

**什么叫渐进式框架呢？**

*  表示我们可以在项目中一点点来引入和使用Vue，而不一定需要全部使用Vue来开发整个项目；
 *  但是目前实际开发中, 我们都是使用Vue来开发整个项目的 ;

### Vue的使用 ###

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

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

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

*  方式一：在页面中通过CDN的方式来引入；
 *  方式二：下载Vue的JavaScript文件，并且自己手动引入；
 *  方式三：通过npm包管理工具安装使用它（webpack再讲）；
 *  方式四：直接通过Vue CLI创建项目，并且使用它(暂时了解, Cli的时候学习)；

**我们先介绍前两种方式**

--------------------

#### 方式一: CDN引入 ####

**Vue的CDN引入**：`<script src="https://unpkg.com/vue@next"></script>`

**来看一下简单Hello Vue3的案例实现**:

<div id="app"></div>
    
    
    <script src="https://unpkg.com/vue@next"></script>
    
    <script>
      const app = Vue.createApp({
          
        template: `<h2>Hello Vue3</h2>`,
      });
    
      // 挂载到id为app的元素上
      app.mount("#app");
    </script>

#### 方式二: 下载和引入 ####

**下载Vue的源码，可以直接打开CDN的链接**：

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

**通过script标签，引入刚才的文件**：`<script src="../js/vue.js"></script>`

<div id="app"></div>
    
    
    <script src="../js/vue.js"></script>
    <script>
      const app = Vue.createApp({
          
        template: `<h2>Hello Vue3</h2>`,
      });
    
      app.mount("#app");
    </script>

### 声明式和命令式 ###

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

*  命令式编程和声明式编程；
 *  命令式编程关注的是 “how to do”(怎样做), 自己完成整个how的过程；
 *  声明式编程关注的是 “what to do”(做什么)，由框架(机器)完成 “how”的过程；

**在原生的实现过程中，我们是如何操作的呢？**

*  我们每完成一个操作，都需要通过JavaScript编写一条代码，来给浏览器一个指令；
 *  这样的编写代码的过程，我们称之为命令式编程；
 *  在早期的原生JavaScript和jQuery开发的过程中，我们都是通过这种命令式的方式在编写代码的；

**在Vue的实现过程中，我们是如何操作的呢？**

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

### MVVM模型 ###

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

*  MVC是Model – View –Controller的简称，是在前期被使用非常框架的架构模式，比如iOS、前端；
 *  MVVM是Model-View-ViewModel的简称，是目前非常流行的架构模式；

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

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

![在这里插入图片描述][ad9c3c64d21546f6b45fa423f754a72c.png_pic_center]

### Vue的属性 ###

#### data属性 ####

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

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

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

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

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

#### methods属性 ####

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

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

**在这里我提一个问题，官方文档有这么一段描述**：

*  问题一：为什么不能使用箭头函数（官方文档有给出解释）？
 *  问题二：不使用箭头函数的情况下，this到底指向的是什么？（可以作为一道面试题）

![在这里插入图片描述][a2774b22b806454db45a9917eecca34e.png_pic_center]

##### 问题一: 不能使用箭头函数 #####

**我们在methods中要使用data返回对象中的数据**：

*  那么这个this是必须有值的，并且应该可以通过this获取到data返回对象中的数据。

**那么我们这个this能不能是window呢？**

*  不可以是window，因为window中我们无法获取到data返回对象中的数据；
 *  但是如果我们使用箭头函数，那么这个this就会是window了；

**为什么箭头函数是window呢？**

*  这里涉及到箭头函数使用this的查找规则，它会在自己的上层作用于中来查找this；
 *  最终刚好找到的是script作用于中的this，所以就是window；
 *  this指向不清楚的可以看我之前写的文章

##### 问题二: this到底指向什么 #####

*  事实上Vue的源码当中就是对methods中的所有函数进行了遍历，并且通过bind绑定了this：  
    ![在这里插入图片描述][7bdd33a6df4c4e0281b1c5eda9127643.png_pic_center]

#### 其他属性 ####

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

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

**不用着急，接下来我们会正式学习Vue框架, 我们会一个个学习它们的**。

[ad9c3c64d21546f6b45fa423f754a72c.png_pic_center]: https://img-blog.csdnimg.cn/ad9c3c64d21546f6b45fa423f754a72c.png#pic_center
[a2774b22b806454db45a9917eecca34e.png_pic_center]: https://img-blog.csdnimg.cn/a2774b22b806454db45a9917eecca34e.png#pic_center
[7bdd33a6df4c4e0281b1c5eda9127643.png_pic_center]: https://img-blog.csdnimg.cn/7bdd33a6df4c4e0281b1c5eda9127643.png#pic_center