<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--定義掛載vue對象的div-->
<div id="app">
<todo-list></todo-list>
</div>
<!--經過cdn的方式引入vue庫-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 定義一個todo-item組件
Vue.component('todo-item', {
// props屬性，定義子組件能夠接收的參數以及類型和默認值，經過屬性綁定的方式就能夠傳入參數，
// 下文的:title="item.title" :del="item.del"
props: {
title: String,
del: {
type: Boolean,
default: false
}
},
// data屬性用於定義組件內部的參數，經過一個函數返回，不管被其餘地方引用多少次，能夠保證內部數據獨立
data: function () {
return {
}
},
// template屬性定義組件模板代碼
// v-if指令，條件控制語句，根據其條件表達式返回的boolean值，斷定當前標籤的行爲
// v-else指令
// v-show 控制標籤是否顯示
// @click ，@語法糖，是v-on指令的簡寫，意思是進行實踐綁定，這裏的意思當檢測到click事件時，調用handleClick函數
template: `
<li>
<a v-if="!del" >{{title}}</a>
<a v-else style="text-decoration: line-through">{{title}}</a>
<button v-show="!del" @click="handleClick">刪除</button>
</li>
`,
// 定義當前組件的方法
methods: {
handleClick(){
console.log("點擊刪除按鈕")
// this.$emit 方法，會觸發父組件的一個事件，這個方法通常是子組件向父組件傳遞數據時使用
// 當前場景是 觸發父組件的delete方法，並傳遞一個參數，多個參數的話用逗號隔開就行
// 這裏的delete事件，是自定義的事件，上文的click事件時內置的事件
this.$emit('delete', this.title)
}
}
})
// 定義一個TODOlist組件
Vue.component('todo-list', {
// 模板代碼
// @delete 綁定delete事件觸發時執行的方法
// v-for 循環指令
// :title 冒號是v-bind指令的簡寫，用於屬性綁定
template: `
<ul>
<todo-item @delete="handleDelete" v-for="item in list" :title="item.title" :del="item.del"></todo-item>
</ul>
`,
props: {
},
methods: {
handleDelete(val){
console.log("點擊" + val)
}
},
data: function () {
return {
list: [
{
title: '課程1',
del: false
},
{
title: '課程2',
del: true
}
]
}
}
})
let vm = new Vue({
// 掛載
el: "#app",
data: {
// title: String,
// del: {
// type: Boolean,
// default: false
// }
}
})
</script>
</body>
</html>
歡迎你們去 個人博客 瞅瞅，裏面有更多關於測試實戰的內容哦！！html