分两部分
一个是HTML页面里面直接写vue实例
一个是通过脚手架搭建vue环境
脚手架分两部分一个是包含webpack
一个是不包含webpack
不包含webpack是vue-cli3.0以后
也是在说明webpack3.0或者webpack4.0
配置脚手架是必须学的
不管怎么搭建怎么配置核心是不会变的

而且你有没有发现跑起来的时候却是服务器运行nodejs
事件异步http请求 promise 定时器 async与await等js的知识显得更重要
axios封装的请求库 结合async与await 封装api
采用nodejs的koa按需模块web框架
或者express集成的web框架

还有包含http协议的知识与跨域以及数据库操作mysql或者MongoDB也是必不可少的

运行时的变量，执行函数时的上下文，作用域，作用域链，闭包，垃圾收集机制，标记清除，计数清除，以及基本或引用数据类型的栈与堆，函数的构造原型知识。
从浏览器如何发送请求三次握手单向请求响应页面 以及网页优化等待加载时间，js，css，HTML，img，等等
web存储indexedDB cookie localstorage sessionstorage 离线缓存manifest
等等
上面的知识都是你在运用vue的时候需要掌握熟练使用的
至于ui组件，其实看着文档学几天直接可以用了

MVVM模式
视图与数据的交互通过vue连起来
下面是脚手架的.vue组件实例

<template>
  <div>
  </div>
</template>
<script>
export default {
}
</script>
<style>
</style>

script:“vue-loader”: “^15.9.2”,
vue-loader15.0的版本需要在webpack里面设置一个插件
用来把匹配的预编译器规则应用于script代码里面
const vueload=require(“vue-loader/lib/plugin”)
style:“vue-style-loader”: “^3.0.1”,
用来编译css，以及扩展的less，sass，
相关的私有化，模块化
template对应 “vue-template-compiler”: “^2.5.2”,
虽然你可以在template里面写原生的标签HTML，但是渲染的原理却有区别，
模板里面有指令有文本绑定的数据有原生写法的HTML标签

把{{}}双括号的数据通过data收集的依赖get与set编译成存文本 如果要编译原生HTML需要使用v-html指令
这是this.$data显示的东西

{__ob__: Observer}
a: (...)
red: (...)
__ob__: Observer
dep: Dep {id: 9, subs: Array(0)}
value: {__ob__: Observer}
vmCount: 1
__proto__: Object
get a: ƒ reactiveGetter()
set a: ƒ reactiveSetter(newVal)
get red: ƒ reactiveGetter()
set red: ƒ reactiveSetter(newVal)

将@click事件语法糖结合script里面的methods编译成js
把原生写法的HTML标签通过虚拟节点的对象写法在第一次编译的时候转化成真实的dom节点，第二次及以后的加载通过diff算法对比前后节点的差异来进行替换，diff算法一层层的对比，从根节点到子节点，对应位置的对比把改变进行替换，最终渲染成真实节点
三种vue实例的构建方法

new Vue({
  el: '#app',
  router,
  render(h) {
      return h(
          App
      )
  },
})
new Vue({
  el: '#app',
  router,
  component:{App},
  template:`<App/>`
})

new Vue({
  router,
  component:{App},
  template:`<App/>`
}).$mount("#app")

构建vue实例用来渲染视图
从html的直接写
到模板，到渲染函数其实都是最终以渲染函数来进行呈现
如果你学过react的函数组件与类组件
那对于jsx写法一定不会模式
其实render渲染函数都是一样的核心 虚拟节点diff算法减少频繁的dom操作

最终会把template script 都写成一个文件通过script链接注入网页
而style样式会被放置在style页面标签里面，当然如果你进行了插件的配置
比如分离
const minicss=require(“mini-css-extract-plugin”)
也会以链接的形式呈现

当合并成一个js文件那么变量名methods与data的冲突就无法避免
所以千万不能重复
原本vue的本意就是减少节点的操作，所以js原生的document就尽量用
this.$refs替换

下面是常用api

.$data//这是data的数据get set 还有observer
    vm.$props//这是父组件传参给子组件
    vm.$el//这是dom节点的信息
    vm.$options//这是在组件里面自定义的数据
    vm.$parent//这是父节点信息
    vm.$root//根节点
    vm.$children//孩子节点
    vm.$slots//插槽节点
    vm.$scopedSlots//插槽作用域
    vm.$refs//dom的操作
    vm.$attrs//没有在props里面的父组件传参
    vm.$listeners//父级v-on指令事件函数的集合

指令
一点需要注意v-if 与v-for别一起用
优先级v-for高

v-text
v-html
v-show
v-if
v-else
v-else-if
v-for
v-on
v-bind
v-model
v-slot
v-pre//跳过指令编译
v-cloak
v-once

v-if="bool"指令数据的改变会直接影响dom节点
自定义的指令

Vue.directive('my', {
  bind: function () {},//加载一次
  inserted: function () {},//插入
  update: function (a,b,c) {},//更新
  componentUpdated: function () {},//更新完成
  unbind: function () {}//解绑
})

a是dom节点信息
b是指令信息
c是虚拟节点信息