组件的使用三步骤： 1.创建template
2.定义和注册一个组件
3.使用组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件的使用</title>
</head>
<body>
<!--第一步：创建组件-->
<template id="account">
<div>
<h3>账号组件的内容</h3>
<a href="">账号</a>
<a href="">密码</a>
</div>
</template>
<div id="app">
<!--第三步：使用组件-->
<account1></account1>
</div>
</body>
</html>
<script src="vue.js"></script>
<script>
// 第二步：定义和注册组件
Vue.component('account1',{
template:'#account'//用的是组件的id
})
new Vue({
//管理边界
el:'#app',
//data存放数据(true为 显示，false为隐藏)
data:{
},
})
</script>
<!--组件的使用步骤：-->
<!--1.创建template-->
<!--2.定义和注册一个组件-->
<!--3.使用组件-->
组件的指令和事件
1.创建template
2.指令的使用
3.组件的指令和事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>指令和事件</title>
</head>
<body>
<!--组件-->
<!--创建组件-->
<template id="account">
<div>
<h3>账号组件的内容:{{msg}}</h3>
<a href="#" @click="login">账号</a>//组件事件
<a href="#" @click="passWord">密码</a>
</div>
</template>
<div id="app">
<!--使用组件-->
<account1></account1>
</div>
</body>
</html>
<script src="vue.js"></script>
<script>
// 定义和祖册组件
Vue.component('account1',{
template:'#account',//用的是组件的id
data:function () {
return{
msg:'hello word'
}
},
// 组件的使用方法
methods:{
login : function(){
console.log('我是账号')
},
passWord:function () {
console.log('我是密码')
}
}
})
new Vue({
//管理边界
el:'#app',
//data存放数据(true为 显示，false为隐藏)
data:{
},
})
</script>
