Day 01：新手视角

年中才刚攻破 JavaScript 30 挑战一天一题 JavaScript，过不久因缘际会接了一个专案需要使用框架开发，直接迫使我从 Vanilla.js 新手村晋升到 Vue.js 生态系统，顿时扩展新视野！由於当时是在开发时程有限的情况下立即做中查、做中学，所以初期也曾历经都已经使用框架了，却还是不小心蹦出用 querySelector 取得元素节点的原生招数，经过一番寒彻骨，也因而渐渐感受到原生 JavaScript 和 Vue.js 两者之间的差异。

本系列文章主要透过使用 Vue 2 分享新手视角在执行专案过程中，复刻或模拟遇到各种需求时的解题心路历程，因此本系列可能不会是连贯式的内容，而是偏向跳跃式的进展节奏，随着当下所遇情境和待解项目，以兵来将挡之姿使用相应语法或外挂工具完成功能。若有出现生涩用法也请多包涵，也可以留言给予建议让我能更上一层楼！

资料驱动

事件驱动的原生 JavaScript 利用操作 DOM 来取得节点资料，并在节点上注册事件後监听其变化，透过触发事件执行监听函式後更新 DOM，以至於画面上也随之更新；基於资料驱动的 Vue.js 则是绑定资料与画面的状态，更新资料才会更新画面，而更新画面就会更新资料。

官网中提到虽然 Vue 本身并非完全遵照 MVVM（Model–view–viewmodel）架构模式，但我们仍可借用此架构来帮助理解。model 代表存放的资料，view 代表显示的画面，viewmodel 则作为连结 view 与 model 之间的桥梁，让 model 与 view 进行双向绑定进而达到自动同步两者状态；另外在 Vue 文件中不时会出现以变数 vm 代表 Vue instance，而 vm 正是 viewmodel 的缩写。

（图片来源：Vue.js - Concepts Overview）

元件管理

开发中型专案时，常会发现网站中出现不少相同或相似的版面样式、逻辑判断等内容，此时使用 Vue.js 便能训练一下拆解架构与整合管理的技能。

善用元件可以解决相同或相似内容不断被重复使用的情况，减少重复的程序码一直出现在专案的各个角落，不仅能省去复制贴上的时间，也能因为集中成元件而便於日後管理与维护。因应不同需求或复用的程度，也使得元件涵盖的内容量可大可小，过大的元件也能再继续拆分，因此元件也可以使用巢状架构来组成。经过仔细的规划，将各个元件组装出整个网页，网站整体就能产生具有组织化的架构。

（图片来源：Vue.js - Composing with Components）

除此之外，还有一群 Vue 的家族成员，在你需要的时候帮助你、支援你，满足你特定的需求，然後每个成员都有准备一本要念的经给你读，所以学习过程中充斥着各种文件看不完也得看起来的心境！当然，更多的是使用框架实作後的体会，就让之後一天一天慢慢发觉 Vue.js 究竟有什麽意思吧！

参考资料

• Vue.js - Introduction