摘要:前端知識點總結持續更新中框架和庫的區別框架有著自己的語法特點都有對應的各個模塊庫專注于一點框架的好處提到代碼的質量,開發速度提高代碼的復用率降低模塊之間的耦合度高內聚低耦合思維模式的轉換從操作的思維模式切換到以數據為主概述是一個漸進式的構建
前端知識點總結——VUE(持續更新中) 1.框架和庫的區別:
框架:framework 有著自己的語法特點、都有對應的各個模塊
庫 library 專注于一點
框架的好處:
1.提到代碼的質量,開發速度 2.提高代碼的復用率 3.降低模塊之間的耦合度 (高內聚低耦合)
UI:user interface
GUI : graphical user interface
CLI : command line interface
API : application interface
思維模式的轉換:
從操作DOM的思維模式 切換到 以數據為主2.Vue概述
1、what 是一個漸進式的構建用戶界面的js框架 2、where 小到的簡單的表單處理,大到復雜的數據操作比較頻繁的單頁面應用程序 3、why 1.方便閱讀的中文文檔 2.容易上手 (學習曲線比較緩和) 3.體積小 4.基于組件化的開發方式 5.代碼的可讀性、可維護性得到了提高 4、how 工作方式:可以通過豐富的指令擴展模板,可以通過各種各樣的插件來增強功能 搭建環境: 方式1 全局安裝 vue-cli $ npm install --global vue-cli # 創建一個基于 webpack 模板的新項目 $ vue init webpack my-project # 安裝依賴,走你 $ cd my-project $ npm install $ npm run dev 方式2: 直接引入對應的js文件3.Vue中基礎知識
1、雙花括號 mustache(胡子)/interpolation(插值表達式) 語法:4.組件化{{表達式}} 作用: 將表達式執行的結果 輸出當調用元素的innerHTML中;還可以將數據綁定到視圖 2、指令-循環指令 基本語法1:基本語法2: 作用: 在遍歷array這個集合時,將臨時變量保存在tmp中,創建多個any標簽 3、指令-選擇指令 語法: 作用: 根據表達式執行結果的真假,來決定是否要將當前的這個元素 掛載到DOM樹 4、指令-事件綁定 語法: 作用: 給指定的元素 將handleEvent的方法綁定給指定eventName事件 5、指令-屬性綁定 基本語法: 補充,支持簡寫: 作用: 將表達式執行的結果 綁定 到當前元素的myProp屬性 動態樣式綁定 動態樣式綁定
動態樣式類綁定動態樣式類的綁定
6、指令-雙向數據綁定 方向1:數據綁定到視圖 方向2:將視圖中(表單元素)用戶操作的結果綁定到數據 基本語法: <表單元素 v-model="變量"> 表單元素>
組件:組件就是可被反復使用的,帶有特定功能的視圖 所謂的組件化,就像玩積木一樣,把封裝的組件進行復用,把積木(組件)拼接在一起,構成一個復雜的頁面應用程序。 組件樹就是由各個組件構成的一種數據結構,它存在的意義是為了幫梳理應用程序 1、組件的創建 全局組件 Vue.component("my-com",{ template:`5.自定義指令it is a header
` }) 局部組件 new Vue({ components:{ "my-footer":{ template:"" } } }) 2、組件使用 作為普通的標簽去使用3、注意事項 1.組件的id和使用方式 遵循烤串式命名方式:a-b-c 2.如果一個組件 要渲染多個元素,將多個元素放在一個頂層標簽中,比如div、form 3.全局組件可以用在id為example的范圍內的任何一個組件內部,直接調用可以;但是局部組件只能在父模板中直接調用
1、創建和使用 Vue.directive("change",{ bind:function(el,bindings){ //首次調用 }, update:function(el,bindings){ //只要是有數據變化,都會調用 }, unbind:function(){ //解綁 } })6.過濾器
過濾器是針對一些數據 進行篩選、過濾、格式化等相關的處理,變成我們想要的數據
過濾器的本質 就是一個帶有參數帶有返回值的方法
Vue1. 支持內置的過濾器,但是Vue2. 就不再內置過濾器,但是支持自定義過濾器。
1、過濾器的創建和使用
1.創建 Vue.filter( "myFilter", function(myInput){ //myInput是在調用過濾器時,管道前表達式執行的結果 //針對myInput,按照業務需求做處理 //返回 return "處理后的結果" }) 2.使用{{expression | myFilter}}
2、如何在調用過濾器時,完成參數的發送和接受
1.發送7.復合組件{{expression | myFilter(參數1,參數2)}} 2.接受 Vue.filter("myFilter",function(myInput,參數1,參數2){ return "處理后的結果" })
知識回顧: Vue.component("my-header",{ template:`` });8.生命周期復合組件:并不是新的概念,就是一個組件,只不過這個組件中 可以調用其他的組件 注意事項: 1.組件要渲染的內容 取決于在定義組件時template 效果是出不來的 2.允許在一個組件中,直接來調用另外一個組件
四個階段: create 準備工作 (數據的初始化。。。) mount 掛載前后針對元素進行操作 update 數據發生變化, destroy 清理工作 (關閉定時器、集合清空..) beforeCreate/created beforeMount/mounted beforeUpdate/updated beforeDestroy/destroyed9.常用屬性
1、watch 1. 表單元素的雙向數據綁定 v-model="myValue" 2.監聽 watch:{ myValue:function(newValue,oldValue){ } } 2、computed 計算屬于是用于在模板中,搞定復雜的業務邏輯,因為有依賴緩存。 1.指定計算屬性 computed:{ myHandle:function(){ return 數據 } } 2.調用10.組件間通信{{myHandle}}
1、父與子通信 (props down) 1.發送11.補充組件創建的方式2.接受 到son組件: Vue.component("son",{ props:["myName"], template:` {{myName}}
` }) 2、子與父通信 (events up) 1.綁定 methods:{ handleEvent:function(msg){} }2.觸發 子組件內部: this.$emit(‘customEvent’,100); 3、ref(reference 引用/參考 外號) 幫助在父組件中 得到子組件中的數據、方法。 1.指定ref屬性 2.根據ref得到子組件實例 this.$refs.mySon 4、$parent this.$parent得到父組件的實例 5、兄弟組件通信 1.var bus = new Vue(); 2.接收方 bus.$on("eventName",function(msg){}) 3.發送方 bus.$emit("eventName",123);
1、直接在template屬性中指定模板內容 1.全局組件 Vue.component 2.局部組件 { components:{ "my-footer":{template:``} } } 2、.vue結尾的文件 3、多帶帶指定一個模板內容 Vue.component("",{ template:"#myContent" })12.路由模塊
路由模塊的本質 就是建立起url和頁面之間的映射關系
1、SPA的基本概念和工作原理
SPA:single page application 單一頁面應用程序,只有一個完整的頁面; 它在加載頁面時,不會加載整個頁面,而是只更新某個指定的容器中內容。 比如Gmail、移動的webApp 工作原理: 1.解析地址欄 完整的頁面地址、路由地址 2.根據路由地址 從路由詞典中找到真正的要加載的頁面 3.發起ajax請求 請求要加載的頁面 4.像指定的容器中 插入加載來的頁面
2、路由模塊的基本使用
專業術語: router路由器 route路由 routes 路由數組(路由詞典) 1.引入vue.js vue-router.js 2.指定一個容器3.創建業務所需要用到的組件類 var MyLogin = Vue.component() 4.配置路由詞典 const myRoutes = [ {path:"",component:MyLogin}, {path:"/login",component:MyLogin} ]; const myRouter = new VueRouter({ routes:myRoutes }) new Vue({ router:myRouter }) 5.測試 修改地址欄中的路由地址,測試看加載的組件是否正確 注意事項: 1.先引入vue,再引入插件 2.一定要指定router-view 3.route路由 {path:"",component:} routes 路由數組 [] router 路由器:按照指定的路由規則去訪問對應的組件 new VueRouter
3、使用路由模塊來實現頁面跳轉的方式
方式1:直接修改地址欄 方式2:js this.$router.push(‘路由地址’); 方式3:
4、完成參數的傳遞
在頁面之間跳轉的時候,在有些場景下,需要同時指定參數 1.明確發送方和接收方 list --20--> detail 1.配置接收方的路由地址 /detail --》 /detail/:index this.$route.params.index 2.發送 routerLink to="/detail/20" this.$router.push("/detail/20")
5、路由嵌套
在一個路由中,path對應一個component,如果這個component需要根據 不同的url再加載其他的component,稱之為路由的嵌套 舉例:比如A組件現在需要根據不同的url,加載B組件或者C組件 1.給A組件指定一個容器13.搭建基于CLI開發環境的方式2.配置路由詞典 { path:"/a", component:A, children:[ {path:"/b",component:B} ] } 需求:現在有兩個組件,分別是login/mail,建立SPA。 在此基礎上,希望mail組件 嵌套inbox/outbox/draft 補充:在設置子路由,路由匹配規則依然是適用的, 只不過路由地址為空和異常,要攜帶父組件的路由地址 /mail /mail/draft
1.指定一個文件夾 C:xampphtdocsframeworkvueproject 2.將tpls.zip拷貝到project中 3.右鍵單擊壓縮包,解壓縮到當前文件夾 4.進入到tpls 5.同時按下shift和鼠標右鍵,選擇在此位置打開命令行串口 6.執行npm install 7.執行npm start14.axios
1.axios的get方法
export const getAjax= function (getUrl,getAjaxData) { return axios.get(getUrl, { params: { "getAjaxDataObj1": getAjaxData.obj1,//obj1為getAjaxData的一個屬性 "getAjaxDataObj2": getAjaxData.obj2 } }) }
2.axios的post方法
export const postAjax= function (getUrl,postAjaxData) {
return axios.get(postUrl, {
"postAjaxDataObj1": postAjaxData.obj1,//obj1為postAjaxData的一個屬性 "postAjaxDataObj2": postAjaxData.obj2
})
}
3.axios的攔截器
主要分為請求和響應兩種攔截器,請求攔截一般就是配置對應的請求頭信息(適用與常見請求方法,雖然ajax的get方法沒有請求頭,但是axios里面進行啦封裝),響應一般就是對reponse進行攔截處理,如果返回結果為[]可以轉化為0
1.請求攔截:將當前城市信息放入請求頭中
axios.interceptors.request.use(config => {
config.headers.cityCode = window.sessionStorage.cityCode //jsCookie.get("cityCode")
return config
},
2.響應攔截:處理reponse的結果
axios.interceptors.response.use((response) =>{ let data = response.data if(response.request.responseType === "arraybuffer"&&!data.length){ reponse.date=0 } })
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/92923.html
摘要:前言一直混跡社區突然發現自己收藏了不少好文但是管理起來有點混亂所以將前端主流技術做了一個書簽整理不求最多最全但求最實用。 前言 一直混跡社區,突然發現自己收藏了不少好文但是管理起來有點混亂; 所以將前端主流技術做了一個書簽整理,不求最多最全,但求最實用。 書簽源碼 書簽導入瀏覽器效果截圖showImg(https://segmentfault.com/img/bVbg41b?w=107...
摘要:整理收藏一些優秀的文章及大佬博客留著慢慢學習原文協作規范中文技術文檔協作規范阮一峰編程風格凹凸實驗室前端代碼規范風格指南這一次,徹底弄懂執行機制一次弄懂徹底解決此類面試問題瀏覽器與的事件循環有何區別筆試題事件循環機制異步編程理解的異步 better-learning 整理收藏一些優秀的文章及大佬博客留著慢慢學習 原文:https://www.ahwgs.cn/youxiuwenzhan...
摘要:五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新,歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香,消溽暑。鳥雀呼晴,侵曉窺檐語。葉上初陽乾宿雨,水面清圓,一一風荷舉。家住吳門,久作長安旅。五月漁郎相憶否。小楫輕舟,夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly;請::點擊::集web前端最近很火的vue2框架資源;定時更新,歡迎 Star 一下。 蘇...
閱讀 2627·2021-11-23 09:51
閱讀 860·2021-09-24 10:37
閱讀 3612·2021-09-02 15:15
閱讀 1962·2019-08-30 13:03
閱讀 1881·2019-08-29 15:41
閱讀 2624·2019-08-29 14:12
閱讀 1424·2019-08-29 11:19
閱讀 3301·2019-08-26 13:39