Vue.js高效前端开发 • 【初识Vue.js】

末蓝、 2022-10-07 10:52 162阅读 0赞

[全部章节 >>>>][Link 1]

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

### 文章目录 ###

*  一、Vue概述
 *   *  1、Web前端框架介绍
     *  2、MVC和MVVM
     *  3、Vue介绍
     *  4、安装Vue
 *  二、Vue使用
 *   *  1、第一个Vue应用
     *  2、Vue的双向绑定
     *  3、实践练习
 *  三、Vue生命周期
 *   *  1、Vue的实例和数据
     *  2、Vue生命周期钩子函数
     *  3、实践练习
 *  四、过滤器
 *   *  1、过滤器使用
     *  2、实践练习
 *  总结：

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

# 一、Vue概述 #

## 1、Web前端框架介绍 ##

近几年，互联网前端行业发展得依旧迅猛，涌现出了很多优秀的JavaScript框架，同时这些JavaScript框架也正在逐渐改变统的前端开发方式。

在这些新出现的JavaScript框架中，最具代表性的框架有Angular.js、React.js和Vue.js。  
![Vue,Angular,React][Vue_Angular_React]

## 2、MVC和MVVM ##

MVC是著名的设计模式，基本思想是将软件结构分解为Model（模型）、View（视图）和Controller（控制器）三部分组成。

*  Model：主要负责数据处理和运算。
 *  Controller：主要负责接收输入的数据并控制选择使用哪个View显示。
 *  View：主要负责显示数据和用户交互。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70]

MVVM设计模式是由Model（模型）、View（视图）和ViewModel（视图模型）三部分组成，是MVC设计模式的进化版，即Controller转变为ViewModel。

这种模式可以使View的变化自动化更新到ViewModel，而ViewModel的变化也会自动同步到View上显示。

![在这里插入图片描述][2021061717582781.png]

## 3、Vue介绍 ##

Vue是构建Web界面的JavaScript库，原称为Vue.js，它可以通过简洁的API来提供高效的数据绑定和灵活的组件系统。它提供了现代Web开发中常用的高级功能，

> **比如：**
> 
>  *  解耦视图和数据。
>  *  可复用的组件。
>  *  数据绑定。
>  *  功能插件化。
>  *  虚拟DOM（Virtual DOM）。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 1]

## 4、安装Vue ##

使用Vue之前先安装vue.js，有两种方式安装Vue.js。

**安装独立版本**

**使用CDN引入**

# 二、Vue使用 #

## 1、第一个Vue应用 ##

使用Vue的过程就是定义MVVM各个组成部分的过程，其过程步骤如下

**定义View :**

<div id="app">
    	{
       { message }}
    </div>

**定义Model**

// 这是Model
    var exampleData = { 
    	message: "Hello World! "
    };

**创建一个Vue实例或ViewModel，它用于连接View和Model。**

// 创建一个Vue实例或ViewModel，它连接View与 Model
    var vm=new Vue({ 
    	el: '#app',
    	data: exampleData
    });

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 2]

## 2、Vue的双向绑定 ##

在Vue.js中，ViewModel、View以及Model进行交互的方式，如下图所示  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 3]

> 在Vue.js中可以使用v-model指令在表单元素上创建双向数据绑定

示例:

`html代码：`

<div id="app">
        <p>{
       { message }}</p>
        <input type="text" v-model="message"/>    
    </div>

`JavaScript代码：`

// 这是Model
    var exampleData = { 
        message: "Hello World!"
    };
    // 创建一个Vue实例
    var vm=new Vue({ 
        el: '#app',
        data: exampleData
    });

> v-model双向绑定

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 4]

> 当更改文本框的值时，
> 
> \{ \{ message \}\}
> 
> 中的内容也会被更新

## 3、实践练习 ##

# 三、Vue生命周期 #

## 1、Vue的实例和数据 ##

Vue应用的创建很简单，语法如下面代码所示

`语法:`

var vm=new Vue({ 
    	// 选项参数
    });

> 通过构造函数Vue就可以创建一个Vue的根实例，并启动Vue应用

常用的选项参数包含如下：

<table> 
 <thead> 
  <tr> 
   <th align="center"><strong>选项参数</strong></th> 
   <th align="left"><strong>说明</strong></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">el</td> 
   <td align="left">提供一个在页面上已存在的DOM元素作为Vue实例的挂载目标</td> 
  </tr> 
  <tr> 
   <td align="center">data</td> 
   <td align="left">Vue实例的数据对象。Vue将会递归将data的属性转换为getter/setter，从而让data的属性能够响应数据变化</td> 
  </tr> 
  <tr> 
   <td align="center">methods</td> 
   <td align="left">Vue实例的方法集合，可以在Vue直接调用或将方法绑定到DOM元素的事件上</td> 
  </tr> 
  <tr> 
   <td align="center">computed</td> 
   <td align="left">Vue实例的计算属性集合</td> 
  </tr> 
  <tr> 
   <td align="center">watch</td> 
   <td align="left">观察Vue实例变化的一个表达式或计算属性函数</td> 
  </tr> 
  <tr> 
   <td align="center">components</td> 
   <td align="left">包含Vue实例可用组件的哈希表</td> 
  </tr> 
  <tr> 
   <td align="center">filters</td> 
   <td align="left">包含Vue实例可用过滤器的哈希表</td> 
  </tr> 
  <tr> 
   <td align="center">template</td> 
   <td align="left">定义字符串模板作为Vue实例的标识使用</td> 
  </tr> 
 </tbody> 
</table>

**示例：** 通过Vue实例的data选项，可以声明应用内需要双向绑定的数据。

也可以将所有会用到的数据都预先在data内声明，这样不至于将数据散落在业务逻辑中，难以维护

`HTML代码:`

> 当挂载成功后，就可以通过vm.$el来访问该元素

JavaScriput 代码:

var vm=new Vue({ 
        el:document.getElementById("app")  // 或者是#app
    });

**示例：** 通过Vue实例的data选项，可以声明应用内需要双向绑定的数据。也可以将所有会用到的数据都预先在data内声明，这样不至于将数据散落在业务逻辑中

HTML代码:

> 所有会用到的数据预先在data内声明

JavaScript代码:

var vm=new Vue({ 
      el:"#app",
      data:{ 
          title:"",
          user:{ 
            name:"",
            age:0
          }
      }
    });

**示例：**

在Vue实例内部访问data中的数据时一般使用“this.数据”的方式，如果在Vue实例外部访问data中的数据时，使用Vue实例对象来访问

JavaScript代码:

var vm=new Vue({ 
    //…data代码同上例
     methods:{ 
        doSave:function(){ 
          console.log("姓名：",this.user.name)
        }
      }
    });

var vm=new Vue({ 
    //…data代码同上例
    });
    
    // 在Vue实例外部访问data中的数据
    console.log(vm.user.name);

> 在实例外部，使用实例对象的方式访问

## 2、Vue生命周期钩子函数 ##

Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染、更新、渲染到销毁等一系列过程，称为Vue的生命周期。

通俗说Vue实例从创建到销毁的过程，就是它的生命周期。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 5]  
每个Vue实例创建时，都会经历一些系列的初始化过程，同时也会调用相应的生命周期函数，这些生命周期函数称为“钩子函数”

开发者可以利用这些钩子函数，在合适的时机执行相关业务逻辑代码。在Vue实例的生命周期，钩子比较常用的函数有：

>  *  created()函数：实例建立完成后调用
>  *  mounted()函数：el挂载到实例上后调用
>  *  beforeDestroy()函数：实例销毁之前调用

**示例：** 下面示例中,在created()钩子函数中对模型加载数据，而在mounted()函数中读取el绑定的元素的信息。

HTML代码:

<div id="app">
      <h1>{
       { title }}</h1>
    </div>

JavaScript代码:

...
    created:function() { 
      this.title="生命周期钩子函数";
      console.log("created()钩子函数执行...");
    }
    ...

...
    mounted:function() { 
      console.log(this.$el);
      console.log("模型title的值:",this.title);
      console.log("mounted()钩子函数执行...");
    }
    ...

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 6]

## 3、实践练习 ##

# 四、过滤器 #

## 1、过滤器使用 ##

Vue.js支持在\{ \{\}\}的插值的尾部添加一个管道符（“|”）对数据进行过滤

**创建过滤器有两种方式：**

*  全局创建过滤器
 *  局部创建过滤器

`语法:`

//创建全局过滤器
    Vue.filter("过滤器名",function(val){ 
      过滤语句
    });

//创建局部过滤器
    var vm = new Vue({ 
      el: "#app",
      filters:{ 
        过滤器名:function(val){ 
          过滤语句
        }
      }
    });

**示例：** 使用过滤器实现将英文单词转换为首字母大写显示。

HTML代码：

<div id="app">
      <div class="banner">
        {
       { text | tranformFilter }}
      </div>
    </div>

JavaScript代码：

//…
    filters: { 
        tranformFilter: function (val) { 
          var strs = val.split(' ');
          var result = "";
          for (var i = 0; i < strs.length; i++) { 
            result += strs[i].charAt(0).toUpperCase() + strs[i].substring(1) + ' ';
          }
          return result;
        }
      }
    //…

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 7]

## 2、实践练习 ##

# 总结： #

> Vue是构建Web界面的JavaScript库。 使用Vue的过程就是定义MVVM各个组成部分的过程，其过程步骤如下 定义View。

> 定义Model。 创建一个Vue实例或ViewModel，它用于连接View和Model。

> 在Vue.js中可以使用v-model指令在表单元素上创建双向数据绑定

> Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染、更新、渲染到销毁等一系列过程，称为Vue的生命周期

> Vue.js支持在\{ \{\}\}的插值的尾部添加一个管道符（“|”）对数据进行过滤，经常用于格式化文本，比如字母全部大写、货币千位使用逗号分隔等。

[Link 1]: https://ymjin.blog.csdn.net/article/details/118276452
[Vue_Angular_React]: /images/20221005/7642faebdc104f66a08d410e116c5139.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70]: /images/20221005/dd7c857db45148fb8c816e364967e7d3.png
[2021061717582781.png]: /images/20221005/1a22cdc716de40b586d4304e89b64f0a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 1]: /images/20221005/03b83e4f5de84c089773d9f6f4901957.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 2]: /images/20221005/19a4a7b13aa54072b4ffe5ab4cff139a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 3]: /images/20221005/3ecaf3e4317e4ded9d18638fbc535738.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 4]: /images/20221005/ae524bcbacf248cd9f123b1551785817.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 5]: /images/20221005/e8136604e92245e4ac2552cdd8eadca0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 6]: /images/20221005/ebc1e25ae945496b8a17958ec0fa394a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 7]: /images/20221005/56967a07dd2243708e67828d1f1339a6.png