Vue學習筆記重點（1）
阿新 • • 發佈：2018-11-23
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>todo-list元件版</title> <script src="js/vue.js"></script> <style> #app{ width: 300px; border: 1px solid #ccc; } </style><script> </script> </head> <body> <div id="app"> <form @submit.prevent="addNewTodo"> <!--⬆️這裡使用表格的submit屬性，是為了符合規範，將表格的submit屬性繫結給addNewTodo這個變數，在vue例項中再對addNewTodo賦予具體要操作的函式--> <label for="new-todo">add to list</label><!--label的for標籤與表單元素的id繫結，實現效果為：點選表單文字時，會自動在表格中的input出現游標--> <!--v-model用於繫結input中的文字與vue資料中的變數，在後面vue例項中，直接使用了newTodoText來獲取當前input中的值--> <input v-model="newTodoText" id="new-todo" type="text" placeholder='請輸入文字'> <input type="submit" value="add"> <!--<button type="button" id="btn1">add</button>--> <!--此處如果用button標籤，必須給button標籤加上type--> </form> <ul class="ul1"> <todo-item v-for="(todo,index) in todos" :key="todo.id" :title="todo.title" :index="index" v-on:removec="todos.splice(index,1)" > <!--splice中第一項為陣列中要執行刪除的位置，第二項為刪除的數量.ps：index是不跟隨項的，一直都是固定的0123456--> <!--removec是自定義的事件，在後面使用$emit()方法繫結到了刪除按鈕的click事件上。此處使用v-on繫結在元件上，是因為函式的操作就在todos上--> </todo-item> </ul> </div> </body> <script> Vue.component('todo-item',{ props:['title','index'],//這裡主要需要傳的是本來在元件裡不出現的東西 template:'<li>{{ index }}--{{ title }}<input value="刪除" v-on:click="$emit(\'removec\')" type="button"></li>' //$emit(eventName)是觸發事件的函式，removec是自定義的事件，繫結在了html中的todo-item中。由刪除按鈕的click來觸發，相當於按鈕按下時經過了兩層事件，首先是click，然後是自定義的removec。 }); new Vue({ el:'#app', data:{ newTodoText:'', todos:[ { id:1, title:'學習vue' }, { id:2, title:'學習元件的基礎' }, { id:3, title:'實踐一個小專案' } ], nextTodoId:4 }, methods:{ addNewTodo:function(){ //這裡的addNewTodo繫結的是form表格的sublime屬性，即表格提交時（也就是按提交按鈕時），觸發該函式 this.todos.push(//此處的this為整個vue例項，這裡直接把新的id和title推進例項中的todos[]中，而沒有直接與html、dom互動，實在是妙啊（之前也說過，vue例項是會隨改變重新整理區域性頁面）。 { id:this.nextTodoId++,//每次遞增自定義id編號，然後賦值給id title: this.newTodoText //data中的newTodoText用v-model與input綁定了，這裡直接取到了文字框中的內容 } ); this.newTodoText = ''; //此行程式碼作用為每次點增加按鈕時，清空文字框中的內容 } } }) </script> </html>