還有一個vue.js文件請看vue基礎語法部分,注意,每個模塊主講的內容在title標籤中有說明
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>todolist功能開發</title>
<script src="./Vue.js"></script>
</head>
<body>
<!--
-->
<div id="root">
<div>
<input v-model="inputValue"/>
<button @click="clickSubmit">提交</button>
<ul>
<li v-for="(item,index) of list" :key="index">
{{item}}
</li>
<ul>
</div>
</div>
<script>
new Vue({
el: "#root",
data:{
inputValue:'',
list:[]
},
methods:{
clickSubmit:function(){
this.list.push(this.inputValue);
this.inputValue='';
}
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>todolist中的組件拆分</title>
<script src="./Vue.js"></script>
</head>
<body>
<!--
組件就是頁面的一部分
定義組件,各個組件通信
component是全局組件頁面都可以用該組件
還有局部組件定義TodoItem此時需要做組件聲明components
-->
<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">
{{item}}
</todo-item>
</ul>
</div>
<script>
/* Vue.component('todo-item',{
props: ['content'],/*表示組件從外邊接收一個數據
template: '<li>hello</li>'
}) */
var TodoItem={
props: ['content'],/*表示組件從外邊接收一個數據*/
template:'<li>{{content}}</li>'
}
new Vue({
el: "#root",
components:{
'todo-item':TodoItem
},
data:{
inputValue:'',
list:[]
},
methods:{
clickSubmit:function(){
this.list.push(this.inputValue);
this.inputValue='';
}
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>組件和實例的關係</title>
<script src="./Vue.js"></script>
</head>
<body>
<!--
組件就是一個實例,一個大的項目就是由萬萬千千的實例組成
如果一個實例沒有template就會去找掛載點,次處爲root把root標籤的所有內容
當成模板使用,模板就是掛載點內的內容
-->
<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">
{{item}}
</todo-item>
</ul>
</div>
<script>
/* Vue.component('todo-item',{
props: ['content'],/*表示組件從外邊接收一個數據
template: '<li>hello</li>'
}) */
var TodoItem={
props: ['content'],/*表示組件從外邊接收一個數據*/
template:'<li @click="handleClick">{{content}}</li>',
methods:{
handleClick:function(){
alert('clicked')
}
}
}
new Vue({
el: "#root",
components:{
'todo-item':TodoItem
},
data:{
inputValue:'',
list:[]
},
methods:{
clickSubmit:function(){
this.list.push(this.inputValue);
this.inputValue='';
}
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>組件和實例的關係</title>
<script src="./Vue.js"></script>
</head>
<body>
<!--
組件是實例的子組件,實例給子組件傳值是通過屬性比如上一個例子的content屬性
實現點擊li的內容時能夠刪除該li內容,顯示與否取決於父組件的list裏的數據
實現父組件和子組件通信,通過發佈訂閱模式來做這件事情
$emit觸發事件,delete事件,這個事件裏攜帶了index的值,此時子組件可以監聽這個事件
@delete="handleDelete"然後在父組件中寫handleDelete方法並且可以傳參數index
-->
<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裏刪除從最後一個數據開始數的兩條數據*/
}
}
})
</script>
</body>
</html>
