vue2常用代码

Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的。

绑定 class

单个 class

1
<div :class="{active: isActive}"></div>

多个 class

1
<div :class="{active: isActive, 'text-danger': hasError}"></div>

绑定一个 class 对象

1
2
3
4
5
6
7
<div :class="classObj"></div>
data: {
    classObj: {
        active: true,
        'text-danger': false
    }
}

结合计算属性，创造更强大的绑定

1
2
3
4
5
6
7
8
9
10
11
12
13
<div :class="classObj"></div>
data: {
    isActive: true,
    error: null
},
computed: {
    classObj: function(){
      return {
        active: this.isActive && !this.error,
        'text-danger': this.error && this.error.type === 'fatal',
      }
    }
}

绑定 style

直接绑定

1
<div :style="{color: '#ccc', fontSize: baseSize + 'px'}"></div>

绑定一个 style 对象

1
2
3
4
5
6
7
<div :style="styleObj"></dvi>
data: {
    styleObj: {
      color: '#ccc',
      fontSize: '14px'
    }
}

注：通过 vue 绑定的 style 会自动添加响应的前缀

tab 标签切换

1
2
3
v-for="(item, index) of items"
:class="{'current-tab':iscur == index}" @click="iscur = index"
v-show="iscur == index? true: false"

多事件绑定

1
<div v-on="click: onClick, keyup: onKeyup, keydown: onKeydown"></div>

v-if 切换多个元素

1
2
3
4
5
<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

v-for 迭代

数组

1
<li v-for="(item, index) in items">{{ index }} - {{ item.message }}</li>

对象

1
2
3
<div v-for="(value, key, index) in object">
  {{ index }}. {{ key }} : {{ value }}
</div>

渲染多个元素

1
2
3
4
5
6
<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider"></li>
  </template>
</ul>

排序

1
2
3
4
5
6
7
8
<li v-for="user in users | orderBy 'name'">//按名字排序用户</li>
<li v-for="user in users | orderBy 'name' -1">//降序</li>
<li v-for="user in users | orderBy 'lastName' 'firstName'">
  //使用两个键名排序
  <button @click="order = order * -1">Reverse Sort Order</button>
</li>

<li v-for="user in users | orderBy 'name' order">//动态排序</li>

filter(过滤器)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
  {
    msg | capitalize
  }
} //过滤器函数第一个参数为表达式

new Vue({
  filters: {
    capitalize: function(value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})

命令修饰符

1
2
3
4
.prevent  （阻止默认事件）
.stop     （阻止事件冒泡）
.capture  （时间捕获模式）
.self     （元素本身触发）

v-model 修饰符

1
2
3
v-model.lazy   （数值改变才执行，change事件中同步）
v-model.number （转化为number类型）
v-model.trim   （去掉首尾空格）
0%