Vue.js的意义
- 解耦了视图与数据
- 可复用的组件
- 前端路由
- 状态管理
- 虚拟DOM
Vue提供了很多实例属性与方法，都以$开头
- $el可以访问挂载Vue实例的元素。
- $set可以修改Vue实例的数据内容
- $event可以访问原生DOM事件
- $emit()触发事件
- $on()监听子组件事件
- $parent访问组件的父组件
- $children访问组件的子组件
- $refs可以取得子组件对索引名称
- $nextTick下一个事件循环
- $mount()可以手动挂载一个未挂载对实例，Vue.extend可以创建一个实例
Vue常用的指令
- v-model
- v-html(输出HTML而不是纯文本)
- v-pre（使用 {{}}时跳过编译过程）
- v-if v-else-if v-else(条件渲染)
- v-show(CSS属性切换)
- v-bind(动态更新HTML元素上的属性)
- v-on
- v-cloak(在简单的项目中可以解决初始化慢导致页面闪动的问题)
- v-once(组件只渲染一次)
- v-for(可以遍历数组和对象的属性)
绑定class的几种方式
- 给v-bind:class设置一个对象，这个对象可以有多个属性，当某个属性为true时，元素便拥有该类名。
- 给v-bind:class绑定一个数组，类名为数组元素对应的值。
- 对象语法和数组语法也可以使用在组件上，但该组件的最外层必须是根元素，否则失效。
绑定内联样式的方式和绑定class相似
修饰符
Vue支持在@绑定的事件后加修饰符来达成某种特定功能
- .stop（阻止冒泡）
- .prevent（不再重载页面）
- .capture（使用事件捕获模式）
- .self（只在事件发生在元素自身上才触发事件）
- .once（只触发一次）
- .lazy(用在输入框中，会转变为在change事件中同步)
- .number(用在输入框中,可以将输入变为Number类型)
- .trim(用在输入框中,可以过滤输入的首尾空格)
组件通信
- 父组件向子组件传值：props
- 子组件向父组件传值：自定义事件(v-on监听子组件，在子组件内用$emit(‘事件名’,传递的数据)触发事件)
- 非父子组件传值：中央事件总线(bus)，父链和子组件索引(在子组件标签上定义ref的值，父组件中使用this.$refs访问对应子组件)
自定义指令
注册自定义指令分为全局注册和局部注册
//全局注册
Vue.directive(‘command‘,{
//指令选项
})
//局部注册
var app = new Vue({
el:‘#app‘,
derective:{
command:{
//指令选项
}
}
})
指令选项由几个钩子函数组成
- bind(指令第一次绑定到元素时调用)
- inserted（被绑元素插入父元素时调用）
- update（被绑元素更新时调用）
- componentUpdated（被绑元素所在模版完成更新周期时调用）
- unbind（解绑时调用）
每个钩子函数都有几个可用参数
- el(指令所绑定元素)
- binding(一个对象，包含name(指令名)，value(指令的绑定值)，oldValue(前一个绑定值),expression(绑定值的字符串形式),arg(传给指令的参数)，modifiers(修饰符的对象))
- vnode(虚拟节点)
- oldVnode(上一个虚拟节点)
