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
高级处理:列表过滤 ; 列表排序