Vue实例及生命周期
1,Vue实例生命周期.
- 有时候,我们需要在实例创建过程中进行一些初始化的工作,以帮助我们完成项目中更复杂更丰富的需求,开发,针对这样的需求,Vue提供给我们一系列的钩子函数
2,Vue生命周期的阶段
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.min.js"></script>
</head>
<body> <div id="app">
{{ name }}
<button @click="myClick">点击修改数据</button>
</div>
<script>
new Vue({
el: "#app",
data: {
name: "雪人"
},
methods: {
init: function () {
console.log(this.name)
},
myClick: function () {
this.name = "雪雪";
}
},
beforeCreate() {
console.group("beforeCreate");
console.log("el", this.$el);
console.log("data", this.$data);
console.log("name", this.name);
console.log("init", this.init);
console.log("innerHTML", document.getElementById("app"))
}, </script>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.min.js"></script>
</head>
<body> <div id="app">
{{ name }}
<button @click="myClick">点击修改数据</button>
</div>
<script>
new Vue({
el: "#app",
data: {
name: "雪人"
},
methods: {
init: function () {
console.log(this.name)
},
myClick: function () {
this.name = "雪雪";
}
},
created() {
console.group("Created");
console.log("el", this.$el);
console.log("data", this.$data);
console.log("name", this.name);
console.log("init", this.init);
console.log("innerHTML", document.getElementById("app"))
},
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.min.js"></script>
</head>
<body> <div id="app">
{{ name }}
<button @click="myClick">点击修改数据</button>
</div>
<script>
new Vue({
el: "#app",
data: {
name: "雪人"
},
methods: {
init: function () {
console.log(this.name)
},
myClick: function () {
this.name = "雪雪";
}
}, beforeMount() {
console.group("beforeMount");
console.log("el", this.$el);
console.log("data", this.$data);
console.log("name", this.name);
console.log("init", this.init);
console.log("innerHTML", document.getElementById("app"))
},
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.min.js"></script>
</head>
<body> <div id="app">
{{ name }}
<button @click="myClick">点击修改数据</button>
</div>
<script>
new Vue({
el: "#app",
data: {
name: "雪人"
},
methods: {
init: function () {
console.log(this.name)
},
myClick: function () {
this.name = "雪雪";
}
}, mounted() {
console.group("mounted");
console.log("el: ", this.$el);
console.log("data: ", this.$data);
console.log("name: ", this.name);
console.log('myClick', this.myClick);
console.log("innerHTML: ", document.getElementById("app"));
}, </script>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.min.js"></script>
</head>
<body> <div id="app">
{{ name }}
<button @click="myClick">点击修改数据</button>
</div>
<script>
new Vue({
el: "#app",
data: {
name: "雪人"
},
methods: {
init: function () {
console.log(this.name)
},
myClick: function () {
this.name = "雪雪";
}
}, beforeUpdate(){
console.group("beforeUpdate");
console.log("el", this.$el);
console.log("data", this.$data);
console.log("name", this.name);
console.log("myClick", this.myClick);
console.log("innerHTML:", document.getElementById("app"));
},
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.min.js"></script>
</head>
<body> <div id="app">
{{ name }}
<button @click="myClick">点击修改数据</button>
</div>
<script>
new Vue({
el: "#app",
data: {
name: "雪人"
},
methods: {
init: function () {
console.log(this.name)
},
myClick: function () {
this.name = "雪雪";
}
}, updated(){
console.group("updated");
console.log("el", this.$el);
console.log("data", this.$data);
console.log("name", this.name);
console.log("myClick", this.myClick);
console.log("innerHTML:", document.getElementById("app"))
}, </script>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.min.js"></script>
</head>
<body> <div id="app">
<App></App>
</div>
<script>
// Vue生命周期的消亡
let Laside = {
template: `
<div>
<h1>{{ mes }}</h1>
</div>
`,
data() {
return {
mes: "Hello 雪人"
}
},
methods: {
changeData: function() {
this.mes = "帅爆太阳的男人 is here!";
}
},
// 组件的创建和销毁对性能有影响
beforeDestroy(){
console.log("beforeDestroy");
console.log("el", this.$el);
console.log("data", this.$data);
console.log("name", this.mes);
console.log("innerTEXT:", document.getElementById("app").innerText);
console.log("innerHTML:", document.getElementById("app").innerHTML);
}
};
let App = {
template: `
<div>
<laside v-if="isShow"></laside>
<button @click="showHide">创建消除组件</button>
</div>
`,
// 判断有嵌套的子组件
components: {
"Laside": Laside,
},
methods: {
showHide:function(){
this.isShow = !this.isShow;
}
},
data(){
return {
isShow: true,
}
}
};
new Vue({
el: "#app",
components:{
App,
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.min.js"></script>
</head>
<body> <div id="app"> </div>
<script> // Vue生命周期的消亡
let Laside = {
template: `
<div>
<h1>{{ mes }}</h1>
</div>
`,
data() {
return {
mes: "Hello 雪人"
}
},
methods: {
changeData: function() {
this.mes = "帅爆太阳的男人 is here!";
}
}, destroyed(){
console.log("destroyed");
console.log("el", this.$el);
console.log("data", this.$data);
console.log("name: ", this.mes);
}
};
let App = {
template: `
<div>
<laside v-if="isShow"></laside>
<button @click="showHide">创建消除组件</button>
</div>
`,
// 判断有嵌套的子组件
components: {
"Laside": Laside,
},
methods: {
showHide:function(){
this.isShow = !this.isShow;
}
},
data(){
return {
isShow: true,
}
}
};
new Vue({
el: "#app",
template: `<App></App>`,
components:{
App,
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.min.js"></script>
</head>
<body> <div id="app"> </div>
<script> // Vue生命周期的消亡
let Laside = {
template: `
<div>
<h1>{{ mes }}</h1>
</div>
`,
data() {
return {
mes: "Hello 雪人"
}
},
methods: {
changeData: function() {
this.mes = "帅爆太阳的男人 is here!";
}
}, activated(){
console.log("activated");
console.log("el", this.$el);
console.log("data", this.$data);
console.log("name", this.mes);
},
deactivated(){
console.group("deactivated");
console.log("el", this.$el);
console.log("data", this.$data);
console.log("name", this.mes);
},
};
let App = {
template: `
<div>
<laside v-if="isShow"></laside>
<button @click="showHide">创建消除组件</button>
</div>
`,
// 判断有嵌套的子组件
components: {
"Laside": Laside,
},
methods: {
showHide:function(){
this.isShow = !this.isShow;
}
},
data(){
return {
isShow: true,
}
}
};
new Vue({
el: "#app",
template: `<App></App>`,
components:{
App,
}
})
</script>
</body>
</html>
***activated和deactivated在浏览器上无明显效果,只是在虚拟的DOM树发生了变化***
2.1,VueRouter的实现原理
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>路由</title>
</head>
<body>
<div id="app"> </div>
<script>
// 先获取到div这个标签
let oDiv = document.getElementById("app"); // window窗口的onhashchange函数,内部其实就是这个原理,不加break会继续向下执行
window.onhashchange = function () {
switch (location.hash) {
case '#/login':
oDiv.innerHTML = `<h1>这是登录页面</h1>`;
break;
case '#/register':
oDiv.innerHTML = `<h1>这是注册页面</h1>`;
break;
default:
oDiv.innerHTML = `<h1>这是首页</h1>`;
break
}
}
</script>
</body>
</html>
2.2Vue路由安装的五大步骤
重中之重:先把router导进来
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>安装使用</title>
<script src="vue.min.js"></script>
<script src="vue-router.js"></script>
</head>
<body> <div id="app"> </div>
<script>
// 1,在Vue根实例中使用,VueRouter,固定写法,据说以后会用,但不知道有什么用
Vue.use(VueRouter); let Home = {
template: `
<div>
<h1>这是主页页面</h1>
</div>
`
}; let Login = {
template: `
<div>
<h1>这是登录页面</h1>
</div>
`
}; let Register = {
template: `
<div>
<h1>这是注册页面</h1>
</div>
`
}; let App = {
// 第四步, router-link会渲染成a标签, to会变成href属性, to后面是router中定义的路径
// 第五步, router-view是页面的渲染出口
template: `
<div>
<router-link to="/">首页</router-link>
<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>
<router-view></router-view>
</div>
`
}; // 第二步实例化一个router对象, 本质上是将路径和页面内容绑定了对应关系
let router = new VueRouter({
routes: [
{
path: '/',
component: Home,
},
{
path: '/login',
component: Login,
},
{
path: '/register',
component: Register,
}
]
}); new Vue({
el: "#app",
template:`<App></App>`,
// 第三步,在根实例中注册router对象
router:router,
components:{
App,
}
})
</script>
</body>
</html>
2.3路由重命名
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>命名</title>
<script src="vue.min.js"></script>
<script src="vue-router.js"></script>
</head>
<body> <div id="app"> </div>
<script>
// 1,在vue根实例中使用,VueRouter
Vue.use(VueRouter); // 这是主页面的组件
let Home = {
template: `
<div>
<h1>这是主页面</h1>
</div>
`
}; // 这是登录页面的组件
let Login = {
template: `
<div>
<h1>这是登录页面</h1>
</div>
`
}; // 这是注册页面的组件
let Register = {
template: `
<div>
<h1>这是注册页面</h1>
</div>
`
}; // 写一个组件的统一入口,
// 第四步,router-link会渲染成a标签,to会变成href属性, to后面是router中定义路径
// 第五步,router-view是页面内容的渲染出口
// 重命名类似于反向解析
let App = {
template: `
<div>
<router-link :to="{ name:'home' }">首页</router-link>
<router-link :to="{ name:'login' }">登录</router-link>
<router-link :to="{ name:'register' }">注册</router-link>
<router-view></router-view>
</div>
`
}; // 实例化一个router对象:本质是将路径和页面内容绑定了对应关系
let router = new VueRouter({
routes: [
{
name: 'home',
path: '/',
component: Home,
},
{
name: 'login',
path:'/login',
component:Login,
},
{
name: 'register',
path:'/register',
component: Register,
}
]
}); // 第三步把router注册在根实例中
new Vue({
el:"#app",
template: `<App></App>`,
router: router,
components:{
App,
}
})
</script>
</body>
</html>
2.4,VueRouter值路由参数之参数
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>路由参数</title>
<script src="vue.min.js"></script>
<script src="vue-router.js"></script>
</head>
<body> <div id="app"> </div>
<script>
// 在真实的场景中,可以有以下路形式
// user/1,
// user/userID:1
// 1,在Vue根实例中使用.VueRouter
Vue.use(VueRouter); // 这是主页面的组件
let Home = {
template: `
<div>
<h1>这是主页面</h1>
</div>
`
}; // 伪造一个用户信息的组件
let userParams = {
template: `
<div>
<h1>这是用户一的信息</h1>
</div>
`
}; //手写一个所有组件的入口,参数的重中之重,这个参数是在to的后边在写一个字典,params:{userId:1}
let App = {
// router-link会渲染成a标签,to会变成href属性,to后面中定义的路径
// router-view是页面内容的渲染出口
template:`
<div>
<router-link :to="{ name:'home' }">首页</router-link>
<router-link :to="{ name:'userParams', params:{userId:1} }">登录</router-link>
<router-link :to="{ name:'userQuery', query: { userId:2 } }">注册</router-link>
<router-view></router-view>
</div>
`
};
// 伪造一个用户二的信息的组件
let userQuery = {
template: `
<div>
<h1>这是用户二的信息</h1>
</div>
`
}; // 实例化一个router的对象
// 本质上是将路径和页面内容绑定了对应关系
let router = new VueRouter({
routes:[
{
name:'home',
path:'/',
// 把Home注册到router中
component:Home,
},
{
name:'userParams',
path:'/user/:userId',
// 把userParams注册到router中
component:userParams,
},
{
name:'userQuery',
path:'/user',
// 把userQuery注册到router中
component:userQuery,
}
]
}); // 在根实例中注册router对象
new Vue({
el: "#app",
template: `<App></App>`,
router: router,
components:{
App,
}
})
</script>
</body>
</html>
2.5,VueRouter路由之子路由
用重名就可以进行子路由的切换
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>写死路径的很不怎么样的子路由</title>
<script src="vue.min.js"></script>
<script src="vue-router.js"></script>
</head>
<body> <div id="app"> </div>
<script>
//手写一个不怎么样的主页面的组件
let Home = {
template:`
<div>
<h1>这是主页面</h1>
</div>
`
}; //手写一个不怎么样的课程页面
let Courses = {
template:`
<div>
<h1>这是课程页面</h1>
<router-link :to="{ name:'lightcourses' }">轻课</router-link>
<router-link :to="{ name:'degreecourses' }">学位课</router-link>
<router-view></router-view>
</div>
`
};
// 这回要不把这两个先注册到App中吧
let App = {
template:`
<div>
<router-link :to="{ name:'home' }">首页</router-link>
<router-link :to="{ name:'courses' }">课程页面</router-link>
<router-view></router-view>
</div>
`
};
//写一个课程里边的轻课的子路由
let LightCourses = {
template:`
<div>
<h1>这是轻课的页面</h1>
</div>
`
};
//写一个学位课的页面
let DegreeCourses = {
template:`
<div>
<h1>这是学位课的页面</h1>
</div>
`
};
//把这俩货写到courses中 //实例化一个VueRouter的对象
let router = new VueRouter({
routes:[
{
name: 'home',
path: '/',
component:Home
},
{
name:'courses',
path: '/courses',
component:Courses,
//把课程的子路由注册进来,要不然不能点
children:[
{
name:'lightcourses',
path: '/lightcourses',
component:LightCourses,
},
{
name:'degreecourses',
path:'/degreecourses',
component:DegreeCourses
}
]
}
]
}); //实力一个Vue对象
new Vue({
el:"#app",
router:router,
components:{
App
},
template: `<App></App>`
})
</script>
</body>
</html>
2.6,VueRouter子路由的钩子函数
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>钩子函数</title>
<script src="vue.min.js"></script>
<script src="vue-router.js"></script>
</head>
<body> <div id="app"> </div>
<script>
// 1,使用VueRouter使用路由
Vue.use(VueRouter); let Home = {
template:`
<div>
<h1>这是首页页面</h1>
</div>
`
};
//手写一个login页面的组件
let Login = {
template: `
<div>
<h1>这是登录页面</h1>
</div>
`
};
//支付的组件
let Pay = {
template:`
<div>
<h1>这是支付页面</h1>
</div>
`
}; // 把这些组件注册到App中
let App = {
// router-link会渲染成a标签, to会渲染成href
// router-view是内容的渲染出口
template:`
<div>
<router-link :to="{ name:'home' }">首页</router-link>
<router-link :to="{ name:'login' }">登录</router-link>
<router-link :to="{ name:'pay' }">支付</router-link>
<router-view></router-view>
</div>
`
}; // 实例化一个router对象
// 把a按标签的锚点值和页面内容绑定了对应关系
let router = new VueRouter({
routes:[
{
name:'home',
path:'/',
component:Home
},
{
name:'login',
path:'/login',
component:Login,
},
{
name:'pay',
path:'/pay',
component:Pay,
}
]
});
// 通过router对象的beforeEach(function(to, from, next))
router.beforeEach(function(to, from, next){
console.log("to", to);
console.log("from", from);
console.log("next", next);
if (to.meta.require_login){
next('/login');
}else {
next();
}
});
new Vue({
el:"#app",
template:'<App></App>',
components:{
App
},
// 在根实例中注册router对象
router:router
})
</script>
</body>
</html>
Vue实例及生命周期的更多相关文章
- Vue.js-07：第七章 - Vue 实例的生命周期
一.前言 在之前的 Vue 学习中,我们在使用 Vue 时,都会创建一个 Vue 的实例,而每个 Vue 实例在被创建时都要经过一系列的初始化过程.例如,需要设置数据监听.编译模板.将实例挂载到 D ...
- vue实例的生命周期
Vue实例的生命周期也就是这个实例从出生到死亡的过程,所以我在文档原图上把这个周期大致分为创建过程 | 运行过程 | 销毁过程三个阶段,不同结果或又分为一些小的阶段 在第一个阶段,创建阶段,会完成Vu ...
- 浅析vue实例的生命周期（生命周期钩子）
“每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等” ,在不同的生命周期内会经历不同的钩子函数(生命周期 ...
- 从零开始学 Web 之 Vue.js（三）Vue实例的生命周期
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- python 全栈开发，Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)
昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...
- 关于Vue实例的生命周期（2）
关于Vue实例的生命周期(2) 创建(create)->挂载(mount)->更新(update)->销毁(destory) 钩子函数触发事件 beforeCreate 在实例初始 ...
- 7.Vue实例的生命周期
1.Vue实例的生命周期: 什么是生命周期:从Vue实例创建.运行.到销毁期间,总是伴随着各种各样的事件,这些事件,统称为生命周期! 生命周期钩子 = 生命周期函数 = 生命周期事件 2. 主要的生命 ...
- 黑马vue---37-38、vue实例的生命周期
黑马vue---37-38.vue实例的生命周期 一.总结 一句话总结: created:实例已经在内存中创建OK,此时 data 和 methods 已经创建OK,此时还没有开始 编译模板 moun ...
- Vue01 Vue介绍、Vue使用、Vue实例的创建、数据绑定、Vue实例的生命周期、差值与表达式、指令与事件、语法糖
1 Vue介绍 1.1 官方介绍 vue是一个简单小巧的渐进式的技术栈,它提供了Web开发中常用的高级功能:视图和数据的解耦.组件的服用.路由.状态管理.虚拟DOM 说明:简单小巧 -> 压缩后 ...
- Vue 实例以及生命周期
最简单的 Vue 实例 //html <div id="app"> {{message}} </div> //javascript var vm = new ...
随机推荐
- 如何用纯 CSS 创作一个 3D 文字跑马灯特效
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/GdrrZq 可交互视频教程 此视 ...
- 条款17：以独立语句将newed对象置入智能指针（Store newed objects in smart pointers in standalone statements）
NOTE: 1.以独立语句将newed对象存储于智能指针内.如果不这样做,一旦异常被抛出,有可能导致难以察觉的资源泄漏.
- vue 单独页面定时器 离开页面销毁定时器
data: { return { timer: null } }, created() { this.timer = setInterval(....); }, beforeDestroy() { i ...
- solr中的Tokenizer Filter
Tokenizer Tokenizer 的工作是将文本流分解为令牌,其中每个令牌(通常)是文本中字符的子序列.分析器知道它配置的字段,但 tokenizer 不是.Tokenizers 从字符流(Re ...
- Huffman codes
05-树9 Huffman Codes(30 分) In 1953, David A. Huffman published his paper "A Method for the Const ...
- struts2访问或添加几个属性（request/session/application属性）
https://blog.csdn.net/hebiao100/article/details/7385055 struts2添加request.session.application属性 第一种方法 ...
- python015 Python3 函数
Python3 函数函数是组织好的,可重复使用的,用来实现单一,或相关联功能的代码段.函数能提高应用的模块性,和代码的重复利用率.你已经知道Python提供了许多内建函数,比如print().但你也可 ...
- 66. No EntityManager with actual transaction available for current thread【从零开始学】
[从零开始学习Spirng Boot-常见异常汇总] 具体异常信息: org.springframework.dao.InvalidDataAccessApiUsageException: No En ...
- hdu4514(非连通图的环判断与图中最长链)（树的直径）
湫湫系列故事——设计风景线 随着杭州西湖的知名度的进一步提升,园林规划专家湫湫希望设计出一条新的经典观光线路,根据老板马小腾的指示,新的风景线最好能建成环形,如果没有条件建成环形,那就建的越长越好. ...
- 最长递增子序列 (LIS) Longest Increasing Subsequence
问题描述: 有一个长为n的数列a0, a1,..., an-1.请求出这个序列中最长的上升子序列.请求出这个序列中最长的上升子序列. 上升子序列:对于任意i<j都满足ai<aj的子序列. ...