Vue 之 Vue File

栏目: JavaScript · 发布时间: 6年前

内容简介：之前都是使用 ES5 開發 Vue，現在要開始進入 Node.js 生態圈，使用 ECMAScript 2015 + Webpack 開發 Vue。ECMAScript 2015 最大的貢獻就是提出 module 概念，讓我們可依照 SOLID 的Vue 2.5.17

之前都是使用 ES5 開發 Vue，現在要開始進入 Node.js 生態圈，使用 ECMAScript 2015 + Webpack 開發 Vue。

ECMAScript 2015 最大的貢獻就是提出 module 概念，讓我們可依照 SOLID 的 單一職責原則 來開發 JavaScript，不再如 jQuery 一樣總是寫出上千行程式碼。

Version

Instant Protyping

ES5

原本使用 ES5 寫的 HelloWorld 需要 3 個檔案：

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Global Component</title>
</head>
<body>
  <div id="app">
    <hello-world></hello-world>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="HelloWorld.js"></script>
<script src="index.js"></script>
</html>

index.js

new Vue({
  el: '#app'
});

HelloWorld.js

Vue.component('HelloWorld', {
  template: '<span>Hello World</span>',
});

ES6

若使用 Vue File，只需要一個檔案

Vue file 總共包含三個部分：

<template></template>
<script></script>
<style></style>

HelloWorld.vue

<template>
  <span>Hello World</span>
</template>

<script>
export default {
  name: "HelloWorld"
}
</script>

<style scoped>

</style>

第 1 行

<template>
  <span>Hello World</span>
</template>

相當於 Vue Template。

第 5 行

export default {
  name: "HelloWorld"
}

name 即為 component 名稱。

11 行

<style scoped>

</style>

負責 CSS 部分。

Q : Vue Instance 呢 ?

Vue CLI 會自動幫你建立，讓我們更專心在 Vue Component 開發。

$ vue serve HelloWorld.vue

輸入 vue serve + 檔名 執行。

Vue 之 Vue File

在瀏覽器輸入 http://localhost:8080 即可立刻看到結果

vue serve 使用了預設的 Webpack 設定，背後幫我們做了很多事情，如 Babel 編譯 ECMAScript 2015、載入 Vue source、建立 Vue Instance、啟動 Web Server … 等，方便我們測試 Vue

Webpack Project

Instant Prototyping 只適合測試用，並不適合實際開發專案。

若要開發 Vue 專案，要使用 Vue CLI 幫我們建立 Webpack Project。

我們將以 ES5 版本的 MyCounter porting 到 ES6 作為示範。

main.js

import Vue from 'vue';
import App from './App.vue';

Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
}).$mount('#app');

回顧之前我們使用 ES5 開發 Vue 時，我們必須做幾件事情：

在 index.html 載入 Vue CDN
在 index.html 載入 MyCounter.js
在 index.html 載入 index.js

這個載入非常重要，否則 Vue 無法正常執行。

但若使用 ECMAScript 2015，則 Webpack 會幫我們搞定這些。

第 1 行

import Vue from 'vue';

載入 Vue。

第 2 行

import App from './App.vue';

第 6 行

new Vue({
  render: h => h(App),
}).$mount('#app');

建立 Vue Instance，並將 app Vue Template mount 上 Vue Instance。

第 7 行

render: h => h(App),

Vue 支援兩種產生 HTML 方式：

Vue Template (MVVM / Angular)
Virtual DOM (JSX / React)

其中 render() 目的就是產生 Virtual DOM。

render() 在 ES5 的寫法如下：

render: function(createElement) {
    return createElement(App);
}

render() 是 Higher Order Function，傳入 createElement() function。

將 App component 傳入 createElement() ，得到 Virtual DOM，再透過 render() 回傳。

由於 render() 只有一行，又沒有牽涉到 this ，因此可以安全改寫成 Arrow Function。

render: h => h(App);

其中 h 就是 createElement ，是 function。

如此 Vue Instance 就以 App component 為 root component 建立 HTML

App.vue

<template>
  <div>
    <my-counter v-model="outerCounter"></my-counter>
    <h1> {{ outerCounter }} </h1>
  </div>
</template>

<script>
import MyCounter from './components/MyCounter.vue';

export default {
  name: 'app',
  components: {
    MyCounter,
  },
  data() {
    return {
      outerCounter: 10,
    };
  },
};
</script>

<style>
</style>

為 Vue 的 root component，相當於 ES5 的 index.html 地位。

第 1 行

<template>
  <div>
    <my-counter v-model="outerCounter"></my-counter>
    <h1> {{ outerCounter }} </h1>
  </div>
</template>

使用了 <my-counter></my-counter> 。

第 9 行

import MyCounter from './components/MyCounter.vue';

由於 MyCouner component 已經獨立成單獨的 MyCounter.vue ，需要 import 進來才能用。

11 行

export default {

由於 App component 要被 main.js import，所以要宣告 export default 。

13 行

components: {
  MyCounter,
},

宣告在 App component 包含哪些內層 component。

MyCounter.vue

<template>
  <div>
    <h1>{{ innerCounter }}</h1>
    <button @click="add">+1</button>
    <button @click="emit">Emit Counter</button>
  </div>
</template>

<script>
export default {
  name: 'MyCounter',
  props: [
    'value',
  ],
  data() {
    return {
      innerCounter: this.value,
    };
  },
  methods: {
    add() {
      this.innerCounter += 1;
    },
    emit() {
      this.$emit('input', this.innerCounter);
    },
  },
};
</script>

<style scoped>

</style>

將原本的 MyCounter.js porting 到 MyCounter.vue 。

$ yarn serve

在專案目錄下輸入 yarn serve 執行 Webpack。

Vue 之 Vue File

Scoped Style CSS

CSS 在設計上所面臨的困境

!important

<style scoped>

</style>

任何對 CSS 的設定，只有在這個 component 有效。

名稱不用擔心重複
不會污染其他 component

Conclusion

透過 ECMAScript 的 module，我們就不再寫出上千行的 JavaScript 了，可以認真依照職責去切分 module，方便維護
Instant Prototyping 非常適合測試 Vue 功能使用
由 ES5 component 改寫成 ES6 Vue file 需要改寫部分程式碼，但觀念是一樣的

Sample Code

完整的範例可以在我的 GitHub 上找到

以上所述就是小编给大家介绍的《Vue 之 Vue File》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农网的支持！

查看所有标签

猜你喜欢:

Vue 之 Vue File

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

Practical JavaScript, DOM Scripting and Ajax Projects

Frank Zammetti / Apress / April 16, 2007 / $44.99

http://www.amazon.com/exec/obidos/tg/detail/-/1590598164/ Book Description Practical JavaScript, DOM, and Ajax Projects is ideal for web developers already experienced in JavaScript who want to ......一起来看看《Practical JavaScript, DOM Scripting and Ajax Projects》这本书的介绍吧!

码农工具

XML 在线格式化

在线 XML 格式化压缩工具

RGB HSV 转换

RGB HSV 互转工具