2. 程式人生 > 實用技巧 >Vue拓展知識

Vue拓展知識

阿新 • • 發佈：2020-07-12

過度 & 動畫

Vue 在插入、更新或者移除 DOM 時，提供多種不同方式的過渡效果，Vue 會給我們一些鉤子或者一些關鍵的樣式來幫助我們實現，包括以下工具：

  • 在 CSS 過渡和動畫中自動應用 class
  • 可以配合使用第三方 CSS 動畫庫，如 Animate.css
  • 在過渡鉤子函式中使用 JavaScript 直接操作 DOM
  • 可以配合使用第三方 JavaScript 動畫庫，如 Velocity.js

CSS 過度動畫

元件在進行顯示的時候，transition 元件會為巢狀元素自動新增一些跟動畫相關的類名稱，這個類名稱取決於你在 transition 元件上起的 name，所以我們使用這些類名稱來做 css 過度動畫就可以了。

<style> 
  /* 定義過度動畫 */ 
  .fade-enter-active, .fade-leave-active { 
    transition: opacity .5s; 
  }
  .fade-enter, .fade-leave-to { 
    opacity: 0; 
  } 
  .fade-enter-to, .fade-leave { 
    opacity: 1; 
  } 
</style>

<script> 
  Vue.component('message', { 
    // 使用transition元件應用過度動畫 
    template: ` 
			<transition name="fade"> 
				<div> /* 這個div元素上面將來就會動態的新增一些跟動畫相關的類 */
  				...
  			</div>
  		</transition> 
		`, 
  })
</script>

過度類名

  1. v-enter ：定義進入過渡的開始狀態。在元素被插入之前生效，在元素被插入之後的下一幀移除。
  2. v-enter-active ：定義進入過渡生效時的狀態。在元素被插入之前生效，在過渡/動畫完成之後移除。
  3. v-enter-to : 定義進入過渡的結束狀態。在元素被插入之後下一幀生效 (與此同時 v-enter 被移除)，在過渡/動畫完成之後移除。
  4. v-leave : 定義離開過渡的開始狀態。在離開過渡被觸發時立刻生效，下一幀被移除。
  5. v-leave-active ：定義離開過渡生效時的狀態。在整個離開過渡的階段中應用，在離開過渡被觸發時立刻生效，在過渡/動畫完成之後移除。這個類可以被用來定義離開過渡的過程時間，延遲和曲線函式。
  6. v-leave-to : 定義離開過渡的結束狀態。在離開過渡被觸發之後下一幀生效 (與此同時 v-leave 被刪除)，在過渡/動畫完成之後移除。

使用 CSS 動畫庫

我們可以使用一些現成的像 animate.css 這樣的動畫庫來製作更精美的動畫效果。

animate.css 裡面是有自己的動畫類名稱的，它跟 Vue 動態新增的類名稱是不一樣的，那我們怎麼把它們結合起來呢，就是通過自定義 Vue 過度狀態的類名的方式，這樣我們設定的自定義的類名將來就會在相對應的 Vue 的六個過渡狀態的時機代替原有的 Vue 的過度類名出現在需要做動畫的元素上，就達到了使用第三方定義好的動畫類名的效果。

結合 CSS 動畫庫，動畫設計的過程就不需要操心了，只需要在合適的時間點把類名給它加上去或者移除就可以了。

引入animate.css

<link href="https://cdn.jsdelivr.net/npm/[email protected]" rel="stylesheet" type="text/css">

transition 元件設定

<transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut">
	<div> /* 將來這個元素上的類名會是這樣 class="animated bounceIn v-enter-to" */
    ...
  </div>
</transition>

自定義過度類名

他們的優先順序高於普通的類名，這對於 Vue 的過渡系統和其他第三方 CSS 動畫庫，如 Animate.css 結合使用十分有用。

  • enter-class
  • enter-active-class
  • enter-to-class (2.1.8+)
  • leave-class
  • leave-active-class
  • leave-to-class (2.1.8+)

JavaScript 鉤子

可以在 transition 屬性中宣告 JavaScript 鉤子，使用JS實現動畫。

<transition
  v-on:before-enter="beforeEnter" // 動畫開始前，設定初始狀態
  v-on:enter="enter" // 執行動畫
  v-on:after-enter="afterEnter" // 動畫結束，清理工作
  v-on:enter-cancelled="enterCancelled" // 取消動畫
  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled"
></transition>

保留 CSS 中過度的部分，加上 JS 鉤子做動畫起始狀態：

<style>
	/* 定義過度動畫 */ 
  .fade-enter-active, .fade-leave-active { 
    transition: opacity .5s; 
  }
  /* opacity修改不用css做 */
  /*
  .fade-enter, .fade-leave-to { 
    opacity: 0; 
  } 
  .fade-enter-to, .fade-leave { 
    opacity: 1; 
  } 
  */
</style>

<script>
Vue.component('message', {
  template: `
    <transition 
			@before-enter="beforeEnter" 
			@enter="enter"
			@before-leave="beforeLeave" 
			@leave="leave"
		>
      ...
    </transition>
  `,
	methods: {
    beforeEnter(el) {
    	el.style.opacity = 0 // 設定初始狀態
    },
    enter(el, done) {
      document.body.offsetHeight; // 觸發迴流啟用動畫
      el.style.opacity = 1 // 設定結束狀態
      el.addEventListener('transitionend', done) // 監聽動畫結束事件，並執行done函式
    },
    beforeLeave(el) {
    	el.style.opacity = 1 // 設定初始狀態
    },
    leave(el, done) {
      document.body.offsetHeight; // 觸發迴流啟用動畫
      el.style.opacity = 0 // 設定結束狀態
      el.addEventListener('transitionend', done) // 監聽動畫結束事件，並執行done函式
    }
  },
})
</script>

純js方案：

<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<script>
	Vue.component('message', {
    template: `
      <transition name="fade"
        :css="false" // 禁用css
        @before-enter="beforeEnter"
        @enter="enter"
        @before-leave="beforeLeave"
        @leave="leave">
      </transition>
    `,
    methods: {
      beforeEnter(el) {
        el.style.opacity = 0
      },
      enter(el, done) {
        Velocity(el, { opacity: 1 }, { duration: 500, complete: done })
      },
      beforeLeave(el) {
        el.style.opacity = 1
      },
      leave(el, done) {
        Velocity(el, { opacity: 0 }, { duration: 500, complete: done })
      }
    },
  })
</script>

列表過度

有時候列表中，條目的新增或刪除也需要加入一些動畫，這時候可以考慮列表過度的方式。

利用 transition-group 可以對 v-for 渲染的每個元素應用過度。

用 transition-group 包裹 v-for 的元素，最終 transition-group 會展開成 n 個 transition，每一個 transition 包裹著一個單獨的 v-for 元素。

<transition-group name="fade">
  <div v-for="c in courses" :key="c.name">
    {{ c.name }} - ￥{{c.price}}
    <button @click="addToCart(c)">加購</button>
  </div>
</transition-group>

可複用性

過濾器

Vue.js 允許你自定義過濾器，可被用於一些常見的文字格式化。過濾器可以用在兩個地方：雙花括號插值和 v-bind 表示式 (後者從 2.1.0+ 開始支援)。過濾器應該被新增在 JavaScript 表示式的尾部，由“管道”符號指示：

{{ c.price | currency('RMB') }} 
// 區域性方式
filters: { 
  currency(value, symbol = '￥') { 
    return symbol + value; 
  } 
}
// 全域性方式
Vue.filter('currency', function(value, symbol = '￥') {
  // 工廠函式，接收一個值返回一個值
  return symbol + value; 
})

自定義指令

除了核心功能預設內建的指令 ( v-model 和 v-show )，Vue 也允許註冊自定義指令。注意，在 Vue2.0 中，程式碼複用和抽象的主要形式是元件。然而，有的情況下，你仍然需要對普通 DOM 元素進行底層操作的複用功能的時候，就會用到自定義指令。因為 Vue 的設計理念是資料驅動，一般情況下儘量不要直接接觸底層 DOM 操作，如果要做那最好用自定義指令的方式去做這件事情。

範例：輸入框獲取焦點

Vue.directive('focus', { 
	inserted(el) { 
    el.focus() 
  } 
})

<input v-focus>

自定義指令鉤子函式：

  • bind：只調用一次，指令第一次繫結到元素時呼叫。在這裡可以進行一次性的初始化設定。
  • inserted：被繫結元素插入父節點時呼叫 (僅保證父節點存在，但不一定已被插入文件中)。
  • update：所在元件的 VNode 更新時呼叫，但是可能發生在其子 VNode 更新之前。指令的值可能發生了改變，也可能沒有。但是你可以通過比較更新前後的值來忽略不必要的模板更新 (詳細的鉤子函式引數見下)
  • componentUpdated：指令所在元件的 VNode **及其子 VNode** 全部更新後呼叫。
  • unbind：只調用一次，指令與元素解綁時呼叫。

鉤子函式引數：

  • el：指令所繫結的元素，可以用來直接操作 DOM。
  • binding：一個物件，包含以下 property：
    • name：指令名，不包括 v- 字首。
    • value：指令的繫結值，例如：v-my-directive="1 + 1" 中，繫結值為 2。
    • oldValue：指令繫結的前一個值，僅在 update 和 componentUpdated 鉤子中可用。無論值是否改變都可用。
    • expression：字串形式的指令表示式。例如 v-my-directive="1 + 1" 中，表示式為 "1 + 1"。
    • arg：傳給指令的引數，可選。例如 v-my-directive:foo 中，引數為 "foo"。
    • modifiers：一個包含修飾符的物件。例如：v-my-directive.foo.bar 中，修飾符物件為 { foo: true, bar: true }。
  • vnode：Vue 編譯生成的虛擬節點。移步 VNode API 來了解更多詳情。
  • oldVnode：上一個虛擬節點，僅在 update 和 componentUpdated 鉤子中可用。

渲染函式

渲染函式的主要作用是在將來程式進行更新的時候，它再次執行，從而得到最新的虛擬 DOM，

Vue 推薦在絕大多數情況下使用模板來建立你的 HTML。然而在一些場景中，你真的需要 JavaScript 的完全程式設計的能力。這時你可以用渲染函式，它比模板更接近編譯器。

渲染函式函式簽名

// render函式接收一個引數createElement叫建立元素，createElement函式會返回VNode稱為虛擬DOM，這個元素就是一	 個原生的JS物件，可以描述我們的DOM結構，將來在後續的虛擬DOM的比對中來產生它的作用。
render: function (createElement) {
  return createElement(
    tag,     // 標籤名稱，元件名字，元件配置物件，元件的建構函式
    data,    // 傳遞屬性
    children // 子節點陣列
  )
}

使用 render 方法實現 heading 元件：

Vue.component('heading', { 
  props: ['level', 'title'], 
  render(h) { // Vue虛擬DOM在底層使用的演算法叫snabdom，這個演算法裡生成虛擬DOM的方法就叫h
    // 返回createElement返回的VNode
    return h( 
      'h' + level,        // 引數1：tagname
      										// 引數2：Vue有一個預設行為，如果屬性你沒處理，會把所有元件上傳遞的屬性動態的移到																	 元件內部的根結點上。
      this.$slots.default // 引數3：子節點VNode陣列
    ) 
  } 
})

<heading :level="2" :title="title">{{title}}</heading>

虛擬 DOM

虛擬 DOM 到底是什麼，它是怎樣的一個結構。

Vue 通過建立一個虛擬 DOM 來追蹤自己要如何改變真實 DOM。虛擬 DOM 就是真實dom的一個對映。它來描述真實 DOM 的方式，它更輕量，更快速。

它的結構是通過一些屬性來描述它將來到底是一個什麼樣的節點，VNode 本身是一棵樹，和真實的 DOM 樹是對應的。將來通過一些演算法把這個 VNode 轉換成真實的 DOM 結構。這就是虛擬 DOM 的核心思想了。我們比較熟悉的 diff 演算法將來也是主要在這上面進行的。

範例：輸出虛擬 DOM 觀察其結構：

const vnode = h( 
  'h' + level, 
  { attrs: { title: this.title } }, // 之前省略了title的處理 
  this.$slots.default 
)
console.log(vnode);

createElement 引數

接下來你需要熟悉的是如何在 createElement 函式中使用模板中的那些功能。這裡是 createElement 接受的引數：

createElement(
  // {String | Object | Function}
  // 一個 HTML 標籤名、元件選項物件，或者
  // resolve 了上述任何一種的一個 async 函式。必填項。
  'div',
  // {Object}
  // 一個與模板中屬性對應的資料物件。可選。
  {
    // (詳情見下一節)
  },
  // {String | Array}
  // 子級虛擬節點 (VNodes)，由 `createElement()` 構建而成，
  // 也可以使用字串來生成“文字虛擬節點”。可選。
  [
    '先寫一些文字',
    createElement('h1', '一則頭條'),
    createElement(MyComponent, {
      props: {
        someProp: 'foobar'
      }
    })
  ]
)

深入資料物件

有一點要注意：正如 v-bind:class 和 v-bind:style 在模板語法中會被特別對待一樣，它們在 VNode 資料物件中也有對應的頂層欄位。該物件也允許你繫結普通的 HTML attribute，也允許繫結如 innerHTML 這樣的 DOM property (這會覆蓋 v-html 指令)。

{
  // 與 `v-bind:class` 的 API 相同，
  // 接受一個字串、物件或字串和物件組成的陣列
  'class': {
    foo: true,
    bar: false
  },
  // 與 `v-bind:style` 的 API 相同，
  // 接受一個字串、物件，或物件組成的陣列
  style: {
    color: 'red',
    fontSize: '14px'
  },
  // 普通的 HTML attribute
  attrs: {
    id: 'foo'
  },
  // 元件 prop
  props: {
    myProp: 'bar'
  },
  // DOM property
  domProps: {
    innerHTML: 'baz'
  },
  // 事件監聽器在 `on` 內，
  // 但不再支援如 `v-on:keyup.enter` 這樣的修飾器。
  // 需要在處理函式中手動檢查 keyCode。
  on: {
    click: this.clickHandler
  },
  // 僅用於元件，用於監聽原生事件，而不是元件內部使用
  // `vm.$emit` 觸發的事件。
  nativeOn: {
    click: this.nativeClickHandler
  },
  // 自定義指令。注意，你無法對 `binding` 中的 `oldValue`
  // 賦值，因為 Vue 已經自動為你進行了同步。
  directives: [
    {
      name: 'my-custom-directive',
      value: '2',
      expression: '1 + 1',
      arg: 'foo',
      modifiers: {
        bar: true
      }
    }
  ],
  // 作用域插槽的格式為
  // { name: props => VNode | Array<VNode> }
  scopedSlots: {
    default: props => createElement('span', props.text)
  },
  // 如果元件是其它元件的子元件，需為插槽指定名稱
  slot: 'name-of-slot',
  // 其它特殊頂層 property
  key: 'myKey',
  ref: 'myRef',
  // 如果你在渲染函式中給多個元素都應用了相同的 ref 名，
  // 那麼 `$refs.myRef` 會變成一個數組。
  refInFor: true
}

範例：處理 title、新增 icon：

Vue.component('heading', { 
  props: ['level', 'title', 'icon'], 
  render(h) { 
    // 子節點陣列
    let children = []; 
  	// 新增圖示功能 
    // <svg><use xlink:use="#icon-xxx"></use></svg> 
    if (this.icon) { 
      children.push(h( 
        'svg', 
        { class: 'icon' }, 
        [ h('use', { attrs: { 'xlink:href': '#icon-' + this.icon } }) ]
      )) 
    }
    children = children.concat(this.$slots.default) 
    vnode = h( 
      'h' + level, 
      { attrs: { this.title } }, // 之前省略了title的處理 
      children 
    )
    console.log(vnode); 
   	return vnode 
	} 
})

函式式元件

元件沒有管理任何狀態，也沒有監聽任何傳遞給它的狀態，也沒有生命週期方法時，可以將元件標記為 functional ，這意味它無狀態（沒有響應式資料），也沒有例項（沒有 this 上下文），這樣它就更加輕量了，消耗資源會更少，這是一種優化手段。

Vue.component('heading', { 
  functional: true, // 標記函式式元件 
  props: ['level', 'title', 'icon'], 
  render(h, context) { // 上下文傳參 
    let children = []; 
    const {icon, title, level} = context.props // 屬性獲取 
    if (icon) { 
      children.push(h( 
        'svg',
        { class: 'icon' }, 
        [h('use', { attrs: { 'xlink:href': '#icon-' + icon } })]
      ))
   	}
    children = children.concat(context.children) 
    vnode = h( 
      'h' + level, 
      { attrs: { title } }, 
      children 
    )
    console.log(vnode); 
    return vnode 
  } 
})

混入

關於可複用性的一個重要特性叫混入，它是一種設計模式。

混入 (mixin) 提供了一種非常靈活的方式，來分發 Vue 元件中的可複用功能。比如在一個元件中有一個方法，這個方法它很常用，除了當前元件，另外的幾個元件也會用到，這種情況最典型的方式是把這個方法單獨的提取出來放到一個公用的地方，將來大家想用的時候把它注入進來，然後可以直接用。

混入是一種非常重要的元件擴充套件和邏輯複用的一種方式。

一個混入物件可以包含任意元件選項。當元件使用混入物件時，所有混入物件的選項將被“混合”進入該元件本身的選項。

mixin 在以後外掛的開發和原始碼的學習中會多次的見到。

// 定義一個混入物件 
var myMixin = { 
  created: function () { 
    this.hello() 
  },
  methods: { 
    hello: function () { 
      console.log('hello from mixin!') 
    } 
  } 
}
// 定義一個使用混入物件的元件 
Vue.component('comp', { 
  mixins: [myMixin] 
})

選項合併

當元件和混入物件含有同名選項時，這些選項將以恰當的方式進行“合併”。

比如，資料物件在內部會進行遞迴合併，並在發生衝突時以元件資料優先。

詳情見文件。

外掛

外掛是 Vue 擴充套件的終極方案，我們前面說的像自定義指令、自定義元件、自定義過濾器、自定義混入等等所有這些東西，其實不適合去分發，就是需要把這些東西放到 github、npm 上想要發給別人，讓別人去用最佳的方式應該是用外掛的形式來組織，因為外掛是最安全、最好、最有效的方式。別人引入的時候如果重複引也可以有效的規避，而且在外掛裡也可以很好的組織這些上述說到的複用功能。

我們平常用到的 vue-router、vuex 都是典型的外掛。

外掛通常用來為 Vue 新增全域性功能，外掛的功能範圍一般有下面幾種：

  1. 新增全域性方法或者屬性。如: vue-custom-element
  2. 新增全域性資源：指令/過濾器/過渡等。如 vue-touch
  3. 通過全域性混入來新增一些元件選項。如 vue-router
  4. 新增 Vue 例項方法，通過把它們新增到 Vue.prototype 上實現。
  5. 一個庫，提供自己的 API，同時提供上面提到的一個或多個功能。如 vue-router

外掛宣告

Vue.js 的外掛應該暴露一個 install 方法，這個 install 方法將來會被 Vue 的建構函式去呼叫，就可以有效的和 Vue 進行互動了，這個方法的第一個引數是 Vue 構造器，第二個引數是一個可選的選項物件。

在 install 方法裡面我們就可以做很多事情了。

MyPlugin.install = function (Vue, options) {
  // 1. 新增全域性方法或屬性
  Vue.myGlobalMethod = function () {}
  // 2. 新增全域性資源
  Vue.directive('my-directive', {})
  // 3. 注入元件選項
  Vue.mixin({
    created: function () {
      // 邏輯...
    }
  })
  // 4. 新增例項方法
  Vue.prototype.$myMethod = function (methodOptions) {}
}

外掛使用

使用Vue.use即可引入外掛

Vue.use(MyPlugin)

範例：修改heading元件為外掛

const MyPlugin = {
	install (Vue, options) {
		Vue.component('heading', {...})
	}
}
if (typeof window !== 'undefined' && window.Vue) {
	window.Vue.use(MyPlugin)
}

工程化

Vue Cli

Vue Cli 是一個腳手架的工具。cli 的全稱是 command line interface 命令列的介面，通過這個命令列的介面我們可以執行一系列的自動化的方式來建立、管理專案。是我們平常開發專案所必須的，我們需要它最重要的原因是我們自己寫的專案太缺乏一些系統性的工程化管理了。

快速原型開發

當你不需要建立一個大型專案，只是想很快的看到一個用 Vue 的方式去寫的一個元件它最終生成的樣子給你的領導或客戶去看。用這種方式就最佳不過了。它是最快速的開發頁面元件原型的方式。

安裝 @vue/cli-service-global 擴充套件

npm install -g @vue/cli-service-global

然後你就可以使用 vue serve 和 vue build 命令對單個 *.vue 檔案進行快速原型開發。vue serve 是執行效果，vue build 是打包。

準備一個內容原型 Hello.vue。

啟動一個服務並執行原型。

vue serve Hello.vue

建立專案

我們現在要真正的開發一個完整專案，我要建立一個新的基於 Vue 的專案。

使用 vue create 建立一個 Vue 專案：

這時候命令列的介面工具會提供一系列的問題讓你去回答，主要是一些專案的選項。這些選項都選完後，就會經歷專案的基本結構的建立和依賴的安裝的過程，需要等上幾分鐘時間。

所有的配置檔案會在 package.json 來組織。

vue create my-vue-test

圖形化專案管理

有一個有用的功能就是可以輸出 webpack 配置，因為 vue-cli3.0 開始我們已經完全看不到 webpack 配置了。

vue ui

Vue CLI 外掛

Vue CLI 使用了一套基於外掛的架構，外掛可以修改 webpack 的內部配置，也可以向 vue-cliservice 注入命令，外掛的架構可以很方便的擴充套件一些功能。在專案建立的過程中，絕大部分列出的特性都是通過外掛來實現的。

在現有的專案中安裝外掛：

如果你想在一個已經被建立好的專案中安裝一個外掛，可以使用 vue add 命令。路由、狀態管理、UI 庫等都需要用這種外掛的方式去安裝。

vue add router

這種方式安裝，外掛本身可能對你的專案產生破壞性的結構上的變更，甚至是檔案的修改，它可能破壞掉你檔案中所有的程式碼結構，因為它這次的修改一定要滿足它安裝的外掛能夠順利的跑起來，不會管你原來的程式碼的，你的程式碼如果跟新安裝的外掛有衝突，那它會把你的程式碼全部幹掉。所以在做這個操作的時候，要保留你之前的程式碼版本。

開發中的一些知識

處理資源路徑

當你在 JavaScript、CSS 或 *.vue 檔案中使用相對路徑 (必須以 . 開頭) 引用一個靜態資源時，該資源模組將被 webpack 處理，需要打包，給它起個合適的名字放到一個合適的地方去。

轉換規則：

  • 如果 URL 是一個絕對路徑 (例如 /images/foo.png )，它將會被保留不變。

    <img alt="Vue logo" src="/assets/logo.png"> 
<img alt="Vue logo" src="http://image.xx.com/logo.png">

  • 如果 URL 以 . 開頭會作為一個相對模組請求被解釋並基於檔案系統相對路徑。

    <img alt="Vue logo" src="./assets/logo.png">

  • 如果 URL 以 ~ 開頭會作為一個模組請求被解析。這意味著你甚至可以引用 Node 模組中的資源：

    <img src="~some-npm-package/foo.png">

  • 如果 URL 以 @ 開頭會作為一個模組請求被解析。Vue CLI 預設會設定一個指向 src 的別名 @ 。

    import Hello from '@/components/Hello.vue'

何時使用 public 資料夾：

關於 public 裡面存放素材的選擇。

將來靜態的資源會放到 public 裡頭，因為 public 會作為開發伺服器的靜態路徑。這裡的資源 webpack 是不會處理的，原封不動，位置和名字都不會變。

通過 webpack 的處理（相對路徑）並獲得如下好處：

  • 指令碼和樣式表會被壓縮且打包在一起，從而避免額外的網路請求。
  • 檔案丟失會直接在編譯時報錯，而不是到了使用者端才產生 404 錯誤。
  • 最終生成的檔名包含了內容雜湊，因此你不必擔心瀏覽器會快取它們的老版本。

如下情況考慮使用 public 資料夾：

  • 你需要在構建輸出中指定一個固定的檔名字。
  • 你有上千個圖片，需要動態引用它們的路徑。
  • 有些庫可能和 webpack 不相容，除了將其用一個獨立的

相關推薦

Vue拓展知識

過度 & 動畫 Vue 在插入、更新或者移除 DOM 時，提供多種不同方式的過渡效果，Vue 會給我們一些鉤子或者一些關鍵的樣式來幫助我們實現，包括以下工具：

vue基礎知識--axios合併請求和slot

一、axios合併請求 export default { data(){ return {} },created(){ function getMsg(res1,res2){ console.log(res1)

VUE框架知識彙總（面試問答大全）

今天看了下 電競彭于晏Eddie 大佬的 《2020最全前端面試系列（VUE）（初學者快速上手的前端框架）》,然後簡單總結了下繪製了一個樹狀圖。 大家有需要的可以下載自用。 如果裡面有什麼錯誤或者其他問題，請留

Vue 基礎知識

基本介紹 Vue.js 　　 Vue是一款優秀的過程開源框架，也是現在WEB工程師必會的一項技能。

vue基礎知識二

所有程式碼沒有引入vue.js！！！！ vue例項化物件中的this指向 在vue中 this指向vue的例項化物件

ESP8266 SDK開發: 外設篇-時鐘晶片DS1302使用和拓展知識<time.h>的使用

<p><iframe name=\"ifd\" src=\"https://mnifdv.cn/resource/cnblogs/Learn8266ForSDK\" frameborder=\"0\" scrolling=\"auto\" width=\"100%\" height=\"1500\"></iframe></p>

vue基礎知識

技術標籤：# vue 序言 2020年的初雪，寫點東西紀念一下吧 寫在前面 雖是基礎，但也要經常回顧，以免遺忘，從而給自己的開發過程中帶來不便

Java資料型別拓展知識

技術標籤：Java基礎java 一、整數   定義整數型別時，不同進位制數字的寫法不同。

Java相關拓展知識1

技術標籤：Java相關知識學習 拓展知識1 整數拓展 public class 進位制 { public static void main(String[] args) {

Java基礎：資料型別拓展知識

資料型別擴充套件及試題分析 整數拓展 二進位制 int i = 0b1010; //二進位制 0e 十進位制

vue相關知識

Vue生命週期： 生命：建立前/後、載入前/後、更新前/後、銷燬前/後 生命週期：vue例項從建立到銷燬的過程。即從開始建立、初始化資料、編譯模板、過載DOM-渲染、更新-渲染、解除安裝等一系列過程。

Vue基礎知識學習1

本文基於B站尚矽谷的Vue學習教程，推薦大家去觀看。 一. Vue簡介 Vue是一套用於構建使用者介面的漸進式js框架，它的學習可以分為以下6個部分。

一篇文章帶你搞懂VUE基礎知識

目錄是什麼Vue中的核心外掛Vue RouterVuexaxioselement-uiVue前端整體架構總結VUE是什麼

python拓展知識與瞭解

python拓展知識與瞭解 · 字元編碼 · 字元編碼發展史 · 字元編碼實操 · 檔案操作

函式與迭代器物件拓展知識

函式與迭代器物件拓展知識 · 結合匿名函式一起使用的函式 · 可迭代物件 · 迭代器物件

沉澱vue相關知識（主要還是個人積累用）

路由懶載入的配置： const Home= () =>import(\'../components/Home\') //使用ES6中的路由懶載入的方式

Vue基礎知識一

1、模板語法 （1）插值語法——容器中的兩個{}用於解析標籤體(即開始標籤和結束標籤間的內容)：{{xxx}},xxx是表示式且可以讀取data中的所有屬性（2）指令語法——用於解析標籤(包括標籤屬性、標籤體內容、繫結事件..

Vue基礎知識三

1、事件處理 （1）基本使用　　1、使用v-on:xxx或@xxx繫結事件，xxx是事件名； 　　2、事件的回撥需要配置在methods物件中，最終會在vm上；

拓展知識：編譯安裝黑客帝國屏保

獲取原始碼 ➜cd cmatrix_source ➜cmatrix_source wget http://jaist.dl.sourceforge.net/project/cmatrix/cmatrix/1.2a/cmatrix-1.2a.tar.gz

拓展知識-linux使用lsof恢復誤刪除的nginx日誌

圖解流程： 確保當前nginx程序執行中 ```bash [root@server ~]#ps -ef | grep nginx root4053810 22:06 ?00:00:00 nginx: master process /usr/sbin/nginx