Cas de base Vue (recherche de fruits, panier, liste de tâches, forum de discussion, chapiteau)
01. Mallette de recherche de fruits
Idées et application des points de connaissance
- Calculez le mot-clé et la liste via calculé, et calculez la liste de recherche
- Si un élément de la liste contient le mot-clé mot-clé, conservez l'élément dans la liste.
- ⭐includes vérifie si une certaine chaîne est incluse, indexOf() n'est pas égal à -1. Si l'élément parcouru contient un mot-clé, renvoie true pour conserver l'élément actuel et renvoie -1 lors de la recherche d'une chaîne via indexOf, indiquant qu'elle est introuvable.
- ⭐ filter() filtre le tableau et renvoie un tableau contenant tous les éléments qui remplissent les conditions
- trim() supprime les espaces aux deux extrémités d'une chaîne
- fonction flèche
- 1. Supprimez la fonction
- 2. Ajoutez des flèches entre () et {} =>
- 3. S'il y a une valeur de retour {} et return peut également être omis
- 4. S'il n'y a qu'un seul paramètre, () peut également être omis
- 5. Les fonctions ordinaires peuvent également être réécrites en fonctions fléchées. Vous devez attribuer ce nom à une variable, et c'est toujours le nom de la fonction () lors de l'appel ;
<!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. Panier
Idées et application des points de connaissance
- Réalisez le changement du prix total à mesure que le prix de la quantité augmente et la fonction de sélection de tout
- Réaliser l'accumulation de prix via totalPrice totalCount réaliser l'accumulation de quantité
- En utilisant forEach traversal, lorsque la valeur de l'élément sel est vraie, elle est accumulée
- ⭐watch surveille le changement de la case à cocher
- ⭐every() vérifie si tous les éléments du tableau remplissent les conditions spécifiées
<!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
Idées et application des points de connaissance
- Entrez le texte dans la zone de texte, appuyez sur Entrée et le texte est ajouté à la liste
- Cliquez sur le x pour supprimer la ligne actuelle
- ⭐Stockage local, définissez les données pour obtenir des données locales localStorage
- ⭐ Stocker lorsque les données de la liste changent (en utilisant la surveillance de la montre)
- unshift ajoute un élément au début du tableau
- splice(n,m,j) supprime m du nième, ajoute j
- indexOf(item) Rechercher l'indice de l'élément dans la liste
<!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. Tableau de messages
Idées et application des points de connaissance
- ⭐Ajoutez le message en bas, vous devez utiliser unshift (ajoutez l'objet au début du tableau)
- ⭐Supprimer les messages doit utiliser splice
- ⭐Si vous souhaitez stocker les données localement, les données ajoutées ne disparaîtront pas après l'actualisation et un stockage local est requis. Les données doivent être récupérées depuis le début et les données doivent être à nouveau stockées pour être ajoutées et supprimées. Les données stockées en même temps doivent être une chaîne et la chaîne extraite est convertie en objet js
Stockage local localStorage.setItem(key,value)
Prendre localStorage.getItem(key)
Supprimer localStorage.removeItem(key) - JSON.parse(str) convertit la chaîne en objet js
JSON.stringify(obj) convertit l'objet js en chaîne - modèle v de liaison de données et de formulaires
<!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. Chapiteau
Idées et application des points de connaissance
- chaîne en premier à la fin
- Chaîne en tableau divisé('')
- Supprimer le premier décalage du tableau
- Ajouté au dernier push du tableau
- ⭐Réglez le setInterval de la minuterie pour qu'il puisse bouger lorsque vous cliquez dessus
- Effacer la minuterie clearInterval doit également effacer la minuterie avant de jouer pour empêcher le clic de dériver, et la vitesse deviendra de plus en plus rapide
- ⭐Créé peut le faire jouer automatiquement
<!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>