Vue基础案例（水果搜索，购物车，todolist，留言板，跑马灯)
01.水果搜索案例
思路以及运用知识点
- 通过computed计算 keyword与list ，算出findlist
- 如果list中的某一项包含 keyword关键字，在flist保留该项
- ⭐includes检测是否包含某个字符串， indexOf()不等于-1。如果遍历的元素包含keyword，返回true保留当前的item，当通过indexOf查字符串时候返回-1 代表找不到
- ⭐ filter()过滤数组，返回包含了符合条件的所有元素组成的数组
- trim() 移除字符串两端的空格
- 箭头函数
- 1.把function去掉
- 2.在()与{}添加箭头 =>
- 3.若有返回值 {}和return还可以省略
- 4.若参数只有一个，()还可以省略
- 5.普通函数也可以改写成箭头函数 需要把这个名字赋值给一个变量，调用的时候还是函数名();
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>水果搜索</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<h2>水果搜索功能的实现</h2>
<input type="text" v-model="keyword">
<div v-for="(item,index) in findlist" :key="index">{
{item}}</div>
</div>
<script>
new Vue({
el: "#app",
data() {
return {
keyword: "",
list: ["苹果", "枇杷", "山楂", "梨", "樱桃", "李子", "草莓", "橘子", "柚子", "西瓜", "香蕉", "枣", "葡萄", "蓝莓", "芒果",
"菠萝", "枸杞", "番石榴", "山竹", "椰子", "槟榔", "榴莲", "荔枝", "龙眼", "火龙果", "桑葚", "柿子", "杨梅"
]
}
},
computed: {
findlist() {
if (this.keyword.trim() === "") {
return this.list;
} else {
var temp = this.list.filter(item => {
if (item.indexOf(this.keyword) != -1) {
return true;
} else {
return false;
}
});
return temp;
}
}
},
})
</script>
</body>
</html>
02.购物车
思路以及运用知识点
- 实现随着数量价格增加总价改变，以及全选功能
- 通过totalPrice实现价格累加 totalCount实现数量累加
- 运用了forEach遍历 ，当元素值sel为true才累加
- ⭐watch监听复选框的改变
- ⭐every()检测数组所有元素是否都符合指定条件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<table border="">
<tr>
<th><input type="checkbox" v-model="all" @change="checkAll"></th>
<th>商品名称</th>
<th>商品价格</th>
<th>商品数量</th>
</tr>
<tr v-for="item in goods" :key="item.name">
<td><input type="checkbox" v-model="item.sel"></td>
<td>{
{item.name}}</td>
<td>{
{item.price}}</td>
<td><button @click="item.num++">{
{item.num}}</button></td>
</tr>
</table>
<p>
总价：{
{totalPrice}} 共{
{totalCount}}件
</p>
</div>
<script>
new Vue({
el: "#app",
computed: {
totalPrice: function() {
var n = 0;
this.goods.forEach(item => {
if (item.sel) {
n += item.price * item.num;
}
})
return n;
},
totalCount: function() {
var n = 0;
this.goods.forEach(item => {
if (item.sel) {
n += item.num;
}
})
return n;
}
},
watch: {
"goods": {
handler: function(nval) {
this.all = this.goods.every(item => item.sel);
},
deep: true,
}
},
methods: {
checkAll() {
this.goods.forEach(item => item.sel = this.all)
}
},
data() {
return {
all: true,
goods: [{
name: "javascript",
price: 20,
num: 1,
sel: true,
},
{
name: "vue",
price: 40,
num: 1,
sel: false
}
]
}
}
})
</script>
</body>
</html>
03.todolist
思路以及运用知识点
- 在文本框输入文字，按回车，文字添加到list里面
- 单击x 删除当前行
- ⭐本地存储，定义data获取本地数据localStorage
- ⭐ 当list数据发生变化的时候存储（利用了watch监听）
- unshift在数组的前面添加一个元素
- splice（n，m，j） 从第n个删除m个，添加j
- indexOf(item) 查找item在列表的下标
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" @keyup.enter="addItem">
<!-- 遍历数据list -->
<h3>未完成{
{undolist.length}}</h3>
<div v-for="item in undolist" :key="item.title">
<input type="checkbox" v-model="item.done">
<span>{
{item.title}}</span>
<button @click="delItem(item)">x</button>
</div>
<h3>已经完成{
{donelist.length}}</h3>
<div v-for="item in donelist" :key="item.title">
<input type="checkbox" v-model="item.done">
<span>{
{item.title}}</span>
<button @click="delItem(item)">x</button>
</div>
</div>
<script>
new Vue({
el: "#app",
computed: {
// 通过计算list算出undolist没有完成的列表
undolist() {
// 通过list过滤 返回item.done值为false的所有元素
return this.list.filter(item => !item.done);
},
donelist() {
// 返回保留item.done值为true的元素
return this.list.filter(item => item.done);
}
},
methods: {
// 删除元素
delItem(item) {
// 查找item在list的下标
var ind = this.list.indexOf(item);
// 进行删除
this.list.splice(ind, 1);
},
// 添加元素
addItem(e) {
this.list.unshift({
done: false,
title: e.target.value
})
e.target.value = "";
}
},
data() {
return {
list: JSON.parse(localStorage.getItem("todo") || '[{"done":true,"title":"学习html"}]')
}
},
watch: {
"list": {
handler() {
localStorage.setItem("todo", JSON.stringify(this.list))
},
deep: true
}
}
})
</script>
</body>
</html>
04.留言板
思路以及运用知识点
- ⭐把留言添加到下面，需要用到 unshift（把对象添加到数组的最前面）
- ⭐删除留言 需要用到splice
- ⭐想要把数据存储到本地，刷新添加数据不会消失，需要本地存储。一开始就需要取数据，增加删除都要再次存储数据。同时存的数据必须是字符串，取出来的字符串转换为js对象
本地存localStorage.setItem(key,value)
取 localStorage.getItem(key)
删 localStorage.removeItem(key) - JSON.parse(str) 字符串转js对象
JSON.stringify(obj) js对象转换为字符串 - 数据和表单绑定 v-model
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>欢迎来到吐槽大厅</h1>
<label for="user">用户名</label><br>
<input type="text" placeholder="用户名" id="user" v-model="name"><br>
<label for="con">吐槽内容</label><br>
<textarea id="con" cols="30" rows="10" placeholder="吐槽内容" v-model="msg"></textarea><br>
<button @click="sub">提交</button>
<h3>吐槽回复：</h3>
<table border="" rules="none" style="width:400px">
<tr v-for=" item in list" style="border-bottom: 1px solid #333;">
<td>{
{item.name}}说</td>
<td style="text-align: left;">{
{item.msg}}</td>
<td style="text-align: right;"><a @click.prevent=" del(item)" style="color:blue">删除</a></td>
</tr>
</table>
</div>
<script>
new Vue({
el: "#app",
methods: {
sub() {
this.list.unshift({
name: this.name,
msg: this.msg
})
this.name = "",
this.msg = ""
},
del(item) {
var ind = this.list.indexOf(item);
this.list.splice(ind, 1)
}
},
data() {
return {
list: [],
name: "",
msg: ""
}
}
})
</script>
</body>
</html>
05.跑马灯
思路以及运用知识点
- 字符串第一个放在最后面
- 字符串转数组 split(‘’)
- 删除数组第一个 shift
- 添加到数组的最后一个push
- ⭐设置定时器 setInterval ，让点击时可以动起来
- 清除定时器 clearInterval 在播放之前也需要清除计时器，防止点击飘，速度会越来越快
- ⭐通过created可以使之自动播放
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{
{str}}</h1>
<button @click="play()">飘</button>
<button @click="stop()">定</button>
</div>
<script>
new Vue({
el:"#app",
data(){
return {
str:"跑马溜溜的山哟，你好！",
ind:null,//停止动画
}
},
// vue创建完毕，自动执行play
created(){
this.play();
},
methods:{
play(){
// 停止动画播放
clearInterval(this.ind);
this.ind = setInterval(()=>{
// 字符串转数组
var temp = this.str.split('');
// 获取字符串第一个
var first = temp.shift();
// 添加到最后
temp.push(first);
// 转换为字符串，赋值给str
this.str = temp.join('');
},50)
},
stop(){
clearInterval(this.ind);
},
}
})
</script>
</body>
</html>