---
# System prepended metadata

title: 前端框架初探 課後
tags: [' Frontend', ' Talk', CAE Intern 2019]

---

---
title: 前端框架初探 課後
tags: CAE Intern 2019, Frontend, Talk
description: For CAE Intern 2019
---

# 前端框架初探 課後
> Slides & Example: https://talk-demo-20190708.herokuapp.com/#/
> Slides & Example Repo: https://github.com/b04501102/TalkDemo_20190708
> In-Class Repo: https://github.com/b04501102/In_Class_Demo_20190708

## 重點整理
### Pre-processor
* SASS
    * node-sass
    * sass-loader
* Pug
    * pug
    * pug-plain-loader

* Vue
    * template
        * v-bind / v-model
        * v-for
        * v-if / v-show
        * v-on

    * script
        * props
        * data
        * computed
        * methods
        * components
        * **LifeCycle**
    * transition
        * CSS
        * JavaScript

* Deploy
    * static
        * Github / GitLab / Bitbucket Page
        * NTU Homepage
        * Now
        * Heroku
    * server
        * Heroku


## 推薦閱讀
* [Class and Style Bindings](https://vuejs.org/v2/guide/class-and-style.html)
* [Form Input Bindings](https://vuejs.org/v2/guide/forms.html)
* [List Rendering](https://vuejs.org/v2/guide/list.html)
* [Vue.js 手牽手，一起嗑光全家桶](https://www.youtube.com/playlist?list=PLEfh-m_KG4dYor8h4Hi2lqKJ0xqNTFh16)
* [2019 iT 邦幫忙鐵人賽](https://peterhpchen.github.io/VuejsQuest/basic/)
* [Enter/Leave & List Transitions — Vue.js](https://vuejs.org/v2/guide/transitions.html)
* [Deployment | Vue CLI](https://cli.vuejs.org/guide/deployment.html#firebase)