Vue指令

Vue指令

带有v-前缀的特殊属性

1. v-bind 动态绑定属性 可简写为 “:”
2. v-if 条件渲染指令
   动态创建/删除 根据条件来创建或者删除dom节点
3. v-show 动态显示/隐藏
4. v-on:click 实现事件注册的指令
   绑定事件 可简写为 @click
5. v-for 遍历
6. v-model 双向绑定表单
7. v-cloak 防止表达式闪烁

注：

v-cloak
给模板内得元素添加v-cloak属性后，元素在vue没有加载完的时候就有这个属性，当vue加载完成后这个恶属性就消失了，所以我们可以给这个属性设置css样式为隐藏

 <style>
    [v-cloak]{
        display:none
    }
 </style>

visibility:hidden 元素消失了 但后续的元素还是保持不变，不会破坏文档流结构 ===> 产生了重绘了 (repaint) display:none 让元素消失了 后续的元素会占据消失元素的位置，破坏文档流结构 ===> 产生了回流了（reflow）

8.v-text/v-html
v-text会指定将模板内元素的textContent属性替换为指令值所代表的数据
v-html可以解析HTML标签，更改元素的innerHTML，性能比v-text较差

9.v-pre
跳过元素和其子元素的编译过程，可以用来显示mustache

v-for

v-for 用来遍历数据（既可以遍历数组也可以遍历对象） 通常使用key属性给没想元素添加识别码
v-for可以通过添加index给每项元素添加index索引
语法：
v-for="(item,index) in arr"
第一个参数代表：遍历数组的每个元素 第二个参数代表：遍历数组的下标，从0开始！

数组的更新检测

Vue将被侦听的数组的变更方法进行了包裹，所以他们将会触发视图的更新。这些被包裹过的方法包括

• push() 往数组的后面添加元素，返回数组的长度
• pop() 从后面删除一个元素，返回删除的元素
• shift() 从前面删除一个元素，返回删除的元素
• unshift() 从数组的前面追加元素，返回数组的长度
• splice() 数组的删除，剪贴，插入
• sort() 数组的排序
• reverse() 数组的翻转

v-for="(value,key,index) in jsonObj"
第一个参数value代表遍历对象的value值
第二个参数key代表遍历对象的key值
第三个参数index代表所遍历的下标

v-if、v-show

v-if和v-show都是表示控制dom元素显示隐藏的

只不过v-if有更高的切换开销，因为v-if是动态创建dom和删除dom元素。同时也可以配合v-else使用，可以使用在template标签上。

当有else分支逻辑的时候，可以给该元素加上v-else指令来控制，v-else会根据上面的那个v-if来控制，效果与v-if相反，注意，一定要紧挨着还有v-else-if指令可以实现多分支逻辑

<input type="text" v-model="type">
<div v-if="type === 'A'">
	A
</div>
<div v-else-if="type === 'B'">
	B
</div>
<div v-else-if="type === 'C'">
	C
</div>
<div v-else>
	Not A/B/C
</div>

注意：当v-for和v-if出同一节点的时候，v-for的优先级比v-if更高

v-show有更高的初始渲染开销，不管条件是什么都会讲元素渲染出来，后期只是简单的基于css进行切换
因此，如果需要非常频繁的切换，则使用v-show比较好；如果在运行条件很少改变，则使用v-if较好

v-on

事件修饰符
.stop 阻止事件冒泡
.prevent 取消事件默认行为
.self 只有在自身上面触发
.once 只触发一次
.capture 内部元素触发的事件现在此处理，然后才交由内部元素进行处理
按键修饰符
@keyup.enter (回车键)

监听事件-直接触发代码

直接在v-on:后面加上要绑定的事件类型，值里可以执行一些简单的JavaScript表达式

可以将一些方法设置在methods里，这样就可以在@click的值里直接写方法名字即可，默认会在方法中传入事件对象，当写方法的时候加了()就可以进行传参，这个时候如果需要事件对象，那就主动传入$event

1）使用v-on在HTML中监听的好处

1.扫一眼HTML缪ban就能轻松定位在JavaScript代码里对应的方法（方便查找）
2.易于测试（因为无须再JavaScript里手动绑定事件，所以ViewModel内得代码是纯粹的逻辑代码，并且完全和DOM解耦）
3.不需要担心如何清理，已经销毁的ViewModel的事件处理器

2）方法事件处理器-写函数名

<div v-on:click="clickme($event,1,2)">点我</div>

<script>
	new Vue({
		methods:{
			clickme(e,a,b){
				console.log(e事件对象，1，2)
			}
		}
	})
</script>

v-model

修饰符

.lazy 默认是数据改变，所有的都会改变，而使用lazy的话，等光标离开的时候才会进行更新操作

.number 如果无法被parseFloat解析的话就会原样输出，否则就会输出解析后的内容

.trim 去掉前后的空格
原理：基于双向数据绑定的原理

v-bind

绑定HTML class
对象语法

        <p class="red">这是一个p段落标签...</p>
        <p :class="{'red':isRed}">这是一个p段落标签...</p>  
        <p class="red" :class="(isBig ? 'big' : '')">这是一个p段落标签...</p>
        <p><button @click="isRed=!isRed">切换class</button></p>
    </div>

数组语法

<p :class="['red',(isBig ? 'big' : '')]">这是一个p段落标签...</p>

绑定内联样式
对象语法

<p :style="{backgroundColor:background,fontSize:'40px'}">我是p段落标签...</p>

 //key名需要采用驼峰式的写法哦，不然会报错的！
 new Vue({
     el:"#app",
     data:{
     	background:"green"
     }
 })

数组语法

<p :style="[{backgroundColor:background,fontSize:'40px'}]">我是p段落标签...</p>