一、VUE中组件化思想
1、分布式思想
1.1）传统项目设计思想
说明: 单体项目架构设计，在同一个tomcat服务器中，如果一个模块出现问题，则直接影响整个tomcat服务器运行，项目架构设计耦合性高。
2、分布式思想
核心理念：根据特定的规则，将程序进行拆分， 未来学习微服务架构的设计思想。
2.1）根据模块拆分
说明：根据项目中不同的模块，拆分为不同的tomcat服务器，如果某台tomcat服务器发送异常，则不影响整个项目的运行
2.2）根据层级拆分
3、组件化思想
组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树.
使用组件可以将一些重复的内容进行封装。各个组件单独维护，体现了分治的思想(分布式思想)
补充知识: 为了保证组件化 相互之间互不干扰，则应该在组件内部，单独定义html/js/css.
说明：传统的页面开发，会将大量的HTML/CSS/JS进行引入，但是引入之后结构混乱 ，不便于管理，开发维护时，成本较高.
组件化思想:
在VUE中 可以将一个组件，看作是一个页面。在其中可以引入独立的样式/JS/HTML 进行单独的管理.
组件可以进行复用
关键字：组件–页面 (html/css/js)
4、组件化入门案例-全局组件
4.1）步骤
1.组件中的data 是一个函数() 必须有返回值。
2.组件的模版必须有一个根目录（只能有一个标签，其中标签可以嵌套标签）。
3.如果组件的名称采用驼峰规则的命名（默认会解析成全小写），则标签引用时需要使用“-”线进行关联。
== 根目录（只能有一个标签，其中标签可以嵌套标签，但是不能有两个并列的标签）==
4.2）定义组件
4.3）定义模版
4.4）整体代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>全局组件定义</title>
<body>
<div id="app">
<!-- 2.3 引用组件 通过标签页面html解析标签之后
都变为小写字母. 如果使用驼峰规则使用-线连接 -->
<add-num-com></add-num-com>
</div>
<!-- 2.2 定义模版html 模版必须有根目录 -->
<template id="addNumTem">
<div>
<h3>测试组件用法</h3>
数据: {{num}}
<button @click="addNum">自增</button>
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
//2.定义全局组件 Vue.component("组件名称","组件内容")
Vue.component("addNumCom",{
//2.1 定义属性
data(){
return {
num: 1
}
},
//2.2 定义组件模版 编辑html/js/css
template: "#addNumTem",
methods: {
addNum(){
this.num ++
}
}
})
//1.定义vue对象
const app = new Vue({
el: "#app",
data: {
},
methods: {}
})
</script>
</body>
</html>
4.5）学习重点
说明：组件定义在未来由前端框架node.js提供的脚手架完成，现阶段主要学习组件中语法结构
掌握：data 数据的写法，template 注意事项， methods写法。
4.6）案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>组件化</title>
</head>
<body>
<h1>组件化结构</h1>
<div id="app">
<!-- 1.需求 编辑一首静夜思 但是要求代码尽可能复用.
实现策略: 组件化思想
2.组件化步骤:
1.定义组件
全局组件: 任意的DIV都可以引入该组件
局部组件: 只有特定的DIV可以引入组件
2. 编辑组件的key(注意驼峰规则的写法)
编辑组件体 特殊语法: 定义属性时 data(){return{ key:value}}
html标签: 使用template进行标记
3.通过key对组件进行引用.
-->
<!-- 1.组件标签的使用 放到app标签之内 才能解析
2.如果采用驼峰规则命令则中间使用-线连接，否则自动解析成小写
-->
<hello-com></hello-com> <!-- 解析成：helloCom -->
<hello-com></hello-com>
<hello-com></hello-com>
<helloCom></helloCom> <!-- 解析成：hellocom -->
</div>
<!-- 定义组件的模版html
注意事项:
1.切记标识在app之外!!!!
2.要求模版字符串必须有根标签 div
-->
<!-- 定义模板 -->
<template id="helloTem">
<div>
<h3>静夜思</h3>
床前明月光，疑是地上霜。
举头望明月，低头思故乡。
引入属性：{{msg}}
</div>
</template>
<!-- 引入JS文件 -->
<script src="../js/vue.js"></script>
<script>
/*1.定义组件
Vue.component("组件名",
{
//2.定义属性，必须return
return{
属性名：属性值
}
template: "模板名(id---要加#)"
}
)
*/
Vue.component("helloCom",{
/*定义属性 必须return*/
data(){
return{
msg:"我是一个组件,大写的helloCom"
}
},
template: "#helloTem"
})
Vue.component("hellocom",{
data(){
return{
msg:"我是一个组件,小写的hellocom"
}
},
template: "#helloTem"
})
/* vue对象 */
const app = new Vue({
el: "#app",
data: {
},
methods: {
}
})
</script>
</body>
</html>
5、组件化-局部组件
5.1）定义局部组件
5.2）定义局部对象
5.3）定义模版
5.4）局部组件测试
5.5）key-value 简化写法
5.6）案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>组件化</title>
</head>
<body>
<h1>局部组件</h1>
<div id="app">
<hello-com></hello-com>
<hello-com></hello-com>
<hello-com></hello-com>
</div>
<template id="helloTem">
<div>
<h1>我是局部组件AAAAAAAAA</h1>
属性取值: {{msg}}
</div>
</template>
<!-- 引入JS文件 -->
<script src="../js/vue.js"></script>
<script>
//声明组件
let helloCom = {
//属性定义
data(){
return {
msg: "我是局部组件"
}
},
template: "#helloTem"
}
/* 说明:只能在某个VUE的对象之内，用组件标签 */
const app = new Vue({
el:"#app",
data: {
},
methods: {
},
//定义局部组件
components: {
//组件key: 组件体
//helloCom: helloCom
//如果key-value相同，则js可以简化为key
helloCom
}
})
</script>
</body>
</html>
二、路由机制
1 、VUE Router介绍
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。
包含的功能有：
嵌套的路由/视图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于 Vue.js 过渡系统的视图过渡效果
细粒度的导航控制
带有自动激活的 CSS class 的链接
HTML5 历史模式或 hash 模式，在 IE9 中自动降级
自定义的滚动条行为
2、VUE Router存在意义
2.1、传统页面跳转
在之前所有的页面都是由后端服务器进行页面跳转，所有的请求都会经过后端，导致后端服务器压力过大。
这种用户只有通过后端服务器才能获取页面相关信息的方式，称之为后端路由/服务器端路由。
弊端：这种方式是一种集中式的管理， 性能瓶颈在服务器端
2.2）解决策略
将所有的路由的配置生成JS，保存到浏览器中，当用户发起某个请求时，自己映射对应的请求页面信息(组件)，之后直接访问静态资源，这样的方式速度更快。
将上述的方式称之为：前端路由/客户端路由
三、路由介绍
说明: 用户发起一个请求，在互联网中经过多个站点的跳转，最终获取服务器端的数据，把互联网中网络的链路称之为路由 (网络用语)
VUE中的路由：根据用户的请求URL地址，展现特定的组件(页面)信息 (控制用户程序跳转过程)
1、路由步骤
1.导入路由.JS
2.指定路由的跳转链接
3.定义路由的填充位.
4.封装组件信息, 指定路由对象 (难!!!)
5.在VUE对象中声明路由
2、路由入门案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>路由入门案例</title>
</head>
<body>
<div id="app">
<!-- <a href="设定跳转的地址">百度</a> -->
<!-- 二:定义链接
1.router-link 被编译之后转化为a标签
2.关键字 to 被编译之后转化为href属性
-->
<router-link to="/user">用户</router-link>
<router-link to="/dog">狗狗</router-link>
<!--三: 指定路由的填充位置 未来展现组件信息
填充的位置被解析之后 就是一个DIV
-->
<router-view></router-view>
</div>
<!-- 定义组件的标签体 -->
<template id="userTem">
<div>
<h3>用户信息</h3>
</div>
</template>
<template id="dogTem">
<div>
<h3>狗狗信息</h3>
</div>
</template>
<!-- 1.导入路由JS 先导入vue.js 再导入路由.js 顺序问题 -->
<script src="../js/vue.js"></script>
<script src="../js/vue-router.js"></script>
<script>
/**
* 第四步: 准备组件,定义路由对象
*/
let userCom = {
template: "#userTem"
}
let dogCom= {
template: "#dogTem"
}
/**
* 定义路由对象
* routes: 路由的多个映射通过该属性进行定义.
*/
let vueRouter = new VueRouter({
routes: [
{path: "/user", component: userCom},
{path: "/dog", component: dogCom}
]
})
const APP = new Vue({
el: "#app",
data: {
},
//实现路由的挂载
router: vueRouter
})
</script>
</body>
</html>
3、路由重定向
3.1）需求说明
当访问默认页面时(A页面)，由于业务需要，要求用户看到其他页面(B页面)，则需要使用Vue的路由重定向机制，自动跳转.
解决策略：redirect 关键字。
3.2）重定向说明
说明:
用户访问服务器,但是目标服务器无法处理该请求，目标服务器返回一个能够处理请求的网址，由用户再次发起请求，访问服务器获取数据.
特点:
1.重定向时URL中的请求地址发生变化.
2.重定向时请求发送了多次. 多次请求/多次响应.
3. 重定向是服务器行为
4. 重定向时不能传递参数.
3.3）路由关键字
redirect 路由的重定向
需求：
要求用户访问 "/"根目录，要求重定向到 "/user"请求路径中。
3.4）整体代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>路由入门案例</title>
</head>
<body>
<div id="app">
<!-- <a href="设定跳转的地址">百度</a> -->
<!-- 第二步：定义链接
1.router-link 被编译之后转化为a标签
2.关键字 to 被编译之后转化为href属性
-->
<router-link to="/user">用户</router-link>
<router-link to="/dog">狗狗</router-link>
<!--第三步：指定路由的填充位置（页面显示位置），未来展现组件信息
填充的位置被解析之后 就是一个DIV
-->
<router-view></router-view>
</div>
<!-- 第五步：定义组件的标签体（模板） -->
<template id="userTem">
<div>
<h3>用户信息</h3>
</div>
</template>
<template id="dogTem">
<div>
<h3>狗狗信息</h3>
</div>
</template>
<!-- 第一步：导入路由JS 先导入vue.js 再导入路由.js 顺序问题 -->
<script src="../js/vue.js"></script>
<script src="../js/vue-router.js"></script>
<script>
/**
* 第四步: 准备组件，定义路由对象
* template：模板，标签体
*/
let userCom = {
template: "#userTem"
}
let dogCom= {
template: "#dogTem"
}
/**
* 定义路由对象
* routes: 路由的多个映射通过该属性进行定义
* （定义的路由地址指向哪个属性）
* component：组件
* redirect：实现数据的重定向，
* 在VUE路由中只有重定向，没有转发
*/
<!-- 第六步：定义路由对象，地址指向那个组件 -->
let vueRouter = new VueRouter({
routes: [
<!-- 访问"/"，重定向到"/user" -->
{path: "/", redirect:"/user"},
{path: "/user", component: userCom},
{path: "/dog", component: dogCom}
]
})
const APP = new Vue({
el: "#app",
data: {
},
//第七步：实现路由的挂载
router: vueRouter
})
</script>
</body>
</html>
4、路由转发问题
说明:
用户访问服务器，但是目标服务器无法处理该请求，由服务器内部将请求交给其他服务器处理，这个过程称之为转发.
5、路由嵌套机制(children)
5.1）组件嵌套结构
5.2）children属性特点
说明：children属性可以实现路由的嵌套，通过父子关系，则子组件的渲染，在父组件定义的router-view标签中展现。
5.2.1）路由定义
5.2.2）组件内部结构
5.2.3）整体代码结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue路由机制</title>
<body>
<div id="app">
<!-- 2.定义路由链接
router-link 解析之后,变为a标签.
to 解析之后, 变为href属性
-->
<router-link to="/user">用户</router-link>
<router-link to="/dog">狗狗</router-link>
<!-- 3.定义路由填充位 该位置用来展现具体页面(组件) -->
<router-view></router-view>
</div>
<!-- 4.2 定义组件模版 -->
<template id="userTem">
<div>
<h1>我是组件的内容!!!!!</h1>
</div>
</template>
<template id="dogTem">
<div>
<h1>养只宠物狗</h1>
<!-- 定义子组件路由 -->
<router-link to="/dog/samo">萨摩耶</router-link>
<router-link to="/dog/hsq">哈士奇</router-link>
<!-- 定义子组件占位符 -->
<router-view></router-view>
</div>
</template>
<!-- 1.引入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<!-- 1.导入路由JS 注意顺序-->
<script src="../js/vue-router.js"></script>
<script>
//4.定义组件
let user = {
//4.1定义页面
template: "#userTem"
}
let dog = {
template: "#dogTem"
}
let samo = {
template: `<h1>通体雪白的神兽</h1>`
}
let hsq = {
template: `<h1>拆家狂魔</h1>`
}
//5.创建路由对象,定义路由规则
let router = new VueRouter({
//定义路由规则
routes: [
/*
利用redirect实现路由重定向
*/
{path: "/", redirect: "/dog"},
{path: "/user", component: user},
{path: "/dog", component: dog, children: [
{path: "/dog/samo", component: samo},
{path: "/dog/hsq", component: hsq}
]},
/*该请求是/目录下的请求,所以组件渲染也在根组件 */
/* {path: "/dog/samo", component: samo},
{path: "/dog/hsq", component: hsq}, */
]
})
//6.将路由对象交给Vue对象管理
const vue = new Vue({
el: "#app",
//绑定路由
//router: router 名称一致时,可以简化
router
})
</script>
</body>
</html>
5.3）实现父子关系的嵌套结构
590
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
