现在说到前端框架自然会想到的就是Angular、React、Vue 这三者。Angular虽然买了书，但是没有用过（书还是1.0的……）。React其实原本是在学RN时带上的，跟着慕课网上的教程做了个小练习 React 图片画廊 踩坑笔记。
Vue的话毕竟是国人做的框架，一直就想学习一下的。于是就打算把之前React的这个小项目用Vue来重写一遍当作入门练习了。
接触新框架难免要踩坑，其中有几次感觉自己要死在坑里了。不过最后靠着官方文档和谷歌的帮助还是爬了出来。而这篇便是在完成后对所踩过的坑的一个总结。
*当然，本着一篇文章太长会没人看的原则。先列一下踩坑的大致数量，可能会分两篇来写完。
项目地址：
- Vue版：画廊应用
- React版：画廊应用
项目效果：画廊效果 （React版）
- Vue-cli .js?.Vue?
- 父组件向子组件传值
- eslint format
- Vue中使用SCSS
- class绑定与顺序
- v-for 子组件DOM的取得
- 子组件向父组件的传递
- 数组的更新方法
Vue-cli .js?.Vue?
在Vue的官方网站的安装教程中，对于Vue-cli有这样的提示。
你可以查看安装教程来了解其他安装 Vue 的选项。请注意我们不推荐新手直接使用 vue-cli
，尤其是对 Node.js 构建工具不够了解的同学。
自然，作为一个玩过Node的人，当然是表示不服气的。想都不想的就作死的敲下了$ npm install --global vue-cli。
待全部安装完成、创建项目之后。打开其中的Vue文件，就瞬间傻眼了。
因为在官网中给出的文档是这样的。
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
而生成好的Vue文件是这样的。
{{ msg }}
Essential Links
Ecosystem
怎么看这两个的差距都是有点大的。
但其实上一个是js文件中的写法，而后一个则是Vue的模板文件的写法。如果采用上一种写法的话，那应该还是和以前一样是HTML+CSS+JS分开管控，对于小项目这种可能会更好。（其实画廊应用应该更适合这一种）而且这一种也与React的写法相类似，从React转的话可能会更方便一些。
Vue的模板文件从后缀名就能看出.vue，对于模板文件浏览器肯定是不认识的，因此Vue的模板文件一定需要经过编译才能使用。仔细看一下其实就能发现，Script的部分其实和上一种是一样的（除了写法上），从大体的结构可以看出，Vue的模板文件中分为了template、script、style三个部分，分别代表了HTML、JS、CSS三个部分，这样一来一个.vue文件就是一个组件。而一个App就是许多个组件组成起来的。这也正符合了组件化的思想。
关于前端以及组件化的一些感想
前端在HTML、CSS、JS上从最初HTML、CSS、JS文件的分离，到现在组件化在小组件内的耦合，感觉整个方向在越来越清晰了。HTML、CSS、JS文件分离是从功能角度上看的，每个文件各司其职。文件结构是很清晰了，但是实际在复用的时候往往不方便。如果只是一个部分的复用，那么从一堆HTML、CSS、JS中截取一小段还是很麻烦的。可能是这样的原因，才有了组件化的想法吧。组件化就是从另一个角度来看了，如同（宏观）物理学中定义原子是不可再分一样，在Web应用中，组件便是不可再分的了。原子中我们知道有中子、质子等，对应的一个组件中自然也有模板、样式和行为（JS）了。而以组件为单位的复用，既可以是最小的原子组件、也可以是由原子组件组成的分子组件。这么一来就提高了复用度，对于复用的场景也很灵活，想必组件化也会是今后的一个主流吧。
父组件向子组件传值
父组件向子组件传值，与React类似，通过props进行传值。不过所传的props的值必须要在子组件中事先定义好。在子组件中可以通过this.$props.value来取得对应传进来的值。
![]()
{{picture.title}}
{{picture.desc}}
eslint format
由于Vue-cli中是会开启eslint来检查javascript的语法的。但是，对于添加分号、方法名与括号之间必须有空格这种规定还是很讨厌的。然而如果不通过eslint的话，网页又是无法显示的。
所以可以通过在.eslintrc.js中添加一些规则把eslint中的一些检测给关了。
具体如何修改可以参考官方网站（是有中文版的哦~）
// http://eslint.org/docs/user-guide/configuring
module.exports = {
root: true,
parser: 'babel-eslint',
parserOptions: {
sourceType: 'module'
},
env: {
browser: true,
},
// https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
extends: 'standard',
// required to lint *.vue files
plugins: [
'html'
],
// add your custom rules here
'rules': {
// 在rules中可以添加对应的规则，0是关闭、1或者其他的数值是开启
// allow paren-less arrow functions
'arrow-parens': 0,
// allow async-await
'generator-star-spacing': 0,
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
// 函数名后不需要空格
'space-before-function-paren': 0,
// 禁止不需要的分号
'no-extra-semi': 0,
// 永远需要分号
'semi': 0,
'no-new':0,
'eol-last':0
}
}
感觉篇幅已经很长了，所以第一篇就先到此打住。剩下的5个就在下一篇中记录吧。