“Vue2.0”跟俺一起全面入坑 02

1. 列表渲染 — v-for=""

功能:根据一组数据的选项列表进行渲染(自动for循环)。
   语法: value,key in items / value,key for items

变异方法: vue提供一组方法,对数组进行操作的时候,会触发视图更新(map()不会触发) ,但其并不是原生的方法,原生的方法是不会触发视图的更新
  push()   |  pop()   |  shift()  |  unshift()
  splice() | sort()   | reverse()

Eg:定义一个水果数组数据

<body>
    <div id="app">
        <ul>
            <li v-for="(val,key) in fruitsArr">{{ val }} => {{ key }}</li>  //循环出来的列表项
        </ul>
    </div>
</body>
<script src="../vue.js"></script>
<script type="text/javascript">
    document.addEventListener('DOMContentLoaded',function () {
        var vm = new Vue({
            el: '#app',
            data:{
                fruitsArr:['apple','banana','orage','pear']   //数据源
            }
        });
    },false);
</script>

在页面展示如下:


2. 事件处理器(指令,绑定事件) — v-on=""

功能:用来监听DOM事件触发代码。
   语法: v-on:eventName = "eventHandle"
   指令简写: @eventName = "eventHandle"

事件处理函数: 写在Vue实例的methods中统一进行管理。

事件对象是事件系统提供的,在事件处理函数中获取

a) 当行间不触发的时候
v-on:keyup.enter = "addTodo"   
addTodo(ev){  }  //这里的ev就是事件对象
b) 当行间触发的时候(也就是加了个执行的括号)
v-on:keyup.enter = "addTodo(123,$event)"   //行间传入事件对象$event
addTodo(data,ev){  }  //需要在页面传参的时候,第一个参数为传入的参数,第二个参数才是事件对象。
3. 事件修饰符

事件处理函数只有纯粹的逻辑判断,不处理DOM事件的细节。
   例如,阻止冒泡,取消默认行为、判断按键
   修饰符位置: 以“.”写在事件名称后面。 ( v-on:eventName.修饰符 = "xxx")

事件修饰符:
.stop(冒泡) | .prevent(默认事件) | .capture(捕获) | .self | .once(执行一次)
按键修饰符(常用的) --

.enter  |  .tab  |  .delete  |  .esc
.space  |  .up   |  .down    |  .left  |  .right
.ctrl   |  .alt  |  .shift   |  .meta
.键值

Eg:

//等价
@keyup.enter = "addTodo()"
@keyup.13 = "addTodo()"
4. 条件渲染 — v-show=""

** 根据表达式的值,用来显示/隐藏元素**
   语法: v-show="表达式",根据表达式的值true和false,来判断显示或隐藏
   元素会被渲染到页面中,只是根据表达式的值进行css切换(display:none)
Eg:数据list数组是否有内容
v-show="!list.length"
v-if = "xxx",是不在页面渲染的

5. 动态绑定class

** class也为元素的属性,可以使用v-bind:class**

语法
:class = "{className:表达式}"
表达式值为true添加className(add)
表达式值为flase不添加className(remove)

:class="{completed: item.isChecked}"

推荐阅读更多精彩内容