Vue.js 组件实现电影信息展示 - 代码示例 - 常规

<script src="../JS/vue.js"></script>
</head>
<body>
<div id="example">
  <my-movie :img="imgUrl" name="狙击手" :description="description"></my-movie>
</div>
<script type="text/javascript">
//注册全局组件
Vue.component('my-movie', {
props : ['img','name','description'],//传递动态Prop
template : '<div> \n <img :src="img"> \n <div class="movie_name">{{name}}</div> \n <div class="movie_des">{{description}}</div> \n  </div>'
})
//创建根实例
var vm = new Vue({
el:'#example',
data: {
       imgUrl: '3.jpg',
      description: '2021年新电影'
   }
})
</script>