关闭

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

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

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

关闭

如何在Vue里建立长按指令

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

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

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

一个指令为各大vue组件库的table组件加上动态编辑功能

在现代的vue组件库上实现表格编辑其实不难,它们大都提供了作用域插槽,可以在插槽内插入input组件来实现。但这样做有个弊端,太重了!在几十上百行的表格内铺满input卡顿几乎不可避免,而且也很难做到美观。

Vue中插槽指令

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

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中自定义v-model指令

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

理解vue自定义指令

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

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

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

点击更多...

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