vue js
louxiadefengjing
assignment-2-AdorableCarl-master.zipassignment-2-AdorableCarl-master/.gitignore
.idea/
assignment-2-AdorableCarl-master/README.md
# Basic Component Before starting on the assignment make sure that you have Git installed on your machine and that you have a GitHub Account. For more information about the git commands, look at the course website. For this assignment you will finish this todo list component. The main app holds an array of lists and allows you to add or remove them. The todo list contains the list of items. Finish the todo-list component. # For full credit you must: - Finish the component template. - Finish the add item method in the component. - Finish the remove method in the component. - Add a button that when click will sort/unsort the todo list. Hint: computed property and a flag. # For committing your work: - Add all the files with the commands discussed in class. - Create a commit with a meaningful message. - Push your changes to GitHub # For Extra credit (2points): - Move the remove button into the component. (requires events)
assignment-2-AdorableCarl-master/index.css
assignment-2-AdorableCarl-master/index.html
{{ title }}
List name: Crete New List Delete Listassignment-2-AdorableCarl-master/index.js
Vue.component('todo-list', { template: ` <div class="list"> <h3>{{ title }}</h3> <!-- TODO: Form for adding items --> <ul v-if="items.length > 0"> <li v-for="(item, i) in items" :key="i">{{ item }}</li> </ul> <p v-else>You have no items in this list.</p> </div> `, props: { title: { type: String, default: 'My List' } }, data: function () { return { item: '', items: ['One'] } }, methods: { /** * Adds a new item to the list. */ addItem: function () { // TODO: }, /** * Removes the item from a list. */ removeItem: function () { // TODO: } } }); var app = new Vue({ el: '#app', data: { title: 'Basic Component', list: '', lists: ['TODOs'] }, methods: { /** * Adds a new list to the list array. */ createList: function() { this.lists.push(this.list); this.list = ''; }, /** * Removes the list from a given index * @param index */ removeList: function(index) { this.lists.splice(index, 1); } } });
