2020-06
day 19
[补]
2020-06
day 22
2020-06
day 22
可算写完了这个日期选择插件，，我太难了OTZ
遇到一些问题（debug好久）：
- 子组件DatePicker无法接收父组件传递的特性date的值...(尚未解决吧)
- 自定义组件中无法接收到vnode(打印undefined) -> 要获得vnode实例，必须同时传入binding和vnode
- 在methods的某个方法中写了一个辅助函数，用到了实例的数据，一直显示undefined -> this 指向错误了，把函数声明改成箭头函数表达式就OK了
- 计算属性无法实时更新 -> 计算得到的属性应该是以实例中的数据为基础，不应以另一个计算属性为基础
2020-06
day 29
- 练习了一个小组件
- 过了一下用脚手架搭建项目的过程，渲染函数拓展知识
2020-06
day 30
2020-07
day 1
2020-07
day 2
开始学路由
- 路由配置中一定要有根路径
- routes是键值 不能写错
- 路由配置的path项一定要以/开头，如：'/routerA'
- router-link标签里面的内容不要忘了写，不然都没导航
- webpack基础配置要准备好，不然可能出现找不到模块的情况
- 又测了一下tomcat，记得先启动服务...后面应该能写个网站出来了
2020-07
day 3
继续学路由，用vue的基础知识和路由这一块，搭了一下个人网站的基本框架
2020-007
day 6
学完路由部分啦，完善了网站的框架，加上了登录校验（仅前端测试），开始学Vuex
2020-07
day 7 and 8
- 给网站加了个生命倒计时的功能，遇到一点小问题：
时分秒都想用计算属性来显示的，可是计算属性有响应式依赖，秒的计算要用计时器实时更新，
用计算属性要设置getter和setter，麻烦，最后还是直接在生命周期里面开启了计时器，
每秒更新data里面的秒属性
- 利用vuex-state，vuex-getters写了一个同步添加和展示学生信息的小功能，整合到网站里面，后期再优化样式，遇到的问题:
利用mapState展开所需项时，配置的参数应该为数组或对象，不能仅传入单个字符串
-
终于学完vue啦，原理部分可能后面再花点时间继续啦，先写项目写网站
-
练习美团项目
- 脚手架搭项目
1. 更新脚手架到最新版本
npm i -g @vue/cli
2. 初始化项目
vue create mt-app
--> vue init webpack [my-project] --> 须事先npm i @vue/cli-init
--> 通过 vue init webpack [project-name] 初始化创建的项目，会包含各种基础配置文件
- 遇到的问题
1. element-ui包里的index.css无法正常解析
解决: 在build的webpack.base.conf.js中重新配置css解析路径
2. css-loader无法通过编译
解决：删除原来的依赖，重新下载css-loader依赖
3. 项目中要引用Sass文件，编译时遇到了
Modele build failed: TypeError: this.getResolve is not a function at Object.loader...
解决：卸载原来的依赖，重新安装指定版本的包 npm i sass-loader@7.3.1 --save-D
- 搭了整体框架，写完头部
- webpack学习
1. 了解了一下配置文件的基本内容
2020-07
day 9
继续美团项目的练习
- 补上头部Hover的菜单效果（结构根据数据循环生成）
- 完成搜索框部分：主要使用自定义指令->点击某div外时，提示菜单消失
- 样式用sass写
部分细节后期继续微调
2020-07
day 10&13
- 修复一个遗留的小细节: input框鼠标聚焦时外边框样式会发生改变
该样式是由outline控制的，设置input:focus { outline none;}
- 写完footer区域，完成网页基本模板
html中输入空格 ->
使用calc(100% - 230px)时，注意格式：-号两边有空格
- 完成主页banner区域：左侧菜单导航+轮播图+用户登录区等
2020-07
day 14&15
- 写完主页部分
- 加上切换城市跳转路由，添加城市列表组件
- 明天要面试了....紧张.jpg
2020-07
day 17
这两天在面试，基本上在复习一些基础知识了，没怎么敲代码了... 经过两次的面试，发现自己的一些点还不是很扎实，特别是VUE，虽然开始用了，也写了挺多代码，但是一些原理还是不太清楚
整理一下面试官问到的一些问题
1. css中position: static的用法，有没有用过
2. rem和em
3. 在移动端布局时出现边框消失该怎么办
-> 我没搞太懂，因为没遇到过，面试官点拨了一下，建议用伪元素画边框
4. vw和vh
- 不同平台适配分辨率的方法
-> 我就回答用过bootstrap和element-ui，其他简单的场景一般自己手写@media适配
- vue的生命周期？发送时一般会在哪个生命周期？
beforeCreate
在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
created
在实例创建完成后被立即调用。
在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。
如果要在第一时间调用methods中的方法，或者操作data中的数据，可在此钩子中进行操作。
需要注意的是，执行此钩子时，挂载阶段还未开始，$el 属性目前不可见。
此时，可以进行数据请求，将请求回来的值赋值给data中的数据。
beforeMount
在挂载开始之前被调用，此时模板已经编译完成，只是未将生成的模板替换el对应的元素。
在此钩子函数中，可以获取到模板最初始的状态。
此时，可以拿到vm.$el，只不过为旧模板
mounted
el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。
在该钩子函数中的vm.$el为新模板。
执行完该钩子函数后，代表实例已经被完全创建好。
如果要在第一时间，操作页面上的dom节点时，可以在此钩子函数中操作
beforeUpdate
数据更新时调用，发生在虚拟 DOM 打补丁之前。此时数据已经更新，但是DOM还未更新
updated
数据更改导致DOM重新渲染后，会执行该钩子函数。
此时数据和dom同步。
beforeDestroy
实例销毁之前调用。在这一步，实例仍然完全可用。
可以在该钩子函数中，清除定时器。
destroyed
Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除。
- vue父子组件通信
props, $emit, $attrs, $listeners, $parent, $children
感觉这样回答不是很好，应该补充上单向数据流之类的？
- 简述一下vue中的双向数据绑定是怎么实现的
v-model:
通过该指令，可以在表单元素上实现双向数据绑定
v-model本质上是语法糖，可以用简单的一个指令实现监控输入和绑定属性两个功能。
<input type="text" v-model="msg" />
<input type="text" @input="msg = $event.target.value" :value="msg" />
- 有没有用过插槽
我当时就回答只写过简单的练习，没用过复杂的，真想打死我自己...不过确实是没怎么想起来。
插槽：
现有父组件Parent.vue和子组件child.vue
父组件中使用插槽:
<child>
写上你要传递给子组件的结构，比如<p>xxxxx</p>啥的
<child/>
子组件中准备插槽模板：
<div class='这是一个子组件'>
这里有一堆其他的标签，比如<ul><li></li></ul>啥的
<slot></slot>
</div>
到了最终编译的时候，父组件会变成：
<div class='这是一个子组件'>
这里有一堆其他的标签，比如<ul><li></li></ul>啥的
写上你要传递给子组件的结构，比如<p>xxxxx</p>啥的
</div>
- websocket
没用过，面试官很亲切得讲解了一下，自己回来又查了一下：
掘金就有相关介绍的文章
-> http://www.ruanyifeng.com/blog/2017/05/websocket.html
- 服务器怎么判断客户端的权限，决定是否展示内容
我就随口说（我是真的菜，脑子一片空白，愣是思考了好久才反应过来），cookie和session吧...
