Vue架構學習筆記 每天學習----四

Vue.js 元件 - 自定義事件

父元件是使用 props 傳遞資料給子元件，但如果子元件要把資料傳遞回去，就需要使用自定義事件！

我們可以使用 v-on 綁定自定義事件, 每個 Vue 執行個體都實作了事件接口(Events interface)，即：

使用 $on(eventName) 監聽事件

使用 $emit(eventName) 觸發事件

另外，父元件可以在使用子元件的地方直接用 v-on 來監聽子元件觸發的事件。

<div id="app">
    <div id="counter-event-example">
      <p>{{ total }}</p>
      <button-counter v-on:increment="incrementTotal"></button-counter>
      <button-counter v-on:increment="incrementTotal"></button-counter>
    </div>
</div>
 
<script>
Vue.component('button-counter', {
  template: '<button v-on:click="incrementHandler">{{ counter }}</button>',
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    incrementHandler: function () {
      this.counter += 1
      this.$emit('increment')
    }
  },
})      

文法

v-once

後面不需要跟任何表達式

表示元素群組件隻渲染一次, 不會随着資料的改變而變化

v-html

後面往往跟一個string類型

會将string的html解析出來并渲染

v-text

與Mustache相似, 一般不用, 不靈活

v-pre

用于跳過這個元素和它子元素的編譯過程, 用于顯示原本的Mustache文法

v-cloak

在某些情況下, 我們浏覽器可能會直接顯示出未編譯的Mustache标簽

v-bind

作用: 動态綁定屬性

一般情況下，開源項目用到的技術都會在README中說明，但這個項目剛好沒有。對于Vue項目隻要看下它的package.json檔案我們就能大概了解它的技術棧了。

{
  "dependencies": {
    "axios": "0.18.1",
    "element-ui": "2.13.0",
    "js-cookie": "2.2.0",
    "normalize.css": "7.0.0",
    "nprogress": "0.2.0",
    "path-to-regexp": "2.4.0",
    "vue": "2.6.10",
    "vue-router": "3.0.6",
    "vuex": "3.1.0"
  }
}      

webpack配置分離

很多配置開發時需要, 釋出時不需要,反之一樣, 是以要做分離

在build檔案夾中, 建立一個base.config.js檔案 --> 公共配置

在build檔案夾中, 建立一個dev.config.js檔案 --> 開發配置

在build檔案夾中, 建立一個prod.config.js檔案 --> 釋出配置

複制webpack.config.js檔案内容 -> 上面三個檔案

按照區分 --> 進行檔案夾内配置的删除