通过一个简单的实例加深对Vue的学习
列表渲染
v-for指令
根据一组数组的选项列表进行渲染
语法:
- value,key in items
- value,key of items
对数组进行操作,使用Vue提供的一组方法,会触发视图更新
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
事件处理器
v-on指令
用来监听DOM事件触发的代码
语法:
- v-on:eventName = “eventHandle”
- @eventName=”eventHandle”
事件处理函数
写在methods中统一管理事件对象
- 在事件处理函数中获取
- 内联事件处理函数执行,传入事件对象
事件修饰符
事件处理函数只有纯粹的逻辑,不处理DOM事件的细节
如:阻止冒泡,取消默认行为,判断按键
修饰符的位置
v-on:eventName.修饰符修饰符
- .stop
- .prevent
- .capture
- .self
- .once
按键修饰符
- .enter
- .tab
- .delete
- .esc
- .space
- .up
- .down
- .left
- .right
- .ctrl
- .alt
- .shift
- .meta
- .键值
条件渲染
v-show指令
根据表达式的值,用来显示/隐藏元素
语法:
v-show=”表达式”元素会被渲染在页面中,只根据表达式的值进行css切换
动态绑定
- v-bind指令
元素属性可以使用v-bind绑定
简单的DEMO
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Plan</title>
<style>
* {
margin: 0;
padding: 0;
}
h2 {
line-height: 80px;