注意文件名要對應起來old1對應old1npm run start(npm dev)命令在cmd中執行會啓動todolist項目
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue-cli的簡介與使用</title>
<script src="./Vue.js"></script>
</head>
<body>
<!--
腳手架工具,項目開發
安裝和使用官方地址:https://cn.vuejs.org/
學習---教程---安裝--命令行工具CLI
--全局安裝 vue-cli
npm install --global vue-cli
--創建一個基於webpack模板的新項目
vue init webpack my-project
--安裝依賴,走你
cd my-project
npm run dev
widows打開命令行(前提是本機要有npm 安裝npm參照我博客教程)
好了如果你按順序操作了那接下來的學習就到了命令生成的todoList項目中做了
-->
<div id="root">
<div>
<input v-model="inputValue"/>
<button @click="clickSubmit">提交</button>
</div>
<ul>
<todo-item v-for="(item,index) of list"
:key="index"
:content="item"
:index="index"
@delete="handleDelete"
>
</todo-item>
</ul>
</div>
<script>
/* Vue.component('todo-item',{
props: ['content'],/*表示組件從外邊接收一個數據
template: '<li>hello</li>'
}) */
var TodoItem={
props: ['content','index'],/*表示組件從外邊接收一個數據*/
template:'<li @click="handleClick">{{content}}</li>',
methods:{
handleClick:function(){
this.$emit('delete',this.index)
}
}
}
new Vue({
el: "#root",
components:{
'todo-item':TodoItem
},
data:{
inputValue:'',
list:[]
},
methods:{
clickSubmit:function(){
this.list.push(this.inputValue);/*在list裏添加數據*/
this.inputValue='';
},
handleDelete:function(index){
this.list.splice(index,2)/*從list裏刪除包括index在內的及以後的兩條數據*/
}
}
})
</script>
</body>
</html>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-old1.vue:
<template>
<div>
<div>
<input v-model="inputValue"/>
<button @click="handleSubmit">提交</button>
</div>
<ul>
<todo-item
v-for="(item,index) of list"
:key="index"
:content="item"
:index="index"
@delete="handleDelete"
></todo-item>
</ul>
</div>
</template>
<script>
import TodoItem from './components/TodoItem'
export default {
components:{
'todo-item': TodoItem
},
data (){
return{
inputValue:'',
list:[]
}
},
methods:{
handleSubmit(){
this.list.push(this.inputValue)
this.inputValue = ''
},
handleDelete(index){
this.list.splice(this.index,1)
}
}
}
</script>
<style>
#app {
}
</style>
TodoList.vue:
<template>
<div>
<div>
<input class="item" v-model="inputValue"/>
<button @click="handleSubmit">提交</button>
</div>
<ul>
<todo-item
v-for="(item,index) of list"
:key="index"
:content="item"
:index="index"
@delete="handleDelete"
></todo-item>
</ul>
</div>
</template>
<script>
import TodoItem from './components/TodoItem'
export default {
components:{
'todo-item': TodoItem
},
data (){
return{
inputValue:'',
list:[]
}
},
methods:{
handleSubmit(){
this.list.push(this.inputValue)
this.inputValue = ''
},
handleDelete(index){
this.list.splice(index,1)
}
}
}
</script>
<style>
#app {
}
</style>
TodoItem-old1.vue:
<template>
<li @click="handleDelete">{{content}}</li>
</template>
<script>
export default {
props: ['content','index'],
methods:{
handleDelete(){
this.$emit('delete',this.index)
}
}
}
</script>
<style scoped>
</style>
TodoItem.vue:
<template>
<li class="item" @click="handleDelete">{{content}}</li>
</template>
<script>
export default {
props: ['content','index'],
methods:{
handleDelete(){
this.$emit('delete',this.index)
}
}
}
</script>
<!--scoped作用域是當前組件 經常加scoped-->
<style scoped>
.item{
color:red;
}
</style>