Vue 之 Vue File

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

内容简介:之前都是使用 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

Vue 2.5.17

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

  1. 在瀏覽器輸入 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 時,我們必須做幾件事情:

  1. index.html 載入 Vue CDN
  2. index.html 載入 MyCounter.js
  3. 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 方式:

  1. Vue Template (MVVM / Angular)
  2. 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》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

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

程序员面试笔试宝典

程序员面试笔试宝典

何昊、叶向阳、窦浩 / 2012-10 / 59.80元

《程序员面试笔试宝典》除了对传统的计算机相关知识(C/C++、数据结构与算法、操作系统、计算机网络与通信、软件工程、数据库、智力题、英语面试等)进行介绍外,还根据当前计算机技术的发展潮流,对面试笔试中常见的海量数据处理进行了详细的分析。同时,为了更具说服力,《程序员面试笔试宝典》特邀多位IT名企面试官现身说法,对面试过程中求职者存在的问题进行了深度剖析,同时《程序员面试笔试宝典》引入了一批来自于名......一起来看看 《程序员面试笔试宝典》 这本书的介绍吧!

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

随机密码生成器
随机密码生成器

多种字符组合密码

SHA 加密
SHA 加密

SHA 加密工具