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
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 + 檔名 執行。
- 在瀏覽器輸入
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。
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》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
深入理解 Flask
[美]Jack Stouffer / 苏丹 / 电子工业出版社 / 2016-7-1 / 79.00
Flask 是一种具有平缓学习曲线和庞大社区支持的微框架，利用它可以构建大规模的web应用。学习上手Flask非常轻松，但要深入理解却并不容易。 本书从一个简单的Flask应用开始，通过解决若干实战中的问题，对一系列进阶的话题进行了探讨。书中使用MVC（模型-视图-控制器）架构对示例应用进行了转化重构，以演示如何正确地组织应用代码结构。有了可扩展性强的应用结构之后，接下来的章节使用Flask......一起来看看 《深入理解 Flask》 这本书的介绍吧!
