[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_11":-5},"routes/user.$name.collections",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":16},"topics",[33],"user",{"_20":21,"_13":14,"_22":23,"_24":14,"_25":26,"_27":28,"_29":16,"_30":16,"_31":32},"loginname","fadeaway1992","page",1,"limit",20,"total","id","27117","avatar_url","https://avatars0.githubusercontent.com/u/23022274?v=4","githubUsername","create_at","2017-02-21 23:33:41.786","score",10,"topic_count","reply_count","is_star",false,{"_20":34,"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":32,"_46":32,"_30":47,"_48":49,"_25":50,"_51":52},"18357","author_id","15910","tab","share","content","最近在群里看到在大家在学习vue的过程中，遇到的很多问题都十分的类似，这里做一下总结：\r\n\r\n####eslint静态检查\r\n\r\n在大家用vue-cli创建工程的时候，会有一项，使用使用eslint，如果选择了y，那么工程就会安装并启用eslint。\r\n\r\n这里列举一下常见的错误：\r\n\r\n1.多余的分号 \r\n![图片描述][1]\r\n\r\n2.定义了却未使用的变量\r\n![图片描述][2]\r\n \r\n3.结尾多余空格\r\n![图片描述][3]\r\n\r\n4.超过一行的空行\r\n![图片描述][4]\r\n\r\n5.代码尾行应该有空行\r\n![图片描述][5]\r\n\r\n错误肯定是列举不完的，那么提示错误的时候，我们应该先去看提示信息（翻译），如果发现没有错误，可以对照[eslint的官方文档][6]\r\n\r\n在大家适应了eslint的写法后，效率和正确率会直线上升，这里安利下我的另一篇文章，[提升效率的eslint+vscode的开发环境搭建][7]\r\n\r\n-----\r\n\r\n####this指向\r\n\r\n经常会有朋友问一些undifined的错误，比如：\r\n\r\n \r\n\r\n这是刚创建的工程，我们定义了list，idx和current，在执行iter方法时，我们就给current赋值以idx为下标的值，当我们执行后会发现，浏览器报了一个错误\r\n\r\n![图片描述][8]\r\n\r\n这么回事，我们不是定义了idx了吗？\r\n\r\n其实是因为我们在map里的this是指向当前map的迭代对象，而非我们vue的实例，所以this里没有我们需要的idx。\r\n\r\n解决方式有两种，其一是通过保存this\r\n\r\n let _this = this\r\n \r\n其二是使用es6箭头函数\r\n\r\n methods: {\r\n iter () {\r\n this.list.map((v, k) => {\r\n if (k === this.idx) {\r\n this.current = v\r\n \r\n console.log(this.current)\r\n }\r\n })\r\n }\r\n },\r\n\r\n现在再看我们的浏览器\r\n\r\n![图片描述][9]\r\n\r\n已经可以达到我们预期的效果了！\r\n\r\n\r\n再来一发\r\n\r\n

\r\n\r\n\r\n methods: {\r\n check () {\r\n alert('ok')\r\n }\r\n }\r\n \r\n\r\n大家会发现并不会alert，但是语法没错误呀，这是为什么呢？\r\n\r\n让我妈修改alert\r\n\r\n methods: {\r\n check () {\r\n window.alert('ok')\r\n }\r\n }\r\n\r\n这下alert就能正常工作了，大家肯定都明白是怎么一回事了！\r\n\r\n没错就是this的锅！\r\n\r\n-----\r\n\r\n####方法传值\r\n\r\n我们在input中的方法希望获取input的value，怎么获取呢？\r\n\r\n可以通过$event这个对象，通过将$event传入方法\r\n\r\n \r\n\r\n我们可以成功的拿到我们希望的值\r\n\r\n change (e) {\r\n console.log(e.target.value)\r\n this.value = e.target.value\r\n }\r\n\r\n-----\r\n\r\n####迭代判断\r\n\r\n比如我们有一个列表，我们希望能显示我们当前选中的那一个，如何实现呢？\r\n\r\n基本思路是通过$index来判断是否是当前迭代对象，然后去增减class或者style来实现不同的样式\r\n\r\n

{{item}}
{{item}}

\r\n\r\n\r\n data () {\r\n return {\r\n list: ['a', 'b', 'c'],\r\n activeId: 0\r\n }\r\n },\r\n\r\n\r\n----\r\n\r\n####camelCase vs. kebab-case\r\n\r\nHTML 特性不区分大小写。名字形式为 camelCase 的 prop 用作特性时，需要转为 kebab-case（短横线隔开）(官网例子)\r\n\r\n\r\n Vue.component('child', {\r\n // camelCase in JavaScript\r\n props: ['myMessage'],\r\n template: '{{ myMessage }}'\r\n })\r\n \r\n \r\n \r\n\r\n\r\n另外props的写法\r\n\r\n简写\r\n\r\n props: ['demo-first', 'demo-second']\r\n \r\n带类型\r\n\r\n props: {\r\n 'demo-first': Number,\r\n 'demo-second': Number\r\n }\r\n \r\n带多种检查\r\n props: {\r\n 'demo-first': {\r\n type: Number,\r\n default: 0\r\n }\r\n ...\r\n }\r\n\r\n所以，当你获取不到props的值的时候，可以先仔细检查拼写是否正确。\r\n\r\n-----\r\n\r\n####传值与传字面量\r\n\r\n在vue的组件中传递数据，如果是单纯传递字面量，如\r\n\r\n \r\n \r\n那么在hello中获取的props result的值就是“success”，如果希望进行值传递，需要在指令前加 ':' 冒号，这样，父层的success的值改变，hello的值也会跟着改变。\r\n\r\n----\r\n\r\n####转场动画\r\n\r\n在vue中有个很好用的指令，transition，通过它我们可以实现自定义的router切换中的动画\r\n\r\n方法就是在\r\n\r\n \r\n \r\n加入自定义的class fade-transition , fade-leave , fade-enter即可。\r\n\r\n-----\r\n####数据驱动 vs dom\r\n\r\nvue是基于数据驱动的，最好不要直接去修改dom（虽然官方给出了这样的方法）\r\n\r\n---\r\n####v-cloak\r\n\r\n如果出现{{}}的短暂出现的情况，可以通过添加v-cloak来处理。\r\n\r\n这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。\r\n\r\n-------\r\n\r\n####使用sass\r\n\r\n首先安装依赖\r\n\r\n npm i node-sass sass-loader -D\r\n \r\n然后在vue的style里添加\r\n\r\n