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

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

---

一、vue的使用 Vue.jsVue.js - The Progressive JavaScript Frameworkhttp://cn.vuejs.org1.vue的下载

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

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

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

（2）使用vue脚手架工具

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

2.vue三步

1.做界面

1.1将界面中所有元素包裹在一个唯一的父元素下，通常用

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程序，模拟购物车加减商品数量；

<button @click=“minus”>-

{{n}}

<button @click=“add”>+

二、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的增删改查+事件绑定操作。

三、绑定语法

绑定语法是 在界面中标记可能发生变化的元素内容的特殊语法，只要发现一个元素的内容可能随程序自动改变时，都要用绑定语法来标记。

<元素>xxxx{{自定义变量名}}xxx</元素>

{{ }}的原理和模板字符串中的${ }完全一样，可以放一切有返回值的合法的js变量或表达式如变量、三目、算术计算、访问数组元素、创建对象、调用函数；不能放分支、循环以及没有返回值的js表达式。

举例：使用{{}}显示隐藏不同数据；

Welcome:{{uname}}

性别:{{sex == 1?"男":"女"}}

小计:¥{{price*count.toFixed(2)}}

下单时间:{{new Date(orderTime).toLocaleString()}}

星期{{arr[day]}}

效果如下：

    

四、指令

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

1.v-bind

如果元素的属性值可能随程序自动变化，则不能用{{ }}绑定，要用v-bind指令代替{{ }}绑定属性值。格式如下：

<元素 v-bind:属性名=“js变量或表达式”>

//简写

<元素 :属性名=“js变量或表达式”>

//注意：

//加了: 之后就不需要{{}}了

//=右边的""就起到了{{}}的作用

原理：new Vue()在扫描页面时，只要发现 : 开头的属性，都会先自动计算=右边的js变量或表达式的值，然后将变量或表达式的值作为当前属性的属性值；

举例：根据pm2.5数值，显示不同表情；

<img :src="

pm25<100 ? ‘img/1.png’:

pm25<200 ? ‘img/2.png’:

pm25<300 ? ‘img/3.png’:

‘img/4.png’

">

效果如下：

2.v-show

专门控制一个元素显示隐藏的特殊指令，用程序控制一个元素的显示或隐藏时，都用v-show。

<元素 v-show=“true/false”>

原理：只要new Vue()扫描到v-show，就会先计算=右边的判断条件的值，如果=右边的判断条件值为true，则当前元素默认正常显示，如果=右边的判断条件值为false，则v-show自动被翻译为style=“display:none”，表示当前元素隐藏。

举例：打开和关闭对话框；