1.组件化
在大型应用开发的时候，页面可以划分成很多部分。往往不同的页面，也会有相同的部分。例如可能会有相同的头部导航。
但是如果每个页面都独自开发，这无疑增加了我们开发的成本。所以我们会把页面的不同部分拆分成独立的组件，然后在不同页面就可以共享这些组件，避免重复开发。
在vue里，所有的vue实例都是组件。
(1)全局组件
我们通过Vue的component方法来定义一个全局组件。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <!--使用定义好的全局组件--> <counter></counter> </div> </body> <script src="node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> //子组件 // 定义全局组件，两个参数：1，组件名称。2，组件参数 Vue.component("counter",{ template:'<button v-on:click="count++">你点了我 {{ count }} 次，我记住了.</button>', data(){ return { count:0 } } }) //父组件 var app = new Vue({ el:"#app" }) </script> </html>
-
-
不同的是组件不会与页面的元素绑定，否则就无法复用了，因此没有el属性。
-
但是组件渲染需要html模板，所以增加了template属性，值就是HTML模板
-
全局组件定义完毕，任何vue实例都可以直接在HTML中通过组件名称来使用组件了。
-
效果图：
(2)组件的复用
<div id="app"> <!--使用定义好的全局组件--> <counter></counter> <counter></counter> <counter></counter> </div>
效果：
(3)局部组件
一旦全局注册，就意味着即便以后你不再使用这个组件，它依然会随着Vue的加载而加载。
因此，对于一些并不频繁使用的组件，我们会采用局部注册。
我们先在外部定义一个对象，结构与创建组件时传递的第二个参数一致：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <!--使用定义好的全局组件--> <counter1></counter1> </div> </body> <script src="node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> //局部组件 const counter = { template:'<button v-on:click="count++">你点了我 {{ count }} 次，我记住了.</button>', data(){ return { count:0 } } }; //父组件 var app = new Vue({ el:"#app", components:{ counter1:counter // 将定义的对象注册为组件 } }) </script> </html>
-
-
其key就是子组件名称
-
其值就是组件对象名
-
-
(4)组件通信
通常一个单页应用会以一棵嵌套的组件树的形式来组织：
-
-
左侧内容区又分为上下两个组件
-
右侧边栏中又包含了3个子组件
-
-
子组件通过props接收父组件数据，通过自定义属性的属性名
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <h1>打个招呼：</h1> <!--使用子组件，同时传递title属性--> <introduce title="大家好，我是lucky"/> </div> </body> <script src="node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> //子组件 Vue.component("introduce",{ // 直接使用props接收到的属性来渲染页面 template:'<h1>{{title}}</h1>', props:['title'] // 通过props来接收一个父组件传递的属性 }) //父组件 var app = new Vue({ el:"#app", }) </script> </html>
效果：
<2>子向父的通信：$emit
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <!--使用子组件--> <h2>num: {{num}}</h2> <!--通过v-on指令(简写为@)将父组件的函数绑定到子组件counter上--> <counter :count="num" @inc="increment" @dec="decrement"></counter> </div> </body> <script src="node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> //子组件counter Vue.component("counter", { template:' <div> <button @click="plus">加</button> <button @click="reduce">减</button> </div>', props:['count'], //vue提供了一个内置的this.$emit()函数，用来调用父组件绑定的函数 methods:{ plus(){ this.$emit("inc"); }, reduce(){ this.$emit("dec"); } } }) //父组件 var app = new Vue({ el:"#app", data:{ num:0 }, methods:{ // 父组件中定义操作num的方法 increment(){ this.num++; }, decrement(){ this.num--; } } }) </script> </html>
效果图：
2.
然后编写页面的基本结构：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <span>登录</span> <span>注册</span> <hr/> <div> 登录页/注册页 </div> </div> </body> <script src="../node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> var vm = new Vue({ el:"#app" }) </script> </html>
样式：
<2>编写登录及注册组件
接下来我们来实现登录组件，以前我们都是写在一个文件中，但是为了复用性，开发中都会把组件放入独立的JS文件中，我们新建一个user目录以及login.js及register.js
const loginForm = { template:' <div> <h2>登录页</h2> 用户名：<input type="text"><br/> 密码：<input type="password"><br/> </div> ' }
register.js内容：
const registerForm = { template:' <div> <h2>注册页</h2> 用 户 名：<input type="text"><br/> 密  码：<input type="password"><br/> 确认密码：<input type="password"><br/> </div> ' }
(2)vue-router简介和安装
官网：https://router.vuejs.org/zh-cn/
使用npm安装：npm install vue-router --save
在index.html中引入依赖：
<script src="../node_modules/vue-router/dist/vue-router.js"></script>
示例：
新建vue-router对象，并且指定路由规则：
// 创建VueRouter对象
const router = new VueRouter({
routes:[ // 编写路由规则
{
path:"/login", // 请求路径，以“/”开头
component:loginForm // 组件名称
},
{
path:"/register",
component:registerForm
}
]
})
-
-
routes：路由规则的数组，可以指定多个对象，每个对象是一条路由规则，包含以下属性：
-
path：路由的路径
-
-
<!--页面跳转控制：--> <div id="app"> <!--router-link来指定跳转的路径--> <span><router-link to="/login">登录</router-link></span> <span><router-link to="/register">注册</router-link></span> <hr/> <div> <!--vue-router的锚点--> <router-view></router-view> </div> </div>
-
-
通过
<router-link>
总体页面：index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--页面跳转控制：--> <div id="app"> <!--router-link来指定跳转的路径--> <span><router-link to="/login">登录</router-link></span> <span><router-link to="/register">注册</router-link></span> <hr/> <!--指定组件添加的位置--> <div> <!--vue-router的锚点--> <router-view></router-view> </div> </div> </body> <script src="../node_modules/vue/dist/vue.js"></script> <script src="../node_modules/vue-router/dist/vue-router.js"></script> <script src="user/login.js"></script> <script src="user/register.js"></script> <script type="text/javascript"> // 创建VueRouter对象 const router = new VueRouter({ routes:[ // 编写路由规则 { path:"/login", // 请求路径，以“/”开头 component:loginForm // 组件名称 }, { path:"/register", component:registerForm } ] }) //在父组件中引入router对象： var vm = new Vue({ el:"#app", router // 引用上面定义的router对象 }) </script> </html>
效果图：
