1.vue-cli的简介与使用
全局安装vue-cli
cnpm install --global vue-cli
创建一个基于webpack的模板目录
vue init webpack todolist
2.使用vue-cli开发todolist
main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import TodoList from './TodoList'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
components: { TodoList },
template: '<TodoList/>'
})
TodoList.vue
<template>
<div id="app">
<!--<img src="./assets/logo.png">
<HelloWorld/>-->
<input v-model="inputValue" />
<button @click="handleSubmit">提交</button>
<ul>
<todo-item
v-for="(item,index) of list"
:key="index"
:content="item"
:index="index"
@delete="handleDelete"
></todo-item>
</ul>
</div>
</template>
<script>
// import HelloWorld from './components/HelloWorld'
import TodoItem from './components/TodoItem'
export default {
// name: 'App',
components: {
TodoItem
},
data(){
return{
inputValue : '',
list : [],
}
},
methods: {
handleSubmit(){
this.list.push(this.inputValue);
this.inputValue = '';
},
handleDelete(index){
this.list.splice(index,1);
}
}
}
</script>
<style>
/*#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}*/
</style>
TodoItem.vue
<template>
<li class="item" v-on:click="handleDelete">{{content}}</li>
</template>
<script>
export default {
name: 'HelloWorld',
props: ['content','index'],
data () {
return {
}
},
methods: {
handleDelete(){
this.$emit('delete',this.index);
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.item{
color: green;
}
</style>