Vue 2.0修仙之路 — 组件
2018-05-30 本文已影响77人
杀个程序猿祭天
HTML 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 自定义组件，可以自定义属性 -->
<tou name="Logo-"></tou>
<ol>
<list v-for="item in groceryList"
v-bind:todo="item" v-bind:key="item.id"></list>
</ol>
</div>
</body>
</html>
<script src="js/demo2.js"></script>
JS 代码
window.onload = function(){
// 下载 dev-tools https://github.com/vuejs/vue-devtools
var data = {
groceryList: [
{ id: 0, text: '蔬菜' },
{ id: 1, text: '奶酪' },
{ id: 2, text: '随便其它什么人吃的东西' }
]
}
var methods = {
}
// 定义组件
Vue.component("tou",{
// 接收组件传来的值
props:["name"],
//组件模板
template:'<p>我是头部<a href="###">{{name}}</a></p>'
})
// 自定义列表组件
Vue.component("list",{
// 接收组件传来的值
props:["todo"],
//组件模板
template:'<li>{{todo.text}}</li>'
})
var app = new Vue({
el:"#app",
data:data,
methods:methods
})
}
