组件是Vue.js中一个非常强大的功能,可以拓展HTML元素,封装可重用的代码。
1、将组件内容定义到template模板中
2、组件中实现指令及事件绑定
第一步:创建template
<template id="account">
<div>
<h3>组件内容:{{msg}}(使用指令)</h3>
<a href="" @click="login">账号(事件绑定)</a>
<a href="">密码</a>
</div>
</template>
第二步:定义和注册一个组件,指令,监听器
Vue.component("account",{
template:"#account",
//组件使用的数据
data:function(){
return {
msg:"登录"
}
},
//组件使用的方法
methods: {
login:function(){
console.log("账号")
}
}
})
第三步:使用组件
<account></account>