Vue知识点 -- Vue生命周期
vue是渐进式的JavaScript框架
vue是遵循渐进式JavaScript框架
vue create 名字 起服务："npm run serve" or "yarn serve"
①：
vue的思想是响应式的，也就是基于是数据可变的，当属性变化的时候，响应式的更新对应的虚拟dom。
②：route和router的区别
1：route是“路由信息对象”，
包括path，params，hash，query，fullPath，matched，name等路由信息参数。
2：router是“路由实例”对象包括了路由的跳转方法，钩子函数等
③：vue中的修饰符
stop：组织事件冒泡
prevent：组织事件的默认行为
once：只能触发一次
self：触发自己的事件后，才会执行
④：vue扩展插件
vue-cli:Vue脚手架
vue-resource(axios):ajax请求
vue-router:路由
vuex:状态管理
vue-lazyload:图片懒加载
vue-scroller:页面滑动相关
mint-ui:基于Vue的UI组件库（移动端）
element-ui:基于Vue的UI组件库（PC端）
Vue生命周期：
vue生命周期：
①：创建期间生命周期方法
beforeCreate；
created；
beforeMount；
mounted；
②：运行期间生命周期方法
beforeUpdate；
updated；
③：销毁期间的生命周期方法
beforeDestroy；
destroyed；
eg：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue生命周期方法</title>
<!--引入vue框架-->
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{msg}}</p>
</div>
<script>
let vm = new Vue({
el:'#app',
data:{
msg:"hello World"
},
methods:{
say:function () {
console.log("hello World");
}
},
beforeCreate:function () {
/*执行beforeCreate的时候,表示Vue刚刚出生,还没有任何内容,data/methods都没有初始化*/
//console.log(this.msg);
//this.say();
//console.log(this.say);
},
created:function () {
/*执行created的时候,表示Vue实例已经初始化好了部分内容,data/methods
* 想在Vue实例中最早访问到data/methods,只有在这个方法才能访问
*/
//console.log(this.msg);
//this.say();
// console.log(this.say);
},
beforeMount:function () {
/*执行beforeMount,表示已经根据数据编译好了模板,但是还没有渲染到界面上*/
// console.log(document.querySelector("p").innerText);
// console.log(document.querySelector("p").innerHTML);
},
mounted:function () {
/*执行mounted,表示已经根据数据编译好了模板,已经将模板有渲染到界面上,此时可以对界面进行其他操作了*/
console.log(document.querySelector("p").innerText);
console.log(document.querySelector("p").innerHTML);
},
beforeUpdate:function(){
/*主要data中的数据发生了变化就会执行
* 执行beforeUpdate时候,data的数据已经是最新的了,但是没有更新界面上的数据
*
* */
// console.log(this.msg);
// console.log(document.querySelector("p").innerText);
// console.log(document.querySelector("p").innerHTML);
},
updated:function () {
/*主要data中的数据发生了变化就会执行
* 执行updated时候,data的数据已经是最新的了,界面上的数据也已经更新
*
* */
console.log(this.msg);
console.log(document.querySelector("p").innerText);
console.log(document.querySelector("p").innerHTML);
},
beforeDestroy:function(){
/*执行beforeDestroy的时候,表示Vue实例即将销毁,但是还未销毁,实例中的数据等都可以使用
* 最后能使用Vue实例的地址
* */
},
destroyed:function () {
/*
* 执行destroyed的时候,表示vue实例完全销毁,实例中的任何内容都不能被使用了
* */
}
})
</script>