Vue基础,简单的指令，webpack3升级到webpack4

Vue 服务端渲染，如果不是先服务端渲染的话会有两个问题
无法进行seo,
等待时间较长，等待js的加载。白屏时间比较长
WebpackMerge 是用来合并webpack配置项的  
Vue-loader 的配置：
Vue-style-loader 是当我们编写vue文件的时候对css的修改进行热加载功能
Npm I rimraf – D 来删除已经打包的九文件
ExtractCss 正式环境打包的时候需要把css单独打包
PostCss: 全局css 
HotReload: 热重载的功能是否开启，与vue-style-loader有区别
Loader: 自定义模块
PreLoader: 比BabelRoader还要先加载的模块
CssModules:  编译css模块  
使用eslint 格式化代码：
需要安装的包： eslint-config-standard , eslint-loader  eslint-plugin-import  eslint-plugin-node  eslint-plugin-promise  eslint-plugin-standard  eslint-plugin-vue
使用eslint命令自动修复代码："eslint --fix --ext .js,.vue src test/unit"；
安装npm husky 包提交代码需要通过eslint的验证
Webpack3升级到webpack4
先卸载 webpack webpack-dev-sever  webpack-merge 
然后安装 webpack webpack-dev-server  webpack-merge  webpack-cli
Vue实例的属性：
$data模板的数据  $props用于组件传递值 $el用于挂载根节点  $options实例的操作  $rootvue实例的根  $children vue实例的子组件 $slots  $scopeSlots vue的插槽 $refs vue的模板对象  $isServer是否为服务端
Vue实例的方法：
Watch: 用于监听两个值，可以拿到一个新值和一个旧的值，销毁watch的方法，如果通过watch会自动销毁， 如果是方法的会，会发挥一个值，在调用改方法即可销毁watch（）方法
$On: 监听事件
$Emit: 触发事件
$once: 只是监听一次事件
$forceUpdata: 强制组件重新在渲染一次
$set: 给属性赋值
$delete: 删除属性
$nextTick:在dom节点下一次更新的时候起作用
Vue对象的生命周期：
BeforeCreate: vue组件一创建就会加载，不要修改数据，没有reactivity
Created: vue组件一创建就会加载
BeforeMount: 当把节点挂载的时候调用，服务端渲染不被调用，服务端没有dom的环境
Mounted: 当把节点挂载的时候调用
BeforeUpdate: 当数据发生变化时候调用
Updated: 当数据发生变化时候调用
Activated: keepAlive 中用到，是否使用缓存改组件
Deactived:
BeforeDestory: 组件销毁的时候执行
Destroyed: 组件销毁的时候执行
RenderError: 开发的时候调用，本组件渲染出现错误才会被调用
ErrorCaptured: 捕获向上冒泡的错误
Computed和methods的区别：
Computed: 是一个对象方法，（get方法），通过object.defineProperty 去set的方法
Methods: 是一个对象方法，
Computed是一开始执行，如果页面数据发现改变重新渲染页面时候，computed不会重新加载，而methods方法会重新加载一次，computed只有他依赖的值发生改变的时候，才回去重新计算一次，从而computed更节省内存开销
Watch: 监听值的变化，要想立马执行，可以使用handle方法和immediate 为true的属性，监听多层数据的时候可以有两种方法：1.使用deep为true的属性，但是内存开销大， 2.使用字符串用点的时候
Vue的原生的指令：
v-text： 绑定值相当于{{}}
v-html: 用于渲染HTML里面的值
v-show: 相当于css里面的display:none,内存开销小
v-if: 根本是不把节点不放在dom里面的流里面，是动态增删节点
v-else： v-else-if：是和v-if搭配的
v-for: 用于遍历数组的指令，v-for和v-if存在先后的顺序，v-for比v-if的优先级高，v-for中key的作用是为了遍历的时候每一个dom的节点都不同，下一次遍历的时候可以从缓存中取，key尽量用item，不要用index,
v-on： @绑定一个事件
v-bind: 绑定值
v-model: 绑定控件的值
v-pre: 不解析里面的表达式
v-once：数据绑定只渲染一次
vue组件：
父组件往子组件传递值：用props，有3钟书写方式，props:['aaa'],  props:{ aa: boolean} ,props:{validator(value){return typeof value ==='boolean'}}
子组件传父组件用：emit 
组件扩展：extend
extend的使用方法，可以覆盖属性和方法， 除了覆盖props 要用propsData l来覆盖外，其他的都是原来的一样，
extend的应用场景： 开发了一个比较完善的组件，但是在你的业务逻辑中需要新加功能，所以可以通过继承来实现
父组件：parent
在子组件获取父组件的名称要使用： this.$parent.$option.name ,  在子组件可以使用this.$parent.xxx 来修改父组件的某个属性的值
插槽： solt
实现页面的继承关系，在solt声明的地方，即可实现页面继承
插槽分为普通插槽喝具名插槽，还有作用域插槽：
作用域插槽有他自己的作用域，可以通过solt-scope来接收通过组件内部传出来的值 
爷孙组件通信：provide （）{grandPa: this, },provide初始化的时候，vue的实例对象还没有初始化完成， 在孙子组件那里可以用 injected:[grandPa]; 将来可能不推荐使用
路由：vue-router
 model: "history",默认为hash路由
base: '/a/',  是作为路径的基路径，在所有的路径中都会加上一个base路径，但是base不是强制性的
linkActiveClass: 'active-link' ,用于全局写routerLink的样式
linkExactActiveClass: 'exact-active-link':
scrollBehavior (to,from,savedPosition)=>{ if(savedPosition) {return savePositin}  else { return {x;0,y:0}}  },  记录页面滚动条的位置,
parseQuery(query){}: 获取路径上的参数转成对象
stringifyQuery(obj){} :获取路径上的数转成字符串
fallback: true  不是所有浏览器都支持model为history的模式，如果设置为false,那单页应用也就变成多页应用了。
name: 用于描述组件的名称
meta: 可以用于seo排序，拿到路由对象的时候可以拿到
chikdren:[],子路由
<transition name='fade'>
props: 可以是对象，也可以是函数，主要的是吧路由里面的参数通过组件的形式传到对应的组件当中，从而实现组件的解耦