1.指令
1.1内部指令
基础指令:v-show , v-else , v-model , v-repeat , v-for , v-text , v-el , v-html , v-on , v-bind , v-ref , v-pre , v-cloak , v-if
1.1 v-if
根据表达式的值在DOM中生成或者移除一个元素。v-if 赋值为false,对应的元素会从DOM中移除,否则对应元素的一个克隆将会被重新插入DOM中,如果切换多个元素,则可以把<template>
元素当成包装元素,并在其上使用v-if,最终的渲染结果不会包含它。
1.2 v-show
根据表达式的值来显示或者隐藏HTML元素,当v-show的值为false ,元素被隐藏,DOM上有内联样式,style="display:none", v-show 不支持 <template>
语法
注意:一般v-if 有更高的切换消耗,v-show有更高的初始渲染消耗,因此,如果频繁切换,则使用v-show交换,如果在运行时条件不大可能改变,则使用v-if较好
1.3 v-else
必须跟着v-if 或者v-show,v-show 后有else 会出现 优先级的问题,所有不要在其后用v-else ,用一个v-show 代替
1.4 v-model
用来用在input,textarea,text,checkbox,raido等表单控件元素上创建双向数据绑定。根据控件类型v-model自动选取正确的方法更新元素。
v-model 指令后面可以添加多个参数(number, lazy, debounce)- number 如果用户想将用户的输入自动转换为number类型(如果原值的转换结果为NaN,则返回原值),则可以添加一个number特性
- lazy 将数据改在change事件中发生
{ {msg}} //msg 是在change事件后才改变的
- debounce 设置一个最小的延时,在每次敲击之后延时同步输入框的值和数据,如果每次更新都要进行高耗操作(例如在input中输入内容时要发送ajax请求),那么它较为有用,
{ {msg}} //内容在5000ms之后才发生改变