Vue.js 2.5新特性介绍(推荐)(4)

日期：2020-05-12 栏目：程序人生浏览：次

另外，在 Nashorn 中，还需要用 Java 原生的 timers 为 Promise 和 settimeout 提供一个 polyfill。官方给出了一个在 php-v8js 中的使用示例，如下：

<?php
$vue_source = file_get_contents('/path/to/vue.js');
$renderer_source = file_get_contents('/path/to/vue-server-renderer/basic.js');
$app_source = file_get_contents('/path/to/app.js');
$v8 = new V8Js();
$v8->executeString('var process = { env: { VUE_ENV: "server", NODE_ENV: "production" }}; this.global = { process: process };');
$v8->executeString($vue_source);
$v8->executeString($renderer_source);
$v8->executeString($app_source);
?>
// app.js
var vm = new Vue({
 template: `<div>{{ msg }}</div>`,
 data: {
 msg: 'hello'
 }
})
// exposed by vue-server-renderer/basic.js
renderVueComponentToString(vm, (err, res) => {
 print(res)
})

Vue.js 这款渐进式的 JavaScript 框架自 2013 年发布至今，其简洁的语法设计、轻量快速的特点深受技术社区喜爱，在国内外都获得了非常广泛的应用及拓展，比如饿了么的开源组件库 Element UI 即是根据Vue 开发的，而阿里巴巴的 Weex 与 Vue 也多有合作，而美团点评的mpVue也是比较出色的一款框架。

v-on 修饰符

键值 key 自动修饰符

在 Vue v2.5 之前的版本中，如果要在 v-on 中使用没有内置别名的键盘键值，要么直接使用 keyCode 当修饰符（@keyup.13=”foo”），要么需要使用 config.keyCodes 来为键值注册别名。在 v2.5中，你可以直接使用合法的键值 key 值（参考MDN中的 KeyboardEvent.key）作为修饰符来串联使用它。如下：

<input @keyup.page-down="onPageDown">

上述例子中，事件处理函数只会在 $event.key === ‘PageDown' 时被调用。

注意：现有键值修饰符仍然可用。在IE9中，一些键值（.esc 和方向键的 key）不是一致的值，如果要兼容 IE9，需要按 IE9 中内置的别名来处理。

.exact 修饰符

新增了一个 .exact 修饰符，该修饰符应该和其他系统修饰符(.ctrl, .alt, .shift and .meta)结合使用，可用用来区分一些强制多个修饰符结合按下才会触发事件处理函数。如下：

<!-- 当 Alt 或 Shift 被按下也会触发处理函数 -->
<button @click.ctrl="onClick">A</button>
<!-- 只有当 Ctrl 被按下，才会触发处理函数 -->
<button @click.ctrl.exact="onCtrlClick">A</button>

简化 Scoped Slots 的使用

之前，如果要在 template 标签上使用 scope 属性定义一个 scoped slot，可以像下面这样定义：

<comp>
 <template scope="props">
 <div>{{ props.msg }}</div>
 </template>
</comp>

转载注明出处：http://www.heiqu.com/1230.html

Vue.js 2.5新特性介绍(推荐)(4)

相关推荐