vue2-计算属性

vue2-计算属性

computed与methods

计算属性computed中的方法是基于依赖进行缓存，依赖不改变，就不会重新求值methods中的方法调用，总会重复执行总结：需要缓存数据用计算属性

v-if vs v-show

v-if 条件渲染v-show 总会渲染，基于css切换总结：频繁切换使用v-show  条件不太可能改变使用v-if

v-if 与 v-for

同时使用时，v-for 具有比 v-if 更高的优先级<li v-for="todo in todos" v-if="!todo.isComplete">  {{ todo }}</li>上面的代码只传递了未complete的todos而如果你的目的是有条件地跳过循环的执行，那么将 v-if 置于包装元素 (或 <template>)上。如:<ul v-if="shouldRenderTodos">  <li v-for="todo in todos">    {{ todo }}  </li></ul>

v-for

数组 第二个参数为索引 index (item, index)对象 第二个参数为键名 key 参数 第三个参数为索引index (item, key, index)整数迭代<div>  <span v-for="n in 10">{{ n }}</span></div>结果 1 2 3 4 5 6 7 8 9 10

事件修饰符

<!-- 阻止单击事件冒泡 --><a v-on:click.stop="doThis"></a><!-- 提交事件不再重载页面 --><form v-on:submit.prevent="onSubmit"></form><!-- 修饰符可以串联  --><a v-on:click.stop.prevent="doThat"></a><!-- 只有修饰符 --><form v-on:submit.prevent></form><!-- 添加事件侦听器时使用事件捕获模式 --><div v-on:click.capture="doThis">...</div><!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 --><div v-on:click.self="doThat">...</div><!-- 点击事件将只会触发一次 --><a v-on:click.once="doThis"></a>

按键修饰符

<!-- 只有在 keyCode 是 13 时调用 vm.submit() --><input v-on:keyup.13="submit"><!-- 同上 --><input v-on:keyup.enter="submit"><!-- 缩写语法 --><input @keyup.enter="submit">.enter.tab.delete (捕获 “删除” 和 “退格” 键).esc.space.up.down.left.right.ctrl.alt.shift.meta

修饰符

.lazy在默认情况下， v-model 在 input 事件中同步输入框的值与数据 (除了 上述 IME 部分)，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步：<!-- 在 "change" 而不是 "input" 事件中更新 --><input v-model.lazy="msg" >.number如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值：<input v-model.number="age" type="number">.trim如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入：<input v-model.trim="msg">