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

  • 87
  • 0
  • Vue
  • 2020-09-28

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

 

 

 


以下是簽名:


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