vue 记录

1.v-if 可以重走组件的生命周期

2.Vue使用了Mustache语法,即双大括号的语法。

3.原生input其实只是一个语法糖,:bind="value"与@change="value = $event.target.value"的结合。

自定义组件的时候的v-model默认监听change事件和绑定value 的prop。

4.定义全局方法

1、通过prototype,Vue.prototype[method]=method;

2、通过mixin,Vue.mixin(mixins);

5.设置assetsPublicPath将 assetsPublicPath: '/' 改为 assetsPublicPath: './'解决打包后静态资源失效

6.动态添加src被当做静态资源处理了,没有进行编译,所以要加上require。require('@/assets/images/xxx.png')

7.风格指南

1、使用v-for时记得加key,可以快速定位到需要更新的DOM节点,提高效率。

2、永远不要把 v-if 和 v-for 同时用在同一个元素上。提高渲染效率

3、优先通过 Vuex 管理全局状态,而不是通过 this.$root 或一个全局事件总线

4、为组件样式设置scoped作用域

8.关于key:便于diff算法的更新,key的唯一性,能让算法更快的找到需要更新的dom,需要注意的是,key要唯一,不然会出现很隐蔽性的更新问题。

9.style添加scope防止全局同名css污染

10.watch的属性用箭头定义会导致this 是undefind

11.vue错误处理分为errorCaptured与errorHandler

errorCaptured是组件内部钩子,可捕捉本组件与子孙组件抛出的错误,接收error、vm、info三个参数,return false后可以阻止错误继续向上抛出。

errorHandler为全局钩子,使用Vue.config.errorHandler配置,接收参数与errorCaptured一致,2.6后可捕捉v-on与promise链的错误,可用于统一错误处理与错误兜底。

12.在vue事件中传入$event,使用e.target和e.currentTarget有什么区别?

currentTarget:事件绑定的元素

target:鼠标触发的元素

currentTarget 始终是监听事件者,而 target 是事件的真正发出者

13.在 .vue 文件中,template是必须的,而script与style都不是必须的。

14.this.$forceUpdate()强制重新刷新某组件

15.vue扩展组件方法

  1.使用Vue.extend 直接扩展

   2.使用Vue.mixin全局混入

   3.HOC封装

   4.添加slot扩展

16.attr和listeners 组件传值,祖孙组件有跨度的传值

17.本地项目开发完成部署后报错原因可能:

   检查nginx配置,是否正确设置了资源映射条件

   检查vue.config.js中是否配置了publicPath,若有则检查是否和资源文件在服务器的摆放位置一致

18.vue组件模版只有一个根元素,"树"状数据结构,肯定要有个"根",一个遍历起始点通过这个‘根节点’,来递归遍历整个vue‘树’下的所有节点,并处理为vdom,最后再渲染成真正的HTML,插入在正确的位置

19.如何优化首页的加载速度

 异步路由、异步加载、分屏加载、按需加载、延时加载图片等

20.ajax是最早出现发送后端请求的技术,属于原生js范畴,核心是使用XMLHttpRequest对象,使用较多并有先后顺序的话,容易产生回调地狱。fetch号称可以代替ajax的技术,是基于es6中的Promise对象设计的,参数和jQuery中的ajax类似,它并不是对ajax进一步封装,它属于原生js范畴。没有使用XMLHttpRequest对象。axios不是原生js,使用时需要对其进行安装,客户端和服务器端都可以使用,可以在请求和相应阶段进行拦截,基于promise对象

21.单向数据流:所有状态的改变可记录、可跟踪,源头易追溯;所有数据只有一份,组件数据只有唯一的入口和出口,使得程序更直观更容易理解,有利于应用的可维护性;一旦数据变化,就去更新页面(data-页面),但是没有(页面-data);如果用户在页面上做了变动,那么就手动收集起来(双向是自动),合并到原有的数据中。

双向数据流:无论数据改变,或是用户操作,都能带来互相的变动,自动更新。

22.router 是不是hash 是否需要配置nginx , publicPath , 是不是要配置cdn

23.vue的extend 构建一个组件和vue.components注册组件一起使用

24.定义组件模版的方法

1、字符串

2、模板字面量

3、<scripttype="x-template"></script>

4、文件组件模板

5、inline-template.

25.在vue项目中引用第三方库

1、绝对路径直接引入在index.html中用script引入<scriptsrc="./static/jquery-1.12.4.js"></script>然后在webpack中配置externalexternals:{'jquery':'jQuery'}在组件中使用时importimport$from'jquery'

2、在webpack中配置aliasresolve:{extensions:['.js','.vue','.json'],alias:{'@':resolve('src'),'jquery':resolve('static/jquery-1.12.4.js')}}然后在组件中import

3、在webpack中配置pluginsplugins:[newwebpack.ProvidePlugin({$:'jquery'})]全局使用,但在使用eslint情况下会报错,需要在使用了 $ 的代码前添加/* eslint-disable*/来去掉 ESLint 的检查。

26.过滤器

全局过滤器Vue.filter('addHobby',(val,hobby)=>{returnval+hobby})

局部过滤器filters:{addHobby(val,hobby){returnval+hobby}}

27.引入scss

安装scss依赖包:npm install sass-loader--save-dev 

npm install node-sass--save-dev在build文件夹下修改 webpack.base.conf.js 文件:在module下的 rules 里添加配置,如下:{test:/\.scss$/,loaders:['style','css','sass']}应用:在vue文件中应用scss时,需要在style样式标签上添加lang="scss",即<style lang="scss">。

28.axios 的是一种异步请求,用法和ajax类似,安装npm install axios --save 即可使用,请求中包括get,post,put, patch ,delete等五种请求方式,解决跨域可以在请求头中添加Access-Control-Allow-Origin,也可以在index.js文件中更改proxyTable配置等解决跨域问题

29.多个实例引用了相同或相似的方法或属性等,可将这些重复的内容抽取出来作为mixins的js,export出去,在需要引用的vue文件通过mixins属性注入,与当前实例的其他内容进行merge

30.vue-cli无法解决跨域问题。真正解决跨域问的是webpack。只不过vue-cli3.0将webpack的配置继承到了vue.config.js中,才给初学者造成了vue-cli可以解决跨域的错觉。

与在webpack.config.js中配置跨域一样,在vue.config.js中的devServer:{proxy:{}}字段可以编写跨域配置。

31.vue-cli原理就是通过node环境发起git请求,把预先设置好的模板下载下来

32.vue-router共有三种守卫:

1:全局守卫:beforeEach,afterEach

2:路由独享守卫:beforeEnter

3:组件级别的守卫beforeRouteEnter,beforeRouteUpdate,beforeRouteLeave他们执行顺序:全局》路由》组件

除了afterEach全局后置外,其他的守卫中务必要调用next(),否则无法完成导航

还有注意全局前置守卫可以用来进行拦截,(登录拦截)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342