筆記一下Vue的起手式範例
緣起
Vue的撰寫概念與以前的jQuery很不一樣，jQuery注重的是畫面中DOM物件的操作，但是Vue則是【資料】，至於畫面如何去對應，則是在HTML中，由一些綁定的語法，讓資料與畫面做綁定，再加上【v-if, v-for, v-on, v-model, ...】來讓HTML因應資料的改變而發生變化。
Todos是很經典的起手式範例，裏面包含了v-if, v-for, v-on, v-model, {{}}, ...，同時還包含了陣列的新增(push)與刪除(splice)
相關練習過程與講解
小喵特別補錄製了一段影片來講解整個練習的過程
希望大家藉由影片中的練習過程，可以更為明白相關的內容
相關程式碼
Html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="App1">
<input type="text" v-model="inputTodo">
<button v-on:click="Add">Add</button>
<hr>
<ol>
<li v-for="(item,idx) in todos">
<input type="checkbox" v-model="item.finish">
<input type="text" v-bind:disabled="item.finish" v-model="item.txt">
<button v-if="item.finish" v-on:click="Del(idx)">X</button>
</li>
</ol>
<hr>
{{todos}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</body>
</html>
JS
let App1=new Vue({
el:'#App1',
data:{
inputTodo:'',
todos:[
{txt:'JavaScript',finish:false},
{txt:'Vue',finish:true},
{txt:'All',finish:false},
],
},
methods:{
Add:function(){
let tmpTodo={};
tmpTodo.txt=this.inputTodo;
this.todos.push(tmpTodo);
this.inputTodo='';
},
Del:function(idx){
console.log(idx);
this.todos.splice(idx,1);
}
}
});
線上測試：
https://jsbin.com/xozifes/edit?html,js,output
2020/9/28 補充Vue 3.0：
這裡補充一下改成Vue 3.0的寫法
Vue 3.0除了一開始的設定不太一樣，撰寫的基本精神並沒有太大的不同，一樣是專注於資料的維護，讓HTML自動的依據資料進行渲染改變
html的部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="AppTodo">
<input type="text" v-model="inputTodo">
<button v-on:click="addTodo">Add</button>
<hr>
<ul>
<li v-for="(oTodo,idx) in todos">
<input type="checkbox" v-model="oTodo.isFinish">
<input type="text" v-model="oTodo.Title" v-bind:disabled="oTodo.isFinish">
<button v-if="oTodo.isFinish" v-on:click="delTodo(idx)">X</button>
</li>
</ul>
<hr>
{{todos}}
</div>
<script src="https://unpkg.com/vue@next"></script>
</body>
</html>
JS的部分
const AppTodo={
data(){
return {
todos:[
{Title:'JavaScript',isFinish:false,},
{Title:'Vue3',isFinish:false,},
{Title:'Angular10',isFinish:false,},
],
inputTodo:'',
}
},
methods:{
addTodo(){
//console.log('addTodo');
let tTodo={};
tTodo.Title=this.inputTodo;
tTodo.isFinish=false;
//console.log(tTodo);
this.todos.push(tTodo);
this.inputTodo='';
},
delTodo(idx){
console.log(idx);
this.todos.splice(idx,1);
}
}
}
Vue.createApp(AppTodo).mount('#AppTodo');
線上測試
https://jsbin.com/hiyeyan/edit?html,js,output
以下是簽名：
- 歡迎轉貼本站的文章，不過請在貼文主旨上加上【轉貼】，並在文章中附上本篇的超連結與站名【topcat姍舞之間的極度凝聚】，感恩大家的配合。
- 小喵大部分的文章會以小喵熟悉的語言VB.NET撰寫，如果您需要C#的Code，也許您可以試著用線上的工具進行轉換，這裡提供幾個參考
| Microsoft MVP Visual Studio and Development Technologies (2005~2019/6) | topcat Blog:http://www.dotblogs.com.tw/topcat |