广阔的多少个放置指令,Vue的十三个常用命令

By admin in 4858美高梅 on 2019年4月15日

一、v-if指令:剖断指令,依照表明式值得真假来插入或删除相应的值。

Vue指令 常见的多少个放置指令,vue指令多少个放置

壹、v-if指令:判别指令,依据表明式值得真假来插入或删除相应的值。

二、v-show指令:条件渲染指令,无论重返的布尔值是true依然false,元素都会存在在html中,只是false的因素会暗藏在html中,并不会删除.

3、v-else指令:配合v-if或v-else使用。

4、v-for指令:循环指令,相当于遍历。

五、v-bind:给DOM绑定成分属性。

6、v-on指令:监听DOM事件。

 

常见的多少个放置指令,vue指令多少个放置
1、v-if指令:决断指令,依照表明式值得真假来插入或删除相应的值。
2、v-show指令:条件渲染…

一.v-text:用于立异标签包蕴的文件,功能和{{}}的功效一样。

v-if

2、v-show指令:条件渲染指令,无论再次回到的布尔值是true依然false,元素都会设有在html中,只是false的因素会隐藏在html中,并不会删除.

广阔的多少个放置指令,Vue的十三个常用命令。2.v-html:绑定一些暗含html代码的多少在视图上。

v-if指令能够完全依照表明式的值在DOM中变化或移除一个要素。如若v-if表达式赋值为false,那么相应的因素就会从DOM中移除;否则,对应成分的一个克隆将被另行插入DOM中,代码如下:

3、v-else指令:配合v-if或v-else使用。

三.v-show:用来决定成分的display属性,和出示隐藏有关。v-show指令的取值为true/false,当班值日为true时直接渲染,当班值日为false时渲染出来现在带有display:none属性。

<div id="example-2">
 <p v-if="greeting">Hello!</p>
</div>
<script type="text/javascript">
 var exampleVM2 = new Vue({
 el: '#example-2',
 data: {
 greeting: true
 }
 })
</script>

④、v-for指令:循环指令,也正是遍历。

肆.v-if:调整成分是或不是被渲染出来。v-if指令的取值为true/false,当班值日为true时一直渲染,当班值日为false时一贯不渲染。和v-show的不一致为:假若急需频仍的切换呈现/隐藏的,就用

是因为v-if是三个命令,需要将它增加到叁个要素上。可是若是想要切换三个成分,则能够把<template>成分当做包装成分,并在其上应用v-if,最后的渲染结果不会蕴藏它。代码如下:

5、v-bind:给DOM绑定成分属性。

  v-show,借使运转后不太恐怕切换展现/隐藏的,就用v-if。

<div id="example-2">
 <template v-if="greeting">
 <h1>Title</h1>
 <p>Paragraph 1</p>
 <p>Paragraph 1</p>
 </template>
</div>
<script type="text/javascript">
 var exampleVM2 = new Vue({
 el: '#example-2',
 data: {
 greeting: true
 }
 })
</script>

6、v-on指令:监听DOM事件。

五.v-else:未有对号入座的值,不过须要前三个兄弟节点须要求运用v-if指令。v-if和v-else只有2个被渲染出来。

v-show

 

6.v-for:达成列表的渲染,能够用于data中存放的是array情势的数量等等。v-for除了能够迭代数组,仍是可以够迭代对象和整数。

v-show指令是基于表明式的值来呈现可能隐藏HTML成分。当v-show赋值为false时,成分被埋伏。查看DOM时,会发现元素上多了3个内联样式style=”display:none”。

七.v-bind:用于动态绑定DOM成分的属性,常见的用法有:<a>标签里边的href属性,<img/>标签的src属性等。

如图所示:

八.v-on:也正是绑定事件的监听器,绑定的轩然大波触发了,能够钦定事件的处理函数。例如click事件等。

4858美高梅 1

玖.v-model:达成表单控件和数指标双向绑定,是最器重最常用的下令,壹般用在表单输入。

注:v-show不支持<template>语法。

10.v-once:特点是只渲染一次,前面成分中的数据再立异更动,都不会再度渲染。

诚如的话,v-if有更加高的切换消耗,而v-show有更加高的开首渲染消耗。因而,假如急需反复的切换,则使用v-show较好;假若在运营时规格非常的小大概改造,则利用v-if较好。

4858美高梅, 

v-else

v-else正是JavaScript中的else的意趣,它必须随着v-if恐怕v-show使用。如下代码:

<div id="example">
 <P v-if="ok">我是对的</P>
 <p v-else="ok">我是错的</p>
</div>
<script type="text/javascript">
 var exampleVM2 = new Vue({
 el: '#example',
 data: {
 ok: false
 }
 })
</script>

将v-show用在组件上时,因为指令的预先级v-else会出现难点,所以不用这样做。我们可用用另二个v-show替换v-else。

v-model

v-model指令用来在input、select、text、checkbox、radio等表单控件成分上成立双向数据绑定的。依据控件类型v-model自动选取正确的法子革新成分。代码如下:

<div id="example">
 <form>
 姓名:
 <input type="text" v-model="data.name" placeholder="姓名"/>
 <br />
 性别:
 <input type="radio" id="one" value="One" v-model="data.sex"/>
 <label for="man">男</label>
 <input type="radio" id="two" value="Two" v-model="data.sex"/>
 <label for="male">女</label>
 <br />
 <input type="checkbox" id="jack" value="book" v-model="data.interest"/>
 <label for="jack">阅读</label>
 <input type="checkbox" id="john" value="swim" v-model="data.interest"/>
 <label for="john">游泳</label>
 <input type="checkbox" id="move" value="game" v-model="data.interest"/>
 <label for="move">游戏</label>
 <input type="checkbox" id="mike" value="song" v-model="data.interest"/>
 <label for="mike">唱歌</label>
 <br />
 身份:
 <select v-model="data.identity">
 <option value="teacher" selected>教师</option>
 <option value="doctor">医生</option>
 <option value="lawyer">律师</option>
 </select> 
 </form>
</div>
<script type="text/javascript">
 new Vue({
 el: '#example',
 data: {
 data:{
 name:'',
 sex:'',
 interest:[],
 identity:''
 }
 }
 })
</script>

除外以上用法,在v-model指令后边还足以加上三个参数(number、lazy、debounce)。

1.number

假若想要用户的输入自动转变为Number类型(纵然原值的更改结果为NAN,则赶回原值),则足以增加3个number特性。

2.lazy

在暗中同意情形下,v-model在input事件中一起输入框的值与数码,大家能够加多叁个lazy特性,从而将数据改到在change事件中产生。代码如下:

<div id="example">
 <input v-model="msg" lazy style="width:500px;"/><br/>
 {{msg}}
</div>
<script type="text/javascript">
 new Vue({
 el: '#example',
 data: {
 msg:'内容是在change事件后才改变的~'
 },
 watch:{

 }
 })
</script>

3.debounce

安装3个微小的延时,在历次敲击之后延时同步输入框的值与数据。假如每一趟换代都要实行高耗操作(例如,在input中输入内容时要时时发送ajax请求),那么它相比较实惠。

<input v-model="msg" debounce="5000"/>

v-repeat

v-repeat(已经撤销)指令基于源数据再次渲染成分。可以选拔$index来显示相对应的数组索引。不细讲。

数组变动物检疫查评定

Vue.js
包装了被观看数组的演进方法,故它们能触发视图更新。被装进的不二诀窍有:push(),
pop(), shift(), unshift(), splice(), sort(), reverse()

example1.items.push({ message: 'Baz' });
example1.items = example1.items.filter(function (item) {
 return item.message.match(/Foo/);
});

vue.js还扩大了七个办法来观望变化:$set、$remove。

大家应该尽量制止直接设置数据绑定的数组成分,因为那几个变迁不会被vue.js检验到,由此也不会更新视图渲染。可以运用$set方法:

demo.items.$set(0,{childMsg:'Changed!'})

$remove是$splice的语法糖,用于从指标数组中寻找并删除成分:

demo.items.$remove(0);

注:ECMAScript5没办法检查测试到新属性增加到五个对象上或然在对象上剔除。要处理那种景观,Vue.js扩展了三种方法:$add(key,value)、$set(key,value)、$delete(key,value),这几个主意能够用来加多和删除属性,同时触发视图更新。

放置过滤器

1.filterBy(0.12版本)

 达成如图所示:

4858美高梅 2

<div id="example">
 <input v-model="searchText"/>
 <ul>
 <li v-for="user in users | filterBy searchText in 'name' ">{{user.name}}</li>
 </ul>
</div>
<script type="text/javascript">
 new Vue({
 el: '#example',
 data: {
 users:[
 {
 name:'快车',
 tag:'1'
 },
 {
 name:'出租车',
 tag:'2'
 },
 {
 name:'顺风车',
 tag:'3'
 },
 {
 name:'专车',
 tag:'4'
 }
 ]
 }
 })
</script>

在输入框中输入’专车’,获得如图所示的结果:

4858美高梅 3

2.orderBy(0.12版本)

贯彻降序排列,例:

<div id="example">
 <ul>
 <li v-for="user in users | orderBy field reverse">{{user.name}}</li>
 </ul>
</div>
<script type="text/javascript">
 new Vue({
 el: '#example',
 data: {
 field:'tag',
 reverse:-1,
 users:[
 {
 name:'出租车',
 tag:'2'
 },
 {
 name:'快车',
 tag:'1'
 },
 {
 name:'顺风车',
 tag:'3'
 },
 {
 name:'专车',
 tag:'4'
 }
 ]
 }
 })
</script>

v-for

动用$index来获得对应的数组索引。

<div id="example">
 <ul>
 <li v-for="item of items" class="item-{{$index}}">
 {{$index}} - {{parentMessage}} - {{item.msg}}
 </li>
 </ul>
</div>
<script type="text/javascript">
 new Vue({
 el: '#example',
 data: {
 parentMessage:'滴滴',
 items:[
 {msg:'顺风车'},
 {msg:'专车'}
 ]
 }
 })
</script>

注:vuejs壹.0.一七及其后低版本扶助of分隔符,更就像JavaScript遍历器语法。

神迹我们大概想重新3个暗含多少个DOM成分的块,能够采用<template>,如:

<ul>
 <template v-for="item in items">
 <li>{{ item.msg }}</li>
 <li class="divider"></li>
 </template>
</ul>

v-for也帮忙整数

代码如下:

<div>
 {{ n }} 
</div>

或者

<div>
 {{ $index }} 
</div>

v-text

v-text指令能够创新成分的textContent.

<br/>
{{msg}}

得到的结果一律。

v-html

v-html指令更新成分的innerHTML。

<div id="example">
 <p v-html="html"></p>
 <p>{{{html}}}</p>
</div>
<script type="text/javascript">
 new Vue({
 el: '#example',
 data: {
 html:'<p>效果一样</p>'
 }
 })
</script>

注:不提议在网址上平素动态渲染任意HTML片段,很轻便导致XSS攻击。

v-bind

v-bind指令用于响应更新HTML天性,将三个或许多少个attribute,可能三个零件prop动态绑定到表明式。v-bind能够简写为:

<!-- 完整语法 -->
<a v-bind:href="url" rel="external nofollow" rel="external nofollow" ></a>
<!-- 缩写 -->
<a :href="url" rel="external nofollow" rel="external nofollow" ></a>
<!-- 完整语法 -->
<button v-bind:disabled="someDynamicCondition">Button</button>
<!-- 缩写 -->
<button :disabled="someDynamicCondition">Button</button>

在绑定class也许style时,补助任何品种的值,如数组或对象。如:

<div id="example">
 <div :class="[classA,{classB:isB,classC:isC}]"></div>
</div>
<script type="text/javascript">
 new Vue({
 el: '#example',
 data: {
 classA:'A',
 isB:false,
 isC:true
 }
 })
</script>

结果如图:

4858美高梅 4

只要未有参数时,能够绑定到一个目标。注意,此时class和style绑定不援救数组和对象(对象key会转变为题写)。代码如下:

<div id="example">
 <div v-bind="{id:someProp,'OTHERATTR':otherProp}"></div>
</div>
<script type="text/javascript">
 new Vue({
 el: '#example',
 data: {
 someProp:'idName',
 otherProp:'prop'
 }
 })
</script>

结果如图:

4858美高梅 5

在绑定prop时,prop必须在子组件中声称。能够用修饰符内定分歧的绑定类型。修饰符为:

.sync——双向绑定,只好用于prop绑定。

.once——单次绑定,只好用来prop绑定。

.camel——将绑定的特点名字转变回驼峰命名。只好用来普通HTML特性的绑定,平常用于绑定用驼峰命名的SVG本性,比如viewBox。

v-on

v-on指令用于绑定事件监听器。事件类型由参数钦点。

倘若访问原始DOM事件,能够使用$event传入方法。

<button v-on:click="doThis('hello',$event)"></button>
<!--缩写-->
<button @click="doThis('hello',$event)"></button>

全部例子:

<div id="example">
 <button v-on:click="greet">Greet</button>
</div>
var vm = new Vue({
 el: '#example',
 data: {
 name: 'Vue.js'
 },
 // 在 methods 对象中定义方法
 methods: {
 greet: function (event) {
 // 方法内 this 指向 vm
 alert('Hello ' + this.name + '!')
 // event 是原生 DOM 事件
 alert(event.target.tagName)
 }
 }
})
// 也可以在 JavaScript 代码中调用方法
vm.greet(); // -> 'Hello Vue.js!'

###事件修饰符

<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat">
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

### 按钮修饰符

<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">
<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">

方方面面包车型地铁开关小名:enter,tab,delete,esc,space,up,down,left,right

v-ref

在父组件上登记2个子零部件的目录,便于直接待上访问。不要求表明式,必须提供参数id。可以透过父组件的$refs对象访问子组件。

v-el

为DOM成分注册三个目录,方便通过所属实例的$els访问这些成分。能够用v-el:some-el设置this.$els.someEl。

hello
world

透过this.$els获取相应的DOM成分:

this.$els.msg.textContent //'hello'
this.$els.otherMsg.textContent //'world'

在新的vuejs中,轻巧起见, v-el 和 v-ref
合并为3个 ref 属性了,能够在组件实例中经过 $refs 来调用。

v-pre

跳过这一个因素和它的子成分的编写翻译进程。能够用来体现原始 Mustache
标签。跳过大量尚无指令的节点会加快编写翻译。

{{ this will not be compiled }}

v-cloak

本条命令保持在要素上直到关联实例结束编写翻译。和 CSS 规则如 [v-cloak] {
display: none } 一同用时,那一个命令能够隐藏未编写翻译的 Mustache
标签直到实例准备完成。

css代码:

[v-cloak] {
 display: none;
}

html:

<div v-cloak>
 {{ message }}
</div>

如上正是本文的整体内容,希望本文的始末对我们的学习大概工作能拉动一定的帮带,同时也期待多多援救脚本之家!

你或许感兴趣的小说:

  • Vuejs第7篇之vuejs老爹和儿子组件通讯
  • Vuejs第七篇之组件成效域及props数据传递实例详解
  • vueJS简单的点击显示与潜伏的成效【实当代码】
  • Vuejs第10篇之Vuejs过渡动画案例周到剖析
  • VueJS周密剖析
  • VUEJS实战之创设基础并渲染出列表(1)
  • VUEJS实战之修复错误并且美化时间(贰)
  • 根据Vuejs完成购物车成效
  • Vuejs第七篇之Vuejs组件的概念实例分析
  • vuejs在条分缕析时出现闪烁的由来及防范闪烁的艺术

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有