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

更新日期: 2018-03-22阅读量: 2972标签: 指令

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>; 

 


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

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

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

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

理解vue自定义指令

除了核心功能默认的内置指令(v-model和v-show),vue也允许注册自定义指令。注意,在Vue2.0中,代码复用和抽象的主要形式是组件,但是在有些情况下,我们需要对普通的DOM元素进行底层操作,这时候就需要我们用到自定义指令

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

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

Vue中的全部指令

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

Less导入指令

在标准CSS中,@import 规则必须位于所有其他类型的规则之前。但是Less.js不在乎我们将 @import 语句放在什么位置。@import 伪指令常用于在代码中导入文件,它将Less 代码分布在不同的文件上,并允许轻松地维护代码的结构

Vue 常用自定义指令

使用该指令可以隐式的扩展元素的点击范围,由于借用伪元素实现,故不会影响元素在页面上的排列布局。可传入的参数为:上右下左扩展的范围,单位 px,默认向外扩展 10px。指令的代码如下:

分享8个非常实用的Vue自定义指令

在 Vue,除了核心功能默认内置的指令 ( v-model 和 v-show ),Vue 也允许注册自定义指令。它的作用价值在于当开发人员在某些场景下需要对普通 DOM 元素进行操作。

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

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

Vue常用指令

vue.js官方给自己的定为是数据模板引擎,并给出了一套渲染数据的指令。本文详细介绍了vue.js的常用指令。Vue.js 使用了基于 HTML 的模板语法最简单的使用vue的方式是渲染数据,渲染数据最常见的形式就是

常用docker指令

docker 我的常用指令:从docker仓库下载镜像到本地、列出本地所有镜像、查看正在运行的容器、列出所有创建的容器、停止、查看日志

点击更多...

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