一、环境搭建
最快速最便捷的方式是通过vue脚手架vue-cli来搭建
也可以通过指定版本号来下载 cnpm i -g @vue/cli@3.1.1
如果vue的版本不一致，可以通过uninstall来卸载重新安装 npm uninstall -g @vue/cli
二、创建并运行项目
三、模板语法
模板语法出自“胡子语法”,在props属性或者data方法里面定义变量，然后在模板中用{{变量名}}来使用这个变量，或者用v-html指令来使用包含html标签的变量，像class、id等特性得用v-bind:id(:id)/v-bind:class(:class)来使用变量，同时在模板中还可以使用表达式。
3.1 文本
3.2 html标签
3.3 class、id等渲染
3.4 语句
3.5 指令
指令指的是带有v- 前缀的特殊attribute,vue中常见指令有v-if/v-else、v-show、v-hide、v-once、v-bind、v-on、v-for。
还有一个特殊的用法是自定义指令，建一个js文件，引入vue，使用vue.directive方法来创建一个自定义指令，directive方法传入两个参数，第一个参数为自定义指令名，第二个参数为对象，对象里可以使用钩子函数（binding、inserted、update、componentUpdated、unbind），这些钩子函数有四个参数（el、binding、vnode、oldVnode）。使用的时候引入这个js文件，然后在模板中通过v-指令名来调用。如下所示：
3.6 修饰符
3.7 缩写
v-bind:href 可以写成 :href | v-on:click 可以写成 @click
四、样式与遍历
4.1 计算属性 使用于具有依赖关系的数据监听
一般当有数据变化会带来其他数据变化的时候，是用回调函数来操作的，当某某变完改变另一个，在vue中则是由计算属性来完成，相当于vue自己的回调。
4.2 类与样式
4.2.1 数组方式：适合较少的class
4.2.2 对象方式：适用于比较多的class名或者动态class
可以直接赋值给class一个对象，属性值是字符串也就是class名，属性值是定义的变量为布尔值；也可以赋值给class一个变量，这个变量是在props传过来的或者data方法中定义的一个对象变量，同样的这个对象的属性名是class名，属性值为布尔值。如下所示
4.2.2.1 直接在class里面写对象
4.2.2.2 对象变量的方式
4.3 条件&列表渲染
条件：v-if/v-else/v-else-if 用于根据条件来判断是否渲染一块内容
数组列表渲染： v-for指令
也可以引用数组的下标
对象列表渲染： v-for也可以用来渲染对象，如果直接传一个参数，那就是对象属性值，如果用（value,key）这样的方式来循环渲染，第一个参数value是对象属性值，第二个key是对象属性名
对象渲染一个参数
分组用法 复杂模板的分组条件处理的方式
五、事件处理
5.1 定义与缩写
vue中通过v-on:来监听dom事件，比如v-on:click
v-on可以用简写@来代替
5.2 内联写法
除了上面的直接给v-on事件绑定一个方法外，还有一种内联的写法来通过：方法名(参数1、参数2)，这种方式来调用，参数1就是 传递的参数，参数2是触发事件的dom元素。如下所示：
5.3 事件修饰符
vue中提供了修饰符来实现之前的event.preventDefault()这种功能。常见的修饰符有.stop(阻止单击事件继续传播) 、.prevent(阻止默认行为)、.once(只执行一次)、.self(只有触发元素是自身时才调用函数)、.passive(不阻止默认行为，所以不可以与.prevent同时使用)、.capture(先在此处理，再交由内部元素处理-----有点懵啥意思啊)。
如下：因为button是div的子元素，点击button触发fn1,事件冒泡也会触发父元素div的点击事件调用say这个函数，但是因为用了.stop这个修饰符，阻止了单击事件继续传播，所以这里点击button的时候查看控制台只会看到输出222，不会调用say这个函数。
六、组件
6.1 props:组件的参数传递 父组件传给子组件
在父组件中定义一个变量posts，这个变量是一个数组，父组件中引用了子组件child，这里还用v-for指令进行了循环，将循环的每一个元素设置为post属性，传给了子组件child
6.2 自定义事件 ：子组件向父组件通信
上面的是父组件向子组件通信，子组件向父组件通信可以通过自定义事件的方式来进行
6.3 slot：插槽在组件抽象设计中的应用
如果希望父组件调用子组件中有一部分父组件调用的不同则显示内容不同，这里可以使用slot插槽来实现
如果想要使用多个插槽，可以在子组件中放置插槽的时候给插槽添加name属性，父组件中调用子组件的时候放置插槽替换内容的时候，在替换内容里通过slot=“插槽的name值”就可以了。
七、路由
通过vue create 项目名来创建的项目并没有自动配置使用vue-router,所以当项目需要使用的时候，需要如下步骤：
1、下载vue-router
2、新建pages文件夹，并编写测试页面组件a.vue和b.vue
3、创建router.js文件，创建vue-router实例，并且在vue中使用vue-router
4、在main.js中将这个vue-router实例挂载到vue实例上去
5、这时候会发现控制台会报runtime的错误，这是因为项目默认是只能实时运行而不同模板渲染的，想要通过路由必须要在vue的配置文件中将runtimeCompiler选项设置为true,但是项目中并没有这个配置文件，所以得手动创建一下vue.config.js文件，并且配置一下。如下：
6、修改public文件夹下面的index.html，引入router-view组件和router-link组件，router-view是用来占位显示router-link中的to属性指向的页面，每当点击router-link组件，router-link的to属性中指向的页面就会显示在router-view的位置，注意这个to属性配置的路径得和上面3的vue-router实例中配置的routes数组值得对象的path属性相同。
八、vuex基础
8.1 基础使用
1、下载vuex
2、新建vuex的文件，在vue中使用vuex，并创建vuex的Store实例，配置state、mutations、actions等然后导出
3、在main.js中将vuex的Store实例挂载到全局vue实例上去，这样全局都可以使用了
4、组件中使用
8.2 vuex模块化
vuex中可以使用modules来对vuex的状态进行模块化管理
1、在store文件夹下面创建modules文件夹，并编写money模块和count模块，并将其导出
2、在store的index.js的vuex的store实例中的modules属性中导入各个模块
3、组件中使用state中的变量需要用模块的state变量名的方式，触发方法需要在前面指定是属于哪个vuex模块的
4、传参在组件中传参，在mutations和actions中声明一下参数
