Vue相关概念及解释(2)

ErvinHowell
441 阅读4分钟

Vue相关概念及解释(1)

Vue中data为什么是一个方法

export default {
    data() {
        return {
            //boody...
        }
    }
}
  • Vue官方解释

当一个组件被定义，data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！通过提供 data 函数，每次创建一个新实例后，我们能够调用 data 函数，从而返回初始数据的一个全新副本数据对象。

  • 理解

Vue中组件是可复用的,组件一旦创建好，可能在多个地方同时调用，但是对于data不管你调用多少次，他们之间应该是互不干涉的，互不影响的；

如果将data设计成对象的形式，而对象又是引用类型，多个地方创建实例的话，无论哪个实例其实都是引用同一个内存地址，所以就会导致 无论修改哪个组件实例都会影响其他实例,这也是我们不希望看到的

所以: 组件中的data设计成函数的形式 每次创建组件实例 都会返回一份新数据，每份数据互不干涉，互不影响

vue如何添加自定义指令

局部自定义指令

<template>
  <div class="home">
    <!-- 指令使用 v-focus -->
    <input type="text" v-focus>
  </div>
</template>

<script>
export default {
  name: "home",
  directives: {
    focus: {
      // 指定定义
      inserted(el) {
        el.focus();
      }
    }
  }
}
</script>

全局自定义指令

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

指令相关概念

Vue指令 钩子函数

  • bind:只调用一次，指令第一次绑定到元素上时调用,可以进行一次初始化设置
  • inserted: 被绑定元素插入父节点时调用(仅保证父节点存在，但不一定已经插入文档中)
  • update:所在组件的VNode更新时调用，但是可能发生在其子VNode更新之前,指令的值有可能更新, 有可能没有更新,不过可以通过更新前后的值来忽略不必要的模板更新
  • componentUpdated:指令所在组件的VNode及其子VNode全部更新后调用
  • unbind: 只调用一次，指令与元素解绑时调用

Vue指令钩子函数参数

指令钩子函数会有如下参数：

  • el：指令所绑定的元素，可以用来直接操作 DOM
  • binding：对象 属性如下
    • name：指令名，不包含v-
    • value: 指令绑定值如v-my-directive="1 + 1",其值为2
    • oldvalue：指令绑定的前一个值仅在update和componentUpdated钩子中可用，无论值是否改变都可以用
    • expression：字符串形式的指令表达式如v-my-directive="1 + 1"表达式为1 + 1
    • arg：指令参数可选如``v-my-directive:foo参数为foo`
    • modifiers：包含修饰符的对象如v-my-directive.foo.bar中修饰符对象为{foo: true, bar: true}
  • vnode：Vue编译生成的虚拟节点
  • oldVnode: 上一个虚拟节点,仅在update和componentUpdated钩子函数中有用

除了el之外，其他参数都应是只读的，切勿进行修改

vue如何自定义一个过滤器？

局部过滤器

<template>
  <div class="home">
    <input type="text" v-model="username">
    <!-- 管道符 接 过滤器 -->
    <h1>{{ username | capitalize}}</h1>
  </div>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
      username: ''
    }
  },
  filters: {
    // 定义局部过滤器
    capitalize(val) {
      if(!val) return '';
      val = val.toString();
      return val.charAt(0).toUpperCase() + val.slice(1)
    }
  }
}
</script>

全局过滤器

Vue.filter('capitalize', val => {
  if (!val) return ''
  val = val.toString()
  return val.charAt(0).toUpperCase() + val.slice(1)
})

全局过滤器和局部过滤器使用方法相同只不过他们的作用域不同

vue常用的修饰符

事件修饰符

  • .stop
  • .prevent
  • .capture
  • .self
  • .once
  • .passive

按键修饰符

  • .enter
  • .tab
  • .delete (捕获“删除”和“退格”键)
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right
<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">

系统修饰键

  • .ctrl
  • .alt
  • .shift
  • .meta
<!-- Alt + C -->
<input @keyup.alt.67="clear">

<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

.exact 修饰符

.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。

<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button @click.ctrl="onClick">A</button>

<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button @click.exact="onClick">A</button>

鼠标按钮修饰符

  • .left
  • .right
  • .middle

Vue相关概念及解释(1)

avatar
文章
阅读
粉丝