知识回顾"/>
VUE知识回顾
目录
一、vue生命周期
二、vue组件化
1、全局组件
2、局部组件
三、vue路由\转发\重定向
1.路由实现步骤
2.路由嵌套机制
3.转发
4.重定向
一、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.组件实体内容*/Vueponent("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="">百度</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: routerrouter})</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}]更多推荐
VUE知识回顾
发布评论