Vue.js CURD
雖然做了新增單字卡的功能，並儲存在localStorage，
但新增錯了，就會想修改，資料重複，就會想刪除，
所以我也跟著寫出了CRUD的功能出來，
另外為了快速的找尋沒學過的單字，以及搜尋他對應的圖片，
我採用影音學習 放入 iframe與新增編輯畫面並排，並透過按下Search，到google圖片的網頁，找尋自己想要的圖片，並複製連結。(待優化項目）
我影音學習大部分是去VoiceTube找，因為有中音對照，比較方便。
以下是我改版後的程式碼
<html>
<head>
<title>1000單每日計畫 - CRUD</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div>
<div class="row">
<div class="col-md-4">
<div class="mt-3 ml-3">
<iframe src="https://tw.voicetube.com/channel/translated" width="100%" height="95%">
</iframe>
</div>
</div>
<div class="col-md-8 " id="Card" >
<form class="mt-3 mr-3">
<div class="form-group col-md-12 clearfix">
<label for="Title">Title</label>
<div class="input-group">
<input type="text" class="form-control" id="Title" v-model="Card.Title"><button type="button" @click="OpenSearch" class="btn btn-primary ml-3">Search</button>
</div>
</div>
<div class="form-group col-md-6 clearfix">
<label for="Text">Text</label>
<input type="text" class="form-control" id="Text" v-model="Card.Text">
</div>
<div class="form-group col-md-12 clearfix">
<label for="Image">Image</label>
<input type="text" class="form-control" id="Image" v-model="Card.Image">
</div>
<button type="button" @click="Submit" class="btn btn-primary ml-3" v-if="Action=='insert'">新增</button>
<button type="button" @click="Update" class="btn btn-primary ml-3" v-if="Action=='edit'">儲存</button>
<button type="button" @click="Cancel" class="btn btn-primary ml-3" v-if="Action=='edit'">返回</button>
</form>
<h2 class="mt-3 mr-3">Cards Rows</h2>
<table class="table table-hover mt-3 mr-3">
<thead>
<tr>
<th>Title</th>
<th>Text</th>
<th>Image</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(Item,index) in Cards">
<td>{{Item.Title}}</td>
<td>{{Item.Text}}</td>
<td >
<div style="height:80px;overflow:hidden"><img :src="Item.Image" height="80px"/></div>
</td>
<td>
<button type="button" @click="DeleteItem(index)" class="btn btn-primary ml-3">刪除</button>
<button type="button" @click="EditItem(index)" class="btn btn-primary ml-3">修改</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
<script>
localCards = [];
if(localStorage.Cards!=''){
localCards = JSON.parse(localStorage.Cards);
}
var app = new Vue({
el: '#Card',
data: {
Card:{
Image:'',
Title:'',
Text:'',
},
Result:'',
Cards:localCards,
Action:'insert',
EditIndex:-1,
},
methods:{
Submit:function(){
var NewCard = {Title:app.Card.Title,Text:app.Card.Text,Image:app.Card.Image};
localCards.push(NewCard);
localStorage.Cards = JSON.stringify(localCards);
app.Card.Title='';
app.Card.Text='';
app.Card.Image='';
},
DeleteItem:function(index){
localCards.splice(index, 1);
localStorage.Cards = JSON.stringify(localCards);
},
OpenSearch:function(){
window.open('https://www.google.com.tw/search?q='+app.Card.Title+'&source=lnms&tbm=isch');
},
EditItem:function(index){
var Item = localCards[index];
app.Action = 'edit';
app.Card.Title=Item.Title;
app.Card.Text=Item.Text;
app.Card.Image=Item.Image;
app.EditIndex=index;
},
Update:function(){
localCards[app.EditIndex].Title = app.Card.Title;
localCards[app.EditIndex].Text = app.Card.Text;
localCards[app.EditIndex].Image = app.Card.Image;
localStorage.Cards = JSON.stringify(localCards);
},
Cancel:function(){
app.Action = 'insert';
app.Clear();
},
Clear:function(){
app.Card.Title='';
app.Card.Text='';
app.Card.Image='';
app.EditIndex=-1;
}
}
});
</script>
Vue重點關鍵字大概如下，真的很簡單易學，大概花半天看語法，開始用在專案上後，大概一天就學會基本常用的幾個語法了，大概就可以應付專案所需的80%左右，
如果有遇到重複利用的元件，就可以要選擇包裝Vue component，專案開發時，真的有遇到，重複相同的選單，但可能是類別一的選單，類別二的選單，類別三的選單，是類似ListBox1放入ListBox2 那種模式的話的元件有N個資料欄位有的時候，真的要考慮包一下component
v-model
v-if
v-for
@click
:src
v-html
v-bind:value
v-for="(Item,index) in Items)"