您的位置：首页 > 产品设计 > UI/UE

Vue.js学习笔记(三)

2017-04-30 17:39 344 查看

通过一个简单的实例加深对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;
height: 80px;
font-size: 48px;
padding-left: 20%;
background: orange;
color: white;
}

section {
width: 80%;
padding-left: 20%;
}

h3 {
line-height: 60px;
height: 60px;
font-size: 24px;
}

in
c32f
put {
display: block;
width: 50%;
border: 1% solid #ccc;
border-radius: 5px;
padding: 10px 4%;
color: #999;
margin-bottom: 20px;
}

a {
color: #000;
display: inline-block;
color: #999;
text-decoration: none;
padding: 0 20px;
}

li {
list-style-type: none;
padding: 5px;
}

.checkbox {
display: inline-block;
width: 40px;
text-align: center;
}

.checked {
text-decoration: line-through;
color: #ccc;
}
</style>
</head>

<body>
<header>
<h2>任务计划列表</h2>
</header>
<section>
<h3>添加任务</h3>
<input type="text" id="thePlanInput" placeholder="请输入要添加的计划" v-model='input_value' @keyup.enter="addToList">
<span v-if="show">{{length}}个任务未完成</span>
<h3>任务列表:</h3>
<span v-if="!show">还没有添加任务</span>
<ul>
<li v-for='item in list' :class="{checked:item.isChecked}">
<input type="checkbox" class="checkbox" v-model="item.isChecked"> {{item.title}}
<button @click="deleteThisItem(item)">delete</button>
</li>
</ul>
</section>
<script src="http://apps.bdimg.com/libs/vue/1.0.14/vue.js"></script>
<script>
var list = [];
var vm = new Vue({
el: 'section',
data: {
list: list,
length: list.length,
show: false
},
methods: {
addToList: function(ev) {
var sTemp = this.input_value;
list.push({
title: sTemp,
isChecked: false
});
vm.length = list.length;
ev.target.value = "";
if (vm.length > 0) {
this.show = true;
} else {
this.show = false;
}
},
deleteThisItem: function(item) {
var index = this.list.indexOf(item);
this.list.splice(index, 1);
vm.length = this.list.length;
if (vm.length > 0) {
this.show = true;
} else {
this.show = false;
}
}
}
});
</script>
</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航