用vue-cli搭建vue项目
node安装vue-cli安装什么的就不用细说了
直接在指定的一个文件夹里：
vue init webpack mytest //webpack表示打包工具的选择，mytest是自己的项目名称。
然后一系列的傻瓜操作后。。。。
就有了项目的初始结构：
目录结构.png
mock.json是我自己加的用来做mock数据用。node_modules是运行了npm install后安装的依赖包。下面的学习主要是先做一个SPA，然后再引申到多页面等。
最重要的还是build和config这两个文件夹里的js代码我现在是还看不太懂。
项目分析：
我还是选择做豆瓣，简单而且也有内容。最主要是可以配合着ES6一起学习，美滋滋。
首先是在组件中定义变量和平常的单独使用js来定义vue变量的时候用法有什么不一样？
先来看我之前开发的，使用js时的变量和方法设定：
img1.png
先通过import引入Vue，在实例化一个vue对象，在其中定义其data，methods，components等
按照我的想法，我做了下面的尝试：
1、
test1.png
直接在script中定义data。报错！！！
2、
test2.png
实例化一个vue，再定义data，还是报错。在组件中再引入Vue，还是报错
3、
test3.png
使用export default {} ,然后定义data方法，返回一个对象。啊哈，成功了，不报错了，而且数据渲染也成功了。
这是什么原因呢？
个人觉得：组件是依托于html文件而存在的，在外层的main.js中已经实例化了Vue对象，所以没必要再次实例化Vue，而直接定义的data:{}，人家也不认识这个东西啊。通过将一个名称为data的方法导出，那么vue会检测每个组件中的data方法，并根据其返回的对象给对应的组件进行数据渲染。我觉得是这样的。
然后，我们现在创建几个组件，因为在构建项目的时候就使用了vue-router，可以在router文件夹的index文件中进行路由配置。
router.png
就是这样。
组件的通信
好，现在开始比较重要的一点。如果在父组件中有一个变量，子组件要用，怎么办？子组件的一个变量，父组件要用，怎么办？
一般情况下，我觉得大部分变量应该定义在外层。内层的变量应该作为子组件的私有变量存在。这也符合程序设计的规范。而子组件如果有一些变动的话，会通过事件通知父组件让其做出相应的变动。
prop.png
所以我们在父组件中定义一些变量，在子组件中调用这些变量使用。
如图：
image.png
我直接就用了数据绑定了，这样如果username发生变化的话，传递给子组件的username也会相应的发生改变。
子组件如何接受？子组件会声明一个叫做props的数组，这个数组是用来声明子组件期望从父组件中获取到的数据的名称。如图：
image.png
当然，也可以通过this.$parent来获取到父组件。
然后就是如何做到通过事件来传播子组件的变动呢？
首先，在父组件视角上，给其包含的子组件上自定义一个事件，然后该事件触发时会执行一个方法。如图：
father1.png
自定义事件change和触发change事件后执行的事件changeValue。在父组件中定义这个changeValue方法。
然后移步子组件视角，在子组件中，我们需要找到一个合适的时机（找不到确切的词汇了）去触发父组件的change方法。比如也是点击一个按钮，如图：
son1.png
son2.png
上图中，当点击修改按钮，会触发子组件中的changeName方法，在changeName方法中，通过
this.$emit('change') 通知父组件去触发change事件，也就是相应的调用了父组件中的changeValue方法了。
写到这里，好像还没有什么实质性的作用。再继续慢慢研究学习。
学习补充：
通过$emit方法可以给父组件传递参数啊！如图：
son3.png
这样，通过把子组件中自定义的私有变量username通过参数的形式传递给父组件绑定在change事件上的方法，那么父组件就可以拿到这个值了。
解惑
一、看Vue文档的时候，有一部分说要在某组件的根元素上加上.native。是什么意思呢？
假设现在定义了一个my-button组件。在点击这个button的时候，会有两个事件：
1、my-button组件内部定义的一些事件，必然触发
2、对于父组件而言，想要在点击 my-button的时候触发一些东西。
很明显，2中的事件是一个click原生事件，这时候我们需要在父组件这一层中的定义my-button的这个组件上，绑定一个原生的click事件，也就是用.native。如图，是在我的项目中，给路由组件绑定了一个原生的
click事件，如果不加上.native，是不会触发的。
click.png
网友评论