<div id="app">
<h2>單向資料流</h2>
<photo :img-url="url"></photo>
</div>
<script type="text/x-template" id="photoTemplate">
<div>
<img :src="imgUrl" class="img-fluid">
<input type="text" class="form-control" v-model="newUrl">
</div>
</script>
Vue.component('photo',{
props:['imgUrl'],
template:'#photoTemplate',
data:function(){
return {
newUrl: this.imgUrl
}
}
})
var app = new Vue({
el:'#app',
data:{
url:'https://images.unsplash.com/photo-1522204538344-922f76ecc041?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=50e38600a12d623a878983fc5524423f&auto=format&fit=crop&w=1351&q=80',
}
})