検索
Vue.js 2.5 の新機能の共有Jan 20, 2018 pm 05:08 PM
javascriptvue.js特性

この記事では主に Vue.js 2.5 の新機能について説明します。Vue 2.5 レベル E は、オリジナルの 2.x に基づいて多くの対応する改善とバグ修正が行われ、現在リリースされています。 2.5.2. この記事では vue 2.5 の新機能を紹介しますので、必要な方は参考にしていただければ幸いです。

TypeScript

TypeScript は、Microsoft によって開発された無料のオープンソース プログラミング言語です。これは JavaScript のスーパーセットであり、基本的にオプションの静的型付けとクラスベースのオブジェクト指向プログラミングを言語に追加します。 2012 年 10 月、Microsoft は TypeScript の最初のパブリック バージョンをリリースしました。2013 年 6 月 19 日に、TypeScript はバージョン 2.x まで開発されました

TypeScript をインストールする方法は主に 2 つあります。 TypeScript をインストールするには:

npm (Node.js パッケージ マネージャー) 経由でインストールします

TypeScript 用の Visual Studio プラグインをインストールします

注: Visual Studio 2016 および Visual Studio 2013 Update 2 には、既定で TypeScript が含まれています。 npm インストールのコマンドは次のとおりです:

npm install -g typescript

TypeScript ファイルを作成します

エディターでgreeter.ts ファイルを作成し、次の JavaScript コードを入力します:

function greeter(person) {
 return "Hello, " + person;
}
var user = "Jane User";
document.body.innerHTML = greeter(user);

上記のコードは、「hello」を直接出力します。ジェーンユーザー」。

コードをコンパイルします

コマンド ラインで TypeScript コンパイラーを実行してコードをコンパイルします:

tscgreeter.ts

TypeScript Web プログラムを実行します

次に、greeter.html に次のコードを入力します。ブラウザでgreeter.htmlを開いて、最初のTypeScript Webアプリケーションのデモを実行してください。

Vue.js 2.5 の新機能

Vue 2.5 レベル E がリリースされました。オリジナルの 2.x に基づいて、対応する多くの改善とバグ修正が行われました。現在、2.5 シリーズの最新バージョンは 2.5.2 です。 Vue 2.5 の内容を完全に理解したい場合は、Vue 2.5 リリース ノートを参照して詳細な概要を確認できます。公式の紹介とオンラインで収集された情報に基づいて、この 2.5 バージョンでは主に次の改善が行われています:

TypeScript の統合の改善

エラー処理の改善

単一ファイル コンポーネントでの機能コンポーネントのサポートの改善

環境に依存しないサーバー側レンダリングの使用

読者は次のことを行うことができます元の紹介文は以下のリンクからご覧ください:


TypeScript 宣言の改善

正規使用のための Vue 型宣言のさらなる改善 (#6391) db138e2

エラー処理とレポート

新しい errorCaptured フック b3cd9bc によるエラー処理の改善 [詳細]

テンプレート式エラー メッセージ e38d006 を改善、クローズ #6771

オプション タイプ チェックを改善 b7105ae

機能コンポーネント

機能コンポーネントのサポート用にコンパイルされたテンプレート ea0d227


機能コンポーネントのスコープ指定された CSS サポート 050 bb33

サーバー側レンダリングいます

renderToString は、コールバックが渡されない場合に Promise を返すようになりましたf881dd1、クローズ #6160

shouldPrefetch オプションを追加 ( shouldPreload と同じシグネチャ) 7bc899c、クローズ #5964

初期状態の自動削除埋め込みスクリプト (本番環境の場合) (# 6763) 2d32b5d、クローズ # 6761

現在、サーバー レンダラーの環境に依存しないビルドが vue-server-renderer/basic.jsc5d0fa0 で出荷されています。詳細

TypeScript の改善

Vue2.0 のリリース以来、開発者からのリクエストがあり、タイプスクリプト。それ以来、ほとんどのコア ライブラリ (vue、vue-routervuex) に公式の TypeScript 型宣言を含めてきました。ただし、すぐに使える Vue API を使用する場合、現在の統合は不足しています。例: TypeScript は、Vue で使用されるデフォルトのオブジェクトベース API で this 型を簡単に推論できません。 Vue コードを TypeScript でより適切に動作させるには、vue-class-component デコレーターを使用する必要があります。これにより、クラスベースの構文を使用して Vue コンポーネントを作成できるようになります。

クラスベースの API を好むユーザーにとってはこれは良いかもしれませんが、型を判断するためだけに、ユーザーは別の API を使用する必要があります。これにより、既存の Vue コードベースを TypeScript に移行することも難しくなります。

今年の初めに、TypeScript がオブジェクト リテラル ベースの API をよりよく理解できるようにするいくつかの新機能が導入されました。これにより、Vue の型宣言を改善することも可能になります。 TypeScript チームの Daniel Rosenwasser は、野心的な PR 計画を開始しました。 TypeScript を使用すると、次のような利点があります:

デフォルトの Vue API を使用する場合の正しい型推論。単一ファイルコンポーネントでも動作します。

コンポーネントのプロパティに基づいて設定されたプロパティの型推論。

さらに、これらの改善はネイティブ JavaScript ユーザーにも利益をもたらします。 VSCode を使用していて、優れた Vetur 拡張機能をインストールしている場合、Vue コンポーネントでネイティブ JavaScript を使用すると、非常に完全なオートコンプリート プロンプトが表示され、入力プロンプトも表示されます。これは、Vue コンポーネントを分析する内部パッケージである vue- language-server が TypeScript コンパイラーを利用して、コードに関する詳細情報を抽出できるためです。さらに、言語サービス プロトコルをサポートするエディターは、vue- language-server を使用して同様の機能を提供できます。

注: 注: TypeScript ユーザーは、型宣言と互換性を持たせるために、次のパッケージも最新バージョンに更新する必要があります: vue-router、vuex、vuex-router-sync、および vue-class-component。

错误提示

在2.4及更早版本中,通常使用全局 config.errorHandleroption 来处理应用程序中的意外错误。当然,还可以使用renderError 组件选项来处理渲染函数中的错误。

而在新版本中,vue引入了errorCaptured 钩子,具有此钩子的组件捕获其子组件树(不包括其自身)中的所有错误(不包括在异步回调中调用的那些)。这和React的思想是一致的。

要利用 errorCaputerd,可以封装一个通用组件,来包含其他的业务组件,来捕获业务组件内的异常,并做对应的展示处理。下面列一个官方给的简单示例,封装一个通用组件(ErrorBoundary)来包含和处理其他业务组件(another component)的异常。

Vue.component('ErrorBoundary', {
 data: () => ({ error: null }),
 errorCaptured (err, vm, info) { 
 this.error = `${err.stack}\n\nfound in ${info} of component`
 return false
 },
 render (h) { 
 if (this.error) {  
  return h('pre', { style: { color: 'red' }}, this.error)
 } 
 // ignoring edge cases for the sake of demonstration
 return this.$slots.default[0]
 }
})
<error-boundary>
 <another-component></another-component>
</error-boundary>

errorCaputed参数传递主要有如下的特性:

如果定义了全局的 errorHandler,所有的异常还是会传递给 errorHadnler,如果没有定义
errorHandler,这些异常仍然可以报告给一个单独的分析服务。

如果一个组件上通过继承或父组件定义了多个 errorCapured 钩子函数,这些钩子函数都会收到同样的异常信息。
可以在 errorCapured 钩子内 return false 来阻止异常传播,表示:该异常已经被处理,可忽略。而且,也会阻止其他的 errorCapured 钩子函数和全局的 errorHandler 函数触发这个异常。

SFC 函数式组件

通过 vue-loader v13.3.0 或以上版本,支持在单文件组件内定义一个“函数式组件”,且支持模板编译、作用域 CSS 和 热部署等功能。

函数式组件的定义,需要在 template 标签上定义 functional 属性来声明。且模板内的表达式的执行上下文是 函数式声明上下文,所以要访问组件的属性,需要使用 props.xxx 来获取。例子见下:

<template>
 <p>{{ props.msg }}</p>
</template>

与环境无关的服务端渲染(SSR 环境)

使用 vue-server-renderer 来构建 SSR 应用时,默认是需要一个 Node.js 环境的,使得一些像 php-v8js 或 Nashorn 这样的 JavaScript 运行环境下无法运行。v2.5 中对此进行了完善,使得上述环境下都可以正常运行 SSR 应用。

在 php-v8js 和 Nashorn 中,在环境的准备阶段需要模拟 global 和 process 全局对象,并且需要单独设置 process 的环境变量。需要设置 process.env.VUE_ENV 为 “server”,设置 process.env.NODE_ENV 为 “development” 或 “production”。

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

<?php $vue_source = file_get_contents(&#39;/path/to/vue.js&#39;);
$renderer_source = file_get_contents(&#39;/path/to/vue-server-renderer/basic.js&#39;);
$app_source = file_get_contents(&#39;/path/to/app.js&#39;);
$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: `<p>{{ msg }}</p>`,
 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>

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

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

.exact 修饰符

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

<!-- 当 Alt 或 Shift 被按下也会触发处理函数 -->
<button>A</button>
<!-- 只有当 Ctrl 被按下,才会触发处理函数 -->
<button>A</button>

简化 Scoped Slots 的使用

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

<comp>
 <template>
 <p>{{ props.msg }}</p>
 </template>
</comp>

在 v2.5 中,scope 属性已被弃用(仍然可用,但是会爆出一个警告,就像本文文首的那样),我们使用 slot-scope 属性替代 scope 属性来表示一个 scoped slot,且 slot-scope 属性除了可以被用在 template 上,还可以用在标签元素和组件上。如下:

<comp>
 <p>
 {{ props.msg }}
 </p>
</comp>

注意:这次的调整,表示 slot-scope 已经是一个保留属性了,不能再被单独用在组件属性上了。

Inject 新增默认值选项

本次调整中,Injections 可以作为可选配置,并且可以声明默认值。也可以用 from 来表示原属性。

export default {
 inject: {
 foo: {
  from: 'bar',
  default: 'foo'
 }
 }
}

与属性类似,数组和对象的默认值需要使用一个工厂函数返回。

export default {
 inject: {
 foo: {
  from: 'bar',
  default: () => [1, 2, 3]
 }
 }
}

相关推荐:

Vue.js的组件和模板详解

vue.js项目打包上线的图文讲解

Vue.js在数组中插入重复数据详解

以上がVue.js 2.5 の新機能の共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
es6数组怎么去掉重复并且重新排序es6数组怎么去掉重复并且重新排序May 05, 2022 pm 07:08 PM

去掉重复并排序的方法:1、使用“Array.from(new Set(arr))”或者“[…new Set(arr)]”语句,去掉数组中的重复元素,返回去重后的新数组;2、利用sort()对去重数组进行排序,语法“去重数组.sort()”。

JavaScript的Symbol类型、隐藏属性及全局注册表详解JavaScript的Symbol类型、隐藏属性及全局注册表详解Jun 02, 2022 am 11:50 AM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于Symbol类型、隐藏属性及全局注册表的相关问题,包括了Symbol类型的描述、Symbol不会隐式转字符串等问题,下面一起来看一下,希望对大家有帮助。

原来利用纯CSS也能实现文字轮播与图片轮播!原来利用纯CSS也能实现文字轮播与图片轮播!Jun 10, 2022 pm 01:00 PM

怎么制作文字轮播与图片轮播?大家第一想到的是不是利用js,其实利用纯CSS也能实现文字轮播与图片轮播,下面来看看实现方法,希望对大家有所帮助!

JavaScript对象的构造函数和new操作符(实例详解)JavaScript对象的构造函数和new操作符(实例详解)May 10, 2022 pm 06:16 PM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于对象的构造函数和new操作符,构造函数是所有对象的成员方法中,最早被调用的那个,下面一起来看一下吧,希望对大家有帮助。

JavaScript面向对象详细解析之属性描述符JavaScript面向对象详细解析之属性描述符May 27, 2022 pm 05:29 PM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于面向对象的相关问题,包括了属性描述符、数据描述符、存取描述符等等内容,下面一起来看一下,希望对大家有帮助。

javascript怎么移除元素点击事件javascript怎么移除元素点击事件Apr 11, 2022 pm 04:51 PM

方法:1、利用“点击元素对象.unbind("click");”方法,该方法可以移除被选元素的事件处理程序;2、利用“点击元素对象.off("click");”方法,该方法可以移除通过on()方法添加的事件处理程序。

整理总结JavaScript常见的BOM操作整理总结JavaScript常见的BOM操作Jun 01, 2022 am 11:43 AM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于BOM操作的相关问题,包括了window对象的常见事件、JavaScript执行机制等等相关内容,下面一起来看一下,希望对大家有帮助。

foreach是es6里的吗foreach是es6里的吗May 05, 2022 pm 05:59 PM

foreach不是es6的方法。foreach是es3中一个遍历数组的方法,可以调用数组的每个元素,并将元素传给回调函数进行处理,语法“array.forEach(function(当前元素,索引,数组){...})”;该方法不处理空数组。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

PhpStorm Mac バージョン

PhpStorm Mac バージョン

最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール

Dreamweaver Mac版

Dreamweaver Mac版

ビジュアル Web 開発ツール

SecLists

SecLists

SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。

DVWA

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。