vue知识点梳理（一）----指令

 

指令

v-if:

1、完全根据表达式的值在DOM中生成或移出一个元素。

2、若果想切换多个元素，可以把<template>元素当做包装元素，并且在其上使用v-if,最终的渲染结果不会包含它。

 <div>
      img alt="Vue logo" v-if="true" src="../assets/logo.png"
    </div>
    <img
      alt="Vue logo"
      v-if="true"
      src="../assets/logo.png"
    >
    <div> img alt="Vue logo" v-if="false" src="../assets/logo.png"</div>
    <img
      alt="Vue logo"
      v-if="false"
      src="../assets/logo.png"
    >

v-show:

1、根据表达式的值来显示或隐藏HTML元素；

2、查看DOM时，会发现元素上多了一个内联样式：style=:display:none".

3、V-show不支持<template>语法

对比v-if和v-show：

vue.js有一个局部编译/卸载过程，因为v-if中的模版可能包括数据绑定或子组件。v-if是真是的条件渲染，因为他会确保条件块在切换时合适的校会额重建条件块内的事件监听和子组件。

v-if是惰性的-------如果初始渲染时候条件为假，则什么也不做，在条件第一次变为真时，才开始局部编译（会被缓存起来）

v-show-------------元素始终被编译保留，只是基于css切换。

v-if有更高的切换消耗。（如果在运行时条件不大可能改变时使用）

v-show有更高的初始渲染消耗。（如果需要频繁切换的时候使用）

V-else:

必须跟着v-if或v-show，不过不建议v-show使用v-else，优先级会出现错误：

<p v-show="sign"></p>

<p v-show="!sign"></p>

v-show建议用另外一个v-show代替v-else

v-model：

1.该指令可以用在input、select、text、CheckBox、radio等表单控件元素上创建双向数据绑定。

2、还可以添加多个参数（number、lazy、debounce）

1.number：

将用户输入自动转换为number了死刑（如果原值转换结果为NaN，则返回原值）

<input v-model="numberText" number>

2.lazy:

将数据改到在change事件中发生

<input v-mocel="msg" @change="handlerChange" lazy><br />

{{msg}}

在input中输入值，虽然出发了input事件，但是因为加入了lazy属性，所以msg的值并没有改变，而是在出发了handlerChange事件之后值，才会改变

3、debounce：

设置一个最小的延时，在每次敲击之后延时同步输入框的值与数据。如果每次更新多要进行高耗操作（例如在input中输入内容时要随时发送ajax请求），那么它较为管用。

<input v-model="msg" debounce="5000"><br/>

{{msg}}

在5000ms内我们将输入框的内容清空，msg的值没有马上变化，还是依然保持这原来的内容。

5000ms后才被清空

v-for：

基于源数据重复渲染元素，想让谁重复就把v-for放在谁上面

<li v-for="(item,index) in items" :key="index">

--------------拓展-----------------

数组几种操作方法：

• push(): 顺序 添加
• unshift()：向数组的开头添加一个或者多个元素，并返回新的长度
• pop()：删除并返回数组的UI后一个元素，如果数组为空，则不改变数组，返回undefined
• shift()：删除输入第一个元素并返回第一个元素
• splice()：向、从数组添加/删除项目，splice（index，howmany,item）
• sort()：对数组排序（从0-100，从a-z）
• reverse()：颠倒数组元素的顺序

v-for通过数据对性的特征来决定对已有作用域和DOM元素的服用成都，这可能导致重新渲染整个列表，如果每个对象都有唯一的ID熟悉经，便可以使用track-by特性给Vue.js一个提示，因为Vue.js能尽可能的复用已有实例。

<div v-for="item in items" track-by="_uid">

如果没有唯一的键追踪，可以使用track-by=“$index”,它强制让v-for进入原位更新模式：片段 不会被移动，而是的简单的对应索引的新值刷新。这种模式也能处理数据数组中重复的值。

这让数据替换非常高效，但是也会付出一定的代价。因为此时DOM节点不在映射数组元素顺序的改变，不能同步临时状态，以及组件的私有状态。因此如果v-for快包含<input>元素或子组件，则要小心使用track-by=“$index”.

 有时我们可能想重复一个包含多个DOM元素的块，这种情况下，则可以使用<template>标签来包装重复片段，这里的<template>标签只充当一个语义包装器。

Vue.js增加了三种方法：$add(key,value)/$set(key,value)/$delete(key)