跳到正文
Jimmy Huang's Blog
动态
学习
作品
影视
书籍
游戏
相册
更多
影视
书籍
游戏
相册
主题
墨水
苹果
岛屿
千禧
明暗跟随系统
B 站
小红书
最近
看过
想看
最近
在读
已读
想读
弃读
最近
在玩
通关
想玩
最近
学习
1 - Getting Started · Jimmy Huang's Blog
课程目录
学习
←
Vue.js
学习
›
C6001
›
2025 S2
›
FIT5032 Internet applications development
›
Learning Notes
›
Vue.js
1 - Getting Started
2025 年 7 月 28 日
1 - Getting Started
cn.vuejs.org
cn.vuejs.org/tutorial
html
换行
复制
<
template
>
<
h1
>Hello World!</
h1
>
</
template
>
在本课程目录里查找
课程目录
About
Learning Notes
›
Getting started modules
›
1 - Environment setup
2 - Your first website
3 - Web standards
4 - Soft skills
HTML
CSS
JavaScript
›
JavaScript Beginners Unite
›
Why JavaScript?
Transitioning to JavaScript from Java or Python
Variables
Control Flow in JavaScript
Loops and Iteration
Functions
Classes in JavaScript
Vue.js
›
未命名内容
1 - Getting Started
2 - Declarative Rendering
3 - Attribute
4 - Event Listeners
5 - Form Bindings
6 - Conditional Rendering
7 - List Rendering
8 - Computed Property
9 - Lifecycle and Template Refs
10 - Watchers
11 - Components
12 - Props
13 - Emits
14 - Slots
15 - You Did It!
Assessment Overview
›
Overview
Business Requirements A–C
Business Requirements D–E
Business Requirement F – Innovation）
Week 1 - Introduction
›
Lecture
Week 1 Pre-class 1.1: HTML, CSS and Javascript
Week 1 Pre-class 1.2: What is full-stack development?
Week 1 Studio: Getting started with Vue.JS
Week 1 Post-class 1.1: Lesson Wrap-Up and Reflections
Week 1 Post-class 1.2: Test your Knowledge
Week 2 - Data and Design
›
Lecture
Week 2 Pre-class: JSON, Computed Properties and Built-in Directives
›
AI总结视频内容
AI总结视频内容
Week 2 Studio: One-way Data binding
›
完整Seminar总结
Building a Simple Library Website
Activity 1: Import JSON files
›
Create new application
Activity 2: Get Authors Born After 1850
Activity 3: Get All Famous Works
Activity 4: Find author by name
Activity 5: Find author by ID
Activity 6: Render authors (name + birth year)
Activity 7: Render authors born after 1850
Activity 8: Render a list of all famous works
Activity 9: Render Austen’s works (normalize to { title, year })
Activity 9a: Get the company name from bookstores
Activity 9b: Get the total number of stores from bookstores
Activity 10: Iterate store types and counts
Activity 11: Iterate opening hours (nested objects)
Activity 12: Get top sellers from bookstores
Activity 13: Toggle the Message Visibility When the Button is Clicked
Activity 14: Attribute, Class & Style Binding (v-bind)
Week 2 Post-class 1.1: Lesson Wrap-Up and Reflections
Week 2 Post-class 1.2: Test your Knowledge
eFolio Week 1 & 2 - 0%
Week 3 - Front-end Design
›
Lecture
Week 3 Pre-class: CSS and Bootstrap
Week 3 Studio: Styling with CSS & Bootstrap
›
Activity 1: Create Form Vue component
Activity 2: Add Form and Input Types to Form.vue
Activity 3: Form styling with CSS
Activity 4: Install and Set up Bootstrap 5
Activity 5: Form styling with Bootstrap 5's CSS
Activity 6: Display User Information in a Card via Submit Button
Activity 7: Allow Form to Support Various Devices
Activity 7.1 Introduce breakpoints utility classes in your code
Challenge 1
Challenge 2
Challenge 3
Week 3 Post-class 1.1: Lesson Wrap-Up and Reflections
Week 3 Post-class 1.2: Test your Knowledge
A1.1: Design Report in Week 3 - 5%
›
Instruction
How to: User Personas
Rubric
Week 4 - Forms and User Interaction
›
Lecture
Week 4 Pre-class: Form Validation
Week 4 Studio: Validating Form with HTML and JavaScript
›
Activity 1: Run Form Vue component
Activity 2: Add Form Validation with HTML Built-in Attributes
Activity 3: Add Form Validation using Vue
Activity 4: Install PrimeVue into the Library Web Application
Week 4 Post-class 1.1: Lesson Wrap-Up and Reflections
Week 4 Post-class 1.2: Test your Knowledge
eFolio Week 3 & 4 - 0%
Week 5 - Events Handling and Basic Routing
›
Lecture
Week 5 Studio: Events Handling & Basic Routing
›
Activity 5.1.1 Recreate the starter project
Activity 5.3.1: Setup the Form
Activity 5.3.2 Improve validation for "Reason for joining"
Activity 5.5.1 Installing and Setup of Router
Activity 6.1: Creating a Secure Members Area in Your Library App
A1.2: Basic Application Development (version 1) in Week 5 - 5%
›
Introduction
Rubric
Week 6 - Intro to Firebase
›
Lecture
Week 6 Pre-class: A practical Turn…
Week 6 Studio: Firebase
eFolio Week 5 - 0%
Week 7 - Firebase Auth & Firestore PT.1
›
Week 7 Pre-class (Vue3 + Firebase)
Week 7 Studio: Firebase authentication & Access control
›
Activity 7.1 Firebase Setup
Activity 7.2 VueJS setup
Week 7 Post-class: Test your Knowledge
A1.3: Basic Application Development (version 2) in Week 7 - 5%
›
Introduction
Rubric
Week 8 - Firestore + Cloud Functions PT.1
›
Lecture
Week 8 Pre-reading Overview: Firestore
Week 8 Studio: Firebase
Week 8 Post-class: Test your Knowledge
eFolio Week 7 & 8 - 0%
Week 9 - Cloud Functions PT.2
›
Week 9 Studio
A1.4: Research Alternatives in Week 9 - 5%
›
Introduction
Rubric
Week 10 - API
eFolio Week 9 & 10 - 0%
Week 11 - Hosting
›
Week 11 Studio 部署Github项目到Cloudflare
A3: Major Application Development Portfolio and Demonstration Interviews – 50%
›
Introduction
Rubric
A2: Quiz on eAssessment platform - 30%
›
How the Quiz Works
Pro-Tip: How to Prepare
Sample Quiz 1
Sample Quiz 2
Week 12
eFolio Week 11 & 12 - 0%
上一篇
未命名内容
下一篇
2 - Declarative Rendering