VUE基础用法（四）

一、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/csstemplate: "#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.定义属性，必须returnreturn{属性名：属性值}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可以简化为keyhelloCom}})</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）实现父子关系的嵌套结构