Vue.js
をテンプレートにして作成
LECTURE
担当科目一覧
コンピュータ概論/2024
データサイエンス/2024
3DCG演習/2024
情報デザイン研究/2024
卒業研究/2024
KEYWORDS
WEB DESIGN
SOCIAL DESIGN
SQUARES
LINKS
九州産業大学
芸術学部
芸術研究科
九産大美術館
九産大図書館
年間スケジュール
動画ニュース他
交通情報
気象・環境情報
危機に備えて
K'sLife
Office365Mail
Tools
SEARCH
開始行:
*Vue.js
https://jp.vuejs.org/
~
Vue.jsとは、Webアプリケーションにおけるフロントエンド（イ...
Vue.js は [[MVVM>Google:MVVM]]（Model-View-ViewModel）型...
一言でいうと
データを作り、表示要素を用意し、それらの関係づけを設定する
というのが、Vue.js による開発作業の基本形です。
~
***Vue.js の 主な機能
-{{ data }}：データを表示
-v-bind：要素の属性をデータで指定
-v-model：入力フォームとデータをつなぐ
-v-on：イベントに対応
-v-if：条件分岐
-v-for：繰り返し処理
-computed：計算を実行
-watch：データの変化を監視
-transition：表示・非表示の際にアニメーション
-component：部品にまとめる
~
***どうやって使うの？
HTML の <head> 以下の記述（CDNで接続）をするだけで使えま...
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
~
***事例１：文字列の表示
<!DOCTYPE html>
<html>
<head>
<title>Sample Vue app</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<h1>Vue.js First Sample</h1>
<div id="app">
{{ message }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</body>
</html>
-基本的なHTML文書の構造に、Vue の 入門コードを記述してい...
-ページ読み込み後に Vue のスクリプトを動かすため、<script...
-el（element）: ページ内に ID定義された要素 #app を指しま...
-data: モデル内に定義されたデータを指します。
-要するに 要素 #app に JavaScript が動的に message を書き...
~
***事例２：マウスホバーで日時を表示
以下、変更部分のコードのみ記載します
-HTML
<div id="app">
<span v-bind:title="message">
ここに数秒マウスを乗せると、日時が表示されます。
</span>
</div>
-Script
var app = new Vue({
el: '#app',
data: {
message: '日時 ' + new Date().toLocaleString()
}
})
~
***詳細は、以下の公式サイトをご覧下さい。
-https://jp.vuejs.org/index.html
-https://jp.vuejs.org/v2/guide/index.html
~
~
終了行:
*Vue.js
https://jp.vuejs.org/
~
Vue.jsとは、Webアプリケーションにおけるフロントエンド（イ...
Vue.js は [[MVVM>Google:MVVM]]（Model-View-ViewModel）型...
一言でいうと
データを作り、表示要素を用意し、それらの関係づけを設定する
というのが、Vue.js による開発作業の基本形です。
~
***Vue.js の 主な機能
-{{ data }}：データを表示
-v-bind：要素の属性をデータで指定
-v-model：入力フォームとデータをつなぐ
-v-on：イベントに対応
-v-if：条件分岐
-v-for：繰り返し処理
-computed：計算を実行
-watch：データの変化を監視
-transition：表示・非表示の際にアニメーション
-component：部品にまとめる
~
***どうやって使うの？
HTML の <head> 以下の記述（CDNで接続）をするだけで使えま...
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
~
***事例１：文字列の表示
<!DOCTYPE html>
<html>
<head>
<title>Sample Vue app</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<h1>Vue.js First Sample</h1>
<div id="app">
{{ message }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</body>
</html>
-基本的なHTML文書の構造に、Vue の 入門コードを記述してい...
-ページ読み込み後に Vue のスクリプトを動かすため、<script...
-el（element）: ページ内に ID定義された要素 #app を指しま...
-data: モデル内に定義されたデータを指します。
-要するに 要素 #app に JavaScript が動的に message を書き...
~
***事例２：マウスホバーで日時を表示
以下、変更部分のコードのみ記載します
-HTML
<div id="app">
<span v-bind:title="message">
ここに数秒マウスを乗せると、日時が表示されます。
</span>
</div>
-Script
var app = new Vue({
el: '#app',
data: {
message: '日時 ' + new Date().toLocaleString()
}
})
~
***詳細は、以下の公式サイトをご覧下さい。
-https://jp.vuejs.org/index.html
-https://jp.vuejs.org/v2/guide/index.html
~
~
ページ名:
