<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
</head>
<body>
<div id="app">
<newcars makes='Fords' count='0'></newcars>
<newcars makes='Hondas' ></newcars>
</div>
<template id="car-template">
<h1>{{makes}}{{count}}</h1>
<div>這裡有新車</div>
<button @click='votecar'>投我</button>
</template>
<script type="text/javascript">
Vue.component('newcars',{
template:'#car-template',
props:['makes','count'],
methods:{
votecar:function(){
this.count++;
}
}
});
var vm = new Vue({
el: "#app",
})
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
</head>
<body>
<div id="app">
<newcars makes='Fords' :count='count'></newcars>
<newcars makes='Hondas' :count='count'></newcars>
<!-- 只要是html的屬性，就要用v-bind，簡寫是一個冒號 -->
</div>
<template id="car-template" >
<h1>{{makes}}{{count}}</h1>
<div>這裡有新車</div>
<button @click='votecar'>投我</button>
</template>
<script type="text/javascript">
Vue.component('newcars',{
template:'#car-template',
props:['makes','count'],
methods:{
votecar:function(){
this.count++;
}
}
});
var vm = new Vue({
el: "#app",
data:{
count:50
}
})
</script>
</body>
</html>
全站熱搜
留言列表
伺服器架設 (1)
