<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>組件之子組件中data使用實例與text-xtemplate的使用方法</title>
<script src="vue.js"></script>
</head>
<body>
<!--
組件：可互用、維護省力
-->
<div id="lantian">
<!--局部組件的調用：使用組件的名時，如果是駝峰式的寫法，需要用 - 分開-->
<lt-News></lt-News>
<hr>
<lt-News></lt-News>
<hr>
<lt-News></lt-News>
</div>
<script typeof="text/x-template" id="ltNews">
<div>
<li v-for="(v,k) in news">
{{v.title}}
<button @click="del(k)">刪除</button>
</li>
</div>
</script>
<script>
var ltNews = {
template: "#ltNews",
data() {
return {
news: [
{title: 'lantianCms'},
{title: 'lantianPhp'}
]
};
},
methods: {
del(k) {
this.news.splice(k, 1);
}
}
};
new Vue({
el: "#lantian", //根組件，其他的就是子組件
//定義局部組件：
components: {ltNews}
});
</script>
</body>
</html>
