Vue · Magic_sword2

[TOC] # 簡介說明 原文鏈接： - [Vue2](https://v2.cn.vuejs.org/) - [Vue.js 九個性能優化技巧](https://zhuanlan.zhihu.com/p/348087610) - [在 Vue2 的類組件上建立 Vue3 的 composition API 抽象](https://mp.weixin.qq.com/s/WsiG1aewgnuCyly3BYkC6Q) - [渲染函數 & JSX](https://v2.cn.vuejs.org/v2/guide/render-function.html) ``` 版本：vue 作用：組件化開發的漸進式框架 ``` # 安裝模塊 # Widows ***** npm install vue # Linux ***** npm install vue # 引入說明 ***** 引入說明 ### 示例內容 1. 瀏覽器 ``` <div id="app"> {{ message }} </div> <script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script> <script> const app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) </script> ``` # Vue.[opt] # name ***** 只有作為組件選項時起作用 # mixins ***** 混入注冊，合并mixins傳入的vue屬性，接收數組 # extends ***** 允許聲明擴展另一個組件 (可以是一個簡單的選項對象或構造函數)，而無需使用 Vue.extend # directives ***** 自定義指令 # provide ***** 可以跨組件傳遞的函數或者是對象 # inject ***** 接收跨組件傳遞的函數或者是對象 # propsData ***** 創建實例時傳遞 props。主要作用是方便測試。 ### 示例內容 1. 舉例說明 ``` var Comp = Vue.extend({ props: ['msg'], template: '<div>{{ msg }}</div>' }) var vm = new Comp({ propsData: { msg: 'hello' } }) ``` # props ***** 定義從父元素獲取的變量名，未使用props定義的屬性，會直接放到根元素上面 ### 示例內容 1. 類型驗證 ``` props: { a: Number, b: [String, Number], c: { type: String, required: true }, d: { type: Number, default: 100 }, e: { type: Object, default: function() { return {message: "hello"}; }, f: { validator: function(value) { return true; } } } } ``` 2. 結構類型 ``` props: { title: String, likes: Number, isPublished: Boolean, commentIds: Array, author: Object, callback: Function, contactsPromise: Promise // 或任何其他構造函數 } ``` # inheritAttrs ***** 設置未接收的props屬性不自動綁定到根元素上面，可以通過this.$attrs獲取 # components ***** 使用的組件對象字典 # el ***** 組件的掛載點，不提供template將innerHtml作為template，且自動掛載 # template ***** 組件的視圖模板 ### 示例內容 1. 瀏覽器中的模板 ``` <template id="temp"> <div>Hello template</div> </template> ``` # methods ***** 將方法定義到methods # computed ***** 定義派生計算數據，會緩存結果，可以感知依賴 ### 示例內容 1. 舉例說明 ``` computed: { "msg1": function() { }, "msg2": { set() { }, get() { } } }, ``` # watch ***** 監聽屬性變化，執行函數，支持層級監聽，深度監聽需要設置deep ### 示例內容 1. 舉例說明 ``` watch: { msg: { handler: "方法名", deep: "深度觀察：對象任何層級數據發生變化，watch方法都會被觸發", immediate: true// 立即調用，在偵聽開始時立即調用一次watch方法 }, "msg.sender": ["m1", "m2"], // 數組方式，可調用多個方法 "msg.func": function() { //一個函數被觸發的通用形式 } }, ``` 2. 官方案例 ``` var vm = new Vue({ data: { a: 1, b: 2, c: 3, d: 4, e: { f: { g: 5 } } }, watch: { a: function (val, oldVal) { console.log('new: %s, old: %s', val, oldVal) }, // 方法名 b: 'someMethod', // 該回調會在任何被偵聽的對象的 property 改變時被調用，不論其被嵌套多深 c: { handler: function (val, oldVal) { /* ... */ }, deep: true }, // 該回調將會在偵聽開始之后被立即調用 d: { handler: 'someMethod', immediate: true }, e: [ 'handle1', function handle2 (val, oldVal) { /* ... */ }, { handler: function handle3 (val, oldVal) { /* ... */ }, /* ... */ } ], // watch vm.e.f's value: {g: 5} 'e.f': function (val, oldVal) { /* ... */ } } }) vm.a = 2 // => new: 2, old: 1 ``` # filters ***** 過濾方法，支持管道符使用，可以多層過濾 # model ***** 允許一個自定義組件在使用 v-model 時定制 prop 和 event ### 示例內容 1. 舉例說明 ``` Vue.component('my-checkbox', { model: { prop: 'checked', event: 'change' }, props: { // this allows using the `value` prop for a different purpose value: String, // use `checked` as the prop which take the place of `value` checked: { type: Number, default: 0 } } }) ``` # delimiters ***** 改變純文本插入分隔符，可以解決模板引擎沖突 # functional ***** 聲明函數式組件，使組件無狀態 (沒有 data) 和無實例 (沒有 this 上下文)，布爾值 ### 示例內容 1. 舉例說明 ``` 組件中選項聲明： - functional - abstract 都不會產生虛擬節點，同時父組件也無法獲取到對應的default插槽 ``` # data ***** 數據創建函數 # render ***** 渲染組件的視圖，與template類似，但是更底層 ### 示例內容 1. 舉例說明 ``` render(createElement){ // createElement接收三個參數 // 1. HTML標簽字符串(String) | 組件選項對象(Object) | 節點解析函數(Function) // 2. 定義節點特性的對象(Object) // 3. 子節點，createElement構建的VNode節點或字符串生成的無標簽文本節點(Array | String) return createElement() } ``` # renderError ***** 當 render 函數遭遇錯誤時，提供另外一種渲染輸出 # beforeCreate ***** 實例化初始之后，數據觀測和事件綁定之前 # created ***** 實例化初始之后，掛載尚未開始 # beforeMount ***** 掛載之前，render函數首次被調用 # mounted ***** 實例掛載到DOM節點之后 # beforeUpdate ***** 數據更新時，在虛擬DOM狀態變化之前 # updated ***** 虛擬DOM被重新渲染之后 # activated ***** 被 keep-alive 緩存的組件激活時調用 # deactivated ***** 該鉤子在服務器端渲染期間不被調用 # beforeDestory ***** 實例銷毀之前，此時實例依然可用 # destroyed ***** 實例銷毀之后，此時VUE實例及其子實例將完全解綁 # errorCaptured ***** 當捕獲一個來自子孫組件的錯誤時被調用 # Vue # [new]-Vue() ***** 實例化一個vue app對象，注意模板屬性中要用-進行連詞，接收時要使用駝峰命名 ### *指令 1. 列表 | 指令 | 作用 | | --- | --- | | v-if | 當值為true時頁面顯示，刪除不顯示標簽 | | v-else-if | 配合v-if | | v-else | 配合v-if | | v-show | 當值為true時頁面顯示，隱藏不顯示標簽 | | v-for | 循環遍歷可迭代對象，可循環number | | v-once | 只渲染一次，后期不再更新 | | v-slot | 嵌入模板插槽 | | v-on | 定義事件和哪一個方法進行綁定，$event代表事件對象 | | v-bind | 定義dom屬性和哪一個data進行單向綁定 | | v-model | 進行雙向綁定，同時只能有一個屬性，由元素或組件自身決定，綁定一個屬性和元素自身變化值對應 | | v-text | 設置innerText | | v-html | 設置 innerHtml，解析html內容，不轉義 | | v-pre | 忽略這個元素和它子元素內容的編譯 | | v-cloak | 解決渲染慢出現模板語法的問題，配合css [v-cloak]{display:none} | 2. 修飾符 | 修飾符 | 定義域 | 作用 | | --- | --- | --- | | sync | v-bind | 組件內部需要觸發，用于同步變量更新，與v-model指令不同處在于可以定義多個 | | prop | v-bind | 作為一個 DOM property 綁定而不是作為 attribute 綁定 | | camel | v-bind | 將 kebab-case 特性名轉換為 camelCase | | lazy | v-model | 代替input使用change事件 | | number | v-model | 將值轉換為number類型 | | trim | v-model | 過濾首尾空格 | | stop | v-on | 阻止冒泡 | | prevent | v-on | 阻止默認行為 | | capture | v-on | 是否捕獲階段 | | self | v-on | 限制事件僅作用于自身 | | once | v-on | 事件只觸發一次 | | passive | v-on | 移動端，限制事件用不調用preventDefault() | | 13 | v-on:keyup | 輸入13號鍵位 | | enter | v-on:keyup | 輸入enter | | delete | v-on:keyup | 輸入delete | # *version ***** 提供字符串形式的 Vue 安裝版本號 # *filters ***** 全局過濾方法，支持管道符使用，可以多層過濾 # *mixin ***** 全局加入混入內容 1. 舉例說明 ``` // 定義一個混入對象 var myMixin = { created: function () { this.hello() }, methods: { hello: function () { console.log('hello from mixin!') } } } // 定義一個使用混入對象的組件 var Component = Vue.extend({ mixins: [myMixin] }) var component = new Component() // => "hello from mixin!" ``` # *set() ***** 設置引用類型進行注冊 ### 示例內容 1. 舉例說明 ``` Vue.set(app.user, "age", 10) ``` # *delete() ***** 刪除對象的 property # *use() ***** 注冊插件 ### 示例內容 1. 舉例說明 ``` Vue.use(插件); Vue.use(function(){console.log("插件")}); Vue.use({ install:function(_vue,options){ // 注入邏輯 _vue.prototype.http=http; } }) ``` # *extend() ***** 創建Vue實例類構造器，多用于TS類型檢查 # *component() ***** 注冊或獲取全局組件 ### 示例內容 1. 舉例說明 ``` Vue.component('tab', { template: `<div>選項卡</div>` }); let app = new Vue({ template: `<div><h1>測試</h1><tab/></div>` }); app.$mount("#root") ``` # *nextTick() ***** 在下次 [ DOM 更新 ]循環結束之后執行延遲回調，在修改數據之后立即使用這個方法，獲取更新后的 DOM。 # *directive() ***** 創建全局自定義指令 ### 參數說明 name: * 類型：字符串 * 默認值：無 * 描述：自定義指令名稱 * 可選值：[ ] opt: * 類型：對象 * 默認值：無 * 描述：指令配置 * 可選值：[ ] - bind - inserted - update - componentUpdate - unbind ### 示例內容 1. 舉例說明 ``` Vue.directive("test", { bind: function (el, binding) { console.log("bind"); }, inserted: function (el, binding) { console.log("inserted"); }, componentUpdated: function (el, binding) { console.log("componentUpdated"); }, update: function (el, binding) { console.log("update"); }, unbind: function (el, binding) { console.log("unbind"); } }); ``` 2. 指令格式 ``` v-指令名:參數(binding.arg).修飾符(binding.modifiers)="傳入內容（binding.value）" ``` # *compile() ***** 將一個模板字符串編譯成 render 函數 # *observable() ***** 讓一個對象可響應。Vue 內部會用它來處理 data 函數返回的對象。 ### 示例內容 1. 舉例說明 ``` const state = Vue.observable({ count: 0 }) const Demo = { render(h) { return h('button', { on: { click: () => { state.count++ }} }, `count is: ${state.count}`) } } ``` # $el ***** 綁定的元素 # $vnode ***** 獲取虛擬DOM對象 # $root ***** 訪問根組件 # $parent ***** 訪問父組件 # $children ***** 訪問子元素組件 # $refs ***** 獲取有ref屬性的dom元素，獲取組件節點 # $options ***** 用來獲取data外面的數據和方法 # $attrs ***** 獲取未接收的props # $props ***** 獲取傳入的數據 # $listeners ***** 包含了父作用域中的 (不含 .native 修飾器的) v-on 事件監聽器 ### 示例內容 1. 傳遞父組件參數 ``` v-bind="$props" v-on="$listeners" ``` # $data ***** 渲染的數據 # $slots ***** 訪問靜態插槽的內容 # $scopedSlots ***** 訪問作用域插槽 # \_\_patch\_\_ ***** 渲染虛擬DOM為真實DOM # $on() ***** 監聽一個傳入自定義事件 # $emit() ***** 觸發一個傳入自定義事件 ### 示例內容 1. 舉例說明 ``` this.$emit("change","value") ``` # $watch() ***** 綁定數據觀察回調 # $mount() ***** 把渲染后的視圖掛載到指定位置 # $set() ***** 設置引用類型進行注冊 ### 示例內容 1. 舉例說明 ``` Vue.set(app.user, 'gender', '男'); // 實例.$set 是 Vue.set 的別名 app.$set(app.user, 'gender', '男') ``` # $nextTick() ***** 在下次 [ DOM 更新 ]循環結束之后執行延遲回調，在修改數據之后立即使用這個方法，獲取更新后的 DOM。 # $createElement() ***** 創建虛擬dom節點 # Vue.config # *silent ***** 開啟或取消 Vue 所有的日志與警告 # *optionMergeStrategies ***** 自定義合并策略的選項 # *devtools ***** 配置是否允許 vue-devtools 檢查代碼 # *errorHandler ***** 指定組件的渲染和觀察期間未捕獲錯誤的處理函數 # *warnHandler ***** 為 Vue 的運行時警告賦予一個自定義處理函數 # *ignoredElements ***** 須使 Vue 忽略在 Vue 之外的自定義元素 # *keyCodes ***** 給 v-on 自定義鍵位別名 # *performance ***** 設置為 true 以在瀏覽器開發工具的性能/時間線面板中啟用對組件初始化、編譯、渲染和打補丁的性能追蹤 # *productionTip ***** 設置為 false 以阻止 vue 在啟動時生成生產提示 # Vue.transition-group # [com]-transition-group ***** 動畫組件，渲染v-for產生的列表過渡 ### 示例內容 1. 舉例說明 ``` <template> <div id="app"> <transition-group tag="ul"> <li :key="item" v-for="item of data"> {{item}} </li> </transition-group> <label> 輸入內容： <input type="text" v-model="val"> </label> <button @click="addItem">增加內容</button> </div> </template> <script> export default { name: 'app', data() { return { data: [...Array(10).keys()], val: "testData" } }, methods: { addItem() { console.log(this.val); this.data.push(this.val); } } } </script> <style> .v-enter-active, .v-leave-active { transition: opacity 2s; } .v-enter, .v-leave-to { opacity: 0; } .v-enter-to, .v-leave { opacity: 1; } </style> ``` # Vue.transition # [com]-transition ***** 動畫組件 ### 示例內容 1. 舉例說明 ``` .v-enter-active, .v-leave-active { transition: opacity 2s; } .v-enter, .v-leave-to { opacity: 0; } .v-enter-to, .v-leave { opacity: 1; } ``` 2. 結合animate.css ``` <template> <div id="app"> <transition enter-active-class="animated fadeIn" leave-active-class="animated fadeOut" > <div v-if="display>0"> <img alt="Vue logo" src="./assets/logo.png"> </div> </transition> <button @click="toggle">切換</button> </div> </template> ``` 3. 特別注意 ``` vue會進行組件復用，也就是說組件切換的話會造成動畫不會被執行，這時候你需要改變key值讓vue不再復用組件但是由于key值改變，vue會新建一個元素組件，這時候可能會出現新元素和舊元素在過渡時同時出現，解決辦法設置transiton的mode屬性 ``` # name ***** 被添加的css動畫前綴 # mode ***** 新老元素過渡模式，in-out(新元素先出現，之后舊元素隱藏) | out-in(舊元素隱藏后出現新元素) # css ***** 定義css過渡動畫還是JS過渡動畫 # duration ***** 動畫執行延時 # enter-active-class ***** 定義進入被激活時添加的類 # leave-active-class ***** 定義離開被激活時添加的類 # enter-class ***** 自定義進入的類名 # enter-to-class ***** 自定義進入的類名 # leave-class ***** 自定義離開的類名 # leave-to-class ***** 自定義離開的類名 # [eve]-before-enter ***** 過渡的事件監聽 # Vue.component # [com]-component ***** 動態更新組件 # is ***** 當前顯示的組件的名稱，該屬性可以傳遞給其它任何組件會是同樣效果 # inline-template ***** 當前顯示的組件的名稱 # Vue.keep-alive # [com]-keep-alive ***** 緩存子組件而不銷毀子組件，子組件會增加actived和deactived生命周期 # include ***** 只有匹配時才會被緩存 # exlude ***** 只有匹配時不被緩存 # Vue.slot # [com]-slot ***** 父組件模板里，插入在子組件標簽內的所有內容將替代子組件的\<slot\>標簽及它的內容，縮寫# ### 示例內容 1. 子組件定義插槽 ``` <slot name="插槽名稱" :數據變量名="數據"></slot> ``` 2. 具名插槽 ``` <template v-slot:插槽名稱="接收傳遞過來的數據變量"> 插槽內容 </template> ``` 3. 非template元素嵌入插槽 ``` <div slot="div2"> 插槽內容 </div> ``` 3. 【廢棄】作用域插槽 ``` 通過slot-scope將插槽中的數據進行返回 <div id="root"> <child> <template slot-scope="props"> 獲取傳入數據 <li>{{props.value}}</li><--!定義使用渲染方式--> </template> </child> <child> <template slot-scope="props"> <h1>{{props.value}}</h1> </template> </child> </div> <script> Vue.component('child',{ data: function(){ return { list:[1,2,3,4] } }, template: `<div> <ul> <slot v-for="value in list" :value=value>//使用slot占位 </slot> </ul> </div>` }) var vm=new Vue({ el: '#root' }) </script> ```