vue内置指令大全_整理常用的Vue内置指令

更新日期: 2018-03-22 阅读: 5.2k 标签: 指令

v-bind指令: 

v-bind主要用于动态绑定dom元素的属性,例如:v-bind:href  v-bind:class  v-bind:title等等, v-bind 指令可以简写成一个冒号“:”,在开发中常用简写形式,也就是以下两种写法是等价的。

<a v-bind:href="link">fly63.com</a>
<!-- 等级于 -->
<a :href="link">fly63.com</a>


v-text指令: 

绑定元素的文本内容, 用于更新标签包含的文本。例如:<span v-text="msg"></span> 等同于 <span>{{msg}}</span>;  


v- html指令: 

绑定一些包含html代码数据在视图上  ,用于更新元素的innerHTML。比如:“<b>hello,vue</b>”,这个字符串包含了<b>标签,要想<b>不被当作普通的字符串渲染出来,就得用 v-html 指令。例如:<div v-html="msg"></div> 等同于 <div>{{{msg}}}</div>;  


v-show指令 :

v-show是用来控制元素的display css属性的。  v-show指令的取值为true/false,分别对应着元素的显示/隐藏。  

 

v-if指令:

v-if用于控制元素是否需要被渲染出来,v-if指令的取值为true/false,可以动态在DOM内添加或删除DOM元素。


v-else 指令 : 

条件渲染指令,必须跟v-if成对使用,v-if 和 v-else 只有一个会被渲染出来。只有当v-if值为false的时候,v-else中的元素才能被渲染出来


v-else-if 指令: 

判断多层条件,必须跟v-if成对使用;类似于if(){}else if(){}。


v-for 指令 : 

v-for主要用于列表的渲染,循环指令,相当于遍历。例如:<li v-for="(item,index) in todos"></li>


v-on 指令 : 

v-on 指令相当于绑定事件的监听器,绑定的事件触发了,可以指定事件的处理函数。处理函数需要写在methods中    例如:v-on:click  v-on:keyup 等,v-on指令可以缩写为@,也就是以下两种写法是等价的。

<!-- 完整语法 -->  
<a v-on:click="doSomething"></a>  
<!-- 缩写 -->  
<a @click="doSomething"></a>


v-model 指令 : 

这是一个最重要最常用的指令,一般用在表单输入,它帮助我们轻易地实现表单控件和数据的双向绑定。例如:<input v-model="message">  


v-once 指令 : 

不需要表达式,v-once指令的特点是只渲染元素或组件一次,随后的渲染,组件/元素以及下面的子元素都当成静态页面不在渲染。


v-cloak指令:

不需要表达式,这个指令保持在元素上直到关联实例结束编译。


v-pre指令:

不需要表达式,跳过这个元素以及子元素的编译过程,以此来加快整个项目的编译速度;例如:<span v-pre>{{ this will not be compiled }}</span>; 

 


本文内容仅供个人学习、研究或参考使用,不构成任何形式的决策建议、专业指导或法律依据。未经授权,禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载,请保留原文来源信息,不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持!

链接: https://fly63.com/article/detial/536

相关推荐

这15个Vue指令,让你的项目开发爽到爆

V-Hotkey这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟:你想要点击外部区域关掉某个组件吗?用这个指令可以轻松实现。

vue中v-html识别换行符_插入文本不换行的问题解决总汇

v-html解决字符串内根据换行符号自动换行问题,通过加上style=white-space:pre-wrap;在实际开发中,推荐使用css样式来解决换行问题,在这里简单介绍下关于white-space属性有哪些?

vue自定义指令:防抖与节流

防抖:触发事件后,一段时间内没有再次触发则执行,若此时间段内再次触发重新延时!节流一段时间内首次触发时立即执行,此时间段内再次触发,不会执行!

VUE指令大全

v-text主要用来更新textContent,可以等同于JS的text属性。v-html双大括号的方式会将数据解释为纯文本,而非HTML。为了输出真正的HTML,可以用v-html指令。它等同于JS的innerHtml属性。

指令式编程 VS 声明式编程

指令式编程:告诉机器该如何做,并得到自己想要的结果。声明式编程:告诉机器您想得到什么,让机器自己计算该如何做。

vue v-for 使用问题Error in render

今天使用v-for指令的时候遇到一个错误:[Vue warn]: Error in render: \\\"TypeError: Cannot read property \\\'children\\\' of undefined\\\",猜测使用了嵌套属性的原因,在页面中无法解析出具体属性值

Vue中的全部指令

可以用方括号括起来的 JavaScript 表达式作为一个指令的参数:动态参数预期会求出一个字符串,异常情况下值为 null。这个特殊的 null 值可以被显性地用于移除绑定。任何其它非字符串类型的值都将会触发一个警告。

Vue.js 自定义指令使用场景及案例

使用场景:代码复用和抽象的主要形式是组件;当需要对普通 DOM 元素进行底层操作,此时就会用到自定义指令;但是,对于大幅度的 DOM 变动,还是应该使用组件

如何在Vue里建立长按指令

本文将解释如何通过按下(或按住)按钮来执行功能和删除输入。首先,我将解释如何在VanillaJS中实现这一目标。然后,为它创建一个Vue指令。那么,让我们开始吧。

Vue自定义指令:实现文字溢出显示、鼠标移入浮层展示全部

将文字放到一个容器中,将容器的样式(主要是有关字体的样式)都设置为当前元素的样式,然后获取容器的宽,也就是文字的宽,如果文字的宽度超过了当前元素的宽度,则给溢出隐藏的css样式

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!