console
Vue.component('my-movie', {
template: '<h3> {{ name }} <img :src="origin"></h3>' ,
data: function () {
return {
origin: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1555232312557&di=67cd20b5193395d91c66806d4696e2f7&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20180111%2F3822d06dc170400583a798a93ce259c0.jpeg",
name: "天空之城"
}
}
})
new Vue({
el: '#app',
components: {
'my-input': {
template: '<p> {{ val }} <input type="text" v-model = "val" ></p>',
data: function () {
return {
val: "1po"
}
}
}
},
});
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<div id="app">
<my-input>
</my-input>
</br>
</br>
<my-movie></my-movie>
</div>
img {
width: 100px;
}