學習vue基礎知識（一）

什麼是vue

前端框架的3馬車 angular 谷歌公司 m(數據)v（視圖）c（控制器） 雙向數據綁定react facebook （非死不可） 視圖層的框架view 虛擬domvue 尤玉溪 雙向數據綁定+虛擬dom是一套用於構建用戶界面的漸進式框架 入門難度最低

爲何要學習vue

高效 1.運行效率高 採用虛擬dom 減小真實dom的操做使項目的運行效率大大提升2.開發效率高 採用了組件化開發 將開發者的精力從dom操做解放出來，轉移到數據操做上

愛上vue 3 5

什麼叫作熱愛 無時無刻的思念 寫頁面使用vue 拋棄原來二階段的寫法（直接操做dom）

vue的實例化

1.下載引入
2.找一個dom元素 這個dom要被vue控制
3.在js中實例化vue

數據綁定

指令 directive

指令後面跟的都是表達式或者變量

內置指令 vue內部提供的直接使用自定義指令 實現自定義某些功能的指令

條件渲染 均可以控制一個元素的顯示或者隱藏 v-show 經過樣式 display：none v-if 直接控制div元素有仍是沒有 （v-else v-elseif）事件綁定 使用vue中的事件 v-on：事件名（和原生js的事件名一致）:事件的處理函數 @事件名:事件處理函數 事件的處理函數寫在實例的配置項 motheds 處理函數的默認參數是事件對象 若是須要傳遞其餘參數 事件對象須要經過`$event 手動傳遞屬性綁定 v-bind 元素的屬性都是跟的固定的值 屬性綁定能夠實現 屬性的後方跟變量或者表達式 v-bind：要綁定的屬性名 <img v-bind:src=''> :要綁定的屬性名 <img :src=''>列表渲染v-for 數組 表格 數字 字符串<td v-for ="(item,index) in/of 數據源"> </td> <td v-for ="(value,key,index) in/of 數據源"> </td>

雙向數據綁定 v-model v-model 至關於 事件綁定v-on 和屬性 v-bind 集合體將表單元素和data裏的數據進行綁定 任何一方發生改變另外一方都會跟着變

1. 表單元素可使用

2. 組件也可用

v-html 至關於innerhtmlv-text 至關於innerText

自定義指令

全局自定義指令

Vue.directive('指令的名字',{
 insterted(el){
   el 自定義指令綁定的元素
 }
})
v-自定義指令的名字

局部自定義指定 在哪註冊在哪用 組件和實例均可以註冊局部自定義指令

new Vue({
 directives:{
   自定義指令的名字:{
     inserted(el){
​
     }
   }
 }
})

組件

1.建立組件 2.註冊組件 3.使用組件局部組件 全局組件 的區分就是註冊位置不一樣全局的Vue.component('組件名',{ 組件的配置項})局部的new Vue({ ... components:{ 組件名：{ 配置項 }, hehe:{ template:'#hehe', components:{ xixi:{ template:'#xixi', components:{ .... } } } } }vue})

組件的配置項和實例配置的區別

綁定元素 el template 數據 data 對象 data 函數自定義指令 directive directive方法 methods methods組件 計算屬性監聽....

組件通訊

在組件和實例中本身的數據只有本身能夠控制

1. 父子通訊 props父組件控制子組件 父組件控制本身的數據變化，將變化後的數據經過props自定屬性傳子組件

2. 子父通訊 $emit 子組件控制父組件的數據 父組件控制本身的數據變化，將控制函數經過emit自定義事件傳遞子組件 供子組件調用

3. 兄弟通訊親兄弟a.狀態提高 父子和子父結合遠親狀態b.事件總線 eventbus c.全局狀態管理

vue的腳手架工具

將npm鏡像換成淘寶鏡像npm install -g @vue/clivue -V 出現版本號新建一個文件 進入文件目錄 執行 vue create name (名字隨便起)進入項目目錄 執行npm run serve

過濾器

數據庫時間儲存格式 時間戳時間 2007.10.11 2007/01/11 2007年10月11日 對數據的處理

1. 全局過濾器 Vue.filter(過濾器名,處理函數)

2. 局部過濾器 組件或者實例裏的配置項filters:{過濾器名,處理函數}

監聽watch

watch 是配置項的一種 主要功能是監聽數據的改變

人生

人生如戲 大悲咒0-1-0猥瑣發育別浪入世打怪升級更新本身在世離世回顧一輩子 尋找遺憾解決遺憾

生命週期

4（4個階段） 8（每一個階段2個鉤子函數） 2（緩存的鉤子） 1（捕獲錯誤的鉤子函數）vue（實例）組件的一輩子和人生及其想似

beforeCreate建立 建立虛擬dom createcreatedbeforeMount掛載 虛擬dom 變成真實dom 出如今頁面上 在世mounted beforeUpdate更新 更新數據->更新dom元素updatedbeforeDestory銷燬 組件離世的時候destroyed

經常使用 created 網絡請求mounted 網絡請求 初始化dombeforeDestory/destroyed 組件銷燬前擦屁股解決遺憾

eslint

幫助咱們代碼更加規範 錯誤很是多流派 tab 2空格 4空格{} 換行流 function test(){

}

function test(){

}

腳手架項目的基本目錄

src 源碼目錄 main.js 入口文件 xx.vue 單文件組件public 公有資源node_module 依賴包package.json 項目依賴readme 項目提示

項目分類

1. spa single page web application 單頁面應用 只有一個htmla.seo優化很差 b.首屏加載過慢 首屏白屏c.頁面切換的用戶體驗好

2. mpa 多頁面應用 多個html

組件切換1 動態組件

<div is = 'hehe'></div> is 能夠指定渲染的組件名div 渲染成一個叫呵呵的組件推薦與component 標籤一塊兒使用

組件切換2 路由

監聽地址欄的改變 根據改變渲染不一樣的組件

基本使用

1. 下載安裝路由 npm install vue-router

2. 建立路由表 a. 引入vue 和vue-router b. 在vue中使用vue-router c. 建立路由實例 肯定路徑和組件的對應關係d. 拋出路由實例

3. 在main.js 註冊路由

4. 就可使用2個組件<router-link to tag active-class > 控制地址欄改變 <router-view> 開啓一片空間渲染指定的組件

路由的模式 mode 哈希 和歷史 經過路由表裏 mode 設置 hash 路由 地址欄中有# history 路由 沒有# 和正常使用的相似 命名路由 命名視圖 重定向 聲明式導航 和編程式導航 <a href='www.baidu.com'/> window.location.href='http://www.javashuo.com/tag/www.baidu.com'

<router-link > 進行組件切換叫作 聲明式導航 經過路由對象下的api 進行切換叫作編程式導航 vm.$router push replace go back forward push 會將組件加入到緩存棧 能夠一級一級返回 replace 沒有加入緩存棧 回到最初的起點

路由傳參 切換組件的時候給目標組件傳一個參數

1. 切換的時候傳遞參數

2. 切換完畢 在目標組件接受參數

動態路由 路由的路徑中的有1項或者幾項是變量能夠變化在目標組件 經過 $route.params 來接受數據routes:[ { path:'/login/:hehe/:xixi' }]query傳參 至關於get 傳遞參數 數據會出如今地址欄上 缺乏安全性 有數據長度限制 this.$router.push('/name?us=123$ps=123') this.$router.push({path:'/name',query:{us:123,ps:123}}) 在目標組件裏經過this.$route.query()進行接受params傳參 不會出如今地址欄上 沒有長度限制問題 不能和path一塊兒使用 this.$router.push({name:"hehe",params:{us:123,ps:123}}) 在目標組件裏經過 this.$route.param()接受

嵌套路由 (子路由)

1. 路由表造成嵌套 子路由路徑不加/routes:[ { path:"/my", component:My, children:[ {path:'userInfo',component:UserInfo} ] }]

2. 在目標組件裏 在嵌套一個router-view

路由守衛 （攔截器）

1. 某些頁面登陸以後才能訪問 沒有登陸不等訪問