2024年05月の記事
全16件 (16件中 1-16件目)
1
-
Vue CLI 背景色
親の背景色とコンポーネント側の背景色を分けて記述します。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)
-
Vue CLI 各地の天気
<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)
-
javascript export importの記述
実際のサーバー環境でないと動作しない。index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body><script type="module"> import {morning, evening} from './greeting.js'; morning('太郎'); evening('花子'); </script></body></html>greeting.jsfunction morning(name) { alert(`おはよう, ${name}!`); } function evening(name) { alert(`こんばんは, ${name}!`); } export {morning, evening};
2024.05.25
コメント(0)
-
Vue export default
他のファイルからアクセスが可能簡単な例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)
-
黒豊と白夕
黒豊と白夕～天下を守る恋人たち～ DVD-SET3＜映像特典DVD付＞ [ ヤン・ヤン[楊洋] ]
2024.05.17
コメント(0)
-
Vue component
<!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)
-
ミッシング
ミッシング〜彼らがいた〜 DVD-BOX1 【DVD】
2024.05.15
コメント(0)
-
Vue.js v-on methods
javascriptの場合はgetelementbyid()なんかを使うがVueなら簡単。5分でわかるVue.js基礎の基礎<!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)
-
Vue axiosで天気情報の取得
参考サイト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)
-
vue 単一ファイルコンポーネント
SFC(単一ファイルコンポーネント)とは？
2024.05.13
コメント(0)
-
100%になった時の対処法
以下で助かりました。100%になった時の対処法Windows Searchの終了が一番効果がありました。
2024.05.13
コメント(0)
-
vue.js script setup
vue.js script setupの利点を説明しています。vue.js script setup
2024.05.13
コメント(0)
-
CDNでVue3
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.js のref
これは単一ファイルコンポーネントで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)
-
Vueインスタンス message
<!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)
-
Vue+PHP
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)
全16件 (16件中 1-16件目)
1
-
-
- 私のPC生活
- デバイスの有効化・無効化をオンライ…
- (2024-11-04 20:30:05)
-
-
-
- ブログ更新しました♪
- １１月２６日 記事更新致しました。
- (2024-11-26 16:56:57)
-
-
-
- いいもの見つけたよ
- 【宝福一】健康酢でアレンジレシピ
- (2024-11-27 00:00:27)
-
