列表循环,表单元素绑定用到的命令有:
v-for
v-on补充
v-model
v-for
根据数据生成列表结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-for指令</title>
</head>
<body>
<div id="app">
<button @click="add">添加蔬菜</button>
<button @click="remove">减少蔬菜</button>
<ul>
<li v-for="(item,index) in arr">
{{index+1}}四大神兽:{{item}}
</li>
</ul>
<h2 v-for="item in vegetables" v-bind:title="item.name">
{{item.name}}
</h2>
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
arr:["青龙","白虎","朱雀","玄武"],
vegetables:[
{name:"青菜"},
{name:"白菜"}
]
},
methods:{
add:function(){
this.vegetables.push({name:"胡萝卜"});
},
remove:function(){
this.vegetables.shift();
}
}
})
</script>
</body>
</html>
数组经常和v-for一起使用
语法是**(item,index)in** 数据
item和index可以结合其他指令一起使用
数组长度的更新会同步到页面上,是响应式的
v-on补充
传递自定义参数,事件修饰符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-on指令补充</title>
</head>
<body>
<div id="app">
<input type="button" value="点击" @click="doIt('老铁',666)">
<input type="text" @keyup.enter="sayHi">
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
methods:{
doIt:function(p1,p2){
console.log("点击!!!");
console.log(p1);
alert(p2);
},
sayHi:function(){
alert("输入完毕!!!")
}
}
})
</script>
</body>
</html>
事件绑定的方法写成函数调用的形式,可以传入自定义参数
定义方法时需要定义形参来接收传入的实参
事件的后面跟上 .修饰符可以对事件进行限制
.enter可以限制触发的按键为回车
事件修饰符有多种
v-model
便捷的设置和获取表单元素的值(双向数据绑定)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="button" value="设置message" @click="setMessage">
<input type="text" v-model="message" @keyup.enter="getMessage">
<h3>{{message}}</h3>
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
message:"你好"
},
methods:{
getMessage:function(){
alert(this.message)
},
setMessage:function(){
this.message="hello"
}
}
})
</script>
</body>
</html>
绑定的数据会和表单元素的值相关联
绑定的数据↔表单元素的数据
实例应用
实现一个日程记事本,要求具有以下功能:
新增
删除
统计
清空
隐藏
新增
生成列表结构——v-for 数组
获取用户输入——v-model
回车,新增数据——v-on .enter添加数据
删除
数据改变,和数据绑定的元素同步改变
事件的自定义参数
splice方法的作用
统计
基于数据的开发方式
v-text指令的作用
清空
点击清除所有信息(v-on 清空数据)
隐藏
没有数据时,隐藏元素(v-show v-if数组非空)
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小黑记事本</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="robots" content="noindex, nofollow" />
<meta name="googlebot" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="./css/index.css" />
</head>
<body>
<!-- 主体区域 -->
<section id="todoapp">
<!-- 输入框 -->
<header class="header">
<h1>小黑记事本</h1>
<input autofocus="autofocus" autocomplete="off" placeholder="请输入任务"
class="new-todo" v-model="addValue" @keyup.enter="add(addValue)"/>
</header>
<!-- 列表区域 -->
<section class="main">
<ul class="todo-list">
<li class="todo" v-for="(item,index) in list">
<div class="view">
<span class="index">{{index+1}}.</span> <label>{{item}}</label>
<button class="destroy" @click="remove(index)"></button>
</div>
</li>
</ul>
</section>
<!-- 统计和清空 -->
<footer class="footer">
<span class="todo-count" v-if="list.length!=0"> <strong>{{list.length}}</strong> items left </span>
<button class="clear-completed" @click="clear" v-show="list.length!=0">
Clear
</button>
</footer>
</section>
<!-- 底部 -->
<footer class="info">
<p>
<a href="http://www.itheima.com/"
><img src="./img/black.png" alt=""
/></a>
</p>
</footer>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#todoapp",
data:{
list:["吃饭","睡觉","学习"],
addValue:"打游戏"
},
methods:{
add:function(value){
this.list.push(value)
},
remove:function(index){
this.list.splice(index,1)
},
clear:function(){
this.list=[]
}
}
})
</script>
</body>
</html>
应用小结
列表结构可以通过v-for指令结合数据生成
v-on结合事件修饰符可以对事件进行限制,比如.enter
v-on在绑定事件时可以传递自定义参数
通过v-model可以快速的设置和获取表单元素的值
基于数据的开发方式