Vue（一）vue 概述与用法、MVVM、绑定语法、vue 指令

敬之

已于 2022-04-01 10:27:57 修改

阅读量4.7w

点赞数 79

分类专栏：前端框架之 —— Vue 文章标签： javascript vue.js 前端前端框架

于 2021-10-11 08:33:37 首次发布

本文链接： https://blog.csdn.net/weixin_53072519/article/details/120306495

版权

前端框架之 —— Vue 专栏收录该内容

10 篇文章 72 订阅

订阅专栏

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

vue 是第三方开发的，所以需要下载才可使用；它基于 MVVM 设计模式；可以逐步在项目中使用 vue 技术(渐进)，还可以和其它技术混搭；单靠浏览器就可以运行，不需要任何后端技术。

以数据操作(增删改查)为主的项目，都可以由vue框架开发如：饿了么、大众点评\淘宝、京东、今日头条、微博、网易云音乐、小红书、知乎、自如、链家、携程.......等等；不是以数据操作为主的如大型游戏、微信、qq、抖音、爱奇艺等则尽量不用 vue 框架。

一、vue的使用

1. vue的下载

2. vue三步

二、MVVM

1. MVVM设计模式

2. vue的绑定原理

三、绑定语法

四、指令

1. v-bind

2. v-show

3. v-if, v-else

4. v-else-if

一、vue的使用

Vue.jsVue.js - The Progressive JavaScript Frameworkhttp://cn.vuejs.org

1. vue的下载

（1）只下载一个 vue.js 文件，引入网页使用

vue 版本分为开发版和生产版，开发版(未压缩版)有完备的注释、代码格式，以及见名知意的变量名和极其友好的错误提示，可读性好，适合学习和开发之用，但是体积大，不适合生产环境快速下载运行。

生产版(压缩版)去掉了所有数值和代码格式，极简化了变量名，去掉了友好的错误提示，体积小，适合生产环境快速下载运行，但是可读性差，不适合学习和开发之用。

（2）使用 vue 脚手架工具

脚手架是一套已经包含核心功能的标准的半成品项目文件和文件夹结构，便于大项目的标准化和分工协作。

2. vue三步

1.做界面

1.1 将界面中所有元素包裹在一个唯一的父元素下，通常用
<div id="app"></div>
1.2 找到界面中将来可能随程序自动变化的位置，用{{ 变量名 }}来标记/占位；

1.3 找到界面中将来可能触发事件的元素，用专门的语法：@事件名="事件处理函数名" 来标记。

2.创建一个 new Vue() 对象，用来监控 div 所包含的区域
var vm = new Vue({
  //vue对象中，必须用el属性，指出new Vue()要监控的区域
  el: "#app",
 })
3.定义模型对象，来保存界面中所需的所有变量和事件处理函数

3.1 创建一个 data:{ } 来保存界面中所需的所有变量和初始值；

3.2 创建一个 methods:{ } 来保存界面中所需的所有事件处理函数；

注意：模型对象就是专门替界面保存变量和事件处理函数的特殊的对象

methods 中的事件处理函数中，如果要操作data中的变量，必须加 this.

不用考虑如何从界面取值和如何将新值放回界面，只需考虑如何把data中的变量值修改正确。

举例：vue 程序，模拟购物车加减商品数量；

<body>
  <!--VUE 3步-->
  <!--1. 先做界面
  1.1 将界面中所有元素包裹在一个唯一的父元素下<div id="app"></div>
  1.2 找到界面中将来可能随程序自动变化的位置，用{{变量名}}来标记/占位
  1.3 找到界面中将来可能触发事件的元素，用@事件名="事件处理函数名" 来标记-->
  <div id="app">
    <button @click="minus">-</button>
    <span>{{n}}</span>
    <button @click="add">+</button>
  </div>
  <script>
    //2. 创建一个new Vue()对象，来监控div所包含的区域
    var vm = new Vue({
      //vue对象中，必须用el属性，指出new Vue()要监控的区域
      el: "#app",
      //3. 定义模型对象，来保存界面中所需的所有变量和事件处理函数
      //3.1 先创建一个data:{}来保存界面中所需的所有变量和初始值
      data: {
        n: 0
      },
      //3.2 创建一个methods:{}来保存界面中所需的所有事件处理函数
      methods: {
        add() {
          this.n++;
        },
        minus() {
          if (this.n > 0) {
            this.n--;
          }
        }
      }
    })
  </script>
</body>

二、MVVM

以往的前端代码往往分为三个部分：

HTML(专门定义网页的内容和结构)
CSS(专门为网页添加样式)
js(专门操作网页中的内容，为页面添加交互行为)

但是 HTML 和 CSS 功能太弱，即使很小的修改，都要通过 JS 来操作，导致 js 中存在大量重复和冗余的工作。所以为了解决此问题，就需要用到 MVVM 设计模式。

1. MVVM设计模式

MVVM 设计模式是对前端三大代码的重新划分，包括三部分；

（1）界面(View)：包含以前的 HTML+CSS，让 HTML 也支持变量、判断、循环；

（2）模型对象(Model)：专门保存页面中所需的变量和函数的特殊对象，

data:{ } 专门保存界面中所需的所有变量

methods:{ } 专门保存界面中所需的所有函数

（3）视图模型(ViewModel)：专门负责将模型对象中的变量和函数，自动运送到界面中指定位置的特殊对象，自动将程序中的变量和函数运送到界面中所需的位置。并且还能自动保持界面显示与程序中的数据同步。

2. vue的绑定原理（vue框架如何实现 MVVM 设计模式）

（1）访问器属性

a. new Vue() 将 data:{ } 引入到 new Vue() 中时，先将 data 对象及其内部的内容全部隐藏；

b. new Vue() 自动为data中每个变量创建访问器属性，监视对每个变量的修改操作，访问器属性不再隶属于data对象，而是直接隶属于new Vue()；

c. 只要在程序中修改变量，都会自动调用访问器属性的set()函数；

d. set() 函数中提前安插了一个通知函数()，可通知外部哪个变量值发生了变化；

e. methods 中所有的函数，进入 new Vue() 后，methods 对象就被打散，原 methods 中所有函数直接隶属于 new Vue() 对象；

f. methods 中的函数和 data 中的变量，最终会平级保存，都直接隶属于new Vue()，methods 中的函数，想操作 data 中的变量，必须加 this.。

（2）虚拟 DOM 树

是专门保存界面中所有可能发生变化的元素的简化版 DOM 树；在创建完 data 和 methods 之后，根据 el 属性值的选择器所指的元素，去扫描界面中指定区域的元素，一边扫描真实 DOM 树，一边创建虚拟 DOM 树，只保存可能发生变化的元素。

a. 只要在程序中修改了变量值，就会自动触发访问器属性的 set()，自动执行 set() 中的通知函数，通知函数()通知虚拟 DOM 树哪个变量发生了变化；

b. 虚拟 DOM 树扫描自己内部保存的所有可能发生变化的元素，只找出受本次变量修改影响的元素；

c.可以用提前封装好的 DOM 操作，将变量的新值，自动修改回页面中显示。

小结（高频笔试面试）：

· vue绑定原理：访问器属性、虚拟DOM树；

· 虚拟DOM树四大优点：

（1）内容少体积小：只保存可能变化的个别元素；

（2）遍历查找快：保存的元素少，所以每次遍历查找受影响的元素时比遍历原始DOM树快；

（3）修改效率高：每次只修改受影响的个别元素，不受影响的元素是不改变；

（4）避免重复编码：提前封装了DOM的增删改查+事件绑定操作。

四、指令

专门给 HTML 元素添加新功能的特殊 HTML 属性就是指令，含13种。

4. v-else-if

和v-if和v-else一起控制多个元素多选一显示隐藏，只要控制多个元素选择一个显示隐藏时，都用v-else-if。

<元素1  v-if="条件1">
<元素2  v-else-if="条件2">
<元素3  v-else-if="条件3">
... ...
<元素n  v-else>

//注意：
//元素123之间不能有其他元素

原理：当new Vue()扫描到v-if时，先计算v-if后的条件，如果v-if条件为true，则保留v-if所在元素，删除其余v-else-if、v-else元素；如果v-if条件为false，则先删除v-if所在元素，然后，继续计算每个v-else-if后的条件；如果任意一个v-else-if的条件为true，则只保留着一个v-else-if所在元素，删除其余v-if、v-else-if和v-else元素；如果所有v-if和v-else-if的条件都不满足，则只保留v-else，删除其余v-if和v-else-if的元素。

举例：使用v-else-if实现根据pm2.5数值不同显示不同的表情；

<body>
  <!--如果pm25<100，显示1.png
      如果pm25<200，显示2.png
      如果pm25<300，显示3.png
      如果pm25>=300，显示4.png-->
  <!-- 本例中有多个元素需要多选一，所以用v-if和v-else-if -->
  <div id="app">
    <img src="img/1.png" v-if="pm25<100">
    <img src="img/2.png" v-else-if="pm25<200">
    <img src="img/3.png" v-else-if="pm25<300">
    <img src="img/4.png" v-else>
  </div>
  <script>
    var vm = new Vue({
      el: "#app",
      data: {
        pm25: 600
      }
    })
  </script>
</body>