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

时间: 2018-03-22阅读: 2797标签: 指令

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

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

常用docker指令

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

Vue常用指令

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

Vue中的全部指令

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

Vue中插槽指令

意义就是在组件里留着差值方便后续组件内容新增,而且由于插件是写在父级中数据可以直接父级中传输而不需要传子再传父有些情况会减少写代码量,组件里没有设置插件名称,页面中插槽中写了插槽名称 结果页面中插槽不会被渲染

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

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

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

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

手写vue中v-bind:style效果的自定义指令

以 v- 为前缀,然后加上自己定义好的名字组成的一个指令就是自定义指令。为什么要有自定义指令呢?在有些时候,你仍然需要对普通的DOM元素进行底层的操作,这个时候就可以用到自定义指令

Vue的基础指令

通过添加v-bind:标签属性来控制标签的属性,设置后自动查询Vue里面的数据,通常简写成:标签属性,也可以传入对象,通过对象的值来控制是否为真

VUE指令大全

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

指令式编程 VS 声明式编程

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

点击更多...

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