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

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

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

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

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

常用docker指令

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

Vue中插槽指令

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

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

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

Vue常用指令

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

如何在Vue里建立长按指令

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

Vue的基础指令

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

VUE指令大全

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

vue中自定义v-model指令

v-model是vue实现数据双向绑定最好的一个指令, v-model本质上不过是语法糖,它负责监听用户的输入事件以更新数据,当你修改页面的时候 v-model 自动去更新数据层 (model),当你修改数据的时候v-model自动去更新视图层 (view)

理解vue自定义指令

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

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

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

点击更多...

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

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广