1.组建的基本使用
<body>
<template id="temp">
<div id="demo">
<h3>账号组件的内容</h3>
<a href="">账号</a>
<a href="">密码</a>
</div>
</template>
<div id="app">
<tm></tm>
</div>
</body>
<script type="text/javascript">
Vue.component('tm',{
template:'#temp'
})
new Vue({
el:'#app',
data:{
}
})
</script>
2.组件中指令的使用
<body>
<template id="temp">
<div id="demo">
<h3>账号组件的内容:{{msg}}</h3>
<a href="#" @click="login">账号</a>
<a href="#">密码</a>
</div>
</template>
<div id="app">
<tm></tm>
</div>
</body>
<script type="text/javascript">
Vue.component('tm',{
template:'#temp',
data:function(){
return{
msg:'hello'
}
},
methods:{
login:function(){
console.log("我被点击了")
}
}
})
new Vue({
el:'#app',
data:{
}
})
</script>
