“Vue2.0”跟俺一起全面入坑 02
2017-03-23 本文已影响4620人
108N8
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}"
