一、生命周期钩子
用处：在组件从创建到销毁过程中的某个时间节点，想要完成的某个事，如，在组件创建完成后，想要干嘛干嘛，在被销毁后想要做某些事。
再比如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-proj 或 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
4.打开 http://localhost:8080/
5.项目移值，node_modules不需要【都是配置】；
一样的操作系统： 其它的均copy；不同操作系统只要public【图标和主页】和src => 需要安装一下环境：
1)cd到项目路径; 2) cnpm install
项目创建完成，可以用pycharm打开
6. 项目目录介绍
node_modules:项目依赖
public:公用文件
favicon.icl 页面标签图标
index.html 项目的唯一页面（单页面）
src: 项目开发目录
assets: 静态资源
css | js | img
components:小组件
*.vue
views:视图组件
*.vue
App.vue: 根组件
main.js: 主脚本文件
router.js:路由脚本文件 - vue-router
store.js :仓库脚本文件 - vuex
*.xml | json| js: 一系列配置文件
README.md:使用说明
7. main.js 主脚本文件介绍：
import Vue from 'vue' // node_modules下的依赖直接写名字
import App from './App.vue' // ./代表相对路径的当前目录，文件后缀可以省略
import router from './router' // @代表src的绝对路径
import store from './store'
在main中配置的信息就是给整个项目配置
已配置 vue | 根组件App | 路由 | 仓库
待配置：Cookie | ajax （axios） | element-ui
Vue.config.productionTip = false； //Tip小提示
new Vue({
router, 成员
store, 成员
render: h => h(App) # 读取文件成template,给挂载点替换真实DOM渲染页面
}).$mount('#app') # 挂载点
import Vue from 'vue'
import App from './App.vue'
import router from '@/router'
import store from './store'
Vue.config.productionTip = false
//
// new Vue({
// router,
// store,
// render: h => h(App)
// }).$mount('#app'); // 等同于el:
new Vue({
el:'#app',
router:router,
store,
// render: function (h) {
// return h(App) //该h可以读App这个模板读成template，将结果返回出来给挂载点挂载
// } // 【实例创建成功后，就回调h这个函数，挂载点最终将虚拟DOM替换真实DOM】
// 解释：function (h) {return 1} | (h) => {return 1} | h => 1
//简写
render: h => h(App),
});
8. .vue组件文件
基本模板
<!--html代码：只有一个根标签--> <template> </template> <!--js代码：在export default{}的括号内完成组件的各项成员data、methods--> <script> export default { } </script> <!--css代码：scoped样式组件化， 样式只在该组件内部起作用--> <style scoped> </style>
自定义组件：
components/FannyComponent 子组件
<!--html代码：只有一个根标签--> <template> <div class="fanny"> <h1 :class="{active: is_active}" @click="btnClick">fanny组件</h1> </div> </template> <!--js代码：在export default{}的括号内完成组件的各项成员data、methods--> <script> export default { data (){ return{ is_active:false } }, methods:{ btnClick (){ this.is_active =!this.is_active } } } </script> <!--css代码：scoped样式组件化， 样式只在该组件内部起作用--> <style scoped> .active { color: red; } </style>
src/ views/About.vue 根组件中注册
<template> <div class="about"> <h1>This is an about page</h1> <h2>好好sadf</h2> <fanny-comp></fanny-comp> <!--使用组件，两种方式--> <FannyComp></FannyComp> </div> </template> <script> // import FannyComp from '../components/FannyComponent' //两种方式，导入组件，组件名随意 import FannyComp from '@/components/FannyComponent' export default { components:{ FannyComp, //注册组件 } } </script>