1.实例生命周期
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/403da1fbca0473f6dcdd9dd8c4ee5504.png#pic_center)
<button @click="update">update</button>
<h3 id="h3">{{ message }}</h3>
-----
data: {
message: '床前明月光'
},
methods: {
show() {
console.log('执行show方法')
},
update() {
this.message = '玻璃好上霜'
}
},
beforeCreate() {
console.log(this.message)
this.show()
},
created() {
console.log(this.message)
this.show()
},
beforeMount() {
console.log(document.getElementById('h3').innerText)
},
mounted() {
console.log(document.getElementById('h3').innerText)
},
beforeUpdate() {
console.log('界面显示的内容:' + document.getElementById('h3').innerText)
console.log('data 中的 message 数据是:' + this.message)
},
updated() {
console.log('界面显示的内容:' + document.getElementById('h3').innerText)
console.log('data 中的 message 数据是:' + this.message)
}
2.路由
******
<script src="vue.min.js"></script>
<script src="vue-router.min.js"></script>
<div id="app">
<h1>Hello App!</h1>
<p>
<router-link to="/">首页</router-link>
<router-link to="/student">会员管理</router-link>
<router-link to="/teacher">讲师管理</router-link>
</p>
<router-view></router-view>
</div>
<script>
const Welcome = { template: '<div>欢迎</div>' }
const Student = { template: '<div>student list</div>' }
const Teacher = { template: '<div>teacher list</div>' }
const routes = [
{ path: '/', redirect: '/welcome' },
{ path: '/welcome', component: Welcome },
{ path: '/student', component: Student },
{ path: '/teacher', component: Teacher }
]
const router = new VueRouter({
routes
})
const app = new Vue({
el: '#app',
router
})
</script>