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
高级处理：列表过滤 ； 列表排序
11、事件处理：
绑定监听：*v-on:xxx="fun"
*@xxx="fun"
*@xxx="fun(参数)"
*默认事件形参: event
*隐含属性对象: $event
事件修饰符：*.prevent : 阻止事件的默认行为 event.preventDefault()
*.stop : 停止事件冒泡 event.stopPropagation()
按键修饰符：*.keycode : 操作的是某个 keycode 值的键
*.keyName : 操作的某个按键名的键(少部分)
12、表单输入绑定：
使用 v-model 对表单数据自动收集：text/textarea、checkbox、radio、select
13、vue生命周期分析：
-+-初始化显示：*beforeCreate()、*created()、*beforeMount()、*mounted()
-+-更新状态：this.xxx = value、*beforeUpdate()、*updated()
-+-销毁vue实例：vm.$destory()、*beforeDestory()、*destoryed()
14、常用的生命周期方法：
*created()/mounted(): 发送 ajax 请求, 启动定时器等异步任务
*beforeDestory(): 做收尾工作, 如: 清除定时器
15、常用内置指令：
*v-text : 更新元素的 textContent
*v-html : 更新元素的 innerHTML
*v-if : 如果为 true, 当前标签才会输出到页面
*v-else: 如果为 false, 当前标签才会输出到页面
*v-show : 通过控制 display 样式来控制显示/隐藏
*v-for : 遍历数组/对象
*v-on : 绑定事件监听, 一般简写为@
*v-bind : 强制绑定解析表达式, 可以省略 v-bind 简写为：
*v-model : 双向数据绑定
*ref : 指定唯一标识, vue 对象通过$refs 属性访问这个元素对象
*v-cloak : 防止闪现, 与 css 配合: [v-cloak] { display: none }
16、自定义指令：
*注册全局指令：
Vue.directive('my-directive', function(el, binding){ el.innerHTML = binding.value.toupperCase()
})
或
// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
*注册局部指令：
directives : {
'my-directive' : {
bind (el, binding) {
el.innerHTML = binding.value.toupperCase()
}
}
}
*使用指令：
v-my-directive='xxx'
网友评论