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
 
posted @ 2020-10-24 20:10  裏Arashi  阅读(97)  评论(0)  编辑  收藏  举报