vue怎么学

如果你是 Vue 开发新手，可能已经听过很多行话术语，比如单页面应用程序、异步组件、服务器端渲染，等等。你可能还听说过与 Vue 有关的一些工具和库，比如 Vuex、Webpack、Vue CLI 和 Nuxt。

浸没在术语和工具的浩瀚海洋中难免会令人感到沮丧，但其实并不是只有你一个人有这种感受，所有经验水平的开发人员都会持续感觉到这种莫名的压力。分享一张图给你看看

基础知识：

vue的生命周期： beforeCreate/created、 beforeMount/mounted、 beforeUpdate/updated、 beforeDestory/destoryed

vue常用指令： v-for、 v-bind（缩写形式 :prop）、 v-on(缩写形式 @click=’sss')、 v-if/v-else/v-else-if、 v-model、 v-once、 v-html、 v-show

vue自定义组件： Vuecomponent(‘componentName',{ props:[‘p1’,’p2’], template: ‘<li>{{ p1 }}</li>'})

vue常用实例方法和属性： data/$data、 methods/$methods、 $el、 computed(计算属性)、 $watch、 $set、 $event、 $emit

如果需要更新的属性需要缓存，则使用计算属性的方式，否则可以使用 methods里的方法来更新属性（ methods里的方法每次重新渲染都会执行）

计算属性默认提供了 getter，你还可以给它设置 setter

当你数据变化是异步或者开销较大时，可以使用 watch侦听器来响应数据的变化

v-bind:class的值可以是一个对象，可实现类似 react中 classnames模块的功能

自定义组件上的 class会被渲染拼接到 template的根节点的 class属性上（自定义组件上可使用 v-bind:class来做class的判断显示逻辑）

v-bind:style可以用来绑定内联样式，这个内联样式的值可以由一个对象来定义（类似css in js的模式）,且可以被定义为数组(多个样式对象)

v-bind:style可以使用多重值的形式： <div:style=“display:[‘-webkit-box’,’-ms-flexbox’,‘flex']"></div>

v-if/v-else/v-else-if的时候，可以用key来管理可复用的元素

v-if是’真正’的渲染，它会确保在切换条件过程中条件块内的元素的事件监听器和子组件适时的销毁和重建

v-if是惰性的，初始为假，什么也不做，直到为真的时候才渲染元素

v-show总是渲染元素，只是简单的进行切换

v-if的切换开销大， v-show则是初始渲染开销大，频繁切换使用 v-show，运行时经常改变则使用 v-if

v-if和 v-for一起使用时， v-for的优先级更高

v-for可遍历数组，第二个参数是索引

v-for可遍历对象，第二个参数是 key，第三个参数是索引

v-for和 <template>搭配可减少渲染次数

v-for和自定义组件使用时，需要使用 props来传递值

尽可能的为遍历子元素加上 key，获得渲染优化

数组变异方法： push/pop/unshift/shift/splice/sort/reverse改变原始数组

数组非变异方法： filter/concat/slice 不改变原始数组，总是返回新数组

Vue不能检测到数组索引赋值（使用 vm$set解决）和修改 length长度赋值(使用 splice解决)的情况

Vue不能检测对象属性的添加和删除(使用 vm$set或 Objectassign)

is=“todo-item”这种属性的写法比较适合DOM模板

事件修饰符，它们可串联使用： stop、 prevent、 capture、 self、 once、 passive(尤其适合移动端)

passive不用同时和 prevent使用，后者会被忽略

按键修饰符: enter、 tab、 delete、 esc、 space、 up、 down、 left、 right

系统按键修饰符: ctrl、 alt、 shift、 meta(⌘|⊞|◆)、 exact(允许精确控制系统修饰符组合键触发)

鼠标修饰符： left、 right、 middle

v-model会忽略表单元素的 value、 checked、 selected，仅仅使用实例中的数据作为数据源

表单事件修饰符： lazy、 number、 trim

组件是可复用的vue实例，具有vue实例大多数属性和方法

组件可复用，每个组件有独立的空间

组件上的data必须是一个函数，这样做避免影响了其他组件

通过 Vuecomponent()全局注册的组件可在其被注册后的任何通过 newVue()创建的实例所使用，包含其组件树中的所有组件

通过插槽 <slot>分发内容(其实就是类似于react的children)

动态组件 <component>配合属性 is来实现

解析DOM模板时需要注意下可能会有不生效的情况，需要使用is来传递组件

数据双向绑定，组件化，单文件组件

全局api： vueextend 、 vueset
实例选项: new Vue() 、 el 、 data 、 compents 都是vue实例选项
实例属性和方法： vm$on 、 vm$data 、 vm$destroy() 在$都是vue的实例和方法
指令： directive
内置组件： <components></compontents> 、 <keep-alive></keep-alive> 、 <router-view></router-view>

数组中不可用的方法：slice，concat；
直接修改数组list[i] = 值，不可以这样直接修改；
Vueset(数组，索引，{值}) vue的全局方法set来更改数组的某一项的值

标签属性和条件渲染
标签属性： v-bind：href='link"; 等效于 :href="link" 动态绑定；
条件渲染： v-if 、 v-else 、 v-show ；
数据绑定： {{}} 、 v-html (原始-HTML)、 v-text ；

事件绑定-内置事件绑定，自定义事件绑定
v-on:click="run" 等效于 @:click="run" 事件绑定；
自定义事件绑定： 父组件自定义事件
<my-compented @my-event='toggle'></my-compented>
子组件触发 my-event 自定义事件； this$emit('my-event', opation)；
父组件执行toggle 函数；

计算属性和数据监听
computed选项 -计算属性：根据我们调用属性来跟新，调用的属性没有变更，我们computed选项里面的方法读取的是缓存；

页面内容响应数据v-once
如果你需要页面内容响应数据的变化，就不加v-once。
如果你需要页面内容渲染后，不随数据的变化而变化，就加上这个。
对于一些固定不变的组件，在调用时我们可以加上v-once，只在第一次渲染执行，保存数据在内存中，后面再调用直接从内容中提取，提高执行效率。

应用

组件的通信
<p:is = "动态的组件名"></p> 等同于 <动态的组件名></动态的组件名> 动态绑定组件
注：Vue有个单项数据流的概念：即父组件传递给子组件的参数，子组件不能直接修改；防止引用类型参数被修改后，如果父组件中其他地方也使用了此参数会受到影响。

子组件 props 接受的两种形式：
数组： ['first-name','two-name'] ，从父组件传递两个属性值；
动态展现： {{firstName}}
对象：

slot：插槽
父组件插件里面定义的内容放到子组件 slot 中：

子组件

vue高级功能--过渡和动画

自定义指令：

使用 vue-cli的优势：
成熟的vue项目架构设计；
本地测试服务器；
集成打包上线方案 webpack

npm install vue-cli -g ：全局安装vue-cli
vue init webpack my-project ：初始化项目
npm install 安装项目依赖

npm run dev ：在localhost启动测试服务器；
npm run bulid ：生成上线目录（部署）

a、安装 vue-router

b、配置路由

6、关闭eslint
dev模式下，默认会做eslint检测，若要关闭，打开 config/indexjs ，设置 useEslint: false ，${}占位符，多行字符串

7、生命周期

8、支持es6
es6中很多新特性很好用class、promise、then、catch、（数组转换符号）、函数设置参数默认值等
a、安装babel-polyfill

b、在入口mainjs文件当中引入:

c、找到build文件夹下的webpackbaseconfjs

文章参考： 慕课网-欧米雪儿lyy

---