【vue 权威指南】 学习笔记 二

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，最终的渲染结果不会包含它。

<p v-if="ok"></p>

<template v-if="ok">
    <h1></h1>
    <span></span>
    <p></p>
</template>

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 代替

<h1 v-show="test"><h1>
<p v-show="!test"></p>

1.4 v-model

用来用在input,textarea,text,checkbox,raido等表单控件元素上创建双向数据绑定。根据控件类型v-model自动选取正确的方法更新元素。

v-model 指令后面可以添加多个参数（number, lazy, debounce）

• number
  
  如果用户想将用户的输入自动转换为number类型（如果原值的转换结果为NaN，则返回原值），则可以添加一个number特性
• lazy
  
  将数据改在change事件中发生

<input v-model="msg" lazy />
{{msg}} //msg 是在change事件后才改变的

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

<input v-model="msg" debounce="5000" />
{{msg}} //内容在5000ms之后才发生改变