Vue 扩展插件、双大括号表达式、强制数据绑定、绑定事件监听、计算属性、监视属性、计算属性高级、class 与 style 绑定、条件渲染、列表渲染

1、Vue 扩展插件：

*vue-cli: vue 脚手架

*vue-resource(axios): ajax 请求

*vue-router: 路由

*vuex: 状态管理

*vue-lazyload: 图片懒加载

*vue-scroller: 页面滑动相关

*mint-ui: 基于 vue 的 UI 组件库(移动端)

*element-ui: 基于 vue 的 UI 组件库(PC 端)

*它本身只关注 UI, 可以轻松引入 vue 插件或其它第三方库开发项目

2、双大括号表达式

*语法:{{exp}}

*功能: 向页面输出数据

*可以调用对象的方法

3、强制数据绑定：

指定变化的属性值

写法：v-bind:xxx='yyy'   //yyy 会作为表达式解析执行

简介写法：:xxx='yyy'

4、绑定事件监听：

绑定指定之间名的回调函数

完整写法：v-on:keyup='xxx'

v-on:keyup='xxx(参数)' v-on:keyup.enter='xxx'

简洁写法：@keyup='xxx' @keyup.enter='xxx'

5、计算属性：

*在 computed 属性对象中定义计算属性的方法

*在页面中使用{{方法名}}来显示计算的结果

6、监视属性：

*通过通过 vm 对象的$watch()或 watch 配置来监视指定的属性

*当属性变化时, 回调函数自动调用, 在函数内部进行计算

7、计算属性高级

*通过 getter/setter 实现对属性数据的显示和监视

*计算属性存在缓存, 多次读取只执行一次 getter 计算

8、class 与 style 绑定：

class/style 绑定是专门用来实现动态样式效果的技术

class绑定：*:class='xxx'

*表达式是字符串: 'classA'

*表达式是对象: {classA:isA, classB: isB}

*表达式是数组: ['classA', 'classB']

style绑定：:style="{ color: activeColor, fontSize: fontSize + 'px' }"（其中 activeColor/fontSize 是 data 属性）

9、条件渲染：

指令：v-if 与 v-else及v-show

注意点：如果需要频繁切换 v-show 较好

当条件不成立时, v-if 的所有子节点不会解析

10、列表渲染：

指令：数组: v-for / index ； 对象: v-for / key

更新显示：删除 item ； 替换 item

高级处理：列表过滤 ； 列表排序