cdn模式下vue的基本用法詳解
我們知道jq是簡(jiǎn)化了dom操作,而react和vue則是通過(guò)使用虛擬dom的方式,不需要頻繁的更改ui界面,而是通過(guò)更改數(shù)據(jù)的方式來(lái)更新界面。我們知道些jq插件時(shí)會(huì)在IFFE中傳入jQuery,jQuery在此程序中映射為符號(hào),這樣可以避免$號(hào)被其他庫(kù)覆寫(xiě)。其實(shí)vue中new Vue()對(duì)象,效果也是類(lèi)似,可以避免vue范圍類(lèi)的數(shù)據(jù)或變量被污染。我們先來(lái)看一些基本的用法插入文本值
v-html 直接插入html結(jié)構(gòu)
v-bind屬性 <a :href="url" rel="external nofollow" >
v-if
v-else 用作 v-if 的 else-if 塊??梢枣?zhǔn)降亩啻问褂?/p>
v-model v-model 指令用來(lái)在 input、select、text、checkbox、radio 等表單控件元素上創(chuàng)建雙向數(shù)據(jù)綁定,根據(jù)表單上的值,自動(dòng)更新綁定的元素的值。
v-on 按鈕的事件我們可以使用 v-on 監(jiān)聽(tīng)事件,并對(duì)用戶(hù)的輸入進(jìn)行響應(yīng)。 <a @click="doSomething">
v-show
Vue.js 允許你自定義過(guò)濾器,被用作一些常見(jiàn)的文本格式化。
v-for 數(shù)組
模板中使用 v-for
v-for 可以通過(guò)一個(gè)對(duì)象的屬性來(lái)迭代數(shù)據(jù)
computed與method 可以說(shuō)使用 computed 性能會(huì)更好,但是如果你不希望緩存,你可以使用 methods 屬性。
computed 屬性默認(rèn)只有 getter ,不過(guò)在需要時(shí)你也可以提供一個(gè) setter
$watch
style 在對(duì)象中傳入更多屬性用來(lái)動(dòng)態(tài)切換多個(gè) class
直接綁定到一個(gè)樣式對(duì)象,v-bind:style 可以使用數(shù)組將多個(gè)樣式對(duì)象應(yīng)用到一個(gè)元素上
事件
復(fù)選框
單選框
select 列表
組件組件(Component)是 Vue.js 最強(qiáng)大的功能之一。組件可以擴(kuò)展 HTML 元素,封裝可重用的代碼。全局組件所有實(shí)例都能用全局組件
局部組件
prop 是父組件用來(lái)傳遞數(shù)據(jù)的一個(gè)自定義屬性。父組件的數(shù)據(jù)需要通過(guò) props 把數(shù)據(jù)傳給子組件,子組件需要顯式地用 props 選項(xiàng)聲明 "prop"
自定義事件父組件是使用 props 傳遞數(shù)據(jù)給子組件,但如果子組件要把數(shù)據(jù)傳遞回去,就需要使用自定義事件
Vue.js 路由允許我們通過(guò)不同的 URL 訪問(wèn)不同的內(nèi)容。
安裝
1、直接下載 / CDN https://unpkg.com/vue-router/dist/vue-router.js
2、NPM 推薦使用淘寶鏡像: cnpm install vue-router
Vue 在插入、更新或者移除 DOM 時(shí),提供多種不同方式的應(yīng)用過(guò)渡效果。 Vue 提供了內(nèi)置的過(guò)渡封裝組件,該組件用于包裹要實(shí)現(xiàn)過(guò)渡效果的組件。
mixin mixins就是定義一部分公共的方法或者計(jì)算屬性,然后混入到各個(gè)組件中使用,方便管理與統(tǒng)一修改。如果組件中定義的方法與混入對(duì)象中的方法/屬性一樣,組件中的優(yōu)先級(jí)大于混入對(duì)象中的(方法會(huì)調(diào)用多次)
Ajax Vue 要實(shí)現(xiàn)異步加載需要使用到 vue-resource 庫(kù) get請(qǐng)求
post 發(fā)送數(shù)據(jù)到后端,需要第三個(gè)參數(shù) {emulateJSON:true}。 emulateJSON 的作用: 如果Web服務(wù)器無(wú)法處理編碼為 application/json 的請(qǐng)求,你可以啟用 emulateJSON 選項(xiàng)。
本文升華自菜鳥(niǎo)教程vue模塊詳細(xì)的demo見(jiàn)我的 github: https://github.com/JserJser/reactWebApp/tree/master/vue-cdn
- Vue項(xiàng)目打包編譯優(yōu)化方案
- Vue 打包體積優(yōu)化方案小結(jié)
- Vue-Cli項(xiàng)目?jī)?yōu)化操作的實(shí)現(xiàn)
- 壓縮Vue.js打包后的體積方法總結(jié)(Vue.js打包后體積過(guò)大問(wèn)題)
- vue-cli3.0如何使用CDN區(qū)分開(kāi)發(fā)、生產(chǎn)、預(yù)發(fā)布環(huán)境
- vue 優(yōu)化CDN加速的方法示例
- Vue項(xiàng)目使用CDN優(yōu)化首屏加載問(wèn)題
- vue項(xiàng)目中用cdn優(yōu)化的方法
- Vue使用CDN引用項(xiàng)目組件,減少項(xiàng)目體積的步驟
相關(guān)文章
使用Vite+Vue3+TypeScript?搭建開(kāi)發(fā)腳手架的詳細(xì)過(guò)程
這篇文章主要介紹了Vite+Vue3+TypeScript?搭建開(kāi)發(fā)腳手架的詳細(xì)過(guò)程,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-02-02vue中獲取滾動(dòng)table的可視頁(yè)面寬度調(diào)整表頭與列對(duì)齊(每列寬度不都相同)
這篇文章主要介紹了vue中獲取滾動(dòng)table的可視頁(yè)面寬度,調(diào)整表頭與列對(duì)齊(每列寬度不都相同),需要的朋友可以參考下2019-08-08Vue3實(shí)現(xiàn)全局loading指令的示例詳解
這篇文章主要介紹了Vue3實(shí)現(xiàn)全局loading指令,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-06-06vue實(shí)現(xiàn)簡(jiǎn)單數(shù)據(jù)雙向綁定
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)簡(jiǎn)單數(shù)據(jù)雙向綁定,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-04-04手把手教學(xué)vue的路由權(quán)限問(wèn)題
這篇文章主要介紹了手把手教學(xué)vue的路由權(quán)限問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-12-12關(guān)于Elementui中toggleRowSelection()方法實(shí)現(xiàn)分頁(yè)切換時(shí)記錄之前選中的狀態(tài)
這篇文章主要介紹了關(guān)于Elementui中toggleRowSelection()方法實(shí)現(xiàn)分頁(yè)切換時(shí)記錄之前選中的狀態(tài),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03vue中實(shí)現(xiàn)圖片壓縮 file文件的方法
這篇文章主要介紹了vue中實(shí)現(xiàn)圖片壓縮 file文件的方法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-05-05