前言:
我们把组件单独拿出来,写在其他文件夹中,然后在一个index.html中去调用它们。
1.在src/js下新建login.js和register.js:
- 目录结构:
- login.js里面添加登录组件的代码:
const loginForm = { //组件内的template只能有一个跟标签
template: `
<div>
<h1>登录页</h1>
用户名:<input type="text" ><br>
密码:<input type="password"><br>
<input type="button" value="登陆">
</div>
`
}
- register.js里面添加注册组件的代码:
const registerForm = { //组件内的template只能有一个跟标签
template: `
<div>
<h1>注册页</h1>
用户名:<input type="text" ><br>
密码:<input type="password"><br>
确认密码:<input type="password"><br>
<input type="button" value="注册">
</div>
`
}
2.在src下新建index.html:
- 引入组件和Vue.js:
<script src="../node_modules/vue/dist/vue.js"></script>
<script src="js/register.js"></script>
<script src="js/login.js"></script>
- 创建Vue实例:
<script>
const app = new Vue({
el: "#app",
components: {
loginForm, //组件名称
registerForm
}
});
</script>
- html模板代码:
<div id="app">
<span>登录</span>
<span>注册</span>
<hr>
<login-form></login-form> //调用组件。使用-来识别后面的一个字母为大写。类似java的下划线
<register-form></register-form>
</div>
3.运行代码:
- 成功引用组件。
- 但是我们要实现点击登录只显示登录的组件,点击注册只显示注册的组件。这时就需要用到路由(见下章)。