0.
this.$data.msg = this.msg
this.$nextTick(()=>{this.方法名();})
this.$store.commit('chat/Notification_Clear_All', null, {root: true} )
watch
1.
created 逻辑和视图没没绑定thie.$el为空(可以掉接口，beforeCreated调报错this.data和this.$el为初始化this没有指向)
beforeMount 逻辑和视图绑定了，但是虚拟dom,this.$el挂载的data是
mount 逻辑和视图绑定了，this.$el挂载的data是
data () {
return: {
message: '我是信息'
}
}
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js">script>
head>
<body>
<div id="app">
<p>{{message}}p>
<keep-alive>
<my-components msg="hello" v-if="show">my-components>
keep-alive>
div>
body>
<script>
var child = {
template: 'from child: {{msg}}',
props: ['msg'],
data: function () {
return {
childMsg: 'child1'
};
},
deactivated: function () {
console.log('component deactivated!');
},
activated: function () {
console.log('component activated');
}
};
var app = new Vue({
el: '#app',
data: function () {
return {
message: 'father',
show: true
};
},
beforeCreate: function () {
console.group('beforeCreate 创建前状态===============》');
var state = {
'el': this.$el,
'data': this.$data,
'message': this.message
}
console.log(state);
},
created: function () {
console.group('created 创建完毕状态===============》');
var state = {
'el': this.$el,
'data': this.$data,
'message': this.message
}
console.log(state);
},
beforeMount: function () {
console.group('beforeMount 挂载前状态===============》');
var state = {
'el': this.$el,
'data': this.$data,
'message': this.message
}
console.log(this.$el);
console.log(state);
},
mounted: function () {
console.group('mounted 挂载结束状态===============》');
var state = {
'el': this.$el,
'data': this.$data,
'message': this.message
}
console.log(this.$el);
console.log(state);
// this.message = 'change';
},
beforeUpdate: function () {
console.group('beforeUpdate 更新前状态===============》');
var state = {
'el': this.$el,
'data': this.$data,
'message': this.message
}
console.log(this.$el);
console.log(state);
// this.message = 'change2';
},
updated: function () {
console.group('updated 更新完成状态===============》');
var state = {
'el': this.$el,
'data': this.$data,
'message': this.message
}
console.log(this.$el);
console.log(state);
},
beforeDestroy: function () {
console.group('beforeDestroy 销毁前状态===============》');
var state = {
'el': this.$el,
'data': this.$data,
'message': this.message
}
console.log(this.$el);
console.log(state);
},
destroyed: function () {
console.group('destroyed 销毁完成状态===============》');
var state = {
'el': this.$el,
'data': this.$data,
'message': this.message
}
console.log(this.$el);
console.log(state);
},
components: {
'my-components': child
}
});
script>
html>
如何简短精干的描述vue生命周期
https://www.jianshu.com/p/a165474f620e
+ hast
- window.onhashchange
- #结尾
- http://localhost:8080/pages/shop/messages/messagesDetailo#/pages/shortVideo/person-info/person-info?personId=244573
+ history
- 修改页面路径，直接请求后端，没有会404
- pushState()、replaceState()
- http://localhost:8080/pages/shop/messages/messagesDetail
https://www.jb51.cc/vue/31476.html
https://www.cnblogs.com/calvin-dong/p/11222150.html
http://shanhuxueyuan.com/news/detail/137.html
3.0(vue3.0脚手架需要node版本10以上)
如果有2的先卸载，在换3的脚手架
https://www.cnblogs.com/yf-html/p/12753540.html
npm uninstall vue-cli -g，全局卸载
安装vue3.0的脚手架： npm install -g @vue/cli
npm install -g @vue/cli
vue create hello-world(选择插件用空格键)
cd hellow-world
vue add vue-next(升级vue3.0)
npm run serve/yarm serve
1. vue-router路由
npm i vue-router
main.js
Vuex （mapState,mapMutations）
npm i vuex --save
(1)state
main.js
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) // 变量 const state = { count: 1 } export default new Vuex.Store({ state })
组件
方法一：
<template> <div class="threePage"> <p>{{$store.state.count}} - {{count}}p> div> template> <script> export default { name: 'threePage', data () { return { } } } script>
方法二：
<template> <div class="threePage"> <p>{{count}}p> div> template> <script> export default { name: 'threePage', data () { return { } }, computed: { count () { return this.$store.state.count } } } script>
方法三：
<template> <div class="threePage"> <p>{{count}}p> div> template> <script> import {mapState} from 'vuex' export default { name: 'threePage', data () { return { } }, computed:mapState({ count: this.$state.state }) } script>
方法四：
<template> <div class="threePage"> <p>{{count}}p> div> template> <script> import {mapState} from 'vuex' export default { name: 'threePage', data () { return { } }, computed:mapState(['count']) } script> <style scoped> style>
(2) mutations修改状态
store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// 变量
const state = {
count: 1
}
// 修改变量
const mutations = {
add(state,n) {
state.count+=n
},
reduce(state) {
state.count--
}
}
export default new Vuex.Store({
state,
mutations
})
组件
<template> <div class="twoPage"> <p>{{redddd}}p> <button @click='$store.commit("add",10)'> + button> <button @click='$store.commit("reduce")'> - button> div> template> <script> export default { name: 'twoPage', data () { return { redddd: 'index2' } }, } script> <style scoped> style>
模版 （简化）
(3)getters (相当于computed)
console.log() => window.console.log()
使用vue3.0和element实现后台管理模板
yarm add vue（类npm i vue）
https://www.jianshu.com/p/ca50f0651fe0
vue响应式：https://mp.weixin.qq.com/s?__biz=MzI4OTY2MzE0OA==&mid=2247486683&idx=1&sn=2171032be7b0ad58e957bdf22aaf70b9&chksm=ec2afd18db5d740e4fab45f2af60a88d61a03e614f35066a28d5a85cf73d7ecf61a1c38318df&mpshare=1&scene=1&srcid=&sharer_sharetime=1593480923272&sharer_shareid=7c051bef8d1eeee00a3c6ff9c1514600&key=7fa4c9207b4feb1fd45e105b2e33a6a8f8dd9029a5453f8f6b53455d9bb4d4f39e5dfd1f8e521ebf42a84deaf6e45b43ce967ede6f34e6994054ef29bb0afffb3937464f7d3d739377f37b9272f4381d&ascene=1&uin=MzExOTA2NzkyNg%3D%3D&devicetype=Windows+10+x64&version=62090523&lang=zh_CN&exportkey=AwF%2BpcLZXB4JqRBh4wUHPCg%3D&pass_ticket=eu4%2B9AfWrv6A1J6FRRkkaRm3YWQy5kJFhT4YFzpN9NsMmLd86tDzyMrOQzooM2B1