vue2.5入門——2.vue中的元件
阿新 • • 發佈：2019-02-06
一、todolist功能開發
<body>
<div id="root">
<div>
<input v-model="inputValue" />
<button @click="handleClick">提交</button>
</div>
<ul>
<li v-for="(item,index) of list" 該函式所實現的功能：輸入框內輸入值，自動顯示到框下面來，並且清空輸入框。
二、TodoList中元件的拆分
<div id="root">
<div>
<input 第一種形式定義的元件叫全域性元件，可以直接呼叫。
第二種方法定義的元件叫區域性元件，想要在其他的vue例項中使用，必須用components裡面對區域性元件進行註冊。
三、元件與例項的關係
每一個vue元件又是一個vue例項。
<div id="root">
<div>
<input v-model="inputValue" />
<button @click="handleClick">提交</button>
</div>
<ul>
<todo-item
v-for="(item,index) of list"
:key="index"
:content="item"
>
</todo-item>
</ul>
</div>
<script>
Vue.component('todo-item',{
//外層向元件裡面傳遞了content但是不能直接使用
props:['content'],//定義一個屬性去接收(可以為一個數組 )
template:'<li @click="handlefun">{{content}}</li>',
methods:{
handlefun:function(){
alert('clicked')
}
}
})
// var TodoItem = {
// template:'<li>item</li>'
// }
new Vue({
el:"#root",
data:{
inputValue:'',
list:[]
},
methods:{
handleClick:function() {
this.list.push(this.inputValue)
this.inputValue = ''
}
}
})
</script>每一個元件裡面包括props、template、data、methods。
每一個例項裡面包括
template不定義，會把掛載點裡面的所有dom標籤作為template。
四、TodoList的刪除功能
1、父元件向子元件傳遞值，是通過屬性來傳遞的。
比如上邊程式碼中，下邊大的vue例項為父元件，todo-item為子元件，通過content屬性來傳遞
<div id="root">
<div>
<input v-model="inputValue" />
<button @click="handleClick">提交</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','index'],
template:'<li @click="handlefun">{{content}}</li>',
methods:{
handlefun:function(){
this.$emit('delete',this.index)//子元件應用$emit通知父元件,實現delete事件(攜帶index引數)
}
}
})
new Vue({
el:"#root",
data:{
inputValue:'',
list:[]
},
methods:{
handleClick:function() {
this.list.push(this.inputValue)
this.inputValue = ''
},
//子元件釋出delete事件，父元件監聽，如果監聽到就執行handleDelete函式。
handleDelete:function(inddd){
// alert(inddd)
this.list.splice(inddd,1)
}
}
})
</script>