<div id="app">
<div class="p-5">
<h3>Props 靜態資料</h3>
<photo url="https://images.unsplash.com/photo-1605784401368-5af1d9d6c4dc?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80"></photo>
<h3>動態資源</h3>
<photo :url="imgUrl"></photo>
</div>
</div>const app = Vue.createApp({
data() {
return {
imgUrl: 'https://images.unsplash.com/photo-1605784401368-5af1d9d6c4dc?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80',
};
},
});
app.component('photo', {
props:['url'],
template: `<img :src="url" class="img-thumbnail" alt>`
});
app.mount('#app');