美文网首页
Vue中的常用指令

Vue中的常用指令

作者: 杜小黑妞 | 来源:发表于2017-10-23 23:52 被阅读0次

    1、v-text

    用来操作当前元素的textContext和innerText属性,会覆盖掉标签中原有的内容。

    无法读取文本内的html标签,会当做文本原样输出。

    2、v-html

    用来操作当前元素的innerHTML文本内容,也会覆盖标签原有的内容。

    可以读取文本中的html标签,并且解析显示在页面中。

    3、v-if

    用来显示和隐藏当前元素,值为true和false。

    为true时,表示当前元素被销毁删除;

    为false时,表示重新创建生成元素。

    注:尽量避免使用,太多Dom的操作会消耗性能,不利于性能优化。

    4、v-show

    用于设置元素的显示个隐藏。

    与v-if不同的是,v-show操作的是css的display属性,

    值为true时,设置当前元素的display属性值为“block”,

    值为false时,设置当前元素的display属性值为“none”。

    5、v-for

    用来遍历循环数据。

    使用时需要添加一个唯一的key属性,通常使用id或者index。(:key=‘index’或者:key=‘item.id’)。

    6、v-on

    用来绑定事件。

    函数必须写在methods中。

    缩写形式:@, 例如,@click。

    7、v-bind

    用于给DOM元素动态绑定属性。

    缩写形式:冒号,例如,:title=‘你好,世界 !’。

    在绑定class或style特性时,支持其它类型的值,如数组或对象。也可以进行字符串拼接。代码示例如下:

    8、v-model

    表单元素上实现双向绑定。

    data函数中返回对象用return。

    9、 v-pre

    设置了这条指令后,这个元素以及它的子元素上的所有内容将不会被解析执行。

    10、v-once

    设置了这条指令表示元素和组件只渲染一次。随后的重新渲染,元素或组件及其身上的所有子节点将被视为静态内容并跳过。可以用于优化更新性能。

    11、.prevent

    阻止事件默认行为。

    相关文章

      网友评论

          本文标题:Vue中的常用指令

          本文链接:https://www.haomeiwen.com/subject/pgnouxtx.html