局部组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>局部组件</title>
<script src="../../js/vue.js"></script>
</head>
<body>
<div id="top">
<login>
<!-- 组建的名字 -->
<login>
</div>
<script>
new Vue({
el: "#top",
components: {
login: {
// login是组件的名字，可以是小写，也可以是驼峰命名，如果使用驼峰命名注意：：容器内的组件的名字需要在驼峰前加-前都小写
//用来区分原生标签与组件名字，也可不用驼峰法
// 列如：myLogin 容器里组件的名字为my-login
// template: 存放组件html
template: `
<div>
<input type='text' placeholder='请输入账号' v-model='username' /><br/>
<input type='password' placeholder='请输入密码' v-model='password' /><br/>
<button @click='submit'>提交</button>
</div>
`,
// data存放组件内双向绑定的数据
data() {
return {
username: "",
password: ""
}
},
// 方法
methods: {
submit() {
console.log(this.username, this.password);
}
},
}
}
})
</script>
</body>
</html>
全局组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>局部组件</title>
<style>
.login{
border: 1px solid;
width: 300px;
height: 200px;
}
</style>
<script src="../../js/vue.js"></script>
</head>
<body>
<div id="top">
<login>
<login>
</div>
<!-- 俩个容器 -->
<div id="foot">
<login>
<login>
</div>
<script>
Vue.config.productionTip = false;
// 将组件放在vue实列前
Vue.component('login',{
template: `
<div class='login'>
<input type='text' placeholder='请输入账号' v-model='username' /><br/>
<input type='password' placeholder='请输入密码' v-model='password' /><br/>
<button @click='submit'>提交</button>
</div>
`,
data() {
return {
username: "",
password: ""
}
},
methods: {
submit() {
console.log(this.username, this.password);
}
}
})
// 俩个vue实列
new Vue({
el: "#top",
});
new Vue({
el: "#foot",
})
</script>
</body>
</html>
