A Pen by Steven Zhang on CodePen.
Created
January 25, 2018 07:23
-
-
Save jdomzhang/8f6c29e808e9dddcbdc18f4f6bd944b3 to your computer and use it in GitHub Desktop.
Vue 2.0 test
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div id="app"> | |
<app-nav></app-nav> | |
<app-view> | |
<app-sidebar></app-sidebar> | |
<app-content></app-content> | |
</app-view> | |
</div> | |
<div id="app-7"> | |
<ol> | |
<!-- | |
现在我们为每个 todo-item 提供 todo 对象 | |
todo 对象是变量,即其内容可以是动态的。 | |
我们也需要为每个组件提供一个“key”,稍后再 | |
作详细解释。 | |
--> | |
<todo-item | |
v-for="item in groceryList" | |
v-bind:todo="item" | |
v-bind:key="item.id"> | |
</todo-item> | |
</ol> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Vue.component('todo-item', { | |
props: ['todo'], | |
template: '<li>{{ todo.text }}</li>' | |
}) | |
var app7 = new Vue({ | |
el: '#app-7', | |
data: { | |
groceryList: [ | |
{ id: 0, text: '蔬菜' }, | |
{ id: 1, text: '奶酪' }, | |
{ id: 2, text: '随便其它什么人吃的东西' } | |
] | |
} | |
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment