Vue基础(二)

事件处理

• 内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event
  • test()相当于test($event)
  • test('abcd', $event)则需要显示传入$event
• 事件修饰符
  • .stop：停止事件冒泡（传播） event.stopPropagation()
  • .prevent：阻止事件，比如标签的默认行为 event.preventDefault()
  • .capture：元素自身触发的事件先在此处处理，然后才交由内部元素进行处理
  • .self：只当在 event.target 是当前元素自身时触发处理函数
  • .once：事件只会触发一次
  • .passive：告诉浏览器不想阻止事件的默认行为。不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>

•  按键修饰符：监听键盘按键，触发方法
  • keyup.数字或者keyup.按键名字

<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">

<!-- 处理函数只会在 $event.key 等于 PageDown 时被调用 -->
<input v-on:keyup.page-down="onPageDown">

<!-- keyCode 的事件用法已经被废弃了并可能不会被最新的浏览器支持-->
<input v-on:keyup.13="submit">

<!-- 全局 config.keyCodes 对象自定义按键修饰符别名-->
Vue.config.keyCodes.f1 = 112

• 系统修饰键：实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。在和 keyup 事件一起用时，事件触发时修饰键必须处于按下状态。换句话说，只有在按住 ctrl 的情况下释放其它按键，才能触发 keyup.ctrl。而单单释放 ctrl 也不会触发事件
  • .ctrl
  • .alt
  • .shift
  • .meta
  • .exact：控制由精确的系统修饰符组合触发的事件。
  • 鼠标按钮修饰符，这些修饰符会限制处理函数仅响应特定的鼠标按钮。
    • .left
    • .right
    • .middle

<!-- Alt + C -->
<input v-on:keyup.alt.67="clear">

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

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

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

表单绑定

• 修饰符
  • .lazy：在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步。你可以添加 lazy 修饰符，从而转为在使用 change 事件之后进行同步。适用于输入完所有内容后，光标离开才更新视图的场景。
  • .number：输入值转换成数字。即使在 type="number" 时，HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析，则会返回原始的值。
  • .trim：自动过滤用户输入的首尾空白字符

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg">

<input v-model.number="age" type="number">

<input v-model.trim="msg">

生命周期

• 不要在选项 property 或回调上使用箭头函数，比如 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。
• 因为箭头函数并没有 this，this 会作为变量一直向上级词法作用域查找，直至找到为止，经常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。

过渡&动画

• 基本步骤：

1. 在目标元素外包裹<transition name="xxx">
2. 指定过渡样式: transition；指定隐藏时的样式: opacity/其它

• 注意：对于这些在过渡中切换的类名来说，如果你使用一个没有名字的 <transition>，则 v- 是这些类名的默认前缀。如果你使用了 <transition name="my-transition">，那么 v-enter 会替换为 my-transition-enter。

  <style>
    .bounce-enter-active {
      animation: bounce-in .5s;
    }
    .bounce-leave-active {
      animation: bounce-in .5s reverse;
    }
    @keyframes bounce-in {
      0% {
        transform: scale(0);
      }
      50% {
        transform: scale(1.5);
      }
      100% {
        transform: scale(1);
      }
    }
  </style>

  <transition name="bounce">
    <p v-if="show" style="display: inline-block">Lorem</p>
  </transition>

过滤器

• 自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)
• 过滤器函数总接收表达式的值 (之前的操作链的结果) 作为第一个参数。
• {{ message | filterA('arg1', arg2) }}：filterA 被定义为接收三个参数的过滤器函数。其中 message 的值作为第一个参数，普通字符串 'arg1' 作为第二个参数，表达式 arg2 的值作为第三个参数。

<!-- 在双花括号中 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

<!-- 第一种定义方式：组件的选项中定义本地的过滤器-->
filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

<!-- 第二种定义方式：创建 Vue 实例之前全局定义过滤器-->
Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})
new Vue({
  // ...
})

Vue其他常用指令

• ref : 为某个元素注册一个唯一标识, vue对象通过$refs属性访问这个元素对象
• v-cloak : 使用它防止闪现表达式, 与css配合: [v-cloak] { display: none }
• 自定义指令

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el,binding) {
    // el: 指令所在的标签对象
    // binding: 包含指令相关数据的容器对象
    // 聚焦元素
    el.focus()
  }
})

//注册局部指令，组件中也接受一个 directives 的选项
directives: {
  focus: {
    // 指令的定义
    inserted: function (el,binding) {
      el.focus()
    }
  }
}

自定义插件

• Vue.use 会自动阻止多次注册相同插件，届时即使多次调用也只会注册一次该插件。
• Vue.js 的插件应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象

//定义插件js文件
const MyPlugin = {}
MyPlugin.install = function (Vue, options) {
	// 1. 添加全局方法或属性
	Vue.myGlobalMethod = function () {
	  console.log('Vue函数对象的myGlobalMethod()')
	}

	// 2. 添加全局资源
	Vue.directive('my-directive',function (el, binding) {
	  el.textContent = 'my-directive----'+binding.value
	})
	
	// 3. 注入组件选项
    Vue.mixin({
	  created: function () {
		console.log('created')
	  }
	  ...
    })

	// 4. 添加实例方法
	Vue.prototype.$myMethod = function () {
	  console.log('vm $myMethod()')
	}
}
export default myplugin;

// vue页面声明使用插件(安装插件: 调用插件的install())
Vue.use(MyPlugin)

其他

1. 数组的reduce()方法：

• 第一个参数：是一个函数，函数有两个参数，参数一是用于存储累计的结果，参数二是当前需要运算的元素
• 参数二：初始默认值

computed: {
  completeSize () {
     return this.todos.reduce((preTotal, todo) => preTotal + (todo.complete?1:0) ,0)
  },
},