<template> <!-- <div id="app"> <img alt="Vue logo" src="./assets/logo.png"> <HelloWorld msg="Welcome to Your Vue.js App"/> </div> --> <div id="app"> <Movie v-for="movie in movies" :key="movie.id" :title="movie.title" :rating="movie.rating"></Movie> <Hello></Hello> </div> </template> <script> // import HelloWorld from './components/HelloWorld.vue' import Movie from './components/Movie.vue' import Hello from './components/Hello.vue' Movie,name export default { name: 'App', data:function(){ return{ movies:[ {id:1,title:"金刚狼",rating:8.7}, {id:1,title:"金刚狼",rating:8.8}, {id:1,title:"金刚狼",rating:8.6} ] } }, components: { // HelloWorld Movie, Hello } } </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
<template>
<!-- <div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div> -->
<div id="app">
<Movie v-for="movie in movies" :key="movie.id" :title="movie.title" :rating="movie.rating"></Movie>
<Hello></Hello>
</div>
</template>
<script>
// import HelloWorld from './components/HelloWorld.vue'
import Movie from './components/Movie.vue'
import Hello from './components/Hello.vue'
Movie,name
export default {
name: 'App',
data:function(){
return{
movies:[
{id:1,title:"金刚狼",rating:8.7},
{id:1,title:"金刚狼",rating:8.8},
{id:1,title:"金刚狼",rating:8.6}
]
}
},
components: {
// HelloWorld
Movie,
Hello
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
<template> <div> <h1>{{title}}</h1> <span>{{rating}}</span> <button @click="fun">点击收藏</button> </div> </template> <script> export default{ name:"Movie", props:["title","rating"], data:function(){ return{ } }, methods:{ fun(){ alert("收藏成功") } } } </script> <style> </style>
<template>
<div>
<h1>{{title}}</h1>
<span>{{rating}}</span>
<button @click="fun">点击收藏</button>
</div>
</template>
<script>
export default{
name:"Movie",
props:["title","rating"],
data:function(){
return{
}
},
methods:{
fun(){
alert("收藏成功")
}
}
}
</script>
<style>
</style>
<template> <h3>hello</h3> </template>
<template>
<h3>hello</h3>
</template>