Vue的整个生命周期主要有下图的八个红色框的部分
vue的生命周期可以分为三个阶段
1.创建阶段 beforecreate() created() beforeMount() mounted()
2.运行阶段 beforeUpdate() updated()
3.销毁阶段 beforeDestory() destory()
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>vue生命周期函数</title>
</head>
<body>
<div id="app">
<span id="sp"> {{ msg }} </span>
<input type="button" value="改变data的值" @click="changeData">
</div>
<!-- 引入Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
msg: "hello Vue.js!",
},
methods: {
changeData() {
// this.msg = "Vue.js niubility!";
this.msg = Math.random();
}
},
// ====================初始化阶段====================
// 1.生命周期中第一个函数,该函数在执行时Vue实例仅仅完成了自身事件的绑定
//和生命周期函数的初始化工作,Vue实例中还没有 Data el methods相关属性
beforeCreate() {
console.log("beforeCreate: " + this.msg);
},
// 2.生命周期中第二个函数,该函数在执行时Vue实例已经初始化了data属性和methods中相关方法
created() {
console.log("created:" + this.msg);
},
// 3.生命周期中第三个函数,该函数在执行时Vue将El中指定作用范围作为模板编译
beforeMount() {
console.log("beforeMount: " + document.getElementById("sp").innerText);
},
// 4.生命周期中第四个函数,该函数在执行过程中,已经将数据渲染到界面中并且已经更新页面
mounted() {
console.log("Mounted: " + document.getElementById("sp").innerText);
},
// ====================运行阶段====================
// 5.生命周期中第五个函数,该函数是data中数据发生变化时执行 这个事件执行时仅仅
//是Vue实例中data数据变化页面显示的依然是原始数据
beforeUpdate() {
console.log("beforeUpdate-vue: " + this.msg);
console.log("beforeUpdate-dom: " + document.getElementById("sp").innerText);
},
// 6.生命周期中第六个函数,该函数执行时data中数据发生变化,页面中数据也发生了变化
// 页面中数据已经和data中数据一致
updated() {
console.log("updated-vue: " + this.msg);
console.log("updated-dom: " + document.getElementById("sp").innerText);
},
// ====================销毁阶段====================
// 7.生命周期第七个函数,该函数执行时,Vue中所有数据 methods componet 都没销毁
beforeDestory() { },
// 8.生命周期的第八个函数,该函数执行时,Vue实例彻底销毁
destoryed() { }
});
</script>
</body>
</html>
组件
组件的作用
减少vue实例对象中的代码量,可以根据不同功能来划分不同的组件,然后通过不同组件来完成页面的布局。便于开发管理和日常维护。
组件的使用
<body>
<div id="app">
<zzz></zzz>
</div>
<script>
//全局组件:可以在任意的vue实例范围内使用
//组件的创建,参数1:组件的名称;
//参数2:组件的配置对象 template: 用来书写组件的html代码(必须只存在一个容器)
Vue.component('zzz', {
template: '<div> <p> 这是一个组件 </p> </div>'
})
var app = new Vue({
el: "#app",
data: {
},
methods: {
}
})
</script>
</body>
局部组件
<body>
<div id="app">
<zzz></zzz>
</div>
<template id="zj">
<h1>这是组件</h1>
</template>
<script>
//局部组件
let zzz = {
template: '#zj'
}
var app = new Vue({
el: "#app",
data: {},
methods: {},
components: {
zzz: zzz
}
})
</script>
</body>
props
作用:用来给组件传递静态或动态数据的。
- 接收静态数据可以直接在组件中添加属性,然后在props中定义就可以使用
- 接收动态数据则可以使用v-bind(简写:)来和data中的数据进行绑定达到接收动态数据的效果
- 定义自己的数据:可以在组件内部使用类似
data(){ return { myname: '李5', myage: this.age } }
来定义组件自己的数据
<body>
<div id="app">
<local></local>
<local-data name="张三" age="23"></local-data>
<local-vue-data :name="username" :age="age"></local-vue-data>
<mydata :name="username" :age="age"></mydata>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const local = {
template: '<div><h1>局部组件</h1></div>'
};
const localData = {
template:'<div><h1>局部组件传值:姓名{{name}} 年龄:{{age}}</h1></div>',
props:['name','age']
}
const localVueData = {
template:'<div><h1>局部组件传递vue对象中的值:姓名{{name}} 年龄:{{age}}</h1></div>',
props:['name','age']
}
const mydata = {
template:'<div><h1>局部组件传递vue对象中的值:姓名{{myname}} 年龄:{{myage}}</h1></div>',
//定义自己的数据
data(){
return {
myname: '李5',
myage: this.age
}
},
props:['name','age']
}
var app = new Vue({
el: "#app",
data: {
username:"李四",
age:"24"
},
methods: {
},
components:{
local,
localData,
localVueData,
mydata
}
})
</script></body>
局部组件的事件
- 直接调用组件内的事件(将事件定义在methods中,正常调用)
- 调用vue中的事件(将事件定义在methods中,利用
this.$emit('vuemethods')
来调用vue中的事件)
1.组件内正常调用方法
2.在组件内定义方法
3.方法体内使用this.$emit('vuemethods')
绑定vue中的事件
4.在使用组件的地方将要绑定事件传入@vuemethods='changec'
vuemethods和this.$emit('vuemethods')
括号内的值一致,changec则是vue对象中定义的事件
5.在vue对象中定义相应事件
<body>
<div id="app">
<method @vuemethods='changec'></method>
</div>
<template id="method">
<div>
<button @click= "mychange">组件内的事件</button>
<button @click= "vuemethod" >触发vue中的事件</button>
</div>
</template>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const method = {
template:"#method",
methods:{
mychange(){
alert('组件内自己的事件')
},
vuemethod(){
this.$emit('vuemethods')
}
}
}
var app = new Vue({
el: "#app",
data: {
},
methods: {
changec() {
alert("vue对象中的事件")
}
},
components:{
method
}
})
</script>
</body>
路由
定义:根据请求的路径来按照一定的路由来进行转发,实现请求的统一管理
路由的使用
- 引入路由
```html
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/vue-router@2.0.0/dist/vue-router.js"></script>
```
- 创建组件对象
```html
const login = {
template: '<h1> 登陆 </h1>'
};
const reg = {
template: '<h1> 注册 </h1>'
};
```
- 创建路由对象规则
```html
//创建路由
const routes = [{
path: '/login',
component: login
}, {
path: '/reg',
component: reg
}];
const router = new VueRouter({
routes: routes,
});
```
- 将路由注册到vue实例中
```html
var app = new Vue({
el: "#app",
data: {},
methods: {},
//注册路由
router: router
})
```
- 将路由显示到页面中
```html
<div id="app">
<!-- 根据连接来切换路由 -->
<a href="#/login">登陆</a>
<a href="#/reg">注册</a>
<router-view></router-view>
</div>
```
- 根据连接切换路由
```html
<div id="app">
<!-- 根据连接来切换路由 -->
<a href="#/login">登陆</a>
<a href="#/reg">注册</a>
<router-view></router-view>
</div>
```
- 默认路由
//定义路由实例
const router =new VueRouter({
routes:[
//默认路由
//1.直接绑定(比较少用)
// {path:"/",component:login},
//2.重定向(常见)
{path:'/',redirect:'login'},
{path:'/login',component:login},
{path:'/register',component:register}
]
})
路由的参数传递
<body>
<div id= "app">
<!-- 1.利用a标签切换路由 -->
<a href="#/login">登录</a>
<a href="#/register">注册</a>
<!-- 2.利用router-link切换路由 tag 可以指定标签类型 -->
<router-link to="/login?name=zhangsan&age=23" tag="button">登录</router-link>
<router-link to="/register/张三/23" tag="button">注册</router-link>
<router-view></router-view>
</div>
<template id = 'login'>
<div>
<h1>用户登录{{this.$route.query.name}}</h1>
</div>
</template>
<template id = 'register'>
<div>
<h1>用户注册</h1>
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="./js/vue-router.js"></script>
<script>
//登录组件
const login = {
template:"#login",
//获取路由传递的参数(?拼接的参数)
created(){
console.log('========================>'+this.$route.query.name)
}
}
//注册组件
const register = {
template:"#register",
//路由传递参数(restful风格)
created(){
console.log('========================>'+this.$route.params.name)
}
}
//定义路由实例
const router =new VueRouter({
routes:[
//默认路由
//1.直接绑定(比较少用)
// {path:"/",component:login},
//2.重定向(常见)
{
path:'/',
redirect:'login'
},
{
path:'/login',
component:login
},
{
//路由传递参数(restful风格)
path:'/register/:name/:age',
component:register
}
]
})
const app = new Vue({
el:'#app',
data:{
},
methods:{
},
router:router
})
</script>
</body>
嵌套路由
<body>
<div id= "app">
<router-view></router-view>
</div>
<template id= 'first'>
<div>
<h1>首页</h1>
<router-link to='/login' tag='button'>登录</router-link>
<router-link to='/register' tag='button'>注册</router-link>
<router-view></router-view>
</div>
</template>
<template id = 'login'>
<div>
<h2>用户登录</h1>
</div>
</template>
<template id = 'register'>
<div>
<h2>用户注册</h1>
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="./js/vue-router.js"></script>
<script>
const first = {
template:'#first'
}
//登录组件
const login = {
template:"#login"
}
//注册组件
const register = {
template:"#register"
}
//定义路由实例
const router =new VueRouter({
routes:[
{path:'/',redirect:'first'},
{
path:'/first',
component: first,
children:[
{path:'/login',component:login},
{path:'/register',component:register}
]
}
]
})
const app = new Vue({
el:'#app',
data:{
},
methods:{
},
router:router
})
</script>
</body>