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

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

根据表达式的值在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>

根据表达式的值来显示或者隐藏HTML元素，当v-show的值为false ,元素被隐藏，DOM上有内联样式，style="display:none", v-show 不支持 <template> 语法

注意：一般v-if 有更高的切换消耗，v-show有更高的初始渲染消耗，因此，如果频繁切换，则使用v-show交换，如果在运行时条件不大可能改变，则使用v-if较好

必须跟着v-if 或者v-show，v-show 后有else 会出现优先级的问题，所有不要在其后用v-else ,用一个v-show 代替

<h1 v-show="test"><h1>

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

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

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

<input v-model="msg" lazy />

{{msg}} //msg 是在change事件后才改变的

debounce

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

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

{{msg}} //内容在5000ms之后才发生改变