GOAL

Vue.jsまとめ

Vue.js

; フロントフレーム.

ライフサイクル

SCRIPT

<!--최신버전-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--특정버전 : vue @ 버전-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

vue/dist/vue.js
; vueディレクトリにフォルダ内のvueを配置します.js

ガイド人

v-text
; テキストで表示します.

v-html
; htmlタグの使用を許可します.

v-bind
; よく使われる指導.省略可能

:src=画像

:href=リンク

:aling=ソート

:style=インラインスタイルの指定

"{color:~}"指定色

指定

"{fontSize:~}"font-size

"backgroudColor:~"background-color

v-model
; 入力値をデータに関連付ける

は例を表す)機能

で、同意を確認した後に送信ボタンをアクティブにすることができます.

	<div id="app">
			<label><input type="checkbox" v-model="myAgree" >
			동의합니다.</label>
			<button v-bind:disabled="myAgree==false">송신</button>
		</div>

		<script>
			new Vue({
				el: "#app",
				data: {
					myAgree: false
				}
			})
		</script>

html、cssはレシピマーク法です.(-ハイフン.すべて小文字です.)

jsはカメルマーキング法である.(複数の単語を接続する場合、2番目以降の単語は大文字になります.)

jsクラス名などはパスカル表記法である.(単語の開始は大文字です.)

行内のスタイルは依然としてcssを用いるためkebab/v-bindはjsを用いるのでcamel.

ing,,,

ref

百犬不二打Vue.はじめに図書

vue.js公式ドキュメント