index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link type="text/css" rel="stylesheet" href="./main.css">
<script src="https://unpkg.com/vue"></script>
<title>Document</title>
</head>
<body>
<!--vue app是根容器-->
<div id="vue-app">
<!--数组下表获取-->
<!-- {{characters[0]}}-->
<!---->
<greeting></greeting>
</div>
<script src="./app.js"></script>
</body>
</html>
main.js
Vue.component("greeting",{
template:`<div><p>{{name}}大家好,给大家介绍一下</p>
<button v-on:click="changeName">改名</button></div>`,
data:function (){
return{
name:"鹿晗"
}
},
methods: {
changeName:function (){
this.name="歌谣"
}
}
})
new Vue({
el:"#vue-app",
data:{
},
methods:{
}
})
main.js
#bag{
width:200px;
height:500px;
margin:0 auto;
background:url(1.jpg) center no-repeat;
background-size: 80%;
}
#bag.burst{
background-image:url(2.jpg);
}
#bag-health{
width: 200px;
border:2px #000 solid;
margin:0 auto 20px auto;
}
#bag-health div{
height: 20px;
background: crimson;
}
#controls{
width: 200px;
margin: 0 auto;
}
运行结果