[Full-stack] 增量开发框架 - Vue.js

吉斯·霍华德

GEESE HOWARD

ギース・ハワード

 

  

 

故事背景

---

一、是什么

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。

与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。

Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

 

二、构建工程

1. 修改vue中的挂载页面（index.html）的路径

2. Creating a new Vue project

vue init webpack vue-demo01
vue init webpack-simple vue-demo02

cd vue-demo01

npm install

npm run dev

 

三、资源集合

• 精简入门学习教程

Vue.js入门学习

vue教程_2019年vue视频教程 7小时学会Vue+Vuex+MintUi+ElementUi入门实战视频教程（30讲）

 

• 进阶较深入学习教程

Alex 宅幹嘛 (每课时两小时)

 

 

 

 

学习路线图

---

一、教学大纲

<div id="myApp">
　　{{ message }}
</div> 

el: 选择器。

var myApp = new Vue({
　　el: '#myApp',
　　data: {
　　　　message: 'Hello Vue.js!'
　　}
});

 

[Vue] 01 - MVVM

数据绑定

• 过滤器 filters
• 计算属性
• 设置计算属性 computed: get, set,
• 观察属性 watch

属性绑定

双向绑定（v-model）

事件定义（按钮）

 

[Vue] 02 - CRUD on front end

v-for, v-if, v-model

LocalStorage 

 

 [Vue] 03 - Components

组件实例

组件生命周期

 

[Vue] 04 - Parameter Passing

父组件 --> 子组件（通过 props 获取）

子组件 --> 父组件（this.$refs, this.$parent）

兄弟组件传值（VueEvent.$emit, VueEvent.$on）

 

[Vue] 05 - Front and rear separation

常见仨策略：

• vue-resource
• axios
• fetch-jsonp

Vue + Flask

• [Flask] 01 - Click one button and run one task by Flask
• [Flask] 02 - Build a New Project.
• [Flask] 03 - Restful API vs GraphQL

 

[Vue] 06 - Route

基本路由：先实例化 Vue Rounter，再作为new Vue的参数。

动态路由：(1) ':id=' +key (2) '/' +key

 

[Vue] 07 - UI

手机版和桌面版客户端如何自动区分？

(1) Mint UI - Mobile UI elements for Vue.js

(2) Element

 

[Vue] 08 - Vuex

核心概念

• State
• Getter
• Mutation
• Action
• Module (固化数据无需再加载)

 

[Vue] 09 - Canvas + OpenCV.js

 通过这个例子，了解如何加载其他 js库。

 

 

 

 

Vue 3

---

TypeScript

JavaScript 教程

TypeScript 入门教程

Youtube: TypeScript入门与理解 

 

 

 

continue ...