[筆記][Vue][Todo] Vue.js 的起手式範例 Todos (含講解說明影片)

  • 34
  • 0
  • Vue
  • 2020-07-05

筆記一下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

 

 

 

 

 

 


以下是簽名:


Microsoft MVP
Visual Studio and Development Technologies
(2005~2019/6)