當前位置：首頁 > 前端技术 > vue >内容正文

vue

vue知识点归纳与总结(笔记)

發布時間：2023/12/20 vue 38 豆豆

生活随笔收集整理的這篇文章主要介紹了 vue知识点归纳与总结(笔记) 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

前言

????當前總結是本人在業余學習與實踐過程后的總結與歸納,旨在檢驗自己的積累,也方便忘記時查閱,同時也希望能幫助那些這方面知識匱乏的同行門,總結是基于vue2.x,vue-cli3.x,主要記錄些，vue常用的指令、事件，監聽、數據綁定、過濾器、組件、動畫、vuex，vue-router等日常工作中時常用到的東西,也有些常用的插件和開發工具的介紹與使用，以及部分性能優化的建議與實踐,如有不對，或不足的地方，也請各位大神，指出來，學習學習。

1.基礎

1. 理解mvvm

m 是vue實例中的data,自定義的數據或后端返回的數組
不是后端mvc里的model概念不同。
vm 是vue的實例 m和v之間的調度者是mvvm的核心思想
v是 html 要渲染的。

2. 常用指令

v-cloak 解決{{}}插值閃爍問題
v-text 會先執行覆蓋元素中原本的內容但是插值表達式只會覆蓋自己的占位符，默認不會閃爍
v-html 渲染 html標簽覆蓋元素中原有元素內容
v-bind: 簡寫為: 用來綁定數據可以寫合法的js表達式
v-on: 簡寫為 @ 用來點擊事件

3.常用事件修飾符

stop 阻止冒泡：外層和里層都有方法點擊里層會產生冒泡，也會觸發外層的事件。
順序從里到外產生事件
prevent 阻止瀏覽器默認行為：
a標簽有瀏覽器默認行為。
capture 捕獲事件：點擊里層先觸發外層再觸發里層順序從外到里產生事件
self 只觸發自己本身的事件不會產生冒泡和捕獲事件類似于阻止冒泡但只針對自己那一層最外層還是會被最里層冒泡冒到 stop 是阻止所有層次
once 事件只執行一次

4.數據的綁定

v-bind: 數據的單向綁定
v-modle :數據的雙向綁定這個只能用于表單元素中

tips: 表單元素 radio text address email select checkbox textarea

5.class 綁定

1.數組帶對象

data(){
return{
flag:true
}
}

tips:可以在類中的數組中寫三元表達式,但推薦使用對象來代替它控制是否渲染

2.單純的對象

data(){
return{
falg1:true,
falg2:true
}
}

3.數組帶三元

data(){
return{
falg:true,
}
}

4.對象升級

data(){
return{
classObj:{classA:falg1,classB:flag2}
}
}

tips:直接使用一個對象數組來控制樣式

5.使用style 的對象來實現樣式的修改

data(){
return{
styleObj:{color:red}
}
}

5.使用style 的數組帶對象來實現樣式的修改

<div :class="[styleObj1,styleObj2]" /> data(){return{styleObj1:{color:red},styleObj2:{color:red}} }

6.v-for的使用

1. 可以遍歷: 普通數組,對象數組,對象,還可以是數字

<div v-for='(item,key,index) in object' :key='index'>{{item}}--{{key}}--{{index}} </div>

tips:在遍歷對象的時候有多個index索引,遍歷數字時是從1開始的。綁定key時屬性值必須是number或者string

7.v-if、v-show

v-if 有較高的切換性能 , 適合元素可能永遠不會被用戶看到。
v-show 有較高的初始渲染消耗,適合元素頻繁切換。

8 調試插件

在谷歌商店找vue-devtools插件,使用這個插件
并設置插件,允許訪問文件網址。會在調試中出現vue相關的東西
debugger 直接寫可以調試

9 過濾器

全局和私有過濾器

<div v-for='(item,key) in object' :key='index'>{{item | dateFormat}} </div>

全局

vue.filter('過濾器名稱',function(){

})

私有(局部)

filters:{dateFormat:function(data,param){do some} }

tips：

data 就是 | 第一個參數已經被定死了,永遠是, 管道左邊要被轉換的數據,param 是過濾方法傳進來的其他參數,過濾器采用就近優先原則，如果私有和全局的名稱一樣就優先采用私有的。
padstart 和 padend es6 的補0方法
第二個參數是字符串,第三個參數是表達式,如果自己定義參數值是動態的會報錯,還未找到原因,后期會找時間再看看,目前就是簡單的過濾用過濾器,復雜點用方法,能用計算屬性用計算屬性,有緩存,能提高性能

10 按鍵修飾符

監聽pc鍵盤上的值

tips: enter 可以換成鍵盤上的任何一個值，只要去找相關的鍵盤碼，就都可以使用,推薦設置個別名，放在沒有按鈕操作的模板。

自定義全局按鍵修飾符
Vue.config.keyCodes.f2=113,就可使用了

tips: f2修飾符是vue里沒有定義的自己創建。

11 定義指令

1. 全局

定義的指令都要按規定去創建在bind 和
inserted
還有 updated 中去創建

Vue.directive('focus'{//每當指令綁定到元素上的時候,會立即執行bind 函數,只執行一次,注意:在元素剛綁定元素的時候,還沒有插入到dom中去,這時候,調用focus方法沒有作用,即放在focus 放在bind中是不起作用的bind:function(el,binding){el.style.color=binding.value},

//表示元素插入到dom中的時候,只執行一次
inserted:function(){
el.focus() js行為放在這里去創建
},

//當組件更新的時候,可能會觸發多次
updated:function(){},

})

tips:

參數1指令名稱,在定義的時候，指令名稱前面不需要加v-前綴,但是調用的時候,必須在指令名稱前加v-前綴;參數2:是一個對象，在這個對象身上，有一些指令相關的函數，這些函數可以在特定的階段,執行
相關的操作。
在每個函數中,的第一個參數,永遠是el, el是代表被bind綁定的元素,el是個原生的js對象。
第二個參數可以是用戶傳進來值 bingding.value

2. 局部

directives:{'指令名':{bind:function( el,b){}

3. 簡寫

'指令名':function(el,binding){ } //注意這個function 等同于把代碼寫到bind和update中去

tips: 樣式相關的指令放在bind中,js行為相關的放在inserted中比較合適,防止指令不生效。使用場景寫組件時可以用這個去改樣式

12 生命周期

beforeCreate()：這是我們遇到的第一個生命周期函數,表示實例完全被創建出來之前,會執行它…
created(): 這是遇到的第二個生命周期函數…
beforeMount()：這是遇到的第3個生命周期函數,表示模板已經在內存中編輯完成,但是尚未把模板渲染(掛載)到頁面中。在 beforeMount 執行的時候,頁面中的元素,還沒有被真正替換過來,只是之前寫的一些模板字符串。就像{{text}}這樣
mounted()：這是遇到的第四個生命周期函數,表示內存中的模板,已經真實的掛載到了頁面中,用戶已經可以看到渲染好的頁面了。只要執行完這個生命周期,就表示整個vue實例已經初始化完畢了，此時，組件已經脫離了創建階段，進入到了運行階段。
beforeUpdate()：這時候表示,我們的界面還沒有被更新[但數據已經被更新了頁面中顯示的數據，還是舊的，此時data數據是最新的。頁面尚未和最新的數據保持同步
update() : 這一步執行的是先根據data中最新的數據，在內存中重新渲染出一份最新的內存dom樹,當最新的內存dom樹被更新后,會把最新的內存DOM樹重新渲染到真實的頁面中去,這時候，就完成了數據data(model層)->view(視圖層)的更新，
頁面和data數據已經保持同步了,都是最新的。
beforeDestory :當執行 beforeDestory 鉤子函數的時候,Vue實例就已經從運行階段,進入到銷毀階段, 當執行beforeDestroy的時候，實例身上所有的data和所有的methods以及過濾器、指令...都處于可用狀態,此時,還沒有真正執行銷毀的過程。
destroyed :
當執行這個函數的時候,組件已經被完全銷毀了,此時，組件中所有的數據,方法，指令，過濾器...都已經不可用了

13 過渡類名實現動畫

1. vue的內置動畫

2. 使用第三方類實現動畫

3. 在屬性中聲明js鉤子實現半場動畫(只需要進場,不需要離場)

<transition<div @before-enter="beforeEnter"@enter="enter"@after-enter="afterEnter"></div></transition><transition<div v-show="flag"@before-enter="beforeEnter"@enter="enter"@after-enter="afterEnter"></div></transition><script>methods:{beforeEnter(el){//動畫入場之前,此時動畫尚未開始, 可以在beforeEnter中設置元素開始動畫之前的初始位置 el.style.transform="translate(0,0)"},enter(el,done){/*這句話,沒有實際的作用,但是,如果不寫,出不來動畫效果,可以認為這個會強制刷新動畫,ofset觸發了重繪重排導致動畫更新了*/el.offsetWidthel.style.transform="translate(150px,450px)"el.style.transition='all 1s ease'/*這里的done 代表著 afterEnter的引用,這個會立即執行afterEnter 否則會有延時 */done() },afterEnter(el){/*動畫完成之后,會調用afterEnter */this.flag=!this.flag}} </script><li></transition-group> .v-enter,.v-leave-to{opacity: 0;transform:translateY(80x);}.v-enter-active,.v-leave-active {transition: all 0.6s ease;}/*離開后下一個東西沒有動畫使用這個可以使用動畫實現下一個東西漸漸地飄上來的效果,要和 v-leave-active的absolute 配合固定寫法*/.v-move {transition:all 0.6s ease}.v-leave-active{/* absolute 有個特點元素默認寬度就是最小值,要在元素上添加width:100%*/position:absolute;}<transition mode="out-in"><component :is="comName" ></component> </transition>

tips:

v-enter [這是一個時間點] 是進入之前,元素的起始狀態,此時還沒有開始進入

v-leave-to [這是一個時間點] 是動畫離開之后，離開的終止狀態,此時，元素動畫已經結束了

v-enter-active
[入場動畫的時間段]

v-leave-active
[離場動畫的時間段]

animated 是個動畫庫新版本似乎不需要加入

使用：duration=200 來表示動畫的時間如果只寫一個表示統一配置了開場和離場時間用對象可傳入c入場和離場 duration="{enter:200,leave:400}"

添加appear屬性,實現頁面剛展示出來,入場時候的效果

通過為transition-group 元素,設置tag屬性
指定 transition-group 渲染為指定元素,如果不指定tag屬性,默認,渲染為span 標簽

mode="out-in" 先過渡再進來,防止有陰影,通過mode`來設置過渡方式。

注意：最外層一定要用transition包裹著,動畫似乎升級了,可以在transition標簽中加入name屬性,并且在css樣式中把v,替換為你的name屬性值。

14 組件

1.使用Vue.extend 來創建全局的Vue組件

var coml=Vue.extend({template:'<h3>這是使用Vue.extend 創建的組件</h3>' }) //第一個參數組件名稱,第二個參數創建出來的組件模板對象Vue.component('myComl',coml) <my-coml><my-coml/>

2.使用 vue.component 來創建組件

Vue.component('mycom2',{

template:’<div>
<h3>
這是直接使用Vue.component 創建出來的組件
</h3>
</div>’

})

3.使用 template 來創建組件

<template id='tmp1'> <div><h1>這里通過template元素,在外部定義的組件結構,這個方式,有代碼的智能提示和高量</h1> </div> </template>

Vue.component(‘mycom3’,{
template:’#tem1’
})

私有組件 componment

<template id='temp2'><h1>這是私有login組件</h1> </template>

componment:{
login:
{
template:‘tmpl2’
}
}

如果使用了Vue.component 定義了全局組件的時候,組件名稱使用了駝峰命名，在引用的時候大寫的駝峰要改為小寫,同時兩個單詞之間使用-鏈接
Vue.component第一個參數:組件的名稱,將來在引用組件的時候，就是一個標簽形式來引入的,第二個參數：
Vue.extend 創建的組件，其中 template就是組件將來要展示的內容
注意:不論是哪種方式創建出來的組件,組件的template 屬性指向的模板內容,必須有且只能有唯一的一個根元素。

15 組件里的data

組件可以有自己的data數據

組件的data和實例中的data有點不一樣,實例中的data 可以為一個對象,但是組件中的data必須是一個方法。

組件中的data 除了必須為一個方法之外,這個方法內部,還必須返回一個對象才行。

組件中的data數據,使用方式，和實例中的data使用方式完全一樣!

組件里data為什么必須是個方法返回個對象呢？因為要確保每個實例里的數據是唯一的,獨有的。如果data里的數據是放在實例外部的,會被其他實例共享。

16 組件切換

組件里的切換可以用 v-if 和 v-else 進行切換
即標簽頁切換

vue 提供了 component，來展示對應名稱的組件
//component 是一個占位符:is屬性,可以用來指定要展示的組件的名稱寫死的時候這個組件名要是個字符串,動態綁定時key普通寫法就好,但value必須是字符串。<component :is="'componentId'"> </component><component :is="oneName"> </component>data(){return{oneName:"login",} }
17 父子組件通訊
父子組件傳值,通過v-bind:(:)來傳值，通過props來接收值
父組件用事件綁定機制傳遞方法給子組件—v-on 簡寫 @

emit 英文原意: 是觸發,調用,發射的意思。
@handle=show 父組件傳show方法給子組件。
子組件接收父組件的方法,并用$emit把子組件的值傳給父組件
//子組件中methods:{handle(){this.$emit('func',{age:1,name:'搞事'})}}
- 在父組件中接收子組件所有參數的同時，添加自定義參數
- 1.子組件傳出單個參數時：// 子組件 this.$emit('test',this.param) // 父組件 @test='test($event,userDefined)'2.子組件傳出多個參數時：// 子組件 this.$emit('test',this.param1，this.param2, this.param3) // 父組件 arguments 是以數組的形式傳入 @test='test(arguments,userDefined)'
  tips：子組件中的data數據,并不是通過父組件傳遞過來的,而是子組件自身私有的,比如子組件通過ajax,請求回來的數據,都可以放到data身上,data 上的數據都是可讀可寫的;
  
  18 使用 ref 獲取dom元素
  <h3 id='myh3' ref='myh3'> </h3>methods:{getElement(){console.log( this.$refs.myh3.innerText)} }//組件也可以使用ref,讓父組件調用子組件里的方法和屬性值 <login ref='mylogin'> </login>methods:{getElement(){//父組件調用子組件里的屬性值console.log(this.$refs.mylogin.msg)} }
  tips:
- refs; s代表多個引用,會有多個dom元素。
- ref英文是reference,值類型和引用類型。

2.路由切換模板寫法,默認渲染為一個a標簽,
使用tag的span可以用來轉換模板的標簽名

<router-link to="/login" tag='span' > 登錄 </router-link>

3.路由配置

new VueRouter({ //路由匹配規則 routes:[{path:'/',redirect:'/login'}, {path:'login',component:login },{path:'/register',component:register }

]

//路由高亮的類名
linkActiveClass:‘myactive’
})

var vm=new Vue({
el:’#app’,
data:{},
methods:{},
router //將路由規則對象注冊到vm實例上,用來監聽Url地址的變化，然后展示對應的組件。
})

4.路由傳參

query

//獲取id this.$route.query.id

在path上設置參數

//參數要一一對應不可缺失,不然可能會造成路由的不匹配 < router-linkto="/login/12/ls" > {path:'/login/:id/:name',component:login }

params 新的方式可看文檔

5.子路由

<router-link to="/account/login" > </router-link>routes:[ {path:'/account',component:account,children:{{path:'login',component:login} } }]

tips:

每個路由規則,都是一個對象,這個規則對象,身上,有兩個必須的屬性。
屬性1 是path,表示監聽,哪個路由鏈接地址;
屬性2是component,表示,如果路由是前面匹配到的path,則展示component屬性對應的那個組件。
子路由不能加/, 加了/ 會以根目錄為基準匹配,這樣不方便我們用戶去理解url地址
超鏈接的to 一定要加上父路由

注意:componen屬性值，必須是一個組件的模板對象,不能是組件的引用名稱

20 命名視圖實現經典布局

根據name 來找組件

<router-view></router-view> <router-view name="left"></router-view> <router-view name="main"></router-view> var header={template:'<h1>header</h1>' }var leftBox={template:'<h1>leftBox</h1>' }var mainBox={template:'<h1>mainBox</h1>' }{path:'/',components:{'default':header,'left':leftBox,'main':mainBox} }

21 watch

監聽非dom元素

watch:{'obj.a'(newValue,oldValue){ },immediate:false } watch:{'obj':{handler (newValue, oldValue) {}},deep:true //深程度監聽性能消耗大}watch:{ //監聽路由'$route.path':{handler (newValue, oldValue) {}},//immediate:true代表如果在 wacth 里聲明了之后，就會立即先去執行里面的handler方法，如果為 false就跟我們以前的效果一樣，不會在綁定的時候就執行immediate:true }

tips:

用了obj.a 加上handle +immediate：true ,就可以監聽對象里的值，如果是obj 加上 handle+deep true 也是可以監聽對象的屬性但是性能消耗大一般是直接對象> > +屬性
用handle 方法可以讓watch初始化就執行,如果不用 handle它就先不執行,待數據改變再執行。
不要在watch 和computer 中去修改參與計算或者監聽的值而是要生成新的值。

22 computed 計算屬性

computed:{'fullname':(){return } }

23. render 函數注冊組件（vm[vue實例]的屬性)

render:function(createElements){//createElements是一個方法,調用它,能夠把指定的組件模板渲染為html結構return createElements(login)//注意這里 return 的結果,會替換頁面中el 指定的那個容器}

tips: render和components區別 render 會把整個app里組件全部覆蓋掉一個app中只能放一個render組件components 可以多個,且不會覆蓋

24. slot 插槽

1.寫插槽

<div v-if=“layout === ‘both’” class=“d-flex jc-between”>
<div class=“layout-both” :class=“scrollLeft?‘layout-scroll’:’’”>
<slot name=“left”></slot> //有名字的插槽
</div>
<div class=“layout-both” :class=“scrollRight?‘layout-scroll’:’’”>
<slot name=“right”></slot>
</div>
</div>

2.使用插槽

//有名字的插槽 # v-slot的縮寫是#<template #left></template><template v-slot="left" > </template>

tips 區別對待v-slot="" 和v-slot:name; =和:的區別一個是slot的name 一個是父組件獲取子組件的數據,插槽一定要用
template包裹著

<template>插槽的內容 </template>

2.雜項

1. nrm

安裝 nrm

npm i nrm -g 全局安裝
nrm ls 顯示列表
nrm use npm 使用npm use 后有很多地址可選擇

tips:nrm只是單純的提供幾個常用的下載包url地址,并能夠讓我們在這幾個地址之前,很方便的進行切換，但是，我們每次裝包的時候，使用的裝包工具，都是npm。和

npm i cnpm -g 不一樣

2. webpack

在網頁中會引用哪些常見的靜態資源

js
- .js .jsx .coffee .ts(TypeScript)
css
- .css .less .sass .scss
Image
- .jpg .png .gif .bmp .svg
字體文件(Fonts)
- .svg .ttf .eof .woff .woff2
模板文件
- .ejs .jade .vue

3. 熱部署

webpack-dev-server 實現自動打包功能,瀏覽器不用刷新也能看到文件已經修改,打包的文件并沒有放在實際的物理磁盤上,而是直接托管到了，電腦的內存中,所以,我們在項目根目錄中,根本找不到這個打包好的文件,這文件和src、 dist、 node_modules 平級,有一個看不見的文件

4. 熱更新

hot 網頁不重載直接更新加快打包速度不生成新文件

"scripts":{"dev":"webpack-dev-ser ver --open --prot 3000 --contentBase src --hot " }

配置文件中配置熱更新

devServer:{hot:true 就熱更新了 }

tips:webpage當中帶s都是數組

5.webpack引入vue

在 webpack 中使用以下方式導入的Vue
構造函數,功能并不完善,只提供了 runtime-only的方式,并沒有提供像網頁中那樣的使用方式;

閹割版 import Vue from 'vue'

齊全版
1.
import Vue from ‘…/node_modules/vue/dist/vue.js’
2.
module.exports={
resolve:{
//設置 Vue被導入的時候的包的路徑
alias:{
“vue$”:“vue/dist/vue.js”
}
}
}

tips: 包的查找規則:

找項目根目錄中有沒有node_modules的文件夾
在 node_modules 中根據包名,找對應的vue文件夾
在vue文件夾中，找一個叫做package.json 的包配置文件
在package.json 文件中,查找一個main屬性[main屬性指定了這個包在被加載時候的入口文件]
改了webpake的包就需要重新運行項目

6.在webpack中通過render展示組件

如果想要通過vue,把一個組件放到頁面中去展示,vm 實例中的render函數可以實現

render:function(createElement){return createElement(login) }

//就一行可以省略{} 并且沒有花括號默認就有return,
簡寫: render: c => c(login)

tips: webpack中如何使用Vue:

安裝Vue的包

由于在webpack中,推薦使用.vue這個組件模板文件定義組件,所以需要安裝能解析這種文件的loader

在main.js中,導入vue 模塊
import Vue from 'vue'

定義一個.vue 結尾的組件,其中,組件有三部分組成

使用 import login from './login.vue' 導入這個組件

創建 vm 的實例 var vm = new Vue ({el:'app',render:c=>c(login)})

在頁面中創建一個id為app的div元素,作為我們vm實例要控制的區域

7. export default 和 export

export default 向外暴露的成員,可以使用任意的變量來接收
在一個模塊中,export default只允許向外暴露1次
在一個模塊中，可以同時使用 export default 和 export 向外暴露成員
使用 export 向外暴露的成員,只能使用{}的形式來接收,這種形式,叫做[按需導出]
export 可以向外暴露多個成員,同時,如果某些成員,我們在import的時候,不需要,則可以不在 { }中定義
注意使用 export 導出的成員,必須嚴格按照導出時候的名稱,來使用{ } 按需接收
使用 export 導出的成員，如果就想換個名稱來接收,可以使用 as 來起別名

const arr={a:'1',b：'2'}export default arr

/* export default {
這個暴露是錯誤的所以當前注釋一個js文件中只能暴露一次
address:‘北京’
}
*/

export title=1
import arr, {title as title1 } from ‘/xxx.js’

8. router

render會把el指定的容器中,所有的內容都清空覆蓋,所有不要把路由的router-view和router-link 直接寫到el所控制的元素中
注意 app這個組件，是通過vm 實例的render 函數,渲染出來的,render函數如果要渲染組件,渲染出來的組件,只能放到el: '#app'所指定的元素中;
Account 和GoodsList 組件，是通過路由匹配監聽到的,所以,這兩個組件,只能展示到屬于路由的

<router-view></router-view>中去

子路由的應用場景在標簽頁切換

9. scoped原理

樣式的 scoped 是通過 css 的屬性選擇器來實現的 .aa[vsfp]{color:red}

tips:vsfp是哈希值

10. promise

模擬 promise

getFution(aa,callback){callback(aa) }

getFution(aa,funtion(res){
console.log (aa)
})

異步操作

/* 每當new一個Promise實例的時候,就會立即執行這個異步操作中的代碼。也就是說,new的時候,除了能夠得到一個promise實例之外,還會立即調用我們為 Promise 構造函數傳遞的那個funtion,執行這個function中的異步操作代碼。可用一個函數包裹,這樣就可以不立即執行,用函數執行 */ var promise=new Promise(function(resolve,reject){異步操作,ajax函數等,而且可以自由輸出東西了resolve(true) reject(false) }) getFunction(){var promise=new Promise(function(){異步操作,ajax函數等,而且可以自由輸出東西了})}

getFunction().then(
function(data){
console.log(err)
},function(err){
console.log(err)
})

正確使用方式

getFunction(aa).then(function(data){console.log(data)return getFunction() --返回后,可以使用后續的then})

.then(function(data){
console.log(data)
return getFunction()
})
.then(funtion(data){
console.log(data)
})
//捕獲只放在最后面。前面有任何的異常都會終止
.catch(function(data){
console.log(data)
}

tips：在 then里面多寫個返回錯誤的方法是不可取的。

11. vuex

vuex是為了保存組件之間共享數據而誕生的,如果組件之間有要共享的數據,可以直接掛載到vuex中,而不必通過父子組件之間傳值了,如果組件的數據不需要共享,此時,這些不需要共享的私有數據,沒有必要放到vuex中;
vuex,存放共享數據,data 存放組件私有的數據 props存放父組件傳過來的數據
操作vuex里的state
- 直接操作store里的屬性值,不推薦這種做法this.$store.state.屬性值
  - 1
- 推薦只通過mutations 提供的方法,才能操作對應的數據,
mutations:{increment(state,payload){state.count++ }} this.$store.commit('方法名')

vuex里的getters

如果store中state上的數據,在對外提供的時候,需要做一層包裝,那么推薦使用getters。
optCount:state=>state.count this.$store.getters.***
- 1
- 2
tips: increment方法里的 state是屬于vuex里的state; count是state里的屬性 ;payload外部傳進來的值,用來修改state里屬性的值.。最多支持只能傳兩個參數,可以是數組和對象。

12. ngrok

可以映射本地80端口,把本地的映射為外網
npm地址
//npm下載 --感覺下的有點慢換個路徑下比較好npm install ngrok -g //命令ngrok http 80
- 1
- 2
- 3
- 4
tips: 需要開啟本地服務器,映射后只是映射www路徑,不是完整的程序路徑需要自己去補充完整

13.public 目錄下的圖片如何用 require引入
//第一種圖片質量小的可以自動轉換為base64的 img: require("@/../public/img/home/user.jpg ")
//第二種這里可以把最前面的 / 看做是public
/img/abnormal/Trash.png

即 public/img/abnormal/Trash.png

tips: @是指src目錄 … @的上一級目錄,再進入public

3.性能優化建議
watch如果是obj 加上 handle+deep true 也是可以監聽對象的屬性但是性能消耗大
computer 里生成的值會有緩存不建議用函數去處理一些值得計算而是用 computer 來計算值，這樣性能高。
:key ='id'
id是列表返回的id 如果沒有id 就寫item 一般不建議寫 index (eslint會有警告錯誤信息) 寫上key 是為了減少消耗它會有個緩存。
v-once 和 v-model 的區別是只會綁定一次不會重新更新內容可以減少開銷應用場景：只讀場景,不進行修改頁面內容的時候
v-for 和 v-if 不適合在同個div連用

可在最外層套用一層template來解決

this.$parent 可修改父組件值,但不建議,只讀就好
gzip 優化

vue配置在前端生成帶有gz的文件
輔助插件:compression-webpack-plugin

ngnix服務端配置

//后端返回gzip
gzip on;
gzip_static on;
gzip_min_length 1k;
gzip_buffers 4 16k;
gzip_http_version 1.1;
gzip_comp_level 2;
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php application/vnd.ms-fontobject font/ttf font/opentype font/x-woff image/svg+xml;
gzip_vary on;
gzip_proxied expired no-cache no-store private auth;
gzip_disable “MSIE [1-6].”;

cdn加速

網頁中引入的靜態資源多了以后有什么問題?

網頁加載速度慢, 因為我們要發起很多的二次請求;
要處理錯綜復雜的依賴關系

解決方案:

合并、壓縮、精靈圖、圖片的base64編碼、cdn
可以使用之前學過的requireJs、也可以使用webpage
建立不同的環境變量(開發、測試、正式)

二、在每個文件中寫入具體的配置內容

/.env.development文件的內容/
NODE_ENV = ‘development’
VUE_APP_CURRENT_MODE = ‘development’

/.env.production文件的內容/
NODE_ENV = ‘production’
VUE_APP_CURRENT_MODE = ‘production’

/.env.test/
NODE_ENV = ‘production’
VUE_APP_CURRENT_MODE = ‘test’

三、在package.json 中寫入

1.在純粹的vue_cli3.x配置如下

“scripts”: {
“serve”: “vue-cli-service serve --mode development”,
“build”: “vue-cli-service build --mode production”,
“build:test”: “vue-cli-service build --mode test”,
},

2.在uni-app下的vue_cli3.x的配置

“scripts”: {
“serve”: “npm run dev:h5 – development”, //修改點
“build”: “npm run build:h5 – production”, //修改點
“build:test”: “npm run build:h5 – test”, //修改點
“build:h5”: “cross-env NODE_ENV=production UNI_PLATFORM=h5 vue-cli-service uni-build --mode”, //修改點
“build:mp-alipay”: “cross-env NODE_ENV=production UNI_PLATFORM=mp-alipay vue-cli-service uni-build”,
“build:mp-baidu”: “cross-env NODE_ENV=production UNI_PLATFORM=mp-baidu vue-cli-service uni-build”,
“build:mp-toutiao”: “cross-env NODE_ENV=production UNI_PLATFORM=mp-toutiao vue-cli-service uni-build”,
“build:mp-weixin”: “cross-env NODE_ENV=production UNI_PLATFORM=mp-weixin vue-cli-service uni-build”,
“dev:h5”: “cross-env NODE_ENV=development UNI_PLATFORM=h5 vue-cli-service uni-serve --mode”, //修改點
“dev:mp-alipay”: “cross-env NODE_ENV=development UNI_PLATFORM=mp-alipay vue-cli-service uni-build --watch”,
“dev:mp-baidu”: “cross-env NODE_ENV=development UNI_PLATFORM=mp-baidu vue-cli-service uni-build --watch”,
“dev:mp-toutiao”: “cross-env NODE_ENV=development UNI_PLATFORM=mp-toutiao vue-cli-service uni-build --watch”,
“dev:mp-weixin”: “cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch”,
“info”: “node node_modules/@dcloudio/vue-cli-plugin-uni/commands/info.js”
},

tips:以上不同環境的切換,修改點主要就是mode – ‘環境變量’

4. 各種插件的介紹和引用

postcss-plugin-px2rem
配置文件名postcss.config.js vue-cli3.x腳手架自帶的px轉rem等單位的配置,建立腳手架的時候選擇分離不然配置在josn文件中不好配置
babel-plugin-transform-remove-console
刪除console,在根目錄中新建個.babelrc的文件,在以下文件中配置

//第二種

一、建立環境配置文件
在package.json 同級的目錄下建立3個文件
1 .env.development --開發環境 (本地環境)
2 .env.production --正式環境 (正式線服務器–打包)
3 .env.test --測試環境 (測試線服務器–打包)

二、在每個文件中寫入具體的配置內容

/.env.development文件的內容/
NODE_ENV = ‘development’
VUE_APP_CURRENT_MODE = ‘development’

/.env.production文件的內容/
NODE_ENV = ‘production’
VUE_APP_CURRENT_MODE = ‘production’

/.env.test/
NODE_ENV = ‘production’
VUE_APP_CURRENT_MODE = ‘test’

三、在package.json 中寫入

“scripts”: {
“serve”: “vue-cli-service serve --mode development”,
“build”: “vue-cli-service build --mode production”,
“build:test”: “vue-cli-service build --mode test”,
},

四、在babel.config.js 中寫
let transformRemoveConsolePlugin = [];
if (process.env.VUE_APP_CURRENT_MODE === “production”) {
transformRemoveConsolePlugin = [
[“transform-remove-console”, { exclude: [“error”, “warn”] }]
];
}

module.exports = {
presets: ["@vue/app"],
plugins: […transformRemoveConsolePlugin]
};

html-webpack-plugin
當使用 html-webpack-plugin 之后,我們不再需要手動處理bundle.js的引用路徑了,因為這個插件,已經幫我們自動創建了一個合適的script,并且,引用了正確的路徑

const htmlWebpackPlugin=require(“html-webpack-plugin”)

//創建一個內存中生成html 頁面的插件
new htmlWebpackPlugin({
template:path.join(__dirname,’./src/index.html’)
filename:‘index.html’
})

prerender-spa-plugin

構建階段生成匹配預渲染路徑的 html 文件

const PrerenderSPAPlugin = require(‘prerender-spa-plugin’)
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer

configureWebpack: config => {
if (isProduction) {
config.plugins.push(
new CompressionWebpackPlugin({
algorithm: ‘gzip’,
test: new RegExp(’\.(’ + productionGzipExtensions.join(’|’) + ‘)$’),
threshold: 10240,
minRatio: 0.8
})
),
config.plugins.push(
new PrerenderSPAPlugin({
staticDir: path.join(__dirname, ‘dist’),
routes: [
// ‘/’
‘/login’
// ‘/show’,
// ‘/websocket’,
// ‘websocket2’,
// ‘/websocket3’,
// ‘/home’,
// ‘abnormal/AbnormalStatis’,
// ‘abnormal/FocusCrowd’,
// ‘abnormal/FocusDetail’,
// ‘abnormal/ScaleDetail’,
// ‘abnormal/WarnSetup’,
// ‘abnormal/WarnDetail’,
// ‘abnormal/WarnLists’,
// ‘abnormal/PsychMonth’,
// ‘abnormal/PsychTeacher’,
// ‘abnormal/PsychList’,
// ‘laboratory/sports/MoveClock’,
// ‘laboratory/sports/ClockDetail’,
// ‘activity/ActList’,
// ‘activity/ActForm’
],

tips: main.js中的render-event,要和 renderAfterDocumentEvent:'render-event' 一一對應 ,publicPath 目前驗證必須是/ 不能自定義文件夾

總結

以上是生活随笔為你收集整理的vue知识点归纳与总结(笔记)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： git存储目录结构
下一篇： vue中如何进行Excel文件的下载

vue

vue知识点归纳与总结(笔记)

前言

1.基礎

1. 理解mvvm

2. 常用指令

3.常用事件修飾符

4.數據的綁定

5.class 綁定

1.數組帶對象

2.單純的對象

3.數組帶三元

4.對象升級

5.使用style 的對象來實現樣式的修改

5.使用style 的數組帶對象來實現樣式的修改

6.v-for的使用

1. 可以遍歷: 普通數組,對象數組,對象,還可以是數字

7.v-if、v-show

8 調試插件

9 過濾器

全局和私有過濾器

10 按鍵修飾符

11 定義指令

1. 全局

2. 局部

3. 簡寫

12 生命周期

13 過渡類名實現動畫

1. vue的內置動畫

2. 使用第三方類實現動畫

3. 在屬性中聲明js鉤子 實現半場動畫(只需要進場,不需要離場)

14 組件

15 組件里的data

16 組件切換

17 父子組件通訊

18 使用 ref 獲取dom元素

19 路由

20 命名視圖實現經典布局

21 watch

22 computed 計算屬性

23. render 函數注冊組件（vm[vue實例]的屬性)

24. slot 插槽

2.雜項

1. nrm

2. webpack

3. 熱部署

4. 熱更新

5.webpack引入vue

6.在webpack中通過render展示組件

7. export default 和 export

8. router

9. scoped原理

10. promise

11. vuex

12. ngrok

13.public 目錄下的圖片如何用 require引入

3.性能優化建議

4. 各種插件的介紹和引用

總結

3. 在屬性中聲明js鉤子實現半場動畫(只需要進場,不需要離場)