vue企業(yè)門戶網(wǎng)站模板(vue 企業(yè)網(wǎng)站)
本篇文章給大家談談vue企業(yè)門戶網(wǎng)站模板,以及vue 企業(yè)網(wǎng)站對應的知識點,希望對各位有所幫助,不要忘了收藏本站喔。
本文目錄一覽:
- 1、用vue單頁面做官網(wǎng)的必要性
- 2、這7個 Vue 模式,可能你經(jīng)常用!但現(xiàn)在看對你很有幫助
- 3、怎么樣vue可以動態(tài)解析后臺給的html模板?
- 4、Vue3基礎(chǔ)-模板語法
- 5、Primary:Vue{三、一個基于Vue的門戶網(wǎng)站(經(jīng)驗踩坑)}
用vue單頁面做官網(wǎng)的必要性
單頁應用程序(SPA)是加載單個HTML頁面并在用戶與應用程序交互時動態(tài)更新該頁面的Web應用程序。瀏覽器一開始會加載必需的HTML、CSS和JavaScript,所有的操作都在這張頁面上完成,都由JavaScript來控制。因此,對單頁應用來說模塊化的開發(fā)和設計顯得相當重要。
優(yōu)點:
1、提供了更加吸引人的用戶體驗:具有桌面應用的即時性、網(wǎng)站的可移植性和可訪問性。
2、單頁應用的內(nèi)容的改變不需要重新加載整個頁面,web應用更具響應性和更令人著迷。
3、單頁應用沒有頁面之間的切換,就不會出現(xiàn)“白屏現(xiàn)象”,也不會出現(xiàn)假死并有“閃爍”現(xiàn)象
4、單頁應用相對服務器壓力小,服務器只用出數(shù)據(jù)就可以,不用管展示邏輯和頁面合成,吞吐能力會提高幾倍。
5、良好的前后端分離。后端不再負責模板渲染、輸出頁面工作,后端API通用化,即同一套后端程序代碼,不用修改就可以用于Web界面、手機、平板等多種客戶端
這7個 Vue 模式,可能你經(jīng)常用!但現(xiàn)在看對你很有幫助
說實話,閱讀文檔并不是我們大多數(shù)人喜歡的事情,但是當使用像Vue這樣不斷發(fā)展的現(xiàn)代前端框架時,每一個新版本都會有所變化,我們很有可愛已經(jīng)錯過了一些后來推出的新且好用的功能。
今天,刷碗智帶大家來看看那些有趣但不那么流行的功能。記住,所有這些都是官方Vue文檔的一部分。
在大型項目中,我們可能需要將組件分成小塊,只有在需要時才從服務器上加載。為了更容易做到這一點,Vue允許我們將組件定義為一個工廠函數(shù),異步地解析組件定義。Vue只會在組件需要渲染的時候觸發(fā)工廠函數(shù),并把結(jié)果緩存起來以備后面的重新渲染。2.3版的新內(nèi)容是,異步組件工廠還可以返回以下格式的對象。
使用這種方法,我們有額外的選項,包括加載和錯誤狀態(tài)、組件獲取的延遲和超時。
渲染普通的 HTML 元素在 Vue 中是非??焖俚模械臅r候你可能有一個組件,這個組件包含了大量靜態(tài)內(nèi)容。在這種情況下,我們可以在根元素上添加 v-once attribute 以確保這些內(nèi)容只計算一次然后緩存起來,就像這樣:
組件是可以在它們自己的模板中調(diào)用自身的。不過它們只能通過 name 選項來做這件事:
當你使用 Vue.component 全局注冊一個組件時,這個全局的 ID 會自動設置為該組件的 name 選項。
稍有不慎,遞歸組件就可能導致無限循環(huán):
類似上述的組件將會導致 “max stack size exceeded” 錯誤,所以請確保遞歸調(diào)用是條件性的 (例如使用一個最終會得到 false 的 v-if )。
當 inline-template 這個特殊的 attribute 出現(xiàn)在一個子組件上時,這個組件將會使用其里面的內(nèi)容作為模板,而不是將其作為被分發(fā)的內(nèi)容。這使得模板的撰寫工作更加靈活。
內(nèi)聯(lián)模板需要定義在 Vue 所屬的 DOM 元素內(nèi)。
指令的參數(shù)可以是動態(tài)的。例如,在 v-mydirective:[argument]="value" 中, argument 參數(shù)可以根據(jù)組件實例數(shù)據(jù)進行更新!這使得自定義指令可以在應用中被靈活使用。
例如你想要創(chuàng)建一個自定義指令,用來通過固定布局將元素固定在頁面上。我們可以像這樣創(chuàng)建一個通過指令值來更新豎直位置像素值的自定義指令:
對于 .passive 、 .capture 和 .once 這些事件修飾符,Vue 提供了相應的前綴可以用于 on:
修飾符前綴 .passive .capture! .once~ .capture.once 或.once.capture~!
例如:
對于所有其它的修飾符,私有前綴都不是必須的,因為你可以在事件處理函數(shù)中使用事件方法:
修飾符處理函數(shù)中的等價操作 .stopevent.stopPropagation() .preventevent.preventDefault() .selfif (event.target !== event.currentTarget) return 按鍵:.enter, .13if (event.keyCode !== 13) return (對于別的按鍵修飾符來說,可將 13 改為另一個按鍵碼) 修飾鍵:.ctrl, .alt, .shift, .metaif (!event.ctrlKey) return (將 ctrlKey 分別修改為 altKey、shiftKey 或者 metaKey)
在Vue中,有幾種方法可以讓兩個組件進行通信,所有這些方法都有優(yōu)點和缺點。 2.2 版本中引入的一種新方法是使用 Provide/Inject 的依賴注入。
這對選項一起使用,允許一個祖先組件作為其所有后代的依賴注入器,無論組件層次有多深,只要它們在同一個父鏈上。如果你熟悉React,這與React的上下文功能非常相似。
今天就到這了,就這?
~完,我是刷碗智,疫情只能在家 LoL 了。
怎么樣vue可以動態(tài)解析后臺給的html模板?
對于 vue 來說,模板本質(zhì)就是一個字符串
vue 中的模板是有邏輯的,是動態(tài)的,如 v-if、v-for 等
與 html 格式很像,但有很大區(qū)別;html 是靜態(tài)的,而 vue 模板是動態(tài)的
最終還是要轉(zhuǎn)化為 html 來顯示,怎么才能轉(zhuǎn)換為 html 來顯示呢?
模板最終必須轉(zhuǎn)換為 JS 代碼?
因為模板有邏輯 (v-if,v-for),必須用 JS 才能實現(xiàn)(前端中只有 JS 是圖靈完備語言)
轉(zhuǎn)換為html渲染頁面,必須用 JS 才能實現(xiàn)渲染
因此模板最終要轉(zhuǎn)換為一個 JS 函數(shù)(render 函數(shù)),(render 函數(shù)是指的渲染函數(shù),并不一定就必須是 render 這個名字)
render函數(shù)
render 函數(shù)的 with 的用法
模板中,所有信息都包含在了 render 函數(shù)中
this 即 vm
price 就是 this.price,也是 vm.parice,也是 data.price
Vue3基礎(chǔ)-模板語法
如果我們希望把數(shù)據(jù)顯示到模板(template)中,使用最多的語法是 “Mustache”語法 (雙大括號) 的文本插值。
并且我們前端提到過,data返回的對象是有添加到Vue的響應式系統(tǒng) 中,當data中的數(shù)據(jù)發(fā)生改變時,對應的內(nèi)容也會發(fā)生更新。
當然,Mustache中不僅僅可以是data中的屬性,也可以是一個JavaScript的表達式:
下面這種寫法是語句不是表達式,所以是錯誤的:
v-once用于指定元素或者組件只渲染一次,當數(shù)據(jù)發(fā)生變化時,元素或者組件以及其所有的子元素將視為靜態(tài)內(nèi)容并且跳過,該指令可以用于性能優(yōu)化。
如果添加到父節(jié)點,那么所有的子節(jié)點也是只會渲染一次:
用于更新元素的 textContent,等價于"Mustache"語法,而且"Mustache"語法更靈活。
默認情況下,如果我們展示的內(nèi)容本身是 html 的,那么vue并不會對其進行特殊的解析。如果我們希望這個內(nèi)容被Vue可以解析出來,那么可以使用 v-html 來展示。
效果如下:
v-pre用于跳過元素和它的子元素的編譯過程,顯示原始的Mustache標簽。
跳過不需要編譯的節(jié)點,加快編譯的速度。
效果如下:
這個指令保持在元素上直到關(guān)聯(lián)組件實例結(jié)束編譯。
v-cloak 和 CSS 規(guī)則如 [v-cloak] { display: none } 一起用時,這個指令可以隱藏未編譯的 Mustache 標簽直到組件實例準備完畢,主要用于解決閃動問題,現(xiàn)在Vue3一般不會出現(xiàn)這個問題了。
div 不會顯示,直到編譯結(jié)束。
前面講的一系列指令,主要是將值插入到模板內(nèi)容中。但是,除了內(nèi)容需要動態(tài)來決定外,某些屬性我們也希望動態(tài)來綁定。比如動態(tài)綁定a元素的href屬性,動態(tài)綁定img元素的src屬性。
綁定屬性我們使用 v-bind: ,縮寫 : ,用于動態(tài)地綁定一個或多個 attribute,或一個組件 prop 到表達式。
v-bind用于綁定一個或多個屬性值,或者向另一個組件傳遞props值(這個學到組件時再介紹),在開發(fā)中,有哪些屬性需要動態(tài)進行綁定呢?還是有很多的,比如圖片的鏈接src、網(wǎng)站的鏈接href、動態(tài)綁定一些類、樣式等等。
v-bind有一個對應的語法糖,也就是簡寫方式,在開發(fā)中,我們通常會使用語法糖的形式,因為更簡潔。
注意 :Vue2 template模板中只能有一個根元素,Vue3 template模板中允許有多個根元素。
在開發(fā)中,有時候我們的元素class也是動態(tài)的,比如:當數(shù)據(jù)為某個狀態(tài)時,字體顯示紅色,當數(shù)據(jù)另一個狀態(tài)時,字體顯示黑色。
綁定class有兩種方式:對象語法,數(shù)組語法。
① 對象語法:我們可以傳給 :class (v-bind:class 的簡寫) 一個對象,以動態(tài)地切換 class。
② 數(shù)組語法:我們可以把一個數(shù)組傳給 :class,以應用一個 class 列表;
我們可以利用v-bind:style來綁定一些CSS內(nèi)聯(lián)樣式,這是因為某些樣式我們需要根據(jù)數(shù)據(jù)動態(tài)來決定,比如某段文字的顏色,大小等等。
CSS屬性名可以用駝峰式 (camelCase) 或短橫線分隔 (kebab-case,記得用引號括起來) 來命名。
綁定style有兩種方式:對象語法,數(shù)組語法。
① 對象語法:
② 數(shù)組語法: :style 的數(shù)組語法可以將多個樣式對象應用到同一個元素上
在某些情況下,我們屬性的名稱可能也不是固定的。
前面我們無論綁定src、href、class、style,屬性名稱都是固定的,如果屬性名稱不是固定的,我們可以使用 :[屬性名]=“值” 的格式來定義,這種綁定的方式,我們稱之為動態(tài)綁定屬性。
如果我們希望將一個對象的所有屬性,綁定到元素上的所有屬性,應該怎么做呢?非常簡單,我們可以直接使用 v-bind 綁定一個對象。
如下:info對象會被拆解成div的各個屬性。
前面我們綁定了元素的內(nèi)容和屬性,在前端開發(fā)中另外一個非常重要的特性就是交互。
在前端開發(fā)中,我們需要經(jīng)常和用戶進行各種各樣的交互,這個時候,我們就必須監(jiān)聽用戶發(fā)生的事件,比如點擊、拖拽、鍵盤事件等等。
在Vue中如何監(jiān)聽事件呢?使用v-on指令。接下來我們來看一下v-on的用法:
我們可以使用v-on來監(jiān)聽一下點擊的事件:
v-on:click可以寫成@click,是它的語法糖寫法:
當然,我們也可以綁定其他的事件:
如果我們希望一個元素綁定多個事件,這個時候可以傳入一個對象:
當通過methods中定義方法,以供@click調(diào)用時,需要注意參數(shù)問題:
情況一:如果該方法不需要額外參數(shù),那么方法后的()可以不添加,并且方法的實現(xiàn)不用參數(shù),直接就可以打印event。
情況二:如果需要同時傳入某個參數(shù)和event時,可以通過$event傳入事件,并且方法的實現(xiàn)必須按順序?qū)懨鲄?shù)。
@keyup.enter 代表enter鍵彈起的時候會調(diào)用onEnter方法,我們一般在方法里面獲取輸入的值:
在某些情況下,我們需要根據(jù)當前的條件決定某些元素或組件是否渲染,這個時候我們就需要進行條件判斷了。
Vue提供了下面的指令來進行條件判斷:
下面我們來對它們進行學習。
v-if、v-else、v-else-if 用于根據(jù)條件來渲染某一塊的內(nèi)容,這些內(nèi)容只有在條件為true時,才會被渲染出來,這三個指令與JavaScript的條件語句 if、else、else if 類似。
v-if 的渲染原理:v-if是惰性的,當條件為false時,其判斷的內(nèi)容完全不會被渲染或者會被銷毀掉,當條件為true時,才會真正渲染條件塊中的內(nèi)容。
因為v-if是一個指令,所以必須將其添加到一個元素上,但是如果我們希望切換的是多個元素呢?
如果此時我們使用div包裹,div會被渲染到界面上來,但是我們并不希望div被渲染,這個時候,我們可以選擇使用template,template元素可以當做不可見的包裹元素,并且 v-if 可以添加到 template 上,但是最終template不會被渲染出來,類似于小程序中的block。
v-show和v-if的用法看起來是一致的,也是根據(jù)一個條件決定是否顯示元素或者組件。
首先,在用法上的區(qū)別:
其次,本質(zhì)的區(qū)別:
開發(fā)中如何進行選擇呢?
在真實開發(fā)中,我們往往會從服務器拿到一組數(shù)據(jù),并且需要對其進行渲染。這個時候我們可以使用v-for來完成,v-for類似于JavaScript的for循環(huán),可以用于遍歷一組數(shù)據(jù)。
v-for的基本格式是 "item in 數(shù)組" ,數(shù)組通常是來自data或者prop,也可以是其他方式,item是我們給每項元素起的一個別名,這個別名可以自定來定義。
我們知道,在遍歷一個數(shù)組的時候會經(jīng)常需要拿到數(shù)組的索引,如果我們需要索引,可以使用格式 "(item, index) in 數(shù)組" ,注意順序,數(shù)組元素項item在前面,索引項index在后面。
類似于v-if,你可以使用 template 元素來循環(huán)渲染一段包含多個元素的內(nèi)容。
我們使用template來對多個元素進行包裹,而不是使用div來完成,因為div會被渲染,template不會被渲染。而且如果有ul,ul里面不推薦放div,只推薦放li。
Vue 將被偵聽的數(shù)組的變更方法進行了包裹,所以它們也將會觸發(fā)視圖更新,這些被包裹過的方法包括:
上面的方法會直接修改原來的數(shù)組,所以視圖會跟著更新。但是某些方法不會替換原來的數(shù)組,而是會生成新的數(shù)組,比如 filter()、concat() 和 slice(),這時候我們可以通過重新賦值的方式觸發(fā)視圖更新,如下:
在使用v-for進行列表渲染時,我們通常會給元素或者組件綁定一個key屬性。
這個key屬性有什么作用呢?
我們先來看一下官方的解釋:key屬性主要用在Vue的虛擬DOM算法,在新舊nodes對比時辨識VNodes。如果不使用key,Vue會使用一種最大限度減少動態(tài)元素并且盡可能的嘗試就地修改/復用相同類型元素的算法,而使用key時,它會基于key的變化重新排列元素順序,并且會移除/銷毀key不存在的元素。
官方的解釋對于初學者來說并不好理解,比如下面的問題:
什么是新舊nodes,什么是VNode?
沒有key的時候,如何嘗試修改和復用的?
有key的時候,如何基于key重新排列的?
我們先來解釋一下VNode的概念:
VNode的全稱是Virtual Node,也就是虛擬節(jié)點。事實上,無論是組件還是元素,它們最終在Vue中表示出來的都是一個個VNode。VNode的本質(zhì)是一個JavaScript的對象。
如果我們不只是一個簡單的div,而是有一大堆的元素,那么它們應該會形成一個VNode Tree。
我們先來看一個案例:這個案例是當我們點擊按鈕時會在li中間插入一個f。
我們可以確定的是,這次更新對于ul和button是不需要進行更新,需要更新的是我們li的列表。在Vue中,對于相同父元素的子元素節(jié)點并不會重新渲染整個列表,因為對于列表中 a、b、c、d它們都是沒有變化的。在操作真實DOM的時候,我們只需要在中間插入一個f的li即可。
那么Vue中對于列表的更新究竟是如何操作的呢?
Vue事實上會對于有key和沒有key會調(diào)用兩個不同的方法,有key,那么就調(diào)用 patchKeyedChildren方法,沒有key,那么就調(diào)用 patchUnkeyedChildren方法。
沒有key的diff算法:
我們會發(fā)現(xiàn)上面的diff算法效率并不高,c和d來說它們事實上并不需要有任何的改動,但是因為我們的c被f所使用了,所有后續(xù)所有的內(nèi)容都要一次進行改動,并且最后進行新增。
有key的diff算法:
所以我們可以發(fā)現(xiàn),Vue在進行diff算法的時候,會盡量利用我們的key來進行優(yōu)化操作,在沒有key的時候我們的效率是非常低效的,在進行插入或者重置順序的時候,保持相同的key可以讓diff算法更加的高效。
Primary:Vue{三、一個基于Vue的門戶網(wǎng)站(經(jīng)驗踩坑)}
使用框架時必須熟知框架指令特性!很重要;
Bootstrap+jQuery是很好的選擇!
庫:? ? ? ? ? 1.i18n(雙語言切換);
? ? ? ? ? ? ? ? ? 2.vue-router(路由);
? ? ? ? ? ? ? ? ? 3.vuex(狀態(tài)管理,需要進行雙語言切換監(jiān)聽變化);
? ? ? ? ? ? ? ? ? 4.ElementUI(餓了么以電腦端為主得UI框架);
? ? ? ? ? ? ? ? ? 5.sass(css預處理);
? ? ? ? ? ? ? ? ? 6.echarts(需要K線圖,個人推薦不要用echarts,太大);
? ? ? ? ? ? ? ? ? 7.axios(相對于fetch兼容性好,請求數(shù)據(jù))
IE的坑:1.走馬燈之前用的是swiper的,結(jié)果兼容性不好,4.0+兼容不好,3.0主要以移動端為主,
? ? ? ? ? ? ? ? 之后換成了ElementUI的走馬燈又引導出無法覆蓋ElementUI的樣式,因為VUE是默認全局覆蓋局部,再加一個style,不要加scoped,ElementUI是全局引入!? 解決問題。
? ? ? ? ? ? ? ? 2.經(jīng)驗不足,IE9不支持flex,坑、坑、坑移動端寫習慣了!
? ? ? ? ? ? ? ? 3.多行文本省略只支持webkit內(nèi)核瀏覽器,又是坑,用js控制長度搞定!
? ? ? ? ? ? ? ? 4.低版本兼容引入babel-polyfill,將build?webpack.base.conf.js里entry修改為entry: {'babel-polyfill': 'babel-polyfill',app: './src/main.js'},
? ? ? ? ? ? 5.使用axios低版本兼容?es6-promise包,在main.js里引用
????????????????import promise from 'es6-promise'
????????????????promise.polyfill()
打包:1.history模式:需要服務器端配置請看官網(wǎng);不需要改任何東西,路由里加mode:history即可
? ? ? ? ? ?2.hash模式:將config里index.js里的 assetsPublicPath: '/'? ?改為assetsPublicPath: './',即可訪問靜態(tài)資源;
? ? ? ? ? ?3.打包體積:將config里index.js里的productionSourceMap: true, 改為?productionSourceMap: false,或者待打包完之后手動刪除Map文件;
? ? ? ? ? ? 4.路由懶加載(具體看官網(wǎng)很簡單);
? ? ? ? ? ? 5.第三方包分離將build?webpack.base.conf.js里添加
????????????????????externals:{;
? ? ????????????????????'echarts':"echarts"
????????????????????? },
? ? ? ? ? ? 6.打包后css背景圖無法訪問,將build? ?utils.js里添加? publicPath: '../../',
? ? ? ? 7.sass配置(webpack.base.conf.js)
????{ test: /\.scss$/, loaders: ["style", "css", "sass"]},
如有寫錯的地方歡迎大家評論
關(guān)于vue企業(yè)門戶網(wǎng)站模板和vue 企業(yè)網(wǎng)站的介紹到此就結(jié)束了,不知道你從中找到你需要的信息了嗎 ?如果你還想了解更多這方面的信息,記得收藏關(guān)注本站。
掃描二維碼推送至手機訪問。
版權(quán)聲明:本文由飛速云SEO網(wǎng)絡優(yōu)化推廣發(fā)布,如需轉(zhuǎn)載請注明出處。