vue

1.什么是vue

是第三方开发的基于MVVM设计模式的渐进式的纯前端js框架

2.原生DOM vs jQuery函数库 vs框架

• 原生DOM:浏览器自带的操作网页内容的唯一途径(优点:万能,缺点繁琐)
• jQuery函数库:第三方开发的基于DOM实现的操作网页内容的简化版函数(优点:简单,缺点:仅仅是对DOM的每一步操作进行的简化,并没有从根本上减少开发步骤)
• vue框架:第三方开发的基于响应式编程方式的程序(优点:从根本上简化了开发步骤,缺点过于精简).

3.MVVM设计模式：将前端内容划分为3部分

• (1).界面(view):包括HTML+CSS且HTML是增强版的(支持变量{ {n}},支持分支和循环).
• (2). 数据模型(Mdel):是专门保存页面所需的变量和函数的对象(比如: var data={n:1}; var
  methods={add(){…},minus(){…}})
• (3).视图模型(ViewModel):自动将data中的变量和methods中的函数送到界面中指定元素上,并自动保持页面与内存中数据同步的特殊对象

4.Vue的绑定原理(vue是如何实现MVVM设计模式):访问器属性+虚拟DOM树

• 创建Vue类型的对象
• 第一件事:将模型对象的内容包裹进Vue类型的对象中托管,将原data隐藏，并为data中每个变量定义访问其属性，访问器属性直接隶属于new Vue(),访问器属性是用来实时监控每个变量的变化。然后打散引入的methods,，methods中的所有方法就直接隶属于new Vue(),从而methods中的方法和data中变量的访问器属性就是平级的关系.故对象中平级的方法想使用平级的访问器属性,就加this.
• 第二件事:创建虚拟DOM树,并渲染页面.当在new Vue()中任何情况下修改了变量其实修改的是访问器属性,然后会触发set(),自动执行set中的通知函数,把通知发给虚拟DOM树,告知虚拟DOM树哪个变量的值发生了变化,虚拟DOM树会遍历自己内部的元素,找到受本次变化影响的元素,用已经封装好的DOM操做只更新新页面中受影响的元素.

5.虚拟DOM树:

• 在newVue()创建完对象后,自动扫描el:"#app"所指向的页面区域,在扫描过程中找出可能发生变化的元素后,仅保存这些可能发生变化的元素的简化版DOM树就是虚拟DOM树.
• 优点:
• 内容少:仅包含可能发生变化的元素.
• 遍历快:可快速找到受影响的元素
• 渲染效率高:只更新受影响的元素,不受影响的元素保持不变.
• 已经封装了DOM增删改查操作,避免大量重复的代码.

6.绑定语法

• <元素>{ {自定义变量名}}</元素>
• { {}}中可放:变量,运算,三目,有返回值的函数调用,创建对象,访问数组元素,不能放程序结构(分支和循环)以及没有返回值的函数调用
• { {}}只支持元素内容变化,不支持属性变化,无法实现程序结构.

7.指令
(1).v-bind元素的属性值随变量自动变化

• <元素 :属性名=“js变量或表达式”>(:前的v-bind可省略)

(2).v-show控制一个元素的显示与隐藏

• <元素 v-show=“判断条件” >
• 若判断条件为true时,该元素原样显示
• 若判断条件为false时,自动为当前元素添加display:none属性,该元素隐藏.

(3).v-if v-else控制两个元素二选一显示与隐藏

• <元素1 v-if=“判断条件”>
• <元素2 v-else>
• 当new Vue()扫描到v-if时,先执行判断条件,若v-if的条件为true,则显示v-if所在的元素,自动删除v-else第二个元素.若v-if后的条件为false,则删除v-if所造元素,保留v-else所在的元素.
• v-if和v-else之间不能插其他任何元素.

(4).v-if v-else-if v-else 多个元素多选一显示与隐藏

• <元素 v-if=“条件1”>
• <元素 v-else-if=“条件2”>
• … …
• <元素 v-else>

(5).v-for反复生成多个相同结构的元素

• <要反复生成的元素 v-for="(elem,i) of 数组/对象/字符串/数字">
• new Vue()扫描到v-for时,会遍历of后的东西,每遍历一个,就创建一个副本,同时of自动取出当前元素的内容,元素脂肪在elem变量中,元素的下标放在i变量中,elem和i变量可在当前元素上及其子元素上用于绑定语法
  (6).v-on 绑定事件
• <元素 @事件名=“事件处理函数()”> v-on可用@代替
• 如果同时传入实参值和事件对象:
• <元素 @事件名=“事件处理函数(实参值,$event)”>
• methos:{
• 事件处理函数(形参值,e){…}
• }

(7).v-clock 防止用户短暂看到{ {}}

• 首先在CSS中写[v-clock]{display}
• 然后在元素上添加属性v-clock

(8).v-text防止用户看到{ {}},v-text会覆盖{ {}}

• <元素 v-text="xxx${变量和js表达式}"></元素>

(9).v-htm绑定HTML片段内容

• 底层相当于.innerHTML
• <元素 v-html=“变量或js表达式”></元素>

(10).v-once 只在首次加载页面时绑定一次数据显示,之后即时更新变量值页面也不会发生变化

• <元素 v-once>{ {js表达式}}</元素>
• v-once的元素根本没有加入DOM树

(11).v-pre防止内容中{ {}}被编译

• <元素 v-pre>Vue框架采用{ {变量名}]}方式绑定元素的内容</元素>

8.笔试题:v-if其实也可单独使用控制一个元素是否显示隐藏,与v-show有什么区别呢?

• 相同点:都是控制一个元素的显示与隐藏
• 差别:v-if是通过删除元素的方式来控制显示和隐藏,而v-show是通过display:none方式来控制显示与隐藏.v-if因为修改了DOM树所以效率低而v-show不修改DOM树之修改元素的CSS属性,所以效率高.

9.v-for遍历的某一个元素被修改时,v-for重新生成所有元素而不是只更新其中一个,怎么解决?

• 为要反复生成的元素添加:key=“i”,从而每次只需要修改一个数组元素对应的对应的一个HTML元素副本,效率更高.

10.v-on如何如何既传事件对象,又传自定义参数?

• 用$event关键词,代替自动创建的event对象,手动传入事件处理函数中

11.vue的双向绑定v-model
既能将程序中的变化自动送到界面上去,又能将界面上用户所做的修改返向更新回程序的变量中.
在单向绑定原理(访问器属性+虚拟DOM树)的基础上,又自动为表单元素绑定了onput或onchange事件,只要用户输入或修改了表单元素的值,都会自动触发事件.
12.点击按钮获得文本框中输入的关键词:

<div id="app">
  <!--3种触发查询的方式： 
      点按钮可查询
      按回车键且抬起按键后也可执行查询