Vue.js的使用经验

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