vue内容整理小结

钩子函数和指令
1.Vue.directive(‘fname’,function(el,binding){}); 指令中的第二个函数本身可以是个对象，这个对象的左侧即对象的键可以标明右侧的函数（即对象的值）的执行时机。可以代表函数执行时机的函数（即对象的键）称为钩子函数。（类比原生js中的window.οnlοad=fn,fn可以视为钩子函数，同样οnclick=fn; οnerrοr=fn;中的fn均可视为钩子函数）；
vue中的几个钩子：inserted （代表的含义：绑定的指令的元素插入到父节点时调用）、bind（指令第一次绑定到元素时调用）、update（指令所在的元素的model层的数据，view有更新请求时）、componentUpdated（更新完成时）
vue对页面进行接管时，在虚拟dom中的有些写法会使事件失效，比如 上面的vue代码再编译过程中在虚拟dom中就会获得焦点，事件已经被触发，而在真实的dom中没有触发的时机了（这相当于另一种钩子函数bind），而另一种将Vue.directive(‘fnfocus’,{ inserted:function(el,binding){ el.fnfocus();}});则不会有在虚拟dom中的事件被触发的情况 (v-focue为自定义指令)。
update钩子函数，如

为指令所在的元素，涉及model层的数据，或者此
dom元素有可能包含其他dom元素，而其他的dom元素中的数据可能也会涉及到model层的数据，如果这些数据发生变化，则指令就会更新。
简写方式（即不写成对象而是写成函数的方式）：相当于bind+updata

2.绑到元素上的指令，执行的时机对不对（如同考察事件一样，事件在什么时候触发，比如onload要等到所有页面加载完毕包括一些资源载入完成才会触发）；指令的触发时机

3.指令是个函数（函数是简写，也可是个对象）

脚手架vue-cli的目录文件结构
1.这里采用vue的脚手架cli（需要依赖环境）
2.用cli创建项目（可以通过命令vue create myprojName -f (-f表示覆盖文件中重复的部分)）
3.规划项目的目录（可自定义）
打包后会生成的目录：dist
(所有的)资源（通常是不需要优化（如打包）的资源）托管目录(node也是这样)：
public public 中有通常有数据文件（可以自己创建一个data文件夹），如json文件（json作为数据
有个特点：只能查，不能增删改），数据文件下通常还有一个浏览器入口（index.html），
favicon 网站图标，
开发型的资源(通常是需要优化（如压缩）的资源)的目录：src
src下通常有 assets （优化的资源，如压缩的js、css代码和图片）
pages 页面（也是组件的一种）
filters （放置除页面内部、组件内部之外的过滤器，即全局过滤器）
plugins 插件配置，如 router 、axios
components 通用组件（应用内部的多个页面都会使用的组件，
甚至还有跨应用的组件，如一个组件A可用，B也可用）
store 状态管理
main.js 程序主入口
App.vue 根组件
package.json 第三方包依赖管理程序
4.项目使用的技术栈
前端：（ vue-cli3:脚手架； vue-router:路由跳转；
数据加载：axios; ）；
后端：（ nodejs:后端平台； express：脚手架；
数据库：mongodb;）
5.这里通过脚手架cli搭建的项目使用npm run serve运行项目
，也即是运行搭建的开发服务器
6.浏览器到资源目录下找内容
7.不复用的组件可视为完整的页面，而页面中小块的相同重复可以复用的UI可以做成组件放到componets文件中；