<!DOCTYPE html>
< htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> < scriptsrc = " https://cdn.staticfile.org/vue/2.2.2/vue.min.js" > </ script> </ head> < body> < divid = " app" > < ol> < li> </ li> < todo-item> </ todo-item> < todo-item> </ todo-item> < todo-item> </ todo-item> </ ol> </ div> < script>
Vue. component ( 'todo-item' , {
template: "<li>This is a todo</li>"
} ) ;
var app= new Vue ( {
el: "#app" ,
} ) ;
</ script> </ body> </ html>
<!DOCTYPE html>
< htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> < scriptsrc = " https://cdn.staticfile.org/vue/2.2.2/vue.min.js" > </ script> </ head> < body> < divid = " app" > < ol> < todo-itemv-for = " item in groceryList" v-bind: todo= " item" v-bind: key= " item.id" > </ todo-item> </ ol> </ div> < script>
Vue. component ( 'todo-item' , {
props: [ 'todo' ] ,
template: "<li>{{todo.text}}</li>"
} ) ;
var app= new Vue ( {
el: "#app" ,
data: {
groceryList: [
{ id: 0 , text: '蔬菜' } ,
{ id: 1 , text: '奶酪' } ,
{ id: 2 , text: '白菜' } ,
]
}
} ) ;
</ script> </ body> </ html> 示例參照連接
<!DOCTYPE html>
< htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> < scriptsrc = " https://cdn.staticfile.org/vue/2.2.2/vue.min.js" > </ script> </ head> < body> < divid = " app" > < formv-on: submit.prevent= " addNams" > < label> </ label> < inputv-model = " newName" placeholder = " 請輸入姓名" > < button> </ button> </ form> < ul> < liis = " name-item" v-for = " (item,index) in peoples" v-bind: key= " item.id" v-bind: name= " item.name" v-on: remove22= " peoples.splice(index,1)" > </ li> </ ul> </ div> < script>
Vue. component ( 'name-item' , {
template: '<li>{{name}}' +
'<button v-on:click="$emit(\'remove22\')">remove</button></li>' ,
props: [ 'name' ]
} ) ;
new Vue ( {
el: '#app' ,
data ( ) {
return {
newName: '' ,
peoples: [ { id: 1 , name: '小明' } , { id: 2 , name: '小明2' } , { id: 3 , name: '小明3' } ] ,
newId: 4
}
} ,
methods: {
addNams ( ) {
if ( this . newName!= '' ) {
this . peoples. push ( { id: this . newId, name: this . newName} ) ;
this . newId++ ;
this . newName= "" ;
}
}
}
} ) ;
</ script> </ body> </ html>
