题目：在没有事件的时候可以增加事件，在有事件的时候可以统计当前事件总数也可以删除单个事件或同时清空所有事件。另外在没有事件时统计和清空的功能可以被隐藏。
分析:1. 新增：生成列表结构(v-for)；获取用户输入(v-model)；回车新增数据(v-on)
2. 删除：点击删除指定内容(v-on splice 索引)
3. 统计：统计信息个数(v-text length)
4. 清空：点击清除所有信息(v-on 清空数组)
5. 隐藏：没有数据时，隐藏元素(v-show 或 v-if 数组非空)
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>记事本</title>
</head>
<body>
<section id="todoapp">
<header>
西兰花记事本
<br>
<input v-model="inputValue" @keyup.enter="add" type="text" autofocus="autofocus" autocomplete="off"
placeholder="请输入事件">
</header>
<section>
<ol>
<li v-for="(item,index) in list">
<div>
<label>{{ item }}</label>
<button @click="remove(index)">x</button>
</div>
</li>
</ol>
</section>
<footer>
<span v-if="list.length!=0">共有{{ list.length }}条事件信息</span>
<button v-show="list.length!=0" @click="clear">清空所有事件</button>
</footer>
</section>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#todoapp",
data: {
list: ["吃饭", "睡觉", "敲代码"],
inputValue: "好好学习"
},
methods: {
add: function () {
this.list.push(this.inputValue);
},
remove: function (index) {
console.log("删除");
console.log(index);
this.list.splice(index, 1);
},
clear: function () {
this.list = [];
},
},
})
</script>
</body>
</html>
原始状态：
新增、删除与统计功能：
清空和隐藏功能：
本案例注意事项：
1. 数据改变和数据绑定的元素同步改变；
2. 页面是数据的表达方式，我们应该有基于数据的开发方式 ；
3. 列表结构可以通过 v-for 指令结合数据生成；
4. v-on 在绑定数据时可以传递自定义参数，v-on结合.enter事件修饰符可以对时间进行限制；
5. 通过v-model可以快速的设置和获取表单元素的值。
以下是本案例中涉及到的vue指令：
1. v-for：
作用是根据数据生成响应式的列表结构；
数组经常和v-for结合使用；
语法是 (item , index) in 数据；
item和index可以结合其他指令一起使用；
数组长度的更新会同步到页面上，是响应式的。
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-for指令</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="(it,index) in arr">
想去玩儿的第{{ index+1 }}个地方：{{it}}
</li>
</ul>
<br>
<p v-for="item in vegetables" v-bind:title="item.name">
会做的菜：{{ item.name }}
</p>
<input type="button" value="点击学会新菜" @click="add">
<input type="button" value="点击忘记旧菜" @click="remove">
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>
2. v-on补充：
事件绑定的方法写成函数调用的形式，可以传入自定义参数；
定义方法时需要定义形参来接收传入的实参；
事件的后面跟上 . 修饰符可以对事件进行限制；
.enter 可以限制触发的按键为回车；
事件修饰符有多钟。
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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/[email protected] /dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
methods: {
doIt: function (p1, p2) {
console.log("做it");
console.log(p1);
console.log(p2);
},
sayHi: function () {
alert("美丽的西兰花，咱们好久没见了");
}
},
})
</script>
</body>
</html>
3. v-model：
作用是便捷的设置和获取表单元素的值；
绑定的数据会和表单元素的值相关联；
绑定的数据双向关联表单元素的值。
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-model指令</title>
</head>
<body>
<div id="app">
<input type="text" v-model="message" @keyup.enter="getM">
<h6>message:{{ message }}</h6>
<br>
<input type="button" value="修改message信息" @click="setM">
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
message: "你好，我是🥦！"
},
methods: {
getM: function () {
alert(this.message);
},
setM: function () {
this.message = "西红柿🍅"
},
},
})
</script>
</body>
</html>
修改前：
修改后：