vue的相关知识

Posted 2020-11-15 sna-ling

一、DOM vs 函数库 vs框架

DOM：  API繁琐

函数库：JQuery对DOM的每个步骤的API进行一对一的简化，但并没有改变DOM做事的步骤和方法。

框架：一个包含部分已经实现的功能的半成品项目，只是暂时缺少数据和个性化页面。

         优点：彻底简化了开发的步骤，且彻底避免了大量重复的劳动。

         缺点：需要转变观念。

二、什么是Vue

Vue是基于MVVM设计模式开发的渐进式的前端js框架

       渐进式：可以有选择的，逐渐使用框架中的功能   

        vs  "全家桶"：必须完整使用所有功能，不能掺杂其他技术

        前端JS:Vue是纯前端的框架，无需node.js,就可以独立运行。但是,需要node.js在运行之前将vue

        编译为浏览器认识的普通的html、CSS、和JS文件

        何时：适合于以数据操作为主的项目。

三、如何使用Vue:

        官网：https://cn.vuejs.org/

2种：

1.下载并引入vue.js文件

最新版本：2.5.x

开发版本：未压缩，带错误提示

生产版本：压缩，去掉错误提示

2.安装脚手架工具

四、Vue的原理：

旧式前端划分：

       HTML：定义网页静态内容

         CSS：定义网页静态样式

            JS： 为网页添加动态行为

MVVM设计模式：

       新的前端划分：

1.将一个.html文件，拆分为多个组件文件：.vue/.component

2.每个组件又细分为3部分：

1.界面(View):HTML和CSS

2.数据模型(Model):在内存中自己创建的或从服务器端请求来的保存页面

需要的所有数据的对象或数组：Ajax中的res

3.控制器(ViewModel/controller):自动将数据模型中的数据绑定/同步到页面需要的位置-----不再需要程序员

反复手工查找并修改元素。

控制器的原理：2大子系统：

1.响应系统：监视模型数据的变化，并通知框架修改页面的机制。

其实是将数据模型中每个属性变为一个访问属性

每次修改模型中的数据时，都会自动触发set

set会发出通知：“xx变量发生改变”

2.虚拟DOM树：扫描原始DOM而产生的一棵仅包含可能变化的元素的新的简版DOM树

优点：

1.仅包含可能变化的元素的个别属性----简单---遍历快

2.修改时，可仅找到发生变化的元素仅修改发生变化的元素-----效率高

vue对象创建时，首次扫描并创建虚拟DOM树

响应系统发出通知时：虚拟DOM树收到通知，并查找要修改的个别元素，实际修改DOM树。

五、绑定语法

什么是：在页面中使用特殊符号{{}}指定所需的变量名

       学名：interpolation 插值语法

何时：只要页面的某个位置需要动态生成值时

如何：

{{模型变量名}}

{{表达式}}

表达式包括：算术计算，关系计算/逻辑运算，方法调用，访问数组元素，访问对象的属性，三目运算符

强调：不能写程序结构

if else if   else

for while do while

 

六、指令(directive)

什么是：为HTML提供新功能的特殊属性

为什么：{{}}只能绑定元素的内容(innerHTML),不能绑定属性/事件或执行结构

何时：不能使用{{}}绑定的位置，又想动态生成值，都要用各种指令来增强

如何：

1.v-bind:专门用于动态绑定属性值

何时：只要一个属性的值需要动态生成时

如何：完整：<ANY v-bind:属性=“表达式”>

           可省略v-bind

2.v-for:专门根据一个数组中的元素，动态反复生成多段相同的页面内容

何时：只要根据一个数组中的元素，动态绑定页面内容时

如何：<ANY v-for="模型变量 of 数组类型模型变量">

根据of后数组中的元素个数，反复生成多个<ANY>元素

of 前的模型变量时临时决定的，获得数组中的一个当前元素

of 前的模型变量在，<ANY>内部可用于绑定

3.控制元素的显示隐藏：

v-if:专门根据一个条件表达式来决定当前元素是否显示

只有条件表达式为true时，当前元素才显示。

何时：只要根据一个条件控制元素的显示隐藏时

如何：

<ANY v-if="条件表达式 1"

<ANY v-else-if="条件表达式 2"

<ANY  v-else-if="......"

<ANY v-else //不同写条件

强调：v-if和v-else-if和v-else之间不能插入其他元素

 

v-show:专门根据一个条件表达式来决定当前元素是否显示

只有条件表达式为true时，当前元素才显示

采用display:block/none的方式显示隐藏

何时：如果仅控制一个元素的显示隐藏时，首选v-show

vs  v-if:采用添加删除元素的方式，控制显示隐藏

           何时：多个元素选其一显示时，首选v-if v-else-if  v-else

七、绑定事件

界面View中：

<ANY v-on:事件名=“处理函数()”>

       简写：v-on：可替换为@

new Vue({})中：

new Vue({

      el:"选择器",

data:{模型变量}，

methods:{//专门保存控制器所需所有自定义方法的属性

处理函数（）{//处理函数：function(){

  //this->当前Vue对象->vm

  this.模型变量  //访问模型变量

  }}

     }

 })

 问题1：阻止默认行为

解决：2步：

1.界面：当事件发生时，自动调用js语句，并传入$event作为参数

<ANY @click="处理函数($event)">

$event就是DOM中的e,是vue封装的事件对象

2.new Vue()中：

methods:{

     //定义形参，准备接事件对象

     处理函数(e){

          e.preventDefault();

      }

}

简写：事件修饰符，对DOM中事件API的简写：

2个：

阻止默认行为：@click.prevent="处理函数()"

取消冒泡：@click.stop="处理函数()‘=>e.stopPropagaton()