Vue脚手架

搭建Vue脚手架项目

默认安装nodejs 和 cnpm
安装脚手架

创建项目
vue create myapp (myapp为自定义项目名)
选择default(Babel,Eslint)
Babel: 是一个把ES6+语法转译为低版本浏览器所支持的ES语法的编译工具
ESlint: 是一个插件化并且可配置的 JavaScript 语法规则和代码风格的检查工具。ESLint 能够帮你轻松写出高质量的 JavaScript 代码

style上加scoped Css样式只作用当前单页面

兄弟组件之间传值的三种方式

1 vuex
2 子传父 父传子
3 在main.js中定义一个新的vue实例并导出，在子组件1中导入该实例，使用该实例的$emit方法自定义事件并发出数据，在子组件2中监听该自定义事件，并接受该值(案例是用一个回调函数以传参的方式获取)

父子组件通信的几种方式

1 在子组件标签上自定义属性并传值，子组件内部使用props接收
2 回调函数 在父组件定义一个回调函数 this.num=2 并且把num变量和这个回调函数传给子组件，子组件接收后就可以在子组件内部调用父组件函数
3 $parent $children属性
在子组件中 this.$parent.num访问父组件的num变量
在父组件中 this.$children[0].num访问第一个子组件的num变量

4 provide inject

在父组件中定义变量，子组件获取并使用
5 $attrs $listeners 实现父孙组件通信
6 $ref 在子组件上注册ref 之后使用$refs.子组件.属性 来获取属性和方法

vue 组件中 data为什么必须是一个函数

避免组件中的数据互相影响。
组件中的data写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份data，就会造成一个变了全都会变的结果。