$route和$router的区别
route是路由信息对象,包括path,params,hash,query,fullPath,matched,name等路由信息参数,而router是“路由实例”对象包括了路由的跳转方法,钩子函数等
自定义过滤器详解
vue的过滤器一般在JavaScript 表达式的尾部,由“|”符号指示:
过滤器可以让我们的代码更加优美,一般可以用在时间格式化,首字母大写等等
过滤器又分为全局过滤器和局部过滤器:全局过滤器在创建vue实例前创建,局部在vue实例filters中定义,能够对数据进行各种过滤处理,返回需要的结果
自定义指令详解
有的情况下,你需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令
自定义指令提供了五个钩子函数,分别是:
1、bind:只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个绑定时执行一次的初始化动作。
2、inserted:被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于document中)。
3、update:被绑定于元素所在的模板更新时调用,而无论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新。
4、componentUpdated:被绑定元素所在模板完成一次更新周期时调用。
5、unbind:只调用一次,指令与元素解绑时调用。
指令钩子函数中有三个参数:
el: 指令所绑定的元素,可以用来直接操作DOM。
binding: 一个对象,包含指令的很多信息。
vnode: Vue编译生成的虚拟节点。
assets和static的区别
相同点:资源在html中使用,都是可以的。
不同点:使用assets下面的资源,在js中使用的话,路径要经过webpack中file-loader编译,路径不能直接写。
assets中的文件会经过webpack打包,重新编译,推荐该方式。
而static中的文件,不会经过编译。项目在经过打包后,会生成dist文件夹,static中的文件只是复制一遍而已。
简单来说,static中建议放一些外部第三方,自己的放到assets,别人的放到static中。
vue路由的实现原理
vue的路由实现:hash模式和history模式
hash模式:在浏览器中符号“#”,#以及“#”后面的字符称之为hash,用window.location.hash读取
特点:hash虽然在url中,但不被包括在http请求中;用来指导浏览器动作,对服务端安全无用,hash不会重加载页面
hash 模式下,仅 hash 符号之前的内容会被包含在请求中,如 http://www.xxx.com,因此对于后端来说,即使没有做到对路由的全覆盖,也不会返回 404 错误。
history模式:history采用HTML5的新特性;且提供了两个新方法:pushState(),replaceState()可以对浏览器历史记录栈进行修改,以及popState事件的监听到状态变更。
history 模式下,前端的 URL 必须和实际向后端发起请求的 URL 一致,如 http://www.xxx.com/items/id。后端如果缺少对 /items/id 的路由处理,将返回 404 错误