├── .gitignore
├── deploy.sh
├── gulpfile.js
├── package-lock.json
├── package.json
└── source
├── _layout.ejs
├── advApi
├── _adv-component-v-model.ejs
├── _adv-extend.ejs
├── _adv-mixins.ejs
├── _adv-provide.ejs
├── _adv-refs.ejs
├── _adv-teleport.ejs
├── _adv-use-plugin.ejs
├── _adv-vee-validation.ejs
├── adv-component-v-model.ejs
├── adv-directive.ejs
├── adv-extend.ejs
├── adv-mixins.ejs
├── adv-provide.ejs
├── adv-refs.ejs
├── adv-teleport.ejs
├── adv-use-plugin.ejs
├── adv-vee-validation.ejs
├── zh_TW.js
└── zh_TW.json
├── components
├── _component_emits.ejs
├── _component_emits_api.ejs
├── _component_mitt.ejs
├── _component_props.ejs
├── _component_props_type.ejs
├── _component_register.ejs
├── _component_slot.ejs
├── _component_slot_props.ejs
├── _component_template.ejs
├── alert-component.js
├── component_emits.ejs
├── component_emits_api.ejs
├── component_final.ejs
├── component_mitt.ejs
├── component_props.ejs
├── component_props_type.ejs
├── component_register.ejs
├── component_slot.ejs
├── component_slot_props.ejs
└── component_template.ejs
├── es6
├── _esModule.ejs
├── _esModule_2.ejs
├── _object_reference.ejs
├── _promise.ejs
├── _separation_of_concerns.ejs
├── _separation_of_concerns_work.ejs
├── _shorthand.ejs
├── arrow_function.ejs
├── defaultExport.js
├── esModule.ejs
├── esModule_2.ejs
├── namedExport.js
├── object_reference.ejs
├── promise.ejs
├── separation_of_concerns.ejs
├── separation_of_concerns_work.ejs
├── shorthand.ejs
├── sideEffect.js
└── this.ejs
├── index.ejs
├── intro
├── _final.ejs
├── _final_d.ejs
├── _intro_add_data.ejs
├── _intro_edit_data.ejs
├── _intro_render_vfor.ejs
├── _two_way_binding.ejs
├── basic_structure.ejs
├── createApp.ejs
├── final.ejs
├── intro_add_data.ejs
├── intro_edit_data.ejs
├── intro_render_vfor.ejs
└── two_way_binding.ejs
├── optionsApi
├── _options-computed.ejs
├── _options-methods.ejs
├── _options-watch.ejs
├── options-api.ejs
├── options-computed.ejs
├── options-final.ejs
├── options-final_answer.ejs
├── options-life-cycle.ejs
├── options-methods.ejs
└── options-watch.ejs
├── partials
├── footer.ejs
├── menu.ejs
└── navbar.ejs
├── router
├── _vue_router.ejs
└── vue_router.ejs
├── stylesheets
├── all.scss
├── components
│ ├── _demo.scss
│ ├── _footer.scss
│ └── _utilities.scss
└── helpers
│ └── _variables.scss
└── template
├── _directive-final.ejs
├── _form.ejs
├── _v-bind.ejs
├── _v-for.ejs
├── _v-if.ejs
├── _v-model-modifiers.ejs
├── _v-on-dom-event.ejs
├── _v-on-modifiers.ejs
├── _v-on.ejs
├── _v-style.ejs
├── _v-text.ejs
├── directive-final-answer.ejs
├── directive-final.ejs
├── form.ejs
├── v-bind.ejs
├── v-for.ejs
├── v-if.ejs
├── v-model-modifiers.ejs
├── v-on-dom-event.ejs
├── v-on-modifiers.ejs
├── v-on.ejs
├── v-style.ejs
└── v-text.ejs
/.gitignore:
--------------------------------------------------------------------------------
1 | .idea
2 | node_modules
3 | public
4 | .publish
--------------------------------------------------------------------------------
/deploy.sh:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env sh
2 |
3 | # 錯誤終止腳本
4 | set -e
5 |
6 | # 運行 gulp build
7 | gulp build
8 |
9 | cd public
10 |
11 | git init
12 | git add -A
13 | git commit -m 'deploy'
14 |
15 | git push -f git@github.com:hexschool/vue3-starter-files.git master:gh-pages
16 |
17 | cd -
--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
1 |
2 | const gulp = require('gulp');
3 | const $ = require('gulp-load-plugins')(),
4 | browserSync = require('browser-sync'),
5 | autoprefixer = require('autoprefixer');
6 |
7 | const minimist = require('minimist'); // 用來讀取指令轉成變數
8 |
9 | // production || development
10 | // # gulp --env production
11 | var envOptions = {
12 | string: 'env',
13 | default: { env: 'development' }
14 | };
15 | var options = minimist(process.argv.slice(2), envOptions);
16 | console.log(options);
17 |
18 | gulp.task('clean', function () {
19 | return gulp.src(['./public', './.tmp'], { read: false, allowEmpty: true }) // 選項讀取：false阻止gulp讀取文件的內容，使此任務更快。
20 | .pipe($.clean());
21 | });
22 |
23 | gulp.task('layout', function () {
24 | console.log('layout');
25 | return gulp.src(['./source/**/*.ejs', './source/**/*.html'])
26 | .pipe($.plumber())
27 | // .pipe($.changed('./public', { extension: '.html' }))
28 | .pipe($.frontMatter())
29 | .pipe($.layout(function (file) {
30 | return file.frontMatter
31 | }))
32 | .pipe(gulp.dest('./public'))
33 | .pipe(browserSync.reload({
34 | stream: true
35 | }))
36 | });
37 | gulp.task('cleanExtra', function () {
38 | return gulp.src(['./public/**/*.ejs', './public/**/_*.html'])
39 | .pipe($.clean());
40 | })
41 |
42 | gulp.task('copy', function () {
43 | return gulp.src(['./source/**/*.js', './source/**/*.json'])
44 | .pipe($.plumber())
45 | .pipe(gulp.dest('./public'))
46 | .pipe(browserSync.reload({
47 | stream: true
48 | }))
49 | });
50 |
51 | gulp.task('sass', function () {
52 | // PostCSS AutoPrefixer
53 | var processors = [
54 | autoprefixer({
55 | browsers: ['last 5 version'],
56 | })
57 | ];
58 |
59 | return gulp.src(['./source/stylesheets/**/*.sass', './source/stylesheets/**/*.scss'])
60 | .pipe($.plumber())
61 | .pipe($.sourcemaps.init())
62 | .pipe($.sass({
63 | outputStyle: 'nested',
64 | includePaths: ['./node_modules/bootstrap/scss/']
65 | })
66 | .on('error', $.sass.logError))
67 | .pipe($.postcss(processors))
68 | .pipe($.if(options.env === 'production', $.minifyCss())) // 假設開發環境則壓縮 CSS
69 | .pipe($.sourcemaps.write('.'))
70 | .pipe(gulp.dest('./public/stylesheets'))
71 | .pipe(browserSync.reload({
72 | stream: true
73 | }));;
74 | });
75 |
76 | gulp.task('imageMin', function () {
77 | return gulp.src('./source/images/*')
78 | .pipe($.if(options.env === 'production', $.imagemin()))
79 | .pipe(gulp.dest('./public/images'));
80 | });
81 |
82 | gulp.task('vendorJs', function () {
83 | return gulp.src([
84 | './node_modules/bootstrap/dist/js/bootstrap.bundle.js'
85 | ])
86 | .pipe($.order([
87 | 'bootstrap.js'
88 | ]))
89 | .pipe($.concat('vendor.js'))
90 | // .pipe($.if(options.env === 'production', $.uglify()))
91 | .pipe(gulp.dest('./public/javascripts'))
92 | })
93 |
94 | gulp.task('browserSync', function () {
95 | return browserSync.init({
96 | server: { baseDir: './public' },
97 | reloadDebounce: 2000
98 | })
99 | });
100 |
101 | gulp.task('deploy', function () {
102 | return gulp.src('./public/**/*').pipe(
103 | $.ghPages({
104 | remoteUrl: 'git@github.com:hexschool/vue3-starter-files.git',
105 | })
106 | );
107 | })
108 |
109 | gulp.task('watch', function (done) {
110 | gulp.watch(['./source/**/*.ejs'], gulp.parallel('layout'));
111 | gulp.watch(['./source/stylesheets/**/*.sass', './source/stylesheets/**/*.scss'], gulp.parallel('sass'));
112 | // gulp.watch(['./source/**/*.jade'], ['jade']);
113 | gulp.watch(['./source/**/*.js'], gulp.parallel('copy'));
114 | done();
115 | });
116 |
117 | gulp.task(
118 | 'default',
119 | gulp.series(
120 | 'layout',
121 | 'sass',
122 | 'copy',
123 | 'vendorJs',
124 | // 'browserSync',
125 | 'imageMin',
126 | // 'cleanExtra',
127 | gulp.parallel('watch'),
128 | function(done) {
129 | browserSync.init({
130 | server: { baseDir: './public' },
131 | reloadDebounce: 2000,
132 | });
133 |
134 | gulp.watch(['./source/**/*.ejs'], gulp.series('layout'));
135 | gulp.watch(['./source/**/*.js'], gulp.parallel('copy'));
136 |
137 |
138 | }
139 | )
140 | );
141 | gulp.task(
142 | 'build',
143 | gulp.series('clean', 'layout', 'sass', 'copy', 'vendorJs', 'imageMin', 'cleanExtra')
144 | );
145 |
146 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "gulp-demo",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "index.js",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1"
8 | },
9 | "author": "",
10 | "license": "ISC",
11 | "devDependencies": {
12 | "autoprefixer": "^6.7.7",
13 | "babel-preset-es2015": "^6.24.1",
14 | "browser-sync": "^2.18.8",
15 | "gulp-babel": "^6.1.2",
16 | "gulp-clean": "^0.3.2",
17 | "gulp-concat": "^2.6.1",
18 | "gulp-if": "^2.0.2",
19 | "gulp-imagemin": "^3.2.0",
20 | "gulp-jade": "^1.1.0",
21 | "gulp-load-plugins": "^1.5.0",
22 | "gulp-minify-css": "^1.2.4",
23 | "gulp-plumber": "^1.1.0",
24 | "gulp-postcss": "^6.4.0",
25 | "gulp-sass": "^3.1.0",
26 | "gulp-sequence": "^0.4.6",
27 | "gulp-sourcemaps": "^2.6.0",
28 | "gulp-uglify": "^2.1.2",
29 | "main-bower-files": "^2.13.1",
30 | "minimist": "^1.2.0"
31 | },
32 | "dependencies": {
33 | "bootstrap": "^5.0.0-beta1",
34 | "ejs": "^2.5.7",
35 | "gulp": "^4.0.2",
36 | "gulp-changed": "^3.2.0",
37 | "gulp-clean": "^0.3.2",
38 | "gulp-data": "^1.2.1",
39 | "gulp-front-matter": "^1.3.0",
40 | "gulp-gh-pages": "^0.5.4",
41 | "gulp-layout": "0.0.4",
42 | "gulp-order": "^1.1.1",
43 | "gulp-watch": "^4.3.11",
44 | "jquery": "^3.3.1",
45 | "lodash": "^4.17.4",
46 | "vue": "^3.0.2"
47 | }
48 | }
49 |
--------------------------------------------------------------------------------
/source/advApi/_adv-component-v-model.ejs:
--------------------------------------------------------------------------------
1 | ---
2 | title: 製作包含 v-model 的元件
3 | layout: ./source/_layout.ejs
4 | current: adv-component-v-model
5 | menu: advApi
6 | engine: ejs
7 | ---
8 |
9 |
10 |
自訂義 input 元件（update:modelValue）
11 |
參考說明：https://vue3js.cn/docs/zh/guide/component-custom-events.html#v-model-%E5%8F%82%E6%95%B0
12 | {{ name }}
13 |
14 |
15 |
16 |
多個 v-model
17 | {{ text }} {{ text2 }}
18 |
19 |
10 |
單一擴展
11 |
12 |
13 |
權重
14 |
元件屬性 > mixins > extend
15 |
16 |
17 |
18 |
重點：
19 |
20 | - 擴展為單一擴展
21 | - 生命週期可以與 mixins 重複觸發
22 | - 同名的變數、方法則會依據權重決定
23 |
24 |
10 |
單一混合、多個混合
11 |
12 |
13 |
重點：
14 |
15 | - 可以重複混合
16 | - 生命週期可以重複觸發
17 | - 同名的變數、方法則會被後者覆蓋
18 |
19 |
10 |
多層級資訊傳遞
11 |
12 |
13 |
注意事項：響應式
14 |
15 |
10 |
使用 ref 定義元素
11 |
12 |
13 |
使用 ref 取得元件內的資訊
14 |
15 |
16 |
17 |
進階，使用 ref 搭配 Bootstrap
18 |
19 |
20 |
21 |
22 |
26 |
27 |
Modal body text goes here.
28 |
29 |
33 |
34 |
35 |
36 |
37 |
10 |
11 |
12 |
Teleport 自訂義元件位置
13 |
14 |
15 |
使用限制（錯誤情境）
16 |
17 |
18 |
實用技巧（取代標題、多個）
19 |
20 |
10 |
運用外部套件
11 |
12 |
外部套件匯入方式
13 |
14 | - 使用 CDN 直接載入
15 | - 元件的形式載入
16 | 或 app.use() 啟用。（另有指令等各種 Vue 的語法形式）
17 | - ESM（大多會需要 Webpack 環境）
18 |
19 |
20 |
使用外部套件注意事項：
21 |
22 | - 需多注意可搭配的版本號
23 | - 更新頻率
24 | - 使用人數
25 |
26 |
27 |
範例：載入 VeeValidate 驗證套件
28 |
29 | {{ errors }}
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
比對與 ESM 版本上的差異
38 |
39 |
10 |
套用一個現成的流程
11 |
參考文件：https://hackmd.io/FFv0a5cBToOATP7uI5COMQ
12 |
13 |
範例：載入 VeeValidate 驗證套件
14 |
15 | {{ errors }} {{ values }}
16 |
17 |
18 |
19 |
21 |
22 |
23 |
24 |
25 |
26 |
28 |
29 |
30 |
31 |
32 |
33 |
35 |
36 |
37 |
38 |
39 |
40 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
10 |
自訂義指令
11 |
用途
12 |
13 | - 實戰中屬於進階功能，初學可先了解有此功能即可
14 | - 可從延伸套件中看到相關的運用
15 | - 多用於 HTML 上的便利操作，複雜功能還是會搭配元件
16 |
17 |
18 |
結構
19 |
24 |
25 |
26 |
10 |
單一擴展
11 |
12 |
13 |
權重
14 |
15 |
16 |
17 |
重點：
18 |
19 | - 擴展為單一擴展
20 | - 生命週期可以與 mixins 重複觸發
21 | - 權重：元件屬性 > mixins > extend
22 | - 同名的變數、方法則會依據權重決定
23 |
24 |
10 |
單一混合、多個混合
11 |
12 |
13 |
重點：
14 |
15 | - 可以重複混合
16 | - 生命週期可以重複觸發
17 | - 同名的變數、方法則會被後者覆蓋
18 |
19 |
10 |
多層級資訊傳遞
11 |
12 | - 在外層加入 provide
13 | - 內層元件補上 inject
14 |
15 |
16 |
17 |
注意事項：響應式
18 |
19 |
10 |
使用 ref 定義元素
11 |
12 |
13 |
使用 ref 取得元件內的資訊
14 |
15 |
16 |
17 |
進階，使用 ref 搭配 Bootstrap
18 | Bootstrap Modal:
https://getbootstrap.com/docs/5.0/components/modal/
19 |
20 |
21 |
22 |
23 |
27 |
28 |
Modal body text goes here.
29 |
30 |
34 |
35 |
36 |
37 |
38 |
10 |
11 |
12 |
Teleport 自訂義元件位置
13 | 結構：
<teleport to="{ target }">
14 |
15 |
16 |
使用限制（錯誤情境）
17 |
18 |
19 |
實用技巧（取代標題、多個）
20 |
21 |
10 |
11 |
外部套件匯入方式
12 |
13 | - 載入方式：使用 CDN 或使用 npm
14 | - 運用方式：app.use()
15 | 或 元件的形式載入 啟用。（另有指令等各種 Vue 的語法形式）
16 |
17 |
18 |
使用外部套件注意事項：
19 |
20 | - 需多注意可搭配的版本號
21 | - 更新頻率
22 | - 使用人數
23 |
24 |
25 |
範例：載入 VeeValidate 驗證套件
26 |
34 |
35 |
比對與 ESM 版本上的差異
36 |
37 |
10 |
Emit 處發外部事件
11 |
12 | - 先定義外層接收的方法
13 | - 定義內層的 $emit 觸發方法
14 | - 使用 v-on 的方式觸發外層方法（口訣：前內、後外）
15 |
16 | {{ num }}
17 |
20 |
21 |
傳遞資料狀態
22 | 內部傳來的文字：{{ text }}
23 |
26 |
27 |
命名注意
28 |
駝峰的大寫文字，可以改為 `-` 進行串接
29 | 內部傳來的文字：{{ text }}
30 |
33 |
10 |
Emits API
11 | {{ num }}
12 |
13 |
14 | 驗證資料內容
15 |
16 |
17 |
18 |
19 |
68 |
--------------------------------------------------------------------------------
/source/components/_component_mitt.ejs:
--------------------------------------------------------------------------------
1 | ---
2 | title: 元件插巢
3 | layout: ./source/_layout.ejs
4 | current: component_mitt
5 | menu: components
6 | engine: ejs
7 | ---
8 |
9 |
16 |
17 |
67 |
--------------------------------------------------------------------------------
/source/components/_component_props.ejs:
--------------------------------------------------------------------------------
1 | ---
2 | title: Props
3 | layout: ./source/_layout.ejs
4 | current: component_props
5 | menu: components
6 | engine: ejs
7 | ---
8 |
9 |
10 |
Props 靜態資料
11 |
由外部傳入資料至內部
12 |
13 |
14 |
15 |
16 |
動態資源
17 |
技巧：前內、後外
18 |
19 |
20 |
單向數據流
21 |
22 |
23 |
命名限制
24 |
25 |
10 |
Props 型別技巧
11 |
12 |
13 |
14 |
15 |
16 |
17 |
定義 Props 型別驗證
18 |
實戰中不太會用到全部技巧，常用的有：
19 |
20 | - 型別驗證
21 | - 預設值
22 | - 自訂驗證
23 |
24 |
29 |
30 |
10 |
元件基本範例及結構
11 |
元件使用的基本要點
12 |
13 | - 元件需要在 creatApp 後，mount 前進行定義
14 | - 元件需指定一個名稱
15 | - 元件結構與最外層的根元件結構無異（除了增加 Template 的片段）
16 | - 元件另有 prop, emits 等資料傳遞及事件傳遞
17 |
18 |
19 |
20 |
不同元件的註冊方式
21 |
22 |
23 | 全域註冊
24 |
25 |
此 createApp 下，任何子元件都可運用，在中小型專案、一般頁面開發很方便
26 |
27 |
28 |
區域註冊
29 |
限制在特定元件下才可使用，在 Vue Cli 中很常使用此方法（便於管理）
30 |
31 |
32 |
模組化
33 |
同屬於區域註冊，Vue Cli 中的實戰運用技巧
34 |
35 |
10 |
Slot 插巢與插巢預設值
11 |
12 | 這是外部撰寫的文字
13 |
14 |
15 |
16 |
17 |
具名插巢
18 |
19 | 我喜歡這張卡片
20 |
21 | 這是卡片 2 號
22 | 這是卡片腳
23 |
24 |
25 |
26 |
具名插巢縮寫
27 |
28 | 我喜歡這張卡片
29 |
30 | 這是卡片 2 號
31 | 這是卡片腳
32 |
33 |
34 |
10 |
插巢 Prop
11 |
將元件內的變數取出使用，稱為 slot prop
12 |
13 |
14 | {{ slotProps }}
15 |
16 |
17 |
18 |
傳入、傳出
19 |
20 |
21 |
22 | {{ slotProps.item }}
23 |
24 |
25 |
26 |
27 |
28 |
多個（解構）
29 |
30 |
31 | 買早餐
32 |
33 |
34 |
35 | {{ item }}
36 | {{ shop }}
37 |
38 |
39 |
40 |
9 |
常見的模板建立方式
10 |
11 |
template
12 |
13 |
14 |
x-template
15 |
16 |
17 |
單文件元件
18 |
本章節不介紹，在 Vue Cli 課程中將會實作（較為簡單，使用與 x-template 接近）
19 |
20 |
21 |
元件綁定方式
22 |
直接使用 標籤名稱
23 |
24 |
25 |
搭配 v-for 也是沒問題的
26 |
27 |
28 |
使用 is 綁定
29 |
30 |
31 |
動態屬性
32 |
33 |
34 |
任何標籤均可搭配 v-is 進行動態切換
35 |
36 |
37 |
在 component 標籤中，可以使用 is 縮寫（由 v2 版轉移過來的功能）
38 |
39 |
40 |
動態標籤實戰技巧
41 |
42 |
43 |
44 | | 標題 |
45 | 內文 |
46 |
47 |
48 |
49 | |
50 |
51 |
52 |
8 | {{ text }}
9 |
`
10 | }
11 |
--------------------------------------------------------------------------------
/source/components/component_emits.ejs:
--------------------------------------------------------------------------------
1 | ---
2 | title: Emit 傳遞事件
3 | layout: ./source/_layout.ejs
4 | current: component_emits
5 | menu: components
6 | engine: ejs
7 | ---
8 |
9 |
10 |
Emit 處發外部事件
11 |
12 | - 先定義外層接收的方法
13 | - 定義內層的 $emit 觸發方法
14 | - 使用 v-on 的方式觸發外層方法（口訣：前內、後外）
15 |
16 | {{ num }}
17 |
20 |
21 |
傳遞資料狀態
22 | 內部傳來的文字：{{ text }}
23 |
26 |
27 |
命名注意
28 |
駝峰的大寫文字，可以改為 `-` 進行串接
29 | 內部傳來的文字：{{ text }}
30 |
33 |
10 |
Emits API
11 | {{ num }}
12 |
13 |
14 | 驗證資料內容
15 |
16 |
17 |
18 |
19 |
55 |
--------------------------------------------------------------------------------
/source/components/component_mitt.ejs:
--------------------------------------------------------------------------------
1 | ---
2 | title: 跨元件溝通
3 | layout: ./source/_layout.ejs
4 | current: component_mitt
5 | menu: components
6 | engine: ejs
7 | ---
8 |
9 |
16 |
17 |
63 |
--------------------------------------------------------------------------------
/source/components/component_props.ejs:
--------------------------------------------------------------------------------
1 | ---
2 | title: Props
3 | layout: ./source/_layout.ejs
4 | current: component_props
5 | menu: components
6 | engine: ejs
7 | ---
8 |
9 |
10 |
Props 靜態資料
11 |
由外部傳入資料至內部
12 | 外部資源：https://images.unsplash.com/photo-1605784401368-5af1d9d6c4dc?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80
13 |
14 |
15 |
動態資源
16 |
技巧：前內、後外
17 |
18 |
19 |
單向數據流
20 |
21 |
22 |
命名限制
23 |
24 |
10 |
Props 型別技巧
11 |
12 |
13 |
14 |
15 |
16 |
17 |
定義 Props 型別驗證
18 |
實戰中不太會用到全部技巧，常用的有：
19 |
20 | - 型別驗證
21 | - 預設值、是否必填
22 |
23 |
28 |
29 |
10 |
元件基本範例及結構
11 |
元件使用的基本要點
12 |
13 | - 元件需要在 createApp 後，mount 前進行定義
14 | - 元件需指定一個名稱
15 | - 元件結構與最外層的根元件結構無異（除了增加 Template 的片段）
16 | - 元件另有 prop, emits 等資料傳遞及事件傳遞
17 |
18 |
19 |
不同元件的註冊方式
20 |
21 |
22 | 全域註冊
23 |
24 |
此 createApp 下，任何子元件都可運用，在中小型專案、一般頁面開發很方便
25 |
26 |
27 |
區域註冊
28 |
限制在特定元件下才可使用，在 Vue Cli 中很常使用此方法（便於管理）
29 |
30 |
31 |
模組化
32 |
同屬於區域註冊，Vue Cli 中的實戰運用技巧
33 |
34 |
10 |
Slot 插巢與插巢預設值
11 |
12 |
13 |
14 |
15 |
16 | 具名插巢
17 |
18 | 我喜歡這張卡片
19 |
20 | 這是卡片 2 號
21 | 這是卡片腳
22 |
23 |
24 |
25 | 具名插巢縮寫
26 |
27 | 我喜歡這張卡片
28 |
29 | 這是卡片 2 號
30 | 這是卡片腳
31 |
32 |
33 |
34 |
35 |
68 |
--------------------------------------------------------------------------------
/source/components/component_slot_props.ejs:
--------------------------------------------------------------------------------
1 | ---
2 | title: 元件插巢 Props
3 | layout: ./source/_layout.ejs
4 | current: component_slot_props
5 | menu: components
6 | engine: ejs
7 | ---
8 |
9 |
10 |
插巢 Prop
11 |
將元件內的變數取出使用，稱為 slot prop
12 |
13 |
14 | 我想取出元件的值來使用
15 |
16 |
17 |
18 |
多個（解構）
19 | {{ product }}
20 |
21 |
22 | 買早餐
23 |
24 |
25 |
26 |
27 |
9 |
樣板建立方式
10 |
11 |
template
12 |
13 |
x-template
14 |
15 |
單文件元件（單一檔案包含 HTML, JS, CSS）
16 |
本章節不介紹，在 Vue Cli 課程中將會實作（較為簡單，使用與 x-template 接近）
17 |
18 |
19 |
元件運用
20 |
直接使用 標籤 名稱
21 |
22 |
23 |
搭配 v-for 也是沒問題的
24 |
25 |
26 |
使用 v-is 綁定
27 |
28 |
29 |
動態屬性
30 |
31 |
32 |
任何標籤均可搭配 v-is 進行動態切換
33 |
34 |
35 |
在 component 標籤中，可以使用 is 縮寫（由 v2 版轉移過來的功能）
36 |
37 |
38 |
動態標籤實戰技巧
39 |
40 |
41 |
42 | | 標題 |
43 | 內文 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
{{ counter }}
20 |
--------------------------------------------------------------------------------
/source/es6/_object_reference.ejs:
--------------------------------------------------------------------------------
1 | ---
2 | title: 物件參考特性
3 | layout: ./source/_layout.ejs
4 | current: object_reference
5 | menu: es6
6 | engine: ejs
7 | description: 因為關注點分離，畫面由框架來處理，開發者將專注於資料處理，因此資料處理的知識顯得格外重要。
8 | ---
9 |
--------------------------------------------------------------------------------
/source/es6/_promise.ejs:
--------------------------------------------------------------------------------
1 | ---
2 | title: Promise
3 | layout: ./source/_layout.ejs
4 | current: promise
5 | menu: es6
6 | engine: ejs
7 | description:
8 | ---
9 |
10 |
11 |
--------------------------------------------------------------------------------
/source/es6/_separation_of_concerns.ejs:
--------------------------------------------------------------------------------
1 | ---
2 | title: 關注點分離
3 | layout: ./source/_layout.ejs
4 | current: separation_of_concerns
5 | menu: es6
6 | engine: ejs
7 | ---
8 |
9 |
12 |
13 |
--------------------------------------------------------------------------------
/source/es6/_separation_of_concerns_work.ejs:
--------------------------------------------------------------------------------
1 | ---
2 | title: 關注點分離
3 | layout: ./source/_layout.ejs
4 | current: separation_of_concerns
5 | menu: es6
6 | engine: ejs
7 | ---
8 |
9 |
14 |
15 |
--------------------------------------------------------------------------------
/source/es6/_shorthand.ejs:
--------------------------------------------------------------------------------
1 | ---
2 | title: ES6 縮寫
3 | layout: ./source/_layout.ejs
4 | current: shorthand
5 | menu: es6
6 | engine: ejs
7 | description: 本課程的程式碼會盡可能利用 ES6 或其縮寫的形式撰寫，本章節會介紹實戰中的常見縮寫語法
8 | ---
9 |
13 |
--------------------------------------------------------------------------------
/source/es6/arrow_function.ejs:
--------------------------------------------------------------------------------
1 | ---
2 | title: 箭頭函式的 this 指向差異
3 | layout: ./source/_layout.ejs
4 | current: arrow_function
5 | menu: es6
6 | engine: ejs
7 | ---
8 |
--------------------------------------------------------------------------------
/source/es6/defaultExport.js:
--------------------------------------------------------------------------------
1 |
2 | export default {
3 | data: [
4 | // 資料
5 | '這是第一句話',
6 | '這是第二句話',
7 | '這是第三句話',
8 | ],
9 |
10 | render(dom) {
11 | // 渲染方法
12 | const list = document.querySelector(`${dom} ul`);
13 | let content = '';
14 | this.data.forEach((item, i) => {
15 | content = `${content}${item} `;
16 | });
17 | // 縮寫優化
18 | // const content = component.data.map(item => `${item}`).join('');
19 | console.log(this.data)
20 | list.innerHTML = content;
21 |
22 | // 加入監聽
23 | const btns = document.querySelectorAll(`${dom} .btn`);
24 | btns.forEach((btn) =>
25 | btn.addEventListener('click', (e) => {
26 | // #2 重點，移除項目是先移除資料，而不是直接移除 DOM
27 | // 如果要進行 AJAX 或更複雜行為，不會因為 DOM 與資料混合而難以運作
28 | const id = e.target.dataset.id;
29 | this.data.splice(id, 1);
30 | this.render(dom);
31 | })
32 | );
33 | },
34 | };
--------------------------------------------------------------------------------
/source/es6/esModule.ejs:
--------------------------------------------------------------------------------
1 | ---
2 | title: ES 模組
3 | layout: ./source/_layout.ejs
4 | current: esModule
5 | menu: es6
6 | engine: ejs
7 | description:
8 | ---
9 |
12 |
13 |
--------------------------------------------------------------------------------
/source/es6/esModule_2.ejs:
--------------------------------------------------------------------------------
1 | ---
2 | title: ES 模組延伸觀念
3 | layout: ./source/_layout.ejs
4 | current: esModule_2
5 | menu: es6
6 | engine: ejs
7 | description:
8 | ---
9 |
15 | {{ counter }}
16 |
--------------------------------------------------------------------------------
/source/es6/namedExport.js:
--------------------------------------------------------------------------------
1 | export const a = 1;
2 |
3 | export function b() {
4 | console.log('1');
5 | }
6 |
7 | export function c(a, b) {
8 | return a + b;
9 | }
--------------------------------------------------------------------------------
/source/es6/object_reference.ejs:
--------------------------------------------------------------------------------
1 | ---
2 | title: 物件參考特性
3 | layout: ./source/_layout.ejs
4 | current: object_reference
5 | menu: es6
6 | engine: ejs
7 | description: 因為關注點分離，畫面由框架來處理，開發者將專注於資料處理，因此資料處理的知識顯得格外重要。
8 | ---
9 |
--------------------------------------------------------------------------------
/source/es6/promise.ejs:
--------------------------------------------------------------------------------
1 | ---
2 | title: Promise
3 | layout: ./source/_layout.ejs
4 | current: promise
5 | menu: es6
6 | engine: ejs
7 | description:
8 | ---
9 |
10 |
11 |
--------------------------------------------------------------------------------
/source/es6/separation_of_concerns.ejs:
--------------------------------------------------------------------------------
1 | ---
2 | title: 關注點分離
3 | layout: ./source/_layout.ejs
4 | current: separation_of_concerns
5 | menu: es6
6 | engine: ejs
7 | ---
8 |
9 |
12 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/source/es6/separation_of_concerns_work.ejs:
--------------------------------------------------------------------------------
1 | ---
2 | title: 關注點分離
3 | layout: ./source/_layout.ejs
4 | current: separation_of_concerns_work
5 | menu: es6
6 | engine: ejs
7 | ---
8 |
9 |
14 |
15 |
--------------------------------------------------------------------------------
/source/es6/shorthand.ejs:
--------------------------------------------------------------------------------
1 | ---
2 | title: ES6 縮寫
3 | layout: ./source/_layout.ejs
4 | current: shorthand
5 | menu: es6
6 | engine: ejs
7 | description: 本課程的程式碼會盡可能利用 ES6 或其縮寫的形式撰寫，本章節會介紹實戰中的常見縮寫語法
8 | ---
9 |
13 |
--------------------------------------------------------------------------------
/source/es6/sideEffect.js:
--------------------------------------------------------------------------------
1 | (function (global) {
2 | global.$ = '我是 jQuery';
3 | })(window);
--------------------------------------------------------------------------------
/source/es6/this.ejs:
--------------------------------------------------------------------------------
1 | ---
2 | title: this 指向觀念
3 | layout: ./source/_layout.ejs
4 | current: this
5 | menu: es6
6 | engine: ejs
7 | ---
8 |
--------------------------------------------------------------------------------
/source/index.ejs:
--------------------------------------------------------------------------------
1 | ---
2 | title: 首頁
3 | layout: ./source/_layout.ejs
4 | engine: ejs
5 | menu: null
6 | current: index
7 | description: Vue 練習手冊，請同學搭配課程完成本練習，
練習開始。
8 | ---
--------------------------------------------------------------------------------
/source/intro/_final.ejs:
--------------------------------------------------------------------------------
1 | ---
2 | title: Vue 體驗，製作一個商品後台
3 | layout: ./source/_layout.ejs
4 | current: final
5 | menu: intro
6 | engine: ejs
7 | ---
8 |
9 |
10 |
11 |
13 |
14 |
40 |
60 |
9 |
10 |
11 |
![]()
12 |
13 |
14 |
{{ product.name }}
15 |
{{ product.subTitle }}
16 |
{{ product.description }}
17 |
18 | {{ product.price }}
19 |
20 |
28 |
29 |
30 |
{{ selectedItem.name }} 已售完
31 |
32 | {{ selectedItem.name }} 尚有存貨
33 |
加入購物車
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 | |
43 | {{ item.name }} |
44 | {{ item.spec.name }} |
45 | {{ item.price }} |
46 |
47 |
48 | | 合計 {{ sum }} |
49 |
50 |
51 |
52 |
66 |
67 |
68 | {{ cart }} {{ customer }}
69 |
10 |
11 |
12 |
13 | | 標題 |
14 | 圖片 |
15 | 銷售狀態 |
16 | 編輯 |
17 |
18 |
19 |
20 | |
21 |
22 |
23 |
44 |
10 |
11 |
Computed 將目前的數值運算呈現至畫面上
12 |
13 | -
14 | {{ product.name }} / {{ product.price }}
15 |
16 |
17 |
18 | ...
19 |
購物車項目
20 |
21 | - {{ item.name }}
22 |
23 | total 的值：{{ total }}
24 |
25 |
26 |
Computed 常見技巧 - 搜尋
27 |
28 |
29 | -
30 | {{ item.name }} / {{ item.price }}
31 |
32 |
33 |
34 |
Computed Getter, Setter
35 |
36 |
37 | total 的值：{{ total }}
38 | sum 的值：{{ sum }}
39 |
10 |
11 |
methods 的結構
12 |
13 | - 由 methods 定義的物件
14 | - 內層均是函式
15 |
16 |
17 |
methods 的觸發方法（點擊、其它 options api、生命週期...）
18 |
19 |
20 |
21 |
22 |
參數傳入
23 |
24 |
25 |
使用 methods 處理複雜資料
26 |
27 | -
28 | {{ product.name }} / {{ product.price }}
29 |
30 |
31 |
32 | ...
33 |
購物車項目
34 |
35 | - {{ item.name }}
36 |
37 | 總金額 {{ sum }}
38 |
作為 $filter 使用
39 |
40 | {{ convertToAmount(sum) }}
41 |
10 |
11 |
watch 監聽單一變數
12 |
13 |
14 |
result: {{ result }}
15 |
name: {{ name }}
16 |
17 |
watch vs computed
18 |
Watch
19 |
20 | - 監聽單一 “變數” 觸發事件
21 | - 該函式可同時操作多個變數或複雜的事件
22 |
23 |
24 |
Computed
25 |
26 | - 監聽多個變數觸發事件
27 | - 會產生一個值
28 |
29 |
30 |
31 |
32 |
33 |
result2: {{ result2 }}
34 |
result3: {{ result3 }}
35 |
36 |
watch 深層監聽
37 |
38 |
39 |
40 |
result4: {{ result4 }}
41 |
42 |
10 |
什麼是 options API 與 composition API
11 |
Option API Sample
12 |
13 |
14 |
常見的 Option API
15 |
官網：https://vue3js.cn/docs/zh/api/options-api.html
16 |
17 | - 常用功能(本章節介紹、部分在元件章節介紹)：data
18 | - 元件知識：template(元件章節)、生命週期(本章節介紹)、資源
19 | - 進階、外部套件：資源、組合、雜項(進階章節、套件運用)
20 |
21 |
22 |
提醒：option API 與 this
23 |
24 |
26 |
27 |
Composition API Sample
28 |
29 |
30 |
31 |
32 |
52 |
53 |
54 |
79 |
80 |
--------------------------------------------------------------------------------
/source/optionsApi/options-computed.ejs:
--------------------------------------------------------------------------------
1 | ---
2 | title: Computed
3 | layout: ./source/_layout.ejs
4 | current: options-computed
5 | menu: optionsApi
6 | engine: ejs
7 | ---
8 |
9 |
10 |
11 |
Computed 將目前的數值運算呈現至畫面上
12 |
13 | -
14 | {{ product.name }} / {{ product.price }}
15 |
16 |
17 |
18 | ...
19 |
購物車項目
20 |
21 | - {{ item.name }}
22 |
23 | total 的值：
24 |
25 |
Computed 常見技巧 - 搜尋
26 |
27 |
28 | -
29 | {{ item.name }} / {{ item.price }}
30 |
31 |
32 |
33 |
Computed Getter, Setter
34 | sum 的值：
35 |
36 |
37 | total 的值：{{ total }}
38 | sum 的值：{{ sum }}
39 |
10 |
11 |
23 |
24 |
25 |
28 |
29 |
30 |
31 |
![]()
32 |
34 |
35 |
{{ datastore.Name }}
36 |
{{ datastore.Description }}
37 |
38 |
39 |
40 |
41 |
10 |
11 |
24 |
25 |
26 |
30 |
31 |
32 |
33 |
34 |
![]()
35 |
37 |
38 |
{{ cacheArea.Name }}
39 |
{{ cacheArea.Description }}
40 |
41 |
42 |
43 | 請選擇場域
44 |
45 |
46 |
47 |
48 |
9 |
10 |
Vue 元件生命週期展示
11 |
生命週期介紹：生命週期
12 |
16 |
17 |
18 |
19 |
講解事項：
20 |
21 | - Vue 都是元件，元件的生命週期
22 | - 生命週期流程
23 | - v-if 與 v-show 的差異
24 | - 使用 Keep Alive 維持生命週期
25 |
26 |
27 |
10 |
11 |
methods 的結構
12 |
13 | - 由 methods 定義的物件
14 | - 內層均是函式
15 |
16 |
17 |
methods 的觸發方法（點擊、其它 options api、生命週期...）
18 |
19 |
20 |
21 |
22 |
參數傳入
23 |
24 |
25 |
使用 methods 處理複雜資料
26 |
27 | -
28 | {{ product.name }} / {{ product.price }}
29 |
30 |
31 |
32 | ...
33 |
購物車項目
34 |
35 | - {{ item.name }}
36 |
37 | 總金額 {{ sum }}
38 |
39 |
40 |
作為 $filter 使用（取代複雜表達式）
41 |
42 |
10 |
11 |
watch 監聽單一變數
12 |
13 |
14 |
result: {{ result }}
15 |
name: {{ name }}
16 |
17 |
watch vs computed
18 |
Watch
19 |
20 | - 監聽單一 “變數” 觸發事件
21 | - 該函式可同時操作多個變數
22 |
23 |
24 |
Computed
25 |
26 | - 監聽多個變數觸發事件
27 | - 會產生一個值
28 |
29 |
30 |
31 |
32 |
33 |
Computed result2: {{ result2 }}
34 |
Watch result3: {{ result3 }}
35 |
36 |
watch 深層監聽
37 |
38 |
39 |
40 |
result4: {{ result4 }}
41 |
42 |
2 |
3 | <% menus.forEach(function(menu){ %>
4 |
10 | <% }); %>
11 |
12 |
13 | 文件版本：2021/4/09
14 |
15 |
10 | A |
11 | B
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/source/router/vue_router.ejs:
--------------------------------------------------------------------------------
1 | ---
2 | title: 路由
3 | layout: ./source/_layout.ejs
4 | current: vue-router
5 | menu: router
6 | engine: ejs
7 | ---
8 |
9 |
10 |
路由示範
11 | {{ text }}
12 |
13 |
--------------------------------------------------------------------------------
/source/stylesheets/all.scss:
--------------------------------------------------------------------------------
1 | @import "functions";
2 | @import "helpers/variables";
3 | @import "bootstrap";
4 |
5 | @import "components/demo";
6 | @import "components/footer";
7 | @import "components/utilities";
8 |
9 | body {
10 | padding-top: 56px;
11 | }
12 |
13 | h3, h4, h5, h6 {
14 | margin-top: .75em;
15 | }
16 |
--------------------------------------------------------------------------------
/source/stylesheets/components/_demo.scss:
--------------------------------------------------------------------------------
1 | .demo {
2 | padding: .5rem;
3 | margin-bottom: 1rem;
4 | background-color: lighten($orange , 45%);
5 | border: 1px dashed lighten($orange , 35%);
6 | }
--------------------------------------------------------------------------------
/source/stylesheets/components/_footer.scss:
--------------------------------------------------------------------------------
1 | .main {
2 | min-height: calc(100vh - 6rem - 56px - 40px);
3 | }
--------------------------------------------------------------------------------
/source/stylesheets/components/_utilities.scss:
--------------------------------------------------------------------------------
1 |
2 | // .box {
3 | // display: inline-block;
4 | // width: 5rem;
5 | // height: 5rem;
6 | // margin: .25rem;
7 | // background-color: #f5f5f5;
8 | // border: 1px solid;
9 | // }
10 |
11 | // .bg-lighter {
12 | // background-color: theme-color('light');
13 | // // background-color: $gray-200;
14 | // }
15 |
16 | // .over-flow-x {
17 | // overflow-x: hidden;
18 | // }
19 |
20 | // // position
21 | // .relative {
22 | // position: relative
23 | // }
24 |
25 | // .bg-primary-gradient {
26 | // background: linear-gradient(90deg, theme-color('primary') 15%,#B97EE4 75%,#BA8AFF 94%);
27 | // }
28 |
29 | // .skew-section {
30 | // transform: skewY($rotate-degree);
31 | // & > * {
32 | // transform: skewY(-$rotate-degree);
33 | // }
34 | // }
35 | // .skew-bg {
36 | // transform: skewY($rotate-degree);
37 | // }
38 | // .skew-bg {
39 | // position: absolute;
40 | // left: 0;
41 | // right: 0;
42 | // top: 0;
43 | // bottom: 0;
44 | // z-index: -1;
45 | // }
--------------------------------------------------------------------------------
/source/template/_form.ejs:
--------------------------------------------------------------------------------
1 | ---
2 | title: v-model 與表單
3 | layout: ./source/_layout.ejs
4 | current: form
5 | menu: template
6 | engine: ejs
7 | ---
8 |
9 |
10 |
input
11 |
12 | {{ name }}
13 |
14 |
15 |
textarea
16 |
17 | {{ text }}
18 |
19 |
20 |
checkbox 單選框
21 |
小明，你是吃飽沒？
22 |
{{ checkAnswer ? '吃飽了' : '還沒'}}
23 |
24 |
25 |
26 |
27 |
28 |
29 |
checkbox 單選延伸
30 |
小明，你是吃飽沒？
31 |
{{ checkAnswer2 }}
32 |
33 |
35 |
36 |
37 |
38 |
39 |
checkbox 複選框
40 |
你還要吃什麼？
41 |
{{ checkAnswer3.join(' ') }}
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
radio 單選框
57 |
你還要吃什麼？
58 |
{{ radioAnswer }}
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
select 單選
74 |
你還要吃什麼？
75 |
{{ selectAnswer }}
76 |
81 |
82 |
83 |
select 多選
84 |
你還要吃什麼？
85 |
{{ selectAnswer2 }}
86 |
91 |
10 |
綁定屬性 v-bind
11 |
{{ breakfastShop.name }}
12 |
![]()
13 |
14 |
縮寫形式 :
15 |
![]()
16 |
17 |
18 |
更多屬性綁定
19 | 小明還想點餐：
20 |
24 |
25 |
26 |
27 |
28 |
搭配 v-for
29 |
52 |
53 |
54 |
表達式運用（串接）
55 |
{{ imageSize }}
56 |
57 |
58 |
![]()
60 |
61 |
62 |
動態屬性綁定(注意大小寫)
63 |
65 |
66 |
67 |
68 |
69 |
預告：元件的資料傳遞亦是使用 v-bind
70 |
73 |
10 |
呈現多筆資料於畫面上 v-for
11 |
菜單
12 |
13 | -
14 | {{ key }} - {{ item.name}} / {{ item.price }} 元
15 |
16 |
17 |
18 |
物件回圈
19 |
20 | -
21 | {{ key }} - {{ item.name}} / {{ item.price }} 元
22 |
23 |
24 |
25 |
純數值回圈
26 |
29 |
30 |
v-for 與 key
31 |
菜單
32 |
38 |
說明：有相同父元素的子元素必須有獨特的 key。重複的 key 會造成渲染錯誤。
39 |
40 |
41 |
42 |
進階技巧：在 template 標籤使用 v-for
43 |
44 |
45 |
46 |
47 | | {{ key + 1 }} |
48 |
49 | {{ item.name }}
50 | |
51 |
52 |
53 | |
54 | {{ item.price }}元
55 | |
56 |
57 | {{ item.vegan? '可素食': '不可素食' }}
58 | |
59 |
60 |
61 |
62 |
63 |
參考介紹
64 |
65 |
補充說明：v-for 與元件
66 |
69 |
10 |
修飾符
11 |
延遲 Lazy
12 | {{ lazyMsg }}
13 |
14 |
純數值 Number
15 | {{ numberMsg }}{{ typeof numberMsg }}
16 |
17 |
修剪 Trim
18 | 這是一段{{ trimMsg }}緊黏的文字
19 |
20 |
21 |
自定義修飾符
22 |
介紹：透過元件自定義修飾符
23 |
10 |
原生 DOM 事件
11 |
參考：DOM 事件
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
取得原生 input 數值
22 |
23 |
24 |
監聽按鍵事件
25 |
26 |
27 |
10 |
11 |
12 |
修飾符
13 |
按鍵修飾符*
14 |
15 | - keyAlias - 只當事件是從特定鍵觸發時才觸發。
16 | - 別名修飾 - .enter, .tab, .delete, .esc, .space, .up, .down, .left, .right
17 | - 修飾符來實現僅在按下相應按鍵時才觸發鼠標或鍵盤事件的監聽器 - .ctrl, .alt, .shift, .meta
18 |
19 |
20 |
別名修飾
21 |
22 |
23 |
相應按鍵時才觸發的監聽器
24 |
25 |
26 |
特定鍵
27 |
28 |
29 |
滑鼠修飾符
30 |
31 | - .left 只當點擊鼠標左鍵時觸發。
32 | - .right 只當點擊鼠標右鍵時觸發。
33 | - .middle 只當點擊鼠標中鍵時觸發。
34 |
35 |
滑鼠修飾符
36 |
37 |
38 |
39 |
40 |
41 |
42 |
事件修飾符
43 |
44 | - .stop - 調用 event.stopPropagation()。
45 | - .prevent - 調用 event.preventDefault()。
46 | - .capture - 添加事件偵聽器時使用 capture 模式。
47 | - .self - 只當事件是從偵聽器綁定的元素本身觸發時才觸發回調。
48 | - .once - 只觸發一次回調。
49 |
50 |
加入 Prevent
51 |
52 |
53 |
預設情境
54 |
55 |
56 |
57 |
58 |
59 |
60 |
將此範例加上 stopPropagation (防止向外尋找)
61 |
62 |
63 |
64 |
65 |
66 |
67 |
事件偵聽器時使用 capture 模式 (事件改為由外而內)
68 |
69 |
70 |
71 |
72 |
73 |
74 |
事件偵聽器時使用 self 模式 (只會觸發自己範圍內的)
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
事件偵聽器只觸發一次 once
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
10 |
觸發事件 與 縮寫*
11 |
12 |
13 |
14 |
15 |
帶入參數*
16 |
17 |
18 |
19 |
20 |
21 |
原生 DOM 事件*
22 |
input change 事件
23 |
24 |
25 |
form submit 事件
26 |
30 |
31 |
動態事件 []
32 |
33 |
34 |
35 |
36 |
動態物件方法 {}
37 |
38 |
42 |
43 |
作為運算*
44 | {{ double(num) }}
45 |
46 |
10 |
切換 Class
11 |
物件寫法
12 |
13 |
14 |
15 |
16 |
17 |
18 |
物件寫法 2
19 |
20 |
21 |
22 | 陣列寫法
23 |
24 |
27 |
28 |
29 | 行內樣式
30 | 綁定行內樣式
31 |
32 |
33 |
34 |
10 |
字串 v-text 與 {{}} (Mustache)
11 |
{{ name }}在{{ position }}吃早餐
12 |
在吃早餐
13 |
14 |
15 |
16 |
原始字串 v-html
17 | {{ rawHtml }}
18 |
注意事項
19 |
20 |
21 |
單次綁定 v-once
22 |
{{ name }}在{{ position }}吃早餐
23 |
24 |
25 |
26 |
進階技巧：表達式
27 |
{{ `${name}在${position}吃早餐` }}
28 |
{{ text.split('').reverse().join('') }}
29 |
{{ say(name) }}
30 |
{{ 1 + 1}}
31 |
32 |
33 |
進階技巧：顯示資料狀態
34 |
{{ products }}
35 |
36 |
37 |
顯示 {{ }}
38 |
這段文字不會被轉譯：{{ name }}在{{ position }}吃早餐
39 |
10 |
input
11 |
12 | {{ name }}
13 |
14 |
15 |
textarea
16 |
17 | {{ text }}
18 |
19 |
20 |
checkbox 單選框
21 |
小明，你是吃飽沒？
22 |
{{ checkAnswer ? '吃飽了' : '還沒'}}
23 |
24 |
25 |
26 |
27 |
28 |
29 |
checkbox 單選延伸
30 |
小明，你是吃飽沒？
31 |
{{ checkAnswer2 }}
32 |
33 |
34 |
35 |
36 |
37 |
38 |
checkbox 複選框
39 |
你還要吃什麼？
40 |
{{ checkAnswer3.join(' ') }}
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
radio 單選框
56 |
你還要吃什麼？
57 |
{{ radioAnswer }}
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
select 單選
73 |
你還要吃什麼？
74 |
{{ selectAnswer }}
75 |
78 |
79 |
80 |
select 多選
81 |
你還要吃什麼？
82 |
{{ selectAnswer2 }}
83 |
88 |
10 |
綁定屬性 v-bind
11 |
{{ breakfastShop.name }}
12 |
13 |
14 |
縮寫形式 :
15 |
![]()
16 |
17 |
18 |
更多屬性綁定
19 | 小明還想點餐：
20 |
24 |
25 |
26 |
27 |
28 |
搭配 v-for
29 |
52 |
53 |
54 |
表達式運用（串接）
55 |
{{ imageSize }}
56 |
57 |
58 |
![]()
60 | {{ `${breakfastShop.resizeImg}&w=${imageSize}` }}
61 |
62 |
63 |
動態屬性綁定(注意大小寫)
64 |
66 |
67 |
68 |
69 |
70 |
預告：元件的資料傳遞亦是使用 v-bind
71 |
74 |
10 |
呈現多筆資料於畫面上 v-for
11 |
菜單
12 |
15 |
16 |
物件回圈
17 |
20 |
21 |
純數值回圈
22 |
25 |
26 |
v-for 與 key
27 |
菜單
28 |
34 |
說明：有相同父元素的子元素必須有獨特的 key。重複的 key 會造成渲染錯誤。
35 |
36 |
37 |
38 |
進階技巧：在 template 標籤使用 v-for
39 |
40 |
41 |
42 | | 1 |
43 |
44 | 飯糰
45 | |
46 |
47 |
48 | |
49 | 30元
50 | |
51 |
52 | 不可素食
53 | |
54 |
55 |
56 |
57 |
參考介紹
58 |
59 |
補充說明：v-for 與元件
60 |
63 |
10 |
修飾符
11 | 延遲 Lazy
12 | {{ lazyMsg }}
13 |
14 | 純數值 Number
15 | {{ numberMsg }}{{ typeof numberMsg }}
16 |
17 | 修剪 Trim
18 | 這是一段{{ trimMsg }}緊黏的文字
19 |
20 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/source/template/v-on-dom-event.ejs:
--------------------------------------------------------------------------------
1 | ---
2 | title: 補充：v-on DOM 事件
3 | layout: ./source/_layout.ejs
4 | current: v-on-dom-event
5 | menu: template
6 | engine: ejs
7 | ---
8 |
9 |
10 |
原生 DOM 事件
11 |
參考：DOM 事件
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
取得原生 input 數值
22 |
23 |
24 |
監聽按鍵事件
25 |
26 |
27 |
10 |
11 |
12 |
修飾符
13 |
按鍵修飾符*
14 |
15 | - keyAlias - 只當事件是從特定鍵觸發時才觸發。
16 | - 別名修飾 - .enter, .tab, .delete, .esc, .space, .up, .down, .left, .right
17 | - 修飾符來實現僅在按下相應按鍵時才觸發鼠標或鍵盤事件的監聽器 - .ctrl, .alt, .shift, .meta
18 |
19 |
20 |
別名修飾
21 |
22 |
23 |
相應按鍵時才觸發的監聽器
24 |
25 |
26 |
特定鍵
27 |
28 |
29 |
滑鼠修飾符
30 |
31 | - .left 只當點擊鼠標左鍵時觸發。
32 | - .right 只當點擊鼠標右鍵時觸發。
33 | - .middle 只當點擊鼠標中鍵時觸發。
34 |
35 |
滑鼠修飾符
36 |
37 |
38 |
39 |
40 |
41 |
42 |
事件修飾符
43 |
44 | - .stop - 調用 event.stopPropagation()。
45 | - .prevent - 調用 event.preventDefault()。
46 | - .capture - 添加事件偵聽器時使用 capture 模式。
47 | - .self - 只當事件是從偵聽器綁定的元素本身觸發時才觸發回調。
48 | - .once - 只觸發一次回調。
49 |
50 |
加入 Prevent
51 |
52 |
53 |
預設情境
54 |
冒泡事件參考文章
55 |
56 |
57 |
58 |
59 |
60 |
61 |
stopPropagation (防止向外尋找)
62 |
63 |
64 |
65 |
66 |
67 |
68 |
事件偵聽器時使用 capture 模式 (事件改為由外而內)
69 |
70 |
71 |
72 |
73 |
74 |
75 |
事件偵聽器時使用 self 模式 (只會觸發自己範圍內的)
76 |
77 |
78 |
79 |
80 |
81 |
82 |
事件偵聽器只觸發一次 once
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
9 |
觸發事件 與 縮寫*
10 |
11 |
12 |
13 |
14 |
帶入參數*
15 |
16 |
17 |
18 |
19 |
20 |
原生 DOM 事件*
21 |
22 |
input change 事件
23 |
24 |
25 |
form submit 事件
26 |
30 |
31 |
動態事件 []
32 |
33 |
34 |
35 |
36 |
動態物件方法 {}
37 |
38 |
40 |
41 |
作為運算*
42 | {{ double }}
43 |
44 |
10 |
切換 Class
11 |
物件寫法
12 |
13 |
14 |
15 |
16 |
17 |
18 |
物件寫法 2
19 |
20 |
21 |
22 | 陣列寫法
23 |
24 |
27 |
28 |
29 | 行內樣式
30 | 綁定行內樣式
31 |
32 |
33 |
34 |
9 |
字串 v-text 與 {{}} (Mustache)
10 |
在 吃早餐
11 |
在吃早餐
12 |
13 |
14 |
15 |
原始字串 v-html
16 | {{ rawHtml }}
17 |
注意事項
18 |
19 |
20 |
單次綁定 v-once
21 |
{{ name }}在{{ position }}吃早餐
22 |
23 |
24 |
25 |
進階技巧：表達式
26 |
{{ }}
27 |
{{ }}
28 |
{{ }}
29 |
{{ }}
30 |
31 |
32 |
進階技巧：顯示資料狀態
33 |
34 |
35 |
36 |
顯示 {{ }}
37 |
這段文字不會被轉譯：{{ name }}在{{ position }}吃早餐
38 |