Vue の基本的なケース (フルーツ検索、ショッピング カート、Todolist、メッセージ ボード、マーキー)
01. フルーツ捜索事件
知識ポイントのアイデアと応用
- キーワードとリストを計算して計算し、検索リストを計算します
- リスト内の項目にキーワードキーワードが含まれている場合、その項目をリストに保持します。
- ⭐includes は特定の文字列が含まれているかどうかをチェックします。indexOf() は -1 に等しくありません。トラバースされた要素にキーワードが含まれている場合、現在の項目を保持するには true を返し、indexOf で文字列を検索する場合は、文字列が見つからないことを示す -1 を返します。
- ⭐ filter() は配列をフィルタリングし、条件を満たすすべての要素を含む配列を返します。
- trim() は文字列の両端からスペースを削除します
- アロー関数
- 1. 機能を削除する
- 2. () と {} 内に矢印を追加します =>
- 3.戻り値{}がある場合、returnも省略可能
- 4. パラメータが 1 つの場合は、() を省略することもできます
- 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 traversal を使用すると、要素値 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
知識ポイントのアイデアと応用
- テキスト ボックスにテキストを入力し、Enter キーを押すと、テキストがリストに追加されます。
- 現在の行を削除するには、[x] をクリックします。
- ⭐ローカルストレージ、ローカルデータを取得するデータを定義します localStorage
- ⭐ リストデータ変更時に保存（監視監視を使用）
- unshift は配列の先頭に要素を追加します
- splice(n,m,j) n 番目から m を削除し、j を追加します
- IndexOf(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を使用する必要があります(配列の前にオブジェクトを追加します)。
- ⭐メッセージを削除するにはスプライスを使用する必要があります
- ⭐データをローカルに保存したい場合、追加されたデータは更新しても消えません、ローカルストレージが必要です。データを最初から取得し、追加や削除のために再度データを保存する必要があります。同時に格納するデータは文字列である必要があり、抽出された文字列は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. マーキー
知識ポイントのアイデアと応用
- 最後に最初の文字列
- 文字列を配列に分割('')
- 配列の最初のシフトを削除します
- 配列の最後のプッシュに追加されました
- ⭐タイマーsetIntervalをクリック時に移動できるように設定します
- タイマーのクリア クリックのドリフトを防ぐために、clearInterval も再生前にタイマーをクリアする必要があり、速度がどんどん速くなります。
- ⭐作成すると自動的に再生されます
<!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>