Vue.js的使用经验

Vue.js的意义

解耦了视图与数据
可复用的组件
前端路由
状态管理
虚拟DOM

Vue提供了很多实例属性与方法，都以$开头

$el可以访问挂载Vue实例的元素。
$set可以修改Vue实例的数据内容
$event可以访问原生DOM事件
$emit()触发事件
$on()监听子组件事件
$parent访问组件的父组件
$children访问组件的子组件
$refs可以取得子组件的索引名称
$nextTick下一个事件循环
$mount()可以手动挂载一个未挂载对实例，Vue.extend可以创建一个实例
$route访问路由信息
$router路由实例对象
$store获取Vuex中的仓库store
$options可以获取定义在data外的数据和方法

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访问对应子组件)，Vuex

自定义指令

注册自定义指令分为全局注册和局部注册

//全局注册
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(上一个虚拟节点)

路由跳转

vue-router有两种跳转页面的方式

使用内置的<router-link>组件，最终会被渲染为<a>标签
使用router实例的方法（$router有push(可以跳转页面),replace(替换掉当前页面，不会向history添加新纪录),go(可以前进或者后退页面)）

vue-router有两个导航钩子

beforeEach(在路由改变之前触发)
afterEach（在路由改变之后触发）

导航钩子函数有3个参数

to(要进入的路由对象)
from（即将离开的路由对象）
next（调用此方法后才能进入下一个钩子）

状态管理与Vuex

数据保存在state字段内并且只能读取，可以通过$store.state取得

const store = new Vuex.Store({
    state:{
        count : 0
    }
})

mutations可以修改state内的数据,通过this.$store.commit(方法名)方法可以执行mutations,通常在mutations处理同步的数据

mutations:{
    increment(state){
        state.count++;
    },
    decrease(state){
        state.count--;
    }
}

getter可以将组件写在计算属性中的内容进行封装,可以通过$store.getters访问

getters:{
    filteredList:state = >{
        return state.list.filter(item => item < 10);
    }
}

action可以异步操作state的数据,可以通过$store.dispatch触发,并且内部提交的是mutation，相当于异步中转mutation的操作

mutations:{
    increment(state,n = 1){
        state.count += n;
    }
},
    actions:{
        increment(context){
     　　   context.commit('increment');
    　　}
}

当项目足够大时，会用到modules将store分为多个store，每个store拥有自己的state,mutations,getters,actions