欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue.js 2.5新特性介紹(推薦)

 更新時間:2017年10月24日 15:58:27   作者:xiangzhihong8  
Vue 2.5 Level E 已發(fā)布,在原來2.x的基礎(chǔ)上做了很多相應(yīng)改進和對 bug 的修復(fù),目前 2.5 系列最新的版本為 2.5.2,本文給大家介紹vue 2.5 新特征,需要的朋友參考下吧

TypeScript

TypeScript是一種由微軟開發(fā)的自由和開源的編程語言。它是JavaScript的一個超集,而且本質(zhì)上向這個語言添加了可選的靜態(tài)類型和基于類的面向?qū)ο缶幊獭?012年十月份,微軟發(fā)布了首個公開版本的TypeScript,在2013年6月19日,微軟發(fā)布了TypeScript 0.9的正式版本,到目前為止,TypeScript已發(fā)展到2.x版本

安裝TypeScript

安裝TypeScript主要有兩種方式:

通過npm方式安裝(Node.js包管理器)

安裝TypeScript的Visual Studio插件

說明:Visual Studio2016和Visual Studio 2013 Update 2默認包含了TypeScript。npm安裝的命令如下:

npm install -g typescript

創(chuàng)建TypeScript文件

在編輯器中新建一個greeter.ts文件,并輸入以下JavaScript代碼:

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

上面的代碼直接輸出“hello Jane User”。

編譯代碼

在在命令行中運行TypeScript編譯器即可編譯代碼:

tsc greeter.ts

運行TypeScript web程序

現(xiàn)在在greeter.html中輸入以下代碼:

<!DOCTYPE html>
<html>
 <head><title>TypeScript Greeter</title></head>
 <body>
  <script src="greeter.js"></script>
 </body>
</html>

在瀏覽器中打開greeter.html即可去運行第一個TypeScript web應(yīng)用程序demo!

Vue.js 2.5新特性

Vue 2.5 Level E 已發(fā)布,在原來2.x的基礎(chǔ)上做了很多相應(yīng)改進和對 bug 的修復(fù),目前 2.5 系列最新的版本為 2.5.2。如果讀者希望全面的了解Vue 2.5的內(nèi)容,可以通過查看Vue 2.5發(fā)布說明來獲取詳細的介紹。針對官方的介紹和網(wǎng)上搜集的資料,本次2.5版本主要做了如下幾方面的改進:

更好的 TypeScript 集成
更好的錯誤處理
更好地支持單文件組件中的功能組件
與環(huán)境無關(guān)的服務(wù)端渲染
讀者可以通過下面的鏈接查看原文介紹:

TypeScript 聲明改進

further improve Vue type declarations for canonical usage (#6391) db138e2

錯誤處理和報告

improve error handling with new errorCaptured hook b3cd9bc [Details]

improve template expression error message e38d006, closes #6771

improve option type checks b7105ae

功能組件

compiled templates for functional component support ea0d227

scoped CSS support for functional components 050bb33

服務(wù)器端渲染

renderToString now returns a Promise if no callback is passedf881dd1, closes #6160

add shouldPrefetch option (same signature as shouldPreload) 7bc899c, closes #5964

auto-remove initial state embed script if in production (#6763) 2d32b5d, closes #6761

now ships an environment-agnostic build of the server renderer in vue-server-renderer/basic.jsc5d0fa0 Details

TypeScript改進

自Vue2.0發(fā)布以來,一直有開發(fā)者提出請求,希望能更好地集成TypeScript。從那時起,我們已經(jīng)為大多數(shù)核心庫(vue,vue - routervuex)加入了官方的TypeScript類型聲明。然而,當(dāng)使用開箱即用的Vue API時,目前的集成還是有所欠缺。例如:TypeScript不能輕易地推斷出Vue使用的默認基于對象的API中的this類型。為了使我們的Vue代碼與TypeScript更好地協(xié)作,我們需要使用vue-class-component裝飾器,它允許我們使用基于類的語法來寫Vue組件。

對于喜歡基于類的API的用戶,這可能夠好了,但還是有點不足,只是為了類型判斷,用戶就得使用不同的API。這也使得現(xiàn)有的Vue代碼庫遷移到TypeScript更加困難。

今年的早些時候,TypeScript引入了一些新特性,能使TypeScript更好地理解基于對象字面量的API,這也使得改進Vue的類型聲明更具可能。來自TypeScript團隊的Daniel Rosenwasser發(fā)起了一個雄心勃勃的PR計劃。使用TypeScript后,將會有如下的好處:

使用默認的Vue API時,對this的正確類型推斷。在單文件組件中同樣有效!

基于組件的props配置的的props的類型推斷。

更重要的是,這些改進也會使原生JavaScript用戶受益!,如果你正在使用VSCode且安裝了優(yōu)秀的Vetur擴展,在Vue組件中使用原生JavaScript時,你會獲得十分完善的自動補全提示甚至是類型提示!這是因為vue-language-server,這個分析Vue組件的內(nèi)部包,可以利用TypeScript編譯器來提取關(guān)于你代碼的更多信息。此外,任何支持語言服務(wù)協(xié)議的的編輯器都可以利用vue-language-server來提供類似的功能。

說明:注意:TypeScript 用戶還應(yīng)將以下包更新為最新版本從而兼容類型聲明:vue-router,vuex,vuex-router-sync 和 vue-class-component。

錯誤提示

在2.4及更早版本中,通常使用全局 config.errorHandleroption 來處理應(yīng)用程序中的意外錯誤。當(dāng)然,還可以使用renderError 組件選項來處理渲染函數(shù)中的錯誤。

而在新版本中,vue引入了errorCaptured 鉤子,具有此鉤子的組件捕獲其子組件樹(不包括其自身)中的所有錯誤(不包括在異步回調(diào)中調(diào)用的那些)。這和React的思想是一致的。

要利用 errorCaputerd,可以封裝一個通用組件,來包含其他的業(yè)務(wù)組件,來捕獲業(yè)務(wù)組件內(nèi)的異常,并做對應(yīng)的展示處理。下面列一個官方給的簡單示例,封裝一個通用組件(ErrorBoundary)來包含和處理其他業(yè)務(wù)組件(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 />
</error-boundary>

errorCaputed參數(shù)傳遞主要有如下的特性:

如果定義了全局的 errorHandler,所有的異常還是會傳遞給 errorHadnler,如果沒有定義
errorHandler,這些異常仍然可以報告給一個單獨的分析服務(wù)。

如果一個組件上通過繼承或父組件定義了多個 errorCapured 鉤子函數(shù),這些鉤子函數(shù)都會收到同樣的異常信息。
可以在 errorCapured 鉤子內(nèi) return false 來阻止異常傳播,表示:該異常已經(jīng)被處理,可忽略。而且,也會阻止其他的 errorCapured 鉤子函數(shù)和全局的 errorHandler 函數(shù)觸發(fā)這個異常。

SFC 函數(shù)式組件

通過 vue-loader v13.3.0 或以上版本,支持在單文件組件內(nèi)定義一個“函數(shù)式組件”,且支持模板編譯、作用域 CSS 和 熱部署等功能。

函數(shù)式組件的定義,需要在 template 標(biāo)簽上定義 functional 屬性來聲明。且模板內(nèi)的表達式的執(zhí)行上下文是 函數(shù)式聲明上下文,所以要訪問組件的屬性,需要使用 props.xxx 來獲取。例子見下:

<template functional>
 <div>{{ props.msg }}</div>
</template>

與環(huán)境無關(guān)的服務(wù)端渲染(SSR 環(huán)境)

使用 vue-server-renderer 來構(gòu)建 SSR 應(yīng)用時,默認是需要一個 Node.js 環(huán)境的,使得一些像 php-v8js 或 Nashorn 這樣的 JavaScript 運行環(huán)境下無法運行。v2.5 中對此進行了完善,使得上述環(huán)境下都可以正常運行 SSR 應(yīng)用。

在 php-v8js 和 Nashorn 中,在環(huán)境的準備階段需要模擬 global 和 process 全局對象,并且需要單獨設(shè)置 process 的環(huán)境變量。需要設(shè)置 process.env.VUE_ENV 為 “server”,設(shè)置 process.env.NODE_ENV 為 “development” 或 “production”。

另外,在 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 年發(fā)布至今,其簡潔的語法設(shè)計、輕量快速的特點深受技術(shù)社區(qū)喜愛,在國內(nèi)外都獲得了非常廣泛的應(yīng)用及拓展,比如餓了么的開源組件庫 Element UI 即是 根據(jù)Vue 開發(fā)的,而阿里巴巴的 Weex 與 Vue 也多有合作,而美團點評的mpVue也是比較出色的一款框架。

v-on 修飾符

鍵值 key 自動修飾符

在 Vue v2.5 之前的版本中,如果要在 v-on 中使用沒有內(nèi)置別名的鍵盤鍵值,要么直接使用 keyCode 當(dāng)修飾符(@keyup.13=”foo”),要么需要使用 config.keyCodes 來為鍵值注冊別名。在 v2.5中,你可以直接使用合法的鍵值 key 值(參考MDN中的 KeyboardEvent.key)作為修飾符來串聯(lián)使用它。如下:

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

上述例子中,事件處理函數(shù)只會在 $event.key === ‘PageDown' 時被調(diào)用。

注意:現(xiàn)有鍵值修飾符仍然可用。在IE9中,一些鍵值(.esc 和 方向鍵的 key)不是一致的值,如果要兼容 IE9,需要按 IE9 中內(nèi)置的別名來處理。

.exact 修飾符

新增了一個 .exact 修飾符,該修飾符應(yīng)該和其他系統(tǒng)修飾符(.ctrl, .alt, .shift and .meta)結(jié)合使用,可用用來區(qū)分一些強制多個修飾符結(jié)合按下才會觸發(fā)事件處理函數(shù)。如下:

<!-- 當(dāng) Alt 或 Shift 被按下也會觸發(fā)處理函數(shù) -->
<button @click.ctrl="onClick">A</button>
<!-- 只有當(dāng) Ctrl 被按下,才會觸發(fā)處理函數(shù) -->
<button @click.ctrl.exact="onCtrlClick">A</button>

簡化 Scoped Slots 的使用

之前,如果要在 template 標(biāo)簽上使用 scope 屬性定義一個 scoped slot,可以像下面這樣定義:

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

在 v2.5 中,scope 屬性已被棄用(仍然可用,但是會爆出一個警告,就像本文文首的那樣),我們使用 slot-scope 屬性替代 scope 屬性來表示一個 scoped slot,且 slot-scope 屬性除了可以被用在 template 上,還可以用在標(biāo)簽元素和組件上。如下:

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

注意:這次的調(diào)整,表示 slot-scope 已經(jīng)是一個保留屬性了,不能再被單獨用在組件屬性上了。

Inject 新增默認值選項

本次調(diào)整中,Injections 可以作為可選配置,并且可以聲明默認值。也可以用 from 來表示原屬性。

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

與屬性類似,數(shù)組和對象的默認值需要使用一個工廠函數(shù)返回。

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

總結(jié)

以上所述是小編給大家介紹的Vue.js 2.5新特性介紹,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!

相關(guān)文章

  • Vue多種方法實現(xiàn)表頭和首列固定的示例代碼

    Vue多種方法實現(xiàn)表頭和首列固定的示例代碼

    本篇文章主要介紹了Vue多種方法實現(xiàn)表頭和首列固定的示例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-02-02
  • vue使用codemirror的兩種用法

    vue使用codemirror的兩種用法

    這篇文章主要介紹了在vue里使用codemirror的兩種用法,每種方法通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-08-08
  • Vue實現(xiàn)內(nèi)部組件輪播切換效果的示例代碼

    Vue實現(xiàn)內(nèi)部組件輪播切換效果的示例代碼

    這篇文章主要介紹了Vue實現(xiàn)內(nèi)部組件輪播切換效果的示例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-04-04
  • vue打印瀏覽器頁面功能的兩種實現(xiàn)方法

    vue打印瀏覽器頁面功能的兩種實現(xiàn)方法

    這篇文章主要給大家介紹了關(guān)于vue打印瀏覽器頁面功能的兩種實現(xiàn)方法,這個功能其實也是自己學(xué)習(xí)到的,做完也有一段時間了,一直想記錄總結(jié)一下,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
    2023-04-04
  • vue three.js創(chuàng)建地面并設(shè)置陰影實現(xiàn)示例

    vue three.js創(chuàng)建地面并設(shè)置陰影實現(xiàn)示例

    這篇文章主要為大家介紹了vue three.js創(chuàng)建地面并設(shè)置陰影實現(xiàn)示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-08-08
  • Vue側(cè)滑菜單組件——DrawerLayout

    Vue側(cè)滑菜單組件——DrawerLayout

    本文介紹一個簡單的DrawerLayout(類似Android的DrawerLayout)布局組件的實現(xiàn),基于Vue.js側(cè)滑菜單組件的實現(xiàn)代碼大家通過本文一起學(xué)習(xí)吧
    2017-12-12
  • vue中的搜索關(guān)鍵字實例講解

    vue中的搜索關(guān)鍵字實例講解

    這篇文章主要介紹了vue中的搜索關(guān)鍵字實例講解,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • vue+iview寫個彈框的示例代碼

    vue+iview寫個彈框的示例代碼

    本篇文章主要介紹了vue+iview寫個彈框的示例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-12-12
  • 如何利用vscode-icons-js在Vue3項目中實現(xiàn)文件圖標(biāo)展示

    如何利用vscode-icons-js在Vue3項目中實現(xiàn)文件圖標(biāo)展示

    在開發(fā)文件管理系統(tǒng)或類似的項目時,我們常常需要根據(jù)文件類型展示對應(yīng)的文件圖標(biāo),這樣可以提高用戶體驗,本文將介紹如何在Vue3項目中利用vscode-icons-js庫,實現(xiàn)類似VSCode的文件圖標(biāo)展示效果,感興趣的朋友一起看看吧
    2024-08-08
  • vite?vue3下配置history模式路由的步驟記錄

    vite?vue3下配置history模式路由的步驟記錄

    路由存在兩者模式,一種是歷史模式history,一種是hash模式,下面這篇文章主要給大家介紹了關(guān)于vite?vue3下配置history模式路由的相關(guān)資料,需要的朋友可以參考下
    2023-01-01

最新評論