Vue補水器-Day 1

10171 ワード
vue TIL テキストリンク
今日、初めてVueを勉強しました.みんなで砕け!(コード付きりんご)
面倒なら太字でも読もう
1.なぜVueを使うのか
  • web-app(ページがリフレッシュされずスムーズに切り替わるサイト)
  • 簡単!React Vue Angularの中で最も簡単な
  • のような機能を実現したとき、ずっときれいになったそうです.
  • Right-wayがあります.初心者は勉強しやすく、協力するときも不要なコミュニケーション費用を減らすことができます.
    • 2.Vueのインストール方法
  • Node.jsの最新バージョンとVS code
    • が必要です
  • を処理するフォルダを開き、端末に「npm install-g@vue/cli」(作成用)
    • と入力する.
  • 「vue createプロジェクト名」を入力し、フォルダ
    • を再開します.
  • VUEプレビュー、端末に「npm run serve」
    • と入力.
  • VSコードエディタの追加機能:Vert、VUE 3クリップ、HTML CSSサポート
    • のインストールを推奨
    3.バインドデータ
    変数をHTMLに直接挿入できます.データをバインドします.
    その前に、変数をobject形式で1つの場所(state)に集約します.以下に示します.
    <script>
export default {
  name : 'App',
  data(){
    return {
      name : "홍길동",
      age : 22,
      mt-4 : "margin-top:4px"
    }
  }
}
</script>
    そしてHTMLの途中でインポートすると、
    <h4> 이름은 {{name}}이며 나이는 {{age}}이다 </h4>
    これでいいです.おおおお.気持ちいい!
    長所
  • よく言われる変数の利点.修正が便利!
  • VUEは、リアルタイムレンダリング(更新)機能を提供する
    また、HTMLプロパティにデータをバインドすることもできます(タグにバインドすることもできます).
    classやstyleなどのプロパティの前に:.
    <h4 :style="mt-4"> 안녕하세요? </h4>
    4. v-for
    ラベルを繰り返したいですか?v-forを使います.以下のように書けばよい.
    <a v-for="(반복내용물, 인덱스) in 반복대상" :key="인덱스"> {{반복내용물}}</a>

  • 重複コンテンツまたはインデックスは、タグ内で変数として使用できます.

  • 繰り返し回数が多すぎる場合に使用します.
    変動の回数を繰り返す場合に使用します.
    • 5.@click=",関数の使い方
    <button @click="클릭한횟수++"> 버튼을 누르세요! </button>
<p> 클릭한 횟수 : {클릭한횟수} </p>
    だいたい見ればわかる!
  • @mouseover,@input,@changeなどいろいろありますが、検索して使ってみましょう!
    • 関数の使用については、さっきの変数のようにbundle(ユリグマ)と宣言することができます.以下のように関数を宣言すれば,上のコードの「クリック回数++」を「増加」に変更すればよいと推測できる.
    
<script>
export default {
  name : 'App',
  data(){
    return {
      클릭한횟수 : 0,
    },
    methods : {
      increase(){
        this.클릭한횟수 += 1
      }
    }
}
</script>
    ちょっとうるさい.一度にリストを並べてください.

  • 動的UIの作成:ステータスを変数として保存し、ステータスに応じて外観を変更

  • export default/import
  • 変数または資料をロードできます.
    • エクスポートする内容が多い場合は{}を使用し、インポート時も同様です.

  • v-if, v-else, v-else-if

  • 構成部品
  • .vueファイルとして保存し、ロード後のコードは簡潔です.
  • コース:import>コンポーネントの登録>
    • の使用