vuejs-指令详解

v-if

v-if指令可以了依据表达式的价在DOM中生成还是移除一个素。如果v-if表达式赋值为false,那么相应之元素就会打DOM饱受移除;否则,对应元素的一个克隆将被还插DOM中,代码如下:

<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-if凡一个命,需要将它添加到一个元素上。但是要想使切换多独要素,则可拿<template>要素当做包装元素,并当其上利用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>

v-show

v-show命是基于表达式的价来展示或者藏HTML元素。当v-show赋值为false经常,元素被藏。查看DOM常常,会意识元素上基本上矣一个内联样式style="display:none"
如图所示:

注:v-show不支持<template>语法
诚如的话,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会出现问题,所以不用这样做。我们可用用别样一个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事件中一块输入框的价与数据,我们得以增长一个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

设置一个无限小的延时,在历次敲击之后延时同步输入框的值和数量。如果老是换代都设开展高耗操作(例如,在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版本)

 实现如图所示:

<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>

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

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>

结果:

  • 0 – 滴滴 – 顺风车
  • 1 – 滴滴 – 专车

注:vuejs1.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}}

得的结果同样。

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"></a>

<!-- 缩写 -->
<a :href="url"></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>

结果一旦图:

 

要是无参数时,可以绑定到一个对象。注意,此时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>

结果要图:

于绑定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元素注册一个目,方便通过所属实例的$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 合并也一个 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>