vuejs指令详解
v-ifv-if指令可以完全根据表达式的值在DOM中生成或移除一个元素。如果v-if表达式赋值为false，那么对应的元素就会从DOM中移除；否则，对应元素的一个克隆将被重新插入DOM中，代码如下： v-showv-show指令是根据表达式的值来显示或者隐藏HTML元素。当v-show赋值为false时，元素被隐藏。查看DOM时，会发现元素上多了一个内联样式style="display:none"。 如图所示：
注：v-show不支持语法。 一般来说，v-if有更高的切换消耗，而v-show有更高的初始渲染消耗。因此，如果需要频繁的切换，则使用v-show较好；如果在运行时条件不大可能改变，则使用v-if较好。 v-elsev-else就是JavaScript中的else的意思，它必须跟着v-if或者v-show使用。如下代码：
除了以上用法，在v-model指令后面还可以添加多个参数（number、lazy、debounce）。 1.number 如果想要用户的输入自动转换为Number类型（如果原值的转换结果为NAN，则返回原值），则可以添加一个number特性。 2.lazy 在默认情况下，v-model在input事件中同步输入框的值与数据，我们可以添加一个lazy特性，从而将数据改到在change事件中发生。代码如下： {{msg}}3.debounce 设置一个最小的延时，在每次敲击之后延时同步输入框的值与数据。如果每次更新都要进行高耗操作（例如，在input中输入内容时要随时发送ajax请求），那么它较为有用。 v-repeat v-repeat（已经废除）指令基于源数据重复渲染元素。可以使用$index来呈现相对应的数组索引。不细讲。 数组变动检测Vue.js 包装了被观察数组的变异方法，故它们能触发视图更新。被包装的方法有：push(),pop(),shift(),unshift(),splice(),sort(),reverse() vue.js还增加了两个方法来观测变化：$set、$remove。 我们应该尽量避免直接设置数据绑定的数组元素，因为这些变化不会被vue.js检测到，因而也不会更新视图渲染。可以使用$set方法：
$remove是$splice的语法糖，用于从目标数组中查找并删除元素：
注：ECMAScript5无法检测到新属性添加到一个对象上或者在对象上删除。要处理这种情况，Vue.js增加了三种方法：$add(key,value)、$set(key,value)、$delete(key,value)，这些方法可以用来添加和删除属性，同时触发视图更新。内置过滤器1.filterBy(0.12版本) 实现如图所示：
v-for
 ### 按键修饰符 全部的按键别名：enter，tab，delete，esc，space，up，down，left，right v-ref 在父组件上注册一个子组件的索引，便于直接访问。不需要表达式，必须提供参数id。可以通过父组件的$refs对象访问子组件。 v-el 为DOM元素注册一个索引，方便通过所属实例的$els访问这个元素。可以用v-el:some-el设置this.$els.someEl。 hello
world
通过this.$els获取相应的DOM元素： 在新的vuejs中，简单起见， v-el 和 v-ref 合并为一个 ref 属性了，可以在组件实例中通过 $refs 来调用。 v-pre跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。
v-cloak这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。 css代码： html：
{{ message }}
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持编程之家！ （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
