目录
一、vue生命周期
VUE中有一整套完整的VUE对象创建/使用/销毁的流程. 如果需要在某个特定的点 有特殊的需求,可以对VUE对象进行扩展!
1. 生命周期函数的方法名称 必须固定.
2. 生命周期函数是VUE对象特有的函数.应该放到根目录下.
3. 当页面渲染成功之后, 一共执行了4个生命周期方法.
3.1VUE对象的创建:
beforeCreate: //对象创建前调用
created: //VUE对象已经创建完成之后调用 3.2 VUE对象的挂载(渲染):
beforeMount: //el : "#app",VUE对象在找到@APP标签之前先执行该函数.
mounted: //当挂载完成(渲染完成),用户可以看到页面数据之后调用该函数4. 用户修改阶段: VUE对象的修改。
beforeUpdate: //当用户修改数据 点击"回车" 之后调用该函数
//过渡: 数据已经被修改
updated: //数据已经被修改之后调用该函数5. 销毁阶段:销毁函数,VUE对象默认不会调用. 可以通过函数由用户调用
beforeDestroy: //在销毁方法执行前
destroyed: //标志着VUE对象已经销毁.methods:{
destroy(){
this.$destroy()
}
vue生命周期视图：
二、vue组件化
在VUE中 可以将一个组件,看作是一个页面. 在其中可以引入独立的样式/JS/HTML 进行单独的管理.
template属性：
1.template标签是组件中定义html标记的模板.
2.template标签必须有根标签div
3.template标签最好定义在body标签内部,写法方便.
使用注意事项：
1. 组件的使用必须在VUE对象渲染的区域中使用.
2. 组件有全局的/有局部的.注意作用域.
3. 在html标签中使用组件时,注意大小写问题.如果是驼峰规则,则使用 "-"连接.
4. 组件必须先定义再使用.
1、全局组件
步骤：
1 导入JS
2 渲染区域
3 摸版标签
4 组件定义
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>全局组件定义</title>
</head>
<body>
<div id="app">
<!-- 如果需要使用组件,则在vue渲染区中中使用 -->
<!-- 规则:
1.在vue中使用标签时默认都是小写字母.如果需要
引入驼峰规则.则使用-线代替.
2.使用组件通过标签引用
-->
<add-num-com></add-num-com>
<add-num-com></add-num-com>
<add-num-com></add-num-com>
</div>
<!-- 定义模板标签语法 必须有根标签-->
<template id="numTem">
<div>
<h1>我是一个组件</h1>
获取数值: {{num}}
</div>
</template>
<!-- 1.导入JS -->
<script src="../js/vue.js"></script>
<!-- 2.定义全局组件 -->
<script>
/*
组件的定义
参数:
1.组件名称
2.组件实体内容
*/
Vue.component("addNumCom",{
//属性
data(){
return {
//自定义属性
num: 100
}
},
//页面标记
template: "#numTem"
})
/* 2.实例化vue对象 找到区域交给vue渲染 */
const app = new Vue({
el: "#app"
})
</script>
</body>
</html>
2、局部组件
局部组件只对当前vue对象有效
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>局部组件定义</title>
</head>
<body>
<div id="app">
<msg-com></msg-com>
<msg-com></msg-com>
</div>
<!-- 定义app2 局部组件只能在特定位置使用,
所以该位置 不能解析-->
<div id="app2">
<msg-com></msg-com>
<msg-com></msg-com>
</div>
<!-- 模板标签必须定义在vue渲染div外边 -->
<template id="msgTem">
<div>
<h3>我是一个局部组件</h3>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
let msgCom = {
template: "#msgTem"
}
//定义局部组件 只对当前vue对象有效
const app = new Vue({
el: "#app",
components: {
//key: value
//msgCom: msgCom,
//如果在JS中key-value一样的.可以只写一个
msgCom
}
})
const app2 = new Vue({
el: "#app2",
})
</script>
</body>
</html>
三、vue路由\转发\重定向
用户发起一个请求,在互联网中经过多个站点的跳转.最终获取服务器端的数据. 把互联网中网络的链路称之为路由.
1.路由实现步骤
1 引入JS （路由需要依赖vue 注意顺序）
2 定义路由标签
3 指定路由填充位(占位符)
4 定义template标签
5 封装路由对象
6 实现路由绑定
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>路由入门案例</title>
</head>
<body>
<div id="app">
<h1>实现路由案例</h1>
<!-- 2.定义路由标签
1.a标签说明
标签说明: a标签 超链接标签
href属性: 请求跳转的地址
<a href="http://www.baidu.com">百度</a>
2.路由标签说明
router-link 解析为a标签
to 解析之后变成 href属性
-->
<router-link to="/home">主页</router-link>
<!-- 3.指定路由填充位(占位符)
需要给组件一个展现的位置,需要提前定义.
-->
<router-view></router-view>
</div>
<!-- 定义template标签 -->
<template id="homeTem">
<div>
<h1>这里是系统首页</h1>
</div>
</template>
<!-- 1.引入JS 路由需要依赖vue 注意顺序-->
<script src="../js/vue.js"></script>
<script src="../js/vue-router.js"></script>
<script>
<!-- 4.封装路由对象 -->
let HomeCom = {
template: "#homeTem"
}
let router = new VueRouter({
//routes 定义请求与组件的映射关系
routes: [
{path: "/home", component: HomeCom}
]
})
/* 5.实现路由对象绑定 */
const app = new Vue({
el: "#app",
//router: router
router
})
</script>
</body>
</html>
2.路由嵌套机制
1.如果需要在App根标签中跳转,则写到routes根目录下
2.如果需要进行父子嵌套,则应该使用children属性
3.如果使用children属性,则在自身的router-view展现数据
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>路由的嵌套</title>
</head>
<body>
<div id="app">
<h1>江哥动物园</h1>
<router-link to="/tiger">老虎</router-link>
<router-link to="/lion">狮子</router-link>
<router-view></router-view>
</div>
<template id="tigerTem">
<div>
<h1>我是一只凶猛的喵</h1>
<img src="images/1.jpeg"/>
</div>
</template>
<template id="lionTem">
<div>
<h1>我是狮子王 辛巴!!!!</h1>
<img src="./images/2.png"/>
<h3>
<!-- 实现路由的嵌套机制 -->
<router-link to="/lion/one">原配</router-link>
<router-link to="/lion/two">小妾</router-link>
<!-- 子级应该在该区域展现数据!!!! -->
<router-view></router-view>
</h3>
</div>
</template>
<template id="oneTem">
<div>
<h1>我是原配-老大</h1>
<img src="images/3.png"/>
</div>
</template>
<template id="twoTem">
<div>
<h1>我是小妾-更喜欢我!!!</h1>
<img src="images/4.png"/>
</div>
</template>
<!-- 1.引入JS 路由需要依赖vue 注意顺序-->
<script src="../js/vue.js"></script>
<script src="../js/vue-router.js"></script>
<script>
let tigerCom = {template: "#tigerTem"}
let lionCom = {template: "#lionTem"}
let oneCom = {template: "#oneTem"}
let twoCom = {template: "#twoTem"}
/* 1.如果需要在App根标签中跳转,则写到routes根目录下
2.如果需要进行父子嵌套,则应该使用children属性
3.如果使用children属性,则在自身的router-view展现数据*/
let router = new VueRouter({
routes: [
{path: "/tiger",component: tigerCom},
{path: "/lion",component: lionCom,
children: [
{path: "/lion/one",component: oneCom},
{path: "/lion/two",component: twoCom},
],
}]
})
const app = new Vue({
el: "#app",
router
})
</script>
</body>
</html>
3.转发
用户请求服务器时,由服务器将请求转给另一台服务器的过程.叫做转发。
特点：
1.请求一次，同一个对象
2.转发时，可以携带参数
3.转发时，浏览器地址不变
4.转发是服务器行为
4.重定向
用户请求服务器时,服务器由于特殊原因告知用户应该访问服务器B,之后用户再次发起请求访问服务器B. 这个过程称之为重定向。
特点：
1.请求多次，对象多个
2.由于是多个请求，所以不可以携带参数
3.浏览器地址会发生变化
4.重定向也是服务器行为
vue中使用redirect实现重定向效果：
let router = new VueRouter({routes: [
{path:"/",redirect: "/tiger"},
{path: "/tiger",component: tigerCom}]
361
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
