一、生命周期钩子
用处：在组件从创建到销毁过程中的某个时间节点，想要完成的某个事，如，在组件创建完成后，想要干嘛干嘛，在被销毁后想要做某些事。
再比如created钩子： 组件创建后，渲染前，可以请求后台，拿到最新的数据更新完成后，再渲染到页面，这样页面上就是数据库中最新的数据了
而mounted：页面被渲染后，的钩子
访问methods要通过$options
console.log(this.$options.methods)
生命周期钩子案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue组件的生命周期钩子</title>
</head>
<body>
<div id="app">
<div>
<h1>什么是生命周期钩子</h1>
<h1>一个Vue子组件从创建到销毁整个生命周期过程中一些时间节点回调的方法</h1>
</div>
<local-tag></local-tag>
</div>
</body>
<script src="vue/vue.js"></script>
<script>
let localTag = {
template:`
<div>
<h2 @click="btnClick"> {{msg}}</h2>
</div>
`,
data (){
return{
msg:"局部组件",
x:'aa',
y:123,
}
},
methods:{
btnClick (){
console.log(this.msg)
}
},
beforeCreate (){
console.log('组件开始创建，数据和事件都未创建');
console.log(this.msg); // undefined说明数据还未创建
console.log(this.btnClick); //undefined说明事件还未创建
console.log(this.$data); //undefined
console.log(this.option.methods)
},
created (){
console.log('组件已经创建完毕，数据与事件都准备就绪');
console.log(this.msg); // 局部组件 [数据有了]
console.log(this.btnClick); // 事件也有了 ƒ btnClick (){console.log(this.msg)}
console.log(this.$data); // {__ob__: Observer}
console.log(this.option.methods)
},
};
new Vue({
el:'#app',
components:{
localTag,
},
})
</script>
</html>
二、Vue项目开发【环境、项目创建、组件.vue、路由、仓库、cookie
1. 搭建Vue环境
创建Vue项目 => 要有Vue环境 => 要安装Vue =>要有一个命令行的商城npm 【就像pip 专门给python 安装模块一样】
安装npm商城=>要有一个node环境, node.js是C++写的，内部封装了socked,是能启服务的，启动后是能运行js脚本的【类比pip需要python环境】
所以前端项目就可以run在node服务器上，所有的项目运行的依赖就由npm来帮助我们来安装各种插件
1）安装node
官网下载安装包，傻瓜式安装：https://nodejs.org/zh-cn/
2) 安装npm 【cnpm国内的安装源，速度快】
node安装后就已经有了npm, 通过npm安装cnpm 【国内源】
npm install -g cnpm --registry=https://registry.npm.taobao.org
3）安装脚手架
cnpm install -g @vue/cli
4）清空缓存处理
若上面哪一步安装有问题，就执行一下下面命令，重新安装上面对应的命令
npm cache clean --force
2.创建Vue项目，
要提前进入目标目录（项目应该创建在哪个目录下）
选择自定义方式创建项目，
vue create 项目名 或 vue ui 【可视化创建】
参数设置：回车=>确定；空格键=>选定或取消
参数：* Manually select features 【自定义的】
* Babel 【把ECMS6转换ECMS5, 因为EMS5浏览器支持更好】
PWA【优化Web 的】
* Router 【路由，前台页面自己完成路由转跳】
* Vuex 【仓库，全局的单例，子孙组件数据传递】
CSS 【预编译的语言】
* Linter / Formatter【统一代码格式的】
Unit Testing / E2E Testing 【测试】
选择大写的：
*Use history......(Y/n) Y =>回车 【形成历史转跳】
* ESLint with error prevention only 【有错误或者没错误的提示】
* Lint on save 【能保存】
Lint and fix on commit (requires Git) 【代码整合工具，必须要有git环境，暂时用不到】
* In dedicated config files 【是否将上面选择的设置创建单独的配置文件？】
In package.jason 【上面选择的设置放在这个文件中】
Save this as a preset for future projects?(y/N) N 【是否保存上面的设置到后面项目中，如果选了Y，后面就改不过来了】
3. 启动服务
进入项目：cd vue-proj
启动服务：npm run serve | cnpm run serve