LukeParke/unicorn-utterances
1
0
Fork 0
mirror of https://github.com/LukeHagar/unicorn-utterances.git synced 2025-12-06 04:21:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs: add vue ref code samples

Browse Source
This commit is contained in:
Corbin Crutchley
2024-01-08 00:27:24 -08:00
parent c50da0981e
commit 04a91a0d24
14 changed files with 2348 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
content/blog/ffg-fundamentals-element-reference/ffg-fundamentals-vue-function-ref-62/.gitignore vendored Normal file
View File

@@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

9
content/blog/ffg-fundamentals-element-reference/ffg-fundamentals-vue-function-ref-62/index.html Normal file
View File

@@ -0,0 +1,9 @@
<html>
<head>
<title>Vue Function Ref - Example #62b - FFG Fundamentals</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>

1099
content/blog/ffg-fundamentals-element-reference/ffg-fundamentals-vue-function-ref-62/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

18
content/blog/ffg-fundamentals-element-reference/ffg-fundamentals-vue-function-ref-62/package.json Normal file
View File

@@ -0,0 +1,18 @@
{
"name": "@ffg-fundamentals/vue-function-ref-62",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"vue": "^3.3.4"
},
"devDependencies": {
"@vitejs/plugin-vue": "^4.2.3",
"vite": "^4.4.9"
}
}

10
content/blog/ffg-fundamentals-element-reference/ffg-fundamentals-vue-function-ref-62/src/App.vue Normal file
View File

@@ -0,0 +1,10 @@
<!-- App.vue -->
<script setup>
function logEl(el) {
console.log(el);
}
</script>
<template>
<p :ref="logEl">Check your console</p>
</template>

5
content/blog/ffg-fundamentals-element-reference/ffg-fundamentals-vue-function-ref-62/src/main.js Normal file
View File

@@ -0,0 +1,5 @@
// main.js
import { createApp } from "vue";
import App from "./App.vue";
createApp(App).mount("#root");

6
content/blog/ffg-fundamentals-element-reference/ffg-fundamentals-vue-function-ref-62/vite.config.js Normal file
View File

@@ -0,0 +1,6 @@
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
export default defineConfig({
plugins: [vue()],
});

24
content/blog/ffg-fundamentals-element-reference/ffg-fundamentals-vue-ref-62/.gitignore vendored Normal file
View File

@@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

9
content/blog/ffg-fundamentals-element-reference/ffg-fundamentals-vue-ref-62/index.html Normal file
View File

@@ -0,0 +1,9 @@
<html>
<head>
<title>Vue Ref - Example #62a - FFG Fundamentals</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>

1099
content/blog/ffg-fundamentals-element-reference/ffg-fundamentals-vue-ref-62/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

18
content/blog/ffg-fundamentals-element-reference/ffg-fundamentals-vue-ref-62/package.json Normal file
View File

@@ -0,0 +1,18 @@
{
"name": "@ffg-fundamentals/vue-ref-62",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"vue": "^3.3.4"
},
"devDependencies": {
"@vitejs/plugin-vue": "^4.2.3",
"vite": "^4.4.9"
}
}

16
content/blog/ffg-fundamentals-element-reference/ffg-fundamentals-vue-ref-62/src/App.vue Normal file
View File

@@ -0,0 +1,16 @@
<!-- App.vue -->
<script setup>
import { ref, onMounted } from "vue";
// Assign the ref
const el = ref();
// Use the ref
onMounted(() => {
console.log(el.value);
});
</script>
<template>
<p ref="el">Check your console</p>
</template>

5
content/blog/ffg-fundamentals-element-reference/ffg-fundamentals-vue-ref-62/src/main.js Normal file
View File

@@ -0,0 +1,5 @@
// main.js
import { createApp } from "vue";
import App from "./App.vue";
createApp(App).mount("#root");

6
content/blog/ffg-fundamentals-element-reference/ffg-fundamentals-vue-ref-62/vite.config.js Normal file
View File

@@ -0,0 +1,6 @@
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
export default defineConfig({
plugins: [vue()],
});