Vue 初心者ガイド: 環境の構築と開始方法

初期ビュー

Vue とは何ですか?

ユーザーインターフェースを構築するためのプログレッシブな JavaScript フレームワーク

Vueは下から上へレイヤーごとに適用できます

シンプルなアプリケーション: 小さくて軽量なコアライブラリのみが必要です

複雑な使用方法：さまざまなVueプラグインを導入できる

ここに画像の説明を挿入

Vue の機能:

1. コードの再利用性を向上させ、コードの保守性を向上させるコンポーネント化モード

2. 宣言型コーディング：DOMを直接操作する必要がないため、開発効率が向上

3. 仮想DOM + Diffアルゴリズムを使用してDOMノードを再利用する

Vue開発環境の構築

1. vue.jsをダウンロードする

ここに画像の説明を挿入

2. プロジェクトを作成し、アイデアをインポートする

ここに画像の説明を挿入

3. 公式サイトからダウンロード: https://github.com/vuejs/devtools/tree/main

そしてVue.js devtoolsを使う

ここに画像の説明を挿入

注意：この後、開いたWebページがVueで書かれている場合、上部のVueロゴが緑色に変わります。

上記のVue環境がセットアップされています

Vueインスタンスの作成

1. Vueを動作させるには、Vueインスタンスを作成し、構成オブジェクトを渡す必要があります。

2. ルートコンテナ内のコードはHTML仕様に準拠していますが、いくつかの特別なVue構文が混在しています。

3. ルートコンテナ内のコードは[Vueテンプレート]と呼ばれます

4. Vueインスタンスとコンテナは1対1で対応している

5. 実際の開発ではVueインスタンスは1つしかなく、コンポーネントと一緒に使用されます。

6 . {xxx}} の xxx は js 式として記述する必要があり、xxx はデータ内のすべての属性を自動的に読み取ることができます。

7.データ内のデータが変更されると、ページ内でデータが使用される場所も自動的に変更されます。

js式とjsコードの違いに注意してください

1.式: 式は、値が必要な場所に配置できる値を生成します。

(1)a (2)a+b (3)デモ(1) (4)x===y?'a':'b'

2. jsコード（ステートメント）

(1)if(){} (2)for(){}

<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>初期ビュー</title>
    <!--Vue 開発版の紹介-->
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<本文>

<!--Vue の結果を表示するためのテンプレートを Vue に提供するコンテナを準備します-->
<div id="ルート">
    <!--{{js 式}} 補間構文-->
    <h1>こんにちは！{{name.toUpperCase()}},{{address}}</h1>
</div>
    <script type="text/javascript">
        Vue.config.productionTip=false // 起動時に Vue がプロダクションのヒントを生成しないようにします。

       //Vueインスタンスを作成する new Vue({
        //el は、現在の Vue インスタンスがどのコンテナーを提供するかを決定するために使用されます。値は通常、CSS セレクター文字列 el:'#root' です。  
            //data は、el で指定されたコンテナが使用するデータを格納するために使用され、値はオブジェクトとして一時的に書き込まれます。
            データ：{ 
                名前:「南風は私の意図を知っている」
                住所：「上海」
            }
        })
    </スクリプト>
</本文>
</html>

実行結果:

ここに画像の説明を挿入

Vue テンプレート構文

Vueテンプレート構文には2つの主なカテゴリがあります

1. 補間構文:

機能: タグ本体の内容を解析するために使用される

書き方： {xxx}}、xxxはjs式であり、データ内のすべての属性を直接読み取ることができます

2. コマンド構文:

機能: タグを解析するために使用されます (タグ属性、タグ本体のコンテンツ、バインディングイベントなどを含む)

たとえば、v-bind:href="xxx" または省略形: href="xxx"、xxx は js 式を記述する必要があり、データ内のすべての属性を直接読み取ることができます。

注: Vue には多くの命令があり、それらはすべて v-??? の形式です。ここでは v-bind を例として取り上げます。

<!--コンテナを準備する-->
<div id="ルート">
  <h1>補間構文</h1>
  <h3>こんにちは、{{name}}</h3>
  <hr/>
  <h1>コマンド構文</h1>
  <!-- URL を式としてバインド -->
  <a v-bind:href="school.url.toUpperCase()" x="hello">{{school.name} に移動</a>
 <a :href="url" x="hello">{{name2} に移動</a>
</div>
</本文>
<script type="text/javascript">
  Vue.config.productionTip=false // 起動時に Vue がプロダクションのヒントを生成しないようにします。
  新しいVue({
    el:'#root',
    データ：{
      名前:「南風は私の意図を知っている」
      学校：
        名前: 'csdn',
        url:'https://blog.csdn.net/weixin_50823456?spm=1000.2115.3001.5343',
      }
    }
  })
</スクリプト>

実行結果:

ここに画像の説明を挿入

Vue データバインディング

Vue にはデータバインディングの方法が 2 つあります。

1. 一方向バインディング（v-bind）：データはページにのみ流れます

2. 双方向バインディング（v-model）：データはデータからページへだけでなく、ページからデータへも流れることができる

述べる：

1. 双方向バインディングは、通常、フォーム要素（入力、選択など）に適用されます。

2. v-model:valueはv-modelと省略できます。v-modelのデフォルトのコレクションはvalue valueだからです。

<!--コンテナを準備する-->
<div id="ルート">
    <!--通常の書き込み-->
<!-- 一方向データバインディング: <input type="text" v-bind:value="name"><br>
  双方向データバインディング: <input type="text" v-model:value="name"><br>-->
    <!--略語-->
    一方向データバインディング: <input type="text" :value="name"><br>
    双方向データバインディング: <input type="text" v-model="name"><br>
    <!--次のコードは間違っています: v-model はフォーム要素 (入力要素) にのみ適用できます-->
    <h2 v-model:x="name">こんにちは</h2>
</div>
</本文>
<script type="text/javascript">
  Vue.config.productionTip=false
  新しいVue({
    el:'#root',
    データ：{
      題名:「南風は私の意図を知っている」
    }
  })
 </スクリプト>

実行結果:

ここに画像の説明を挿入

el-data を書く 2 つの方法

データとelを書き込む2つの方法

1. elの書き方は2通りあります

(1)新しいVueを作成するときにel属性を設定する

（２）まずVueインスタンスを作成し、次にvm.$mount('#root')を通じてelの値を指定します。

2. データを書き込む方法は2つあります

（１）オブジェクト指向

（２）機能的

選択方法: 現時点では、どのような書き方でも問題ありません。将来コンポーネントを学習するときには、データを関数的な方法で書き込む必要があります。そうしないと、エラーが報告されます。

3. 重要な原則

Vue によって管理される関数の場合、矢印関数を記述してはいけません。矢印関数を記述すると、これはもはや Vue インスタンスではなくなります。

<!--コンテナを準備する-->
<div id="ルート">
  <h1>こんにちは、{{name}}</h1>
</div>
</本文>
<script type="text/javascript">
  Vue.config.productionTip=false
  // 2つの書き方 el const v=new Vue({
    //el:'#root', //データを書き込む最初の方法:{
      名前:「シャン・シリコンバレー」
    }
  })
  コンソールログ(v)
  v.$mount('#root') // 2番目の書き方 // データの書き方の2つの方法 const v=new Vue({
    el:'#root',
    //データを書き込む最初の方法はオブジェクトスタイルです /*data:{
      名前:「シャン・シリコンバレー」
    }*/

    //データを書き込む2番目の方法: 関数型データ(){
      console.log('@@@',this) //これはVueインスタンスオブジェクトです return{
        題名:「南風は私の意図を知っている」
      }
    }
  })
</スクリプト>

MVVM モデル

1. M: モデル: データ内のデータ

2. V: 表示: テンプレートコード

3. VM: ビューモデル: Vueインスタンス

観察:

1. データ内のすべての属性が最終的にVMに表示される

2. vmのすべてのプロパティとVueプロトタイプのすべてのプロパティは、Vueテンプレートで直接使用できます。

<!--コンテナを準備する-->
<div id="ルート">
  <!--表示-->
  <h1>学校名:{{name}}</h1>
  <h1>学校の住所:{{address}}</h1>
</div>
</本文>
<script type="text/javascript">
  Vue.config.productionTip=false
  const vm = new Vue({ //ビューモデル
    el:'#root',
    データ：{
      /*モデル*/
      名前:「南風」
      住所:'長沙'
    }
  })
  コンソール.log(vm)
</スクリプト>

Vue データプロキシ

オブジェクトプロキシを介した別のオブジェクトのプロパティの操作（読み取り、書き込み）

1. Vue のデータプロキシ:

vmオブジェクトを使用して、データオブジェクト内の属性の操作（読み取りと書き込み）をプロキシします。

2. Vue におけるデータプロキシの利点

データ内のデータのより便利な操作

3. 基本原則

Object.defineProperty() を介してデータオブジェクト内のすべてのプロパティを vm に追加します。

VMに追加された各プロパティにゲッターとセッターを割り当てます

ゲッターとセッター内のデータ内の対応する属性を操作（読み取り、書き込み）する

<!--コンテナを準備する-->
<div id="ルート">
    <!--表示-->
    <h1>学校名:{{name}}</h1>
    <h1>学校の住所:{{address}}</h1>
</div>
</本文>
<script type="text/javascript">
    Vue.config.productionTip=false //起動時にVueがプロダクションのヒントを生成しないようにする const vm=new Vue({
        el:'#root',
        データ：{
            名前:「南風」
            住所:'長沙'
        }
    })
</スクリプト>

Vue でのイベント処理

イベントの基本的な使用方法:

1. v-on:xxx または @xxx を使用してイベントをバインドします。xxx はイベント名です。

2. イベントコールバックはメソッドオブジェクトで設定する必要があり、最終的にはVM上に置かれる。

3. メソッドで設定された関数は矢印関数を必要としません。そうでなければ、これはvmではありません。

4. メソッドに設定された関数はすべてVueによって管理される関数であり、これはvmまたはコンポーネントインスタンスオブジェクトを指します。

5. @click="demo"と@click="demo($event)"は同じ効果を持ちますが、後者はパラメータを渡すことができます

<!--コンテナを準備する-->
<div id="ルート">
    <h1>Shang Silicon Valley に勉強しに来てください</h1>
    <!--<button v-on:click="showInfo">詳細についてはクリックしてください</button>-->
    <button @click="showInfo1">クリックして情報 1 を表示</button>
    <button @click="showInfo2(66,$event)">情報 2 を表示するにはここをクリック</button>
</div>
</本文>

<script type="text/javascript">
    Vue.config.productionTip=false //起動時にVueがプロダクションのヒントを生成しないようにする new Vue({
        el:'#root',
        データ： {
            名前:「シャン・シリコンバレー」
        },
        方法:{
            showInfo1(イベント){
               /* コンソール.log(イベント.ターゲット.innerHTML)
               console.log(this) //これはvmです*/
                alert("こんにちは、クラスメイト1")
            },
            showInfo2(数値,a){
                /* コンソール.log(イベント.ターゲット.innerHTML)
                console.log(this) //これはvmです*/
                アラート("こんにちは、クラスメイト2")
                console.log(数値,a)
            }
        }
        })
        </スクリプト>

ここに画像の説明を挿入

要約する

これで、Vue の環境設定と開始に関する初心者向けガイドの記事は終了です。Vue の環境設定と開始に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: