1.VUE中组件化思想
1.1 分布式思想
1.1.1 传统项目设计思想
说明: 单体项目架构设计 在同一个tomcat服务器中. 如果一个模块出现问题,则直接影响整个tomcat服务器运行.项目架构设计耦合性高.
1.2 分布式思想
核心理念: 根据特定的规则,将程序进行拆分. 未来学习微服务架构的设计思想.
1.2.1 根据模块拆分
说明: 根据项目中不同的模块,拆分为不同的tomcat服务器. 如果某台tomcat服务器发送异常,则不影响整个项目的运行.
1.2.2 根据层级拆分
1.2.3 分布式总结
核心理念: 采用分布式架构设计主要解决了系统架构设计的耦合性(架构师+压测+后台监控).
1.3 组件化思想
组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树.
使用组件可以将一些重复的内容进行封装.各个组件单独维护.体现了分治的思想(分布式思想)
补充知识: 为了保证组件化 相互之间互不干扰,则应该在组件内部 单独定义html/js/css.
1.4 组件化入门案例-全局组件
1.4.1 步骤
1.组件中的data 是一个函数() 必须有返回值.
2.组件的模版必须有一个根目录.
3.如果组件的名称采用驼峰规则的命名,则标签引用时需要使用-线进行关联.
1.4.2 定义组件
1.4.3 定义模版
1.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>
1.4.5 学习重点
说明: 组件定义在未来由前端框架node.js提供的脚手架完成. 现阶段主要学习组件中语法结构
掌握: data 数据的写法, template 注意事项, methods写法.
1.5 组件化-局部组件
1.5.1 定义局部组件
1.5.2 定义局部对象
1.5.3 定义模版
1.5.4 局部组件测试
2.路由机制
2.1 VUE Router介绍
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：
嵌套的路由/视图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于 Vue.js 过渡系统的视图过渡效果
细粒度的导航控制
带有自动激活的 CSS class 的链接
HTML5 历史模式或 hash 模式，在 IE9 中自动降级
自定义的滚动条行为
2.2 VUE Router存在意义
2.2.1 传统页面跳转
在之前所有的页面都是由后端服务器进行页面跳转.所有的请求都会经过后端.导致后端服务器压力过大.
这种 用户只有通过后端服务器才能获取页面相关信息的方式 称之为 后端路由/服务器端路由.
弊端: 这种方式是一种集中式的管理. 性能瓶颈在服务器端.
2.2.2 解决策略
将所有的路由的配置生成JS,保存到浏览器中.当用户发起某个请求时,自己映射对应的请求页面信息(组件),之后直接访问静态资源.这样的方式速度更快.
将上述的方式称之为: 前端路由/客户端路由
2.3 VUE Router入门案例
<!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>
<!-- 3.定义路由填充位 该位置用来展现具体页面(组件) -->
<router-view></router-view>
</div>
<!-- 4.2 定义组件模版 -->
<template id="userTem">
<div>
<h1>我是组件的内容!!!!!</h1>
</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"
}
//5.创建路由对象,定义路由规则
let router = new VueRouter({
//定义路由规则
routes: [{path: "/user", component: user}]
})
//6.将路由对象交给Vue对象管理
const vue = new Vue({
el: "#app",
//绑定路由
//router: router 名称一致时,可以简化
router
})
</script>
</body>
</html>
2.4 路由重定向
2.4.1 需求说明
当访问默认页面时(A页面),由于业务需要,要求用户看到其他页面(B页面) 则需要使用Vue的路由重定向机制. 自动跳转.
解决策略: redirect 关键字.
2.4.2 重定向说明
特点:
1.重定向时URL中的请求地址发生变化.
2.重定向时请求发送了多次. 多次请求/多次响应.
3. 重定向是服务器行为
4. 重定向时不能传递参数.
2.5 路由嵌套机制(children)
2.5.1 组件嵌套结构
2.5.2 children属性特点
说明: children属性可以实现路由的嵌套. 通过父子关系,.则子组件的渲染,在父组件定义的router-view标签中展现.
- 路由定义
- 组件内部结构
- 整体代码结构
<!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>
3 搭建京淘前端框架
3.1 前端启动
3.1.1 启动命令
3.1.2 前端启动
3.1.3 前端环境准备
1).检查前端路径
2).利用hbuilder 打开目录
490
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
