Vee template構文
Vueの基本構造
＜template＞
HTML構文に書き込まれたスペースディレクトリを使用してデータをバインドできます。v-text、v-bind、v-for、v-ifなど
＜script＞
JS構文を書いたスペースファイルを読み込み、使用する場合や、親コンポーネントに子コンポーネントを含める場合に使用するimportとdata()とメソッド、戻る必要がある場合に計算などを使用できます。
＜style＞
CSS、SCSS構文のスペースSCSSを使用する場合、lang="scss"となり、別のvueファイルとcssは重複せず、scopedは現在の構成部品の別名にのみ適用されます。すなわち、scssを使用して現在のコンポーネントにのみcssを適用する場合は、<style lang=「scss」scoped>を記述するだけでよい。
https://vuejs.org/guide/essentials/template-syntax.html
Vue一般的なテンプレート構文のクリーンアップ
補間
最も基本的な形式の「Mustabe」(マスタッチかっこ)を使用してテキストを補間する方法で、
データを純粋なテキストとして解釈する
<template>
<h1>Hello {{ animal }} </h1>
</template>
<script>
export default {
data() {
return {
animal: "Monkey"
}
}
}
디렉티브 ( Directives )
ディレクトリは、v接頭辞付きの特殊なプロパティです.ディレクトリ属性値は、単一のJavaScript式となります.(v-forを除く)コントローラの役割は,式の値が変化したときに側効果をDOMに反作用的に適用することである.
v-text
補間法と同様に、
<template>
<h1 v-text="animal" />
</template>
<script>
export default {
data() {
return {
animal: "Hello Monkey"
}
}
}※ {{ }} 와 v-text의 차이점
<h1 v-text="animal"></h1> O
<h1 v-text="animal">123</h1> X<h1>Hello {{ animal }}</h1>
<h1 v-text="animal" />v-model
主にform elmentに用いられる.フォームに入力した値を、ビューインスタンスのデータとすぐに同期します.入力した値を保存してサーバに送信したり、watchなどの高度な属性を使用して他の論理を実行したりすることができます.Input>、
Reference
この問題について(Vee template構文), 我々は、より多くの情報をここで見つけました https://velog.io/@chyori/Vue-template-문법テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol