vuejs指令详解,vue指令多少个放置

壹、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指令多少个放置
一、v-if指令:判断指令,依据表达式值得真假来插入或删除相应的值。
二、v-show指令:条件渲染…

1.v-text:用于立异标签蕴涵的文本,功能和{{}}的法力等同。

v-if

2、v-show指令:条件渲染指令,无论重回的布尔值是true照旧false,成分都会设有在html中,只是false的成分会隐藏在html中,并不会删除.

贰.v-html:绑定1些分包html代码的数目在视图上。

v-if指令能够完全根据表明式的值在DOM中变化或移除3个要素。假设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,最后的渲染结果不会蕴藏它。代码如下:

五、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事件。

vuejs指令详解,vue指令多少个放置。5.v-else:未有对号入座的值,不过须求前2个小兄弟节点必须求使用v-if指令。v-if和v-else只有三个被渲染出来。

v-show

 

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

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

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

如图所示:

8.v-on:也正是绑定事件的监听器,绑定的事件触发了,可以钦定事件的处理函数。例如click事件等。

澳门葡京 1

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

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

10.v-once:特点是只渲染3次,前边元素中的数据再立异变更,都不会再也渲染。

诚如的话,v-if有越来越高的切换消耗,而v-show有更加高的启幕渲染消耗。因而,若是急需频仍的切换,则选取v-show较好;就算在运作时规格一点都不大大概改变,则使用v-if较好。

 

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会现身难题,所以不要那样做。大家可用用另3个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,则赶回原值),则足以加上贰个number天性。

2.lazy

在暗中认可境况下,v-model在input事件中联手输入框的值与数据,大家可以增加3个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);

注:ECMAScript五无法检查测试到新属性添加到3个对象上恐怕在对象上剔除。要处理这种状态,Vue.js增添了三种方法:$add(key,value)、$set(key,value)、$delete(key,value),那些措施能够用来添加和删除属性,同时触发视图更新。

停放过滤器

1.filterBy(0.12版本)

 达成如图所示:

澳门葡京 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>

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

澳门葡京 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.17及事后低版本援助of分隔符,更近乎JavaScript遍历器语法。

偶尔大家也许想再也一个带有多个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}}

获取的结果1致。

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性情,将3个要么多个attribute,或许2个零部件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>

结果如图:

澳门葡京 4

1经未有参数时,能够绑定到一个指标。注意,此时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>

结果如图:

澳门葡京 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

在父组件上注册二个子零部件的目录,便于直接待上访问。不需求表明式,必须提供参数id。能够经过父组件的$refs对象访问子组件。

v-el

为DOM成分注册3个索引,方便通过所属实例的$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
合并为2个 ref 属性了,能够在组件实例中经过 $refs 来调用。

v-pre

跳过这一个成分和它的子成分的编写翻译进程。能够用来呈现原始 Mustache
标签。跳过多量从未有过指令的节点会加紧编写翻译。

{{ this will not be compiled }}

v-cloak

这几个命令保持在要素上直到关联实例截止编写翻译。和 CSS 规则如 [v-cloak] {
display: none } 1起用时,这些命令能够隐藏未编写翻译的 Mustache
标签直到实例准备甘休。

css代码:

[v-cloak] {
 display: none;
}

html:

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

上述就是本文的全体内容,希望本文的内容对大家的就学或然办事能带来一定的帮扶,同时也愿意多多接济脚本之家!

您大概感兴趣的小说:

  • Vuejs第九篇之vuejs老爹和儿子组件通讯
  • Vuejs第玖篇之组件作用域及props数据传递实例详解
  • vueJS简单的点击突显与潜伏的效果【达成代码】
  • Vuejs第八篇之Vuejs过渡动画案例周密剖析
  • VueJS周密剖析
  • VUEJS实战之营造基础并渲染出列表(1)
  • VUEJS实战之修复错误并且美化时间(二)
  • 依照Vuejs完毕购物车作用
  • Vuejs第九篇之Vuejs组件的定义实例分析
  • vuejs在解析时出现闪烁的缘由及预防闪烁的章程

相关文章

发表评论

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

*
*
Website