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

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

**变异方法：vue提供一组方法，对数组进行操作的时候，会触发视图更新(map()不会触发)，但其并不是原生的方法，原生的方法是不会触发视图更新

push()pop()shift()unshift()splice()sort()reserve()

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','orange','pear']} //数据源
        });
    },false);
 </script>

在页面展示如下：

2018-9-3-16-37-19.png

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.修饰符="xxxx"）

事件修饰符：


.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="!kust,length"

v-if="xxxx"，是不在首页进行渲染的

5. 动态绑定class

class也为元素的属性，可用 v-bind:class

语法

:class="{ClassName:表达式}"

表达式值为true添加className(add)

表达式为false不添加className(remove)


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