vue

1、使用vue的好处
（1）减少DOM操作
（2）提高浏览器渲染效率
（3）双向绑定，不必关注DOM，只需关注业务逻辑

2、MVVM框架
M——数据层
V——视图层
VM——前两者的调度者，核心层

3、Vue实例属性
（1）el——用于绑定要操作的DOM节点
（2）data——用于保存页面中的数据，代表M层
（3）

4、v指令
（1）v-cloak——配合[v-cloak]{display: none}使用，可以防止网速慢，导致脚本没有及时使能，而显示出插值表达式（ {{ }} ）的情况。（只有当脚本加载完，才会显示内容）
PS：插值表达式可以与文本节点并存。
（2）v-text——数据写在指令内，渲染时会把节点内文本全部替换。
（3）v-html——会识别字符串中标签，处理后再输出，渲染时会把节点内文本全部替换。
（4）v-bind——将表达式返回值赋值给某特性。
格式：v-bind:attribute="表达式" / :attribute="表达式"。
PS：（1）——（4）为单项绑定。
（5）v-model——将节点数据与实例数据进行双向绑定，只适用于表单元素。
（6）v-on——绑定事件
格式：v-on:eventName="函数" / @eventName="函数"
PS：事件可以附加功能。
.stop——阻止当前冒泡
.prevent——阻止默认行为
.self——只允许事件为自身触发，避开冒泡流
.capture——启用捕获流
.once——事件函数只会被触发一次，之后触发无效
（7）v-for——遍历对象或者数字。
PS：遍历对象时，格式为(值，键，索引) in 对象，后两者可选；
遍历数字时，首位为1。
（8）v-if——从DOM树上，创建或删除节点。
格式：v-if: 真/假
（9）v-show——从渲染树上，显示或隐藏节点，与display无异。
格式：v-show: 真/假

5、建议class特性引用一个对象，去为元素赋予class。例子如下：
:class="classObj"
data: {
classObj: {bg: true, text: false}
}

6、v-for遍历时，应该设置:key来标识每一项，key只能是数字、字符。

7、事件函数加括号后，开启传参功能。

8、使用vue devtools时，必须使用开发版本（vue.js），而不是生产版本（vue.min.js）

9、过滤器——对值进行处理后，再返回新值。
PS:（1）只能应用于插值表达式、v-bind表达式
（2）格式：原值 | 过滤器1 | 过滤器2...
（3）过滤器中的函数参数可以有多个，但是默认第一个参数为过滤原值
（4）优先调用私有过滤器

10、全局自定义按键修饰符（便于keyup使用）
格式：Vue.config.keyCodes.f2 = 113（随后使用keyup.f2）

11、全局属性名尾部没有S，私有属性名尾部有S。

12、全局自定义指令
格式：Vue.directive(指令, 钩子函数)
PS：（1）指令名不带v-，v-是用来启用指令的。
（2）钩子函数，就是官方规定命名的函数，函数体由开发者编写，标识函数触发的时机，默认第一个参数为el，实质为将要绑定该指令的dom节点。
（3）匿名的钩子函数，默认是为bind、update类型的钩子函数。

13、生命周期
（1）生命周期钩子 = 生命周期函数 = 生命周期事件
（2）创建实例、挂载DOM、更新DOM、销毁实例（各2个事件，共8个）

lifecycle.png

14、vue-resourse.js
作用：在Vue类中添加 $http对象，扩展请求功能。
PS：
（1）在使用脚手架时，配置config文件夹内容，可以解决跨域问题。
（2）全局配置域名时，url为相对路径。
（3）emulateJSON 设置为 true——解决Web服务器无法处理编码为application/json请求的问题。

15、过渡
（1）设置css类
.v-enter——进入阶段的开始
.v-enter-to——进入阶段的结束
.v-leave——离开阶段的开始
.v-leave-to——离开阶段的结束
.v-enter-active && .v-leave-active——只设置transition
PS：若前缀为v，则作用于没有设置name的 transition标签。
例：.test-enter只作用于<transition name="test"></transition>
（2）使用transition标签，将需要过渡的元素包裹起来，只能是直接的父子关系。
（3）过渡元素需要设置v-if，触发过渡事件。

16、动画
与过渡的使用方法差异不大。

17、搭配animate.css，丰富过渡和动画
在transition标签中，:duration用于设置时长，必须使用enter-class等特性，装载库提供的类名（优先级比上述的类名高）。

18、钩子函数（运用于过渡&&动画）
（1）可以脱离过渡动画，独立使用。
（2）常用于制作半场动画（单程）。
（3）enter、leave尾部，必须调用done函数，表示立即执行下个钩子函数。
（4）enter、leave内部，必须存在el.offsetwidth，是出现动画效果的关键。
（5）各钩子函数的主要作用
bofore-enter——初始帧，也起着重置作用
enter——末尾帧、控制等主要设置
after-enter——隐藏元素，为下次半场动画作铺垫

19、组件切换过渡
（1）双切换
v-if && v-else
（2）多切换
<component :is="comName"></component>
（3）存在多种切换模式，提供不同的过渡效果

20、其他过渡效果
appear特性——初始渲染的进场过渡
v-move指令——重排时，提供过渡效果

21、列表过渡
（1）<transition-group></transition-group>
（2）tag特性——为<transition-group>的子元素包裹一层标签，若不设置，则默认为span

22、状态过渡——各种情景都可以存在过渡，如数字、颜色、图像等。

23、组件化&&模块化
组件化：基于UI，适用于前端。
模块化：基于代码逻辑，适用于前后端。

24、全局组件
（1）创建全局组件
Vue.component( 'myCom', { template: '<h1></h1>' } )
（2）组件名转换
myCom对应<my-com>
（3）template必须是单独分支，只有一个根元素

25、局部组件
（1）创建局部组件
components: {
myCom: { template: '<h1></h1>' }
}

26、创建模板的其他方法（适用于全局、局部组件）
template值可以为一个选择器，在Vue实例作用的标签外，定义<template 选择器>

27、组件和实例的data区别
（1）概念
组件是可复用的，但组件之间的data是独立的。
实例data，在其作用域下，所有的元素共享其data。
（2）组件data例子
//以函数返回对象的形式，确保每个组件的data都是不同对象，占用不同的内存区。
data(){
return {
data1: xxx，
data2: yyy
}
}

28、父组件向子组件传值（props-down）
概念：局部组件可以读写实例的data；局部组件的template可以读写该组件的data，但只读该组件的props

props-down.png

29、子组件向父组件传值（event-up）
概念：this.$emit()可以带参，触发父组件的自定义事件。

event-up.png

30、父子通信&&兄弟通信
（1）refs数组，存放定义了ref特性的元素，以便读写子组件。
（2）on——兄弟之间

31、前端路由&&后端路由
（1）前端路由：单页应用中，通过改变hash值，来改变页面组件内容（无刷新）。
（2）后端路由：每个url，通过路由分发，对应服务器上不同的资源。

32、路由基本操作
（1）定义组件。
（2）创建VueRouter实例，定义路由规则。如：
const routerObj = new VueRouter({
routes: [
{ path: '#/route1', component: 组件对象1 },
{ path: '#/route2', component: 组件对象2 }
]
})
（3）在Vue实例中，定义路由。如：
const vm = new Vue({
router: routerObj
})
（4）创建<router-view>占位符，若url中hash值相匹配，则该处渲染相应组件。

33、<router-link>更改路由
（1）<router-link>默认渲染为<a>，可以通过tag特性，更改渲染产出，且保持 to链接。
（2）定义 to='/router1'特性，链接hash值。
（3）当前路由对应的<router-link>会自动赋予.router-link-active类。

34、路由重定向
//根路径跳转到route1
{ path: '/', redirect: '/route1' }

35、路由传参
概念：每个已匹配路由的组件中，都有一个route.query中。
例：
<router-link to="/route1?id=666&name=abc"></router-link>
const router = new VueRouter({
routes: [ { path: '/route1', component: 组件对象1 } ]
})
（2）params
特点：需要更改路由规则，以 /: 的方式，参数存储在$route.params中。
例：
<router-link to="/route1/666/abc"></router-link>
const router = new VueRouter({
routes: [ { path: '/route1/:id/:name', component: 组件对象1 } ]
})

36、路由嵌套
概念：路由切换组件后，当前组件中存在下层路由，继续切换内部小组件。
实现：路由规则中，定义children数组，包含下层路由规则。
例：
const router = new VueRouter({
routes: [{
path: '/route1',
component: 组件对象1,
children: [
//对应 /route1/childRoute1
{ path: 'childRoute1', component: 子组件对象1 },
//对应 /route1/childRoute2
{ path: 'childRoute2', component: 子组件对象2 }
]
}]
})

37、

发表评论（本地存储，content/name的列表，自动刷新列表）
！！！！！！实践一下