vue入門級技術分享

2021-09-10 06:52:59 字數 2832 閱讀 6674

需求

解決方案

宣告式渲染、元件系統

vueui元件

elementui

客戶端路由

vue-router

大規模狀態管理

vuex

構建工具

webpack

專案腳手架

vue-cli

資料持久化

vue-cookie

圖表vue-echarts

**質量檢查

eslint-plugin-vue

…推薦webstorm,或是idea。

注:idea需要安裝vuejs的外掛程式。

安裝node環境。

安裝成功後在控制台輸入node -v,會展示出版本號。

$ v10.11.0
安裝需要的依賴檔案到node_modules資料夾。

$ npm i
****專案為例。

在專案的package.json檔案中配置了專案操作的命令。

"scripts"

:,

eg. 啟動專案對應命令:

$ npm run dev
family-doctor-ali專案目錄結構。

(1)v-texthtml中使用變數。

v-text

="msg"

>

span

>

>

}span

>

(2)v-if判斷是否渲染元素。

v-if

="isfinal"

>

nicespan

>

(3)v-show判斷是否顯示元素。

v-show

="isshow"

>

oopsspan

>

(4)v-for遍歷陣列來進行渲染。

:key

='index'

v-for

="(item,index) in items"

>

div>

:key

='item.id'

v-for

="item of items"

>

div>

(5)v-bind

動態繫結乙個或者多個特性。

v-bind:class

="[,errorclass]"

>

message...p

>

(6)v-model雙向資料繫結的指令。

type

="text"

v-model

="username"

>

>

}span

>

(7)v-on用於監聽事件的指令。

v-on:click

="delete"

>

button

>

(1)v-bind簡寫為:

v-bind:class

="[,errorclass]"

>

message...p

>

:class

="[,errorclass]"

>

message...p

>

(2)v-on簡寫為@

v-on:click

="delete"

>

button

>

@click

="delete"

>

button

>

// demo.vue

v-if="false"

src="../../../src/assets/imgs/logo.png"

alt="logo"

/>

可以,但沒必要。jquery主要是乙個簡化dom操作的元件,而在vue專案中你不需要操作dom。

vue中文文件寫的很詳細,如果出現文件中沒有的問題可以去github中vue專案的issues中尋找答案。

包括es6+、typescript、sass、less全部支援。vue專案一般使用webpack打包、babel翻譯,生成的**可以適配ie8以上版本瀏覽器。

使用eslint**檢查工具,編碼結束後使用命令npm run lint即可進行規範檢查,具體的規則文件。

入門級演算法

今天我想記錄的是一些關於入門級別的演算法。將乙個字串s對映為乙個整數,使得該整數可以唯一的代表字串s。先假設字串均由大寫字母a z構成,不妨設a z為0 25,即將26個大寫字母對應到了二十六進製制中。按照將二十六進製制轉換為十進位制的思路,即可實現將字串對映為整數的需求。題目 給出n個字串 恰好由...

PKI入門級介紹

隨著電子商務的迅速發展,資訊保安已成為焦點問題之一,尤其是網上支付和網路銀行對資訊保安的要求顯得更為突出。為了能在網際網路上開展安全的電子商務活動,公開金鑰基礎設施 pki,public key infrastructure 逐步在國內外得到廣泛應用。我們是否真的需要 pki pki 究竟有什麼用?...

PKI入門級介紹

隨著電子商務的迅速發展,資訊保安已成為焦點問題之一,尤其是網上支付和網路銀行對資訊保安的要求顯得更為突出。為了能在網際網路上開展安全的電子商務活動,公開金鑰基礎設施 pki,public key infrastructure 逐步在國內外得到廣泛應用。我們是否真的需要 pki pki 究竟有什麼用?...