Skip to content

Commit 312f586

Browse files
waylauwaylau
committed
add demos:
* [模板插值](samples/template-syntax-interpolation) * [指令](samples/template-syntax-directive) * [指令缩写](samples/template-syntax-directive-shorthand)
1 parent f8546f7 commit 312f586

34 files changed

+88277
-0
lines changed

‎README.md

+7
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,10 @@
1717
* [Vue 3使用TypeScript](https://developer.huawei.com/consumer/cn/forum/topic/0202494862427410279?fid=23)
1818
* [Vue 3组件与Web组件的异同点](https://developer.huawei.com/consumer/cn/forum/topic/0202525033799260635?fid=23)
1919
* [Vue 3动态组件详解](https://developer.huawei.com/consumer/cn/forum/topic/0204533696955760004?fid=23)
20+
* [Vue 3模板的基本概念](https://developer.huawei.com/consumer/cn/forum/topic/0204534591566950006?fid=23)
21+
* [Vue 3模板的插值](https://developer.huawei.com/consumer/cn/forum/topic/0204534592593360007?fid=23)
22+
* [Vue 3模板的指令](https://developer.huawei.com/consumer/cn/forum/topic/0203534593037900023?fid=23)
23+
2024
* 未完待续...
2125

2226
## Samples 示例
@@ -32,6 +36,9 @@
3236
* [通过插槽分发内容](samples/slot-to-serve-as-distribution-outlets-for-content)
3337
* [动态组件](samples/dynamic-component)
3438
* [keep-alive使用示例](samples/dynamic-component-with-keep-alive)
39+
* [模板插值](samples/template-syntax-interpolation)
40+
* [指令](samples/template-syntax-directive)
41+
* [指令缩写](samples/template-syntax-directive-shorthand)
3542
* 未完待续...
3643

3744

‎samples/template-syntax-directive-shorthand/.gitignore

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
.DS_Store
2+
node_modules
3+
/dist
4+
5+
6+
# local env files
7+
.env.local
8+
.env.*.local
9+
10+
# Log files
11+
npm-debug.log*
12+
yarn-debug.log*
13+
yarn-error.log*
14+
pnpm-debug.log*
15+
16+
# Editor directories and files
17+
.idea
18+
.vscode
19+
*.suo
20+
*.ntvs*
21+
*.njsproj
22+
*.sln
23+
*.sw?

‎samples/template-syntax-directive-shorthand/README.md

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# template-syntax-directive-shorthand
2+
3+
## Project setup
4+
```
5+
npm install
6+
```
7+
8+
### Compiles and hot-reloads for development
9+
```
10+
npm run serve
11+
```
12+
13+
### Compiles and minifies for production
14+
```
15+
npm run build
16+
```
17+
18+
### Lints and fixes files
19+
```
20+
npm run lint
21+
```
22+
23+
### Customize configuration
24+
See [Configuration Reference](https://cli.vuejs.org/config/).

‎samples/template-syntax-directive-shorthand/babel.config.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
module.exports = {
2+
presets: [
3+
'@vue/cli-plugin-babel/preset'
4+
]
5+
}

‎samples/template-syntax-directive-shorthand/package-lock.json

+29,219
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎samples/template-syntax-directive-shorthand/package.json

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
{
2+
"name": "template-syntax-directive-shorthand",
3+
"version": "0.1.0",
4+
"private": true,
5+
"scripts": {
6+
"serve": "vue-cli-service serve",
7+
"build": "vue-cli-service build",
8+
"lint": "vue-cli-service lint"
9+
},
10+
"dependencies": {
11+
"core-js": "^3.6.5",
12+
"vue": "^3.0.0",
13+
"vue-class-component": "^8.0.0-0"
14+
},
15+
"devDependencies": {
16+
"@typescript-eslint/eslint-plugin": "^4.18.0",
17+
"@typescript-eslint/parser": "^4.18.0",
18+
"@vue/cli-plugin-babel": "~4.5.0",
19+
"@vue/cli-plugin-eslint": "~4.5.0",
20+
"@vue/cli-plugin-typescript": "~4.5.0",
21+
"@vue/cli-service": "~4.5.0",
22+
"@vue/compiler-sfc": "^3.0.0",
23+
"@vue/eslint-config-typescript": "^7.0.0",
24+
"babel-eslint": "^10.1.0",
25+
"eslint": "^6.7.2",
26+
"eslint-plugin-vue": "^7.0.0",
27+
"typescript": "~4.1.5"
28+
},
29+
"eslintConfig": {
30+
"root": true,
31+
"env": {
32+
"node": true
33+
},
34+
"extends": [
35+
"plugin:vue/vue3-essential",
36+
"eslint:recommended",
37+
"@vue/typescript"
38+
],
39+
"parserOptions": {
40+
"parser": "@typescript-eslint/parser"
41+
},
42+
"rules": {}
43+
},
44+
"browserslist": [
45+
"> 1%",
46+
"last 2 versions",
47+
"not dead"
48+
]
49+
}

‎samples/template-syntax-directive-shorthand/public/favicon.ico

4.19 KB
Binary file not shown.

‎samples/template-syntax-directive-shorthand/public/index.html

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html lang="">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width,initial-scale=1.0">
7+
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
8+
<title><%= htmlWebpackPlugin.options.title %></title>
9+
</head>
10+
<body>
11+
<noscript>
12+
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13+
</noscript>
14+
<div id="app"></div>
15+
<!-- built files will be auto injected -->
16+
</body>
17+
</html>

‎samples/template-syntax-directive-shorthand/src/App.vue

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<template>
2+
<div>
3+
<!-- v-bind指令 -->
4+
<p>
5+
<a v-bind:href="url">Welcome to waylau.com</a>
6+
</p>
7+
8+
<!-- v-bind指令缩写 -->
9+
<p>
10+
<a :href="url">Welcome to waylau.com</a>
11+
</p>
12+
13+
<!-- v-bind指令缩写，动态参数 -->
14+
<p>
15+
<a :[key]="url">Welcome to waylau.com</a>
16+
</p>
17+
18+
<!-- v-on指令 -->
19+
<p>
20+
<a v-on:click="doLog">doLog</a>
21+
</p>
22+
23+
<!-- v-on指令缩写 -->
24+
<p>
25+
<a @click="doLog">doLog</a>
26+
</p>
27+
28+
<!-- v-on指令缩写，动态参数 -->
29+
<p>
30+
<a @[eventName]="doLog">doLog</a>
31+
</p>
32+
</div>
33+
</template>
34+
35+
<script lang="ts">
36+
import { Vue } from "vue-class-component";
37+
38+
export default class App extends Vue {
39+
private url: string = "https://waylau.com/";
40+
private eventName: string = "click";
41+
private key: string = "href";
42+
43+
doLog() {
44+
console.log("do logging...");
45+
}
46+
}
47+
</script>

‎samples/template-syntax-directive-shorthand/src/main.ts

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import { createApp } from 'vue'
2+
import App from './App.vue'
3+
4+
createApp(App).mount('#app')

‎samples/template-syntax-directive-shorthand/src/shims-vue.d.ts

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
/* eslint-disable */
2+
declare module '*.vue' {
3+
import type { DefineComponent } from 'vue'
4+
const component: DefineComponent<{}, {}, any>
5+
export default component
6+
}

‎samples/template-syntax-directive-shorthand/tsconfig.json

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
{
2+
"compilerOptions": {
3+
"target": "esnext",
4+
"module": "esnext",
5+
"strict": true,
6+
"jsx": "preserve",
7+
"importHelpers": true,
8+
"moduleResolution": "node",
9+
"experimentalDecorators": true,
10+
"allowJs": true,
11+
"skipLibCheck": true,
12+
"esModuleInterop": true,
13+
"allowSyntheticDefaultImports": true,
14+
"sourceMap": true,
15+
"baseUrl": ".",
16+
"types": [
17+
"webpack-env"
18+
],
19+
"paths": {
20+
"@/*": [
21+
"src/*"
22+
]
23+
},
24+
"lib": [
25+
"esnext",
26+
"dom",
27+
"dom.iterable",
28+
"scripthost"
29+
]
30+
},
31+
"include": [
32+
"src/**/*.ts",
33+
"src/**/*.tsx",
34+
"src/**/*.vue",
35+
"tests/**/*.ts",
36+
"tests/**/*.tsx"
37+
],
38+
"exclude": [
39+
"node_modules"
40+
]
41+
}

‎samples/template-syntax-directive/.gitignore

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
.DS_Store
2+
node_modules
3+
/dist
4+
5+
6+
# local env files
7+
.env.local
8+
.env.*.local
9+
10+
# Log files
11+
npm-debug.log*
12+
yarn-debug.log*
13+
yarn-error.log*
14+
pnpm-debug.log*
15+
16+
# Editor directories and files
17+
.idea
18+
.vscode
19+
*.suo
20+
*.ntvs*
21+
*.njsproj
22+
*.sln
23+
*.sw?

‎samples/template-syntax-directive/README.md

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# template-syntax-directive
2+
3+
## Project setup
4+
```
5+
npm install
6+
```
7+
8+
### Compiles and hot-reloads for development
9+
```
10+
npm run serve
11+
```
12+
13+
### Compiles and minifies for production
14+
```
15+
npm run build
16+
```
17+
18+
### Lints and fixes files
19+
```
20+
npm run lint
21+
```
22+
23+
### Customize configuration
24+
See [Configuration Reference](https://cli.vuejs.org/config/).

‎samples/template-syntax-directive/babel.config.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
module.exports = {
2+
presets: [
3+
'@vue/cli-plugin-babel/preset'
4+
]
5+
}

0 commit comments

Comments
 (0)