ubuntu 0
3DCG 0
全21件 (21件中 1-21件目)
1
Vue3で出てくるrefの使い方(reactiveも)リアクティブについても説明している。Vue3でリアクティブな変数を定義する時に使う
2024.06.08
コメント(0)
{{ }}はデータバインディングに利用<script setup>import { ref } from "vue";const num = ref(123456);</script><template> <h1>{{ num }}</h1></template>
2024.06.08
コメント(0)
Vue versionの違いのようです。参考サイト(違い)参考サイト(script setup)まるで別な言語のようです。
2024.06.06
コメント(0)
参考サイト
2024.06.05
コメント(0)
view1のmergin-leftがview0とview2に影響している。</script><template> <div class="view0"> <p >あいうえお</p> </div> <div class="view1"> <p >かきくけこ</p> </div><div class="view2"> <p >さしすせそ</p> </div></template><script></script><style>.view0 { margin-top : 0px ; margin-bottom : 0px ; margin-left : 0px ; margin-right : 0px ; padding : 0px ; border : 2px solid red ; background-color : white;}.view1 { margin-top : 0px ; margin-bottom : 0px ; margin-left : 400px ; margin-right : 0px ; padding : 0px ; border : 2px solid black ; background-color : lightblue ;}.view2 { margin-top : 0px ; margin-bottom : 0px ; margin-left : 0px ; margin-right : 0px ; padding : 0px ; border : 2px solid blue ; background-color : white;}</style>
2024.06.04
コメント(0)
親の背景色とコンポーネント側の背景色を分けて記述します。App.vue<script setup>import hoge from './components/hoge.vue'</script><template><body> <div class="body0"> <hoge /> </div></body></template><style>body { background-color: lightgreen; }</style>hoge.vue<script setup>import jpgfile0 from "@/assets/hoge.jpg"defineProps({ msg: String,})</script><script>import axios from "axios";import { reactive } from "vue";const data = reactive({ responses: "", keyWord: "",});const getData = async () => { var url = "https://www.jma.go.jp/bosai/forecast/data/overview_forecast/" +area.value+".json"; let result = await axios.get(url, {params: {prompt: data.keyWord}}); data.responses = result.data;};</script><template> <label for="area">地域を選択してください</label><select id="area"> <option value="020000">青森県</option> <option value="050000">秋田県</option> </select><h1>{{ msg }}</h1> <button @click="getData">天気取得</button> <hr> <div class="resp"> {{ data.responses.text }} </div></template><style>.resp { background-color: lightblue;}</style>
2024.05.31
コメント(0)
<script setup>defineProps({ msg: String,})</script><script>import axios from "axios";import { reactive } from "vue";const data = reactive({ responses: "", keyWord: "",});const getData = async () => { var url = "https://www.jma.go.jp/bosai/forecast/data/overview_forecast/" +area.value+".json"; let result = await axios.get(url, {params: {prompt: data.keyWord}}); data.responses = result.data;};</script><template> <label for="area">地域を選択してください</label><select id="area"> <option value="020000">青森県</option> <option value="050000">秋田県</option> <option value="030000">岩手県</option> <option value="040000">宮城県</option> <option value="060000">山形県</option> <option value="070000">福島県</option> <option value="080000">茨城県</option> <option value="090000">栃木県</option> <option value="100000">群馬県</option> <option value="110000">埼玉県</option> <option value="130000">東京都</option> <option value="120000">千葉県</option> <option value="140000">神奈川県</option> <option value="200000">長野県</option> <option value="190000">山梨県</option> <option value="220000">静岡県</option> <option value="230000">愛知県</option> <option value="210000">岐阜県</option> <option value="240000">三重県</option> <option value="150000">新潟県</option> <option value="160000">富山県</option> <option value="170000">石川県</option> <option value="180000">福井県</option> <option value="250000">滋賀県</option> <option value="260000">京都府</option> <option value="270000">大阪府</option> <option value="280000">兵庫県</option> <option value="290000">奈良県</option> <option value="300000">和歌山県</option> <option value="330000">岡山県</option> <option value="340000">広島県</option> <option value="320000">島根県</option> <option value="310000">鳥取県</option> <option value="360000">徳島県</option> <option value="370000">香川県</option> <option value="380000">愛媛県</option> <option value="390000">高知県</option> <option value="350000">山口県</option> <option value="400000">福岡県</option> <option value="440000">大分県</option> <option value="420000">長崎県</option> <option value="410000">佐賀県</option> <option value="430000">熊本県</option> <option value="450000">宮崎県</option> <option value="460100">鹿児島県</option> </select> <h1>{{ msg }}</h1> <button @click="getData">天気取得</button> <hr> <div > {{ data.responses.text }} </div></template>@click=はv-on:click=の省略形実験サイト
2024.05.28
コメント(0)
他のファイルからアクセスが可能簡単な例App.vue<script setup>import hoge2 from './components/hoge2.vue'</script><template> <hoge2 /></template>hoge2.vue<template> <div> <p>値:{{Echo}}</p> 値を入力してください:<input type="text" v-model="value"> </div></template><script> export default { data(){ return{ value: 1234 } }, computed:{ Echo(){ return this.value } } }</script>export defaultについてJavaScriptの「export default」とは?Reactを例にexportとの違いを解説Vue 基礎勉強 v-modelVue.js methods、computed、watchの概要と使い分けについて整理してみた!ある程度、型に慣れるしかないです。
2024.05.23
コメント(0)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script><body> <div id="student"> <ul> <element0></element0> <element1></element1> </ul> </div> <script> Vue.component('element0', { template: '<li>山田</li>' }) Vue.component('element1', { template: '<li>鈴木</li>' }) new Vue({ el: '#student', })</script></body></html>
2024.05.16
コメント(0)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ボタンでカウント</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script></head><body> <div id="app"> <button v-on:click="up">count++></button> <p>Count: {{ count }}</p> </div> <script> const app=new Vue({ el:'#app', data:{ count:0, }, methods:{ up:function(){ this.count++ } } }) </script></body></html>
2024.05.15
コメント(0)
参考サイトVue3+axiosでlocalサーバにアクセス app.vue<script setup>import hoge from './components/hoge.vue'</script><template> <main> <hoge /> </main></template><style scoped></style>hoge.vue<script setup>import axios from "axios";import { reactive } from "vue";const url = "https://www.jma.go.jp/bosai/forecast/data/overview_forecast/130000.json";defineProps({ msg: String,})const data = reactive({ responses: "", keyWord: "",});const getData = async () => { let result = await axios.get(url, {params: {prompt: data.keyWord}}); data.responses = result.data;};</script><template> <h1>{{ msg }}</h1> <button @click="getData">東京の天気取得</button> <hr> <div > {{ data.responses.text }} </div></template>結果実験サイト
2024.05.14
コメント(0)
SFC(単一ファイルコンポーネント)とは?
2024.05.13
コメント(0)
vue.js script setupの利点を説明しています。vue.js script setup
2024.05.13
コメント(0)
Vue3の環境設定は不要<!DOCTYPE html><html lang="ja"> <head> <meta charset="UTF-8" /> <title>CDNでVue 3</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"> </script> </head> <body> <div id="app"> {{ message }} </div> <script> const app = new Vue({ el: "#app", data: { message: "CDNでVue 3" } }); </script> </body></html>
2024.05.12
コメント(0)
これは単一ファイルコンポーネントでVue独自で、そのままブラウザに反映させても動作しない。コンポーネントのテンプレート内で ref にアクセスする<script> import { ref } from 'vue' export default { setup() { let inputData = ref('') return { inputData } } }</script><template> <input v-model="inputData" /> <p>入力された値 : {{ inputData }}</p></template>
2024.05.09
コメント(0)
<!DOCTYPE html><html lang="ja"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vueインスタンス</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script></head><body> <div id='app'> <p>{{ message }}</p> </div></body><script>new Vue({ el: '#app', data: { message: 'Vueインスタンス' }})</script></html>
2024.05.03
コメント(0)
axiosを使ってVue.jsとPHPで非同期通信を連携する方法ちょこっと変造index.htmlalert('成功: ' + response.data.message);register.phpecho json_encode(['success' => true, 'message' => $data->email.' : '.$data->password]);Vue(メールアドレス,パスワード)---->PHP---->VueXFREEで実行
2024.05.02
コメント(0)
<script setup>import jpgfile0 from "@/assets/0.jpg"import jpgfile1 from "@/assets/1.jpg"defineProps({ msg: { type: String, required: true }})</script><template> <div class="viewjpg"> <h1 >{{ msg }}です</h1> </div> <div class="image"> <img :src="jpgfile0" width="300"> <img :src="jpgfile1" width="300"> </div></template><style scoped></style>
2024.04.26
コメント(0)
ソース
2024.04.25
コメント(0)
異なるApp.vueをひとつのプロジェクトでデバッグしたいときがあります。そんなときは以下のようにします。index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <a href="src/test.html" target=”_blank”>App.vue</a><br> <a href="src/test2.html" target=”_blank”>App2.vue</a> </body></html>src/test.html<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <link rel="icon" href="/favicon.ico"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vite App</title> </head> <body> <div id="app"></div> <script type="module" src="/src/main.js"></script> </body></html>src/test2.html<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <link rel="icon" href="/favicon.ico"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vite App</title> </head> <body> <div id="app"></div> <script type="module" src="/src/main2.js"></script> </body></html>src/main.jsimport './assets/main.css'import { createApp } from 'vue'import App from './App.vue'createApp(App).mount('#app')src/main2.jsimport './assets/main.css'import { createApp } from 'vue'import App from './App2.vue'createApp(App).mount('#app')src/App.vuesrc/App2.vueを準備する。実行すると選択すればそれぞれを処理が実行される。
2024.04.20
コメント(0)
以下のサイトがよさそう。Vue.jsの開発環境vue.js + typescript = vue.ts ことはじめVue.js「コンポーネント」入門Vue.js]Vue.jsでDOMやコンポーネントを操作するのに便利なref機能Vue3でTypeScriptを使う方法【CompositionAPI】【サンプル有】Vue.js+TypeScript - 開発環境構築からWebページ公開までの手順を紹介Vue.jsにおけるコンパイルは機械語へ翻訳ではなく、公開可能なhtmlにするだけみたいです。上記を自分でやってみました。npm init vue@latestcd C:\soft\vue-projectnpm list vuevue-project@0.0.0 C:\soft\vue-project+-- @vitejs/plugin-vue@5.0.4| `-- vue@3.4.27 deduped`-- vue@3.4.27 `-- @vue/server-renderer@3.4.27 `-- vue@3.4.27 dedupednpm run devnpm run build実験サイトVue.js入門 基礎から実践アプリケーション開発まで [ 川口和也 ]
2024.04.11
コメント(0)
全21件 (21件中 1-21件目)
1