この記事は Vue フレームワークの簡単な学習と紹介です。Vue の詳細な学習については、Vue3 チュートリアルを参照してください。

1. Vueの概要

最初にページの構成を分析しましょう: 完全な HTML ページにはビューとデータが含まれており、データはリクエストを通じてバックグラウンドから取得されます。つまり、バックグラウンドから取得したデータをページに表示する必要があります。 DOM 操作を使用します。この開発プロセスのため、MVVM (Model-View-ViewModel) と呼ばれるフロントエンド開発アイデアを導入しました。これにより、開発者は、データをビューにバインドする機械的な操作ではなく、データにもっと注意を払うことができます。

MVVM: 実はModel-View-ViewModelの略で3つの単語があり、具体的には以下のようになります。

モデル: データモデル。具体的には、フロントエンドのリクエストを通じてバックグラウンドから取得されたデータを指します。
ビュー: データを表示するために使用されるページであるビューは、html+css によって構築されたページとして理解できますが、データはありません。
ViewModel: データはビューにバインドされ、JavaScript DOM テクノロジを通じてデータ (モデル) をビュー (View) に表示します。

図に示すように、MVVM 開発アイデアの意味は次のとおりです。
ここに画像の説明を挿入
Vue.js (/vjuː/ と発音、viewに似ています) は、ユーザーインターフェイスを構築するための進歩的なフレームワークです。他の重量級フレームワークとは異なり、Vue はボトムアップで段階的に開発されるように設計されています。Vue のコアライブラリはビューレイヤーのみに焦点を当てており、学習や他のライブラリや既存のプロジェクトとの統合が非常に簡単です。Vue.js の目標は、可能な限り単純な API を使用して、応答性の高いデータバインディングと合成ビューコンポーネントを有効にすることです。

フレームワークは半完成のソフトウェアであり、再利用可能な汎用のソフトウェアベースのコードモデルのセットです。フレームワークベースの開発はより高速かつ効率的です。

2、Vue クイックスタート

新しい HTML ページを作成し、Vue.js ファイルをインポートします。

<script src="js/vue.js"></script>

JS コード領域で、Vue コアオブジェクトを作成し、データモデルを定義します。

<script>
	//定义Vue对象
    new Vue({
      
      
        el: "#app", //vue接管区域
        data: {
      
       //定义数据模型
            message: "Hello Vue!"
        }
    })
</script>

vue オブジェクトを作成する場合、一般的に使用される属性がいくつかあります。

el: Vue によって管理されるタグを指定するために使用されます。この属性#appの値はapp、管理対象ラベルの id 属性値である必要があります。
データ: データモデルを定義するために使用されます
メソッド: 関数を定義するために使用されます。

ビューの書き込み

<div id="app">
    <input type="text" v-model="message">
    {
   
   { message }}
</div>

このうち、{ {}} は補間式で、vue オブジェクトで定義されたモデルをページに表示するために使用されます。

形式: { { 式 }}。
コンテンツは次のとおりです。
- 変数
- 三項演算子
- 関数呼び出し
- 四則演算

3、Vueコマンド

v-model, これはvue のコマンドです。

ディレクティブ: HTML タグ上の v- というプレフィックスが付いている特別な属性。ディレクティブが異なれば意味も異なります。例: v-if、v-for...

Vue では、次の表に示すように、データをビューにバインドするという Vue の一般的な命令を実現するために、多数の命令が使用されます。

命令	効果
vバインド	hrefやcssスタイルの設定など、HTMLタグの属性値をバインドします。
v モデル	フォーム要素に双方向のデータバインディングを作成する
ヴオン	HTMLタグのバインディングイベント
v-if	条件付きで要素をレンダリングし、判定が true の場合にレンダリングし、それ以外の場合はレンダリングしない
v-その他	条件付きで要素をレンダリングし、判定が true の場合にレンダリングし、それ以外の場合はレンダリングしない
v-else-if	条件付きで要素をレンダリングし、判定が true の場合にレンダリングし、それ以外の場合はレンダリングしない
Vショー	条件に応じて要素を表示します。表示属性の値が切り替わる点が異なります
v-for	リストのレンダリング、コンテナーの要素またはオブジェクトのプロパティの走査

3.1 v-bind と v-model

v-bind: href、css スタイルの設定など、HTML タグの属性値をバインドします。Vue オブジェクトのデータモデルが変更されると、タグの属性値もそれに応じて変更されます。
v-model: フォーム要素に双方向のデータバインディングを作成します。双方向とは何ですか?
- vueオブジェクトのdata属性のデータが変更されると、それに合わせてビューの表示も変更されます
- ビューデータが変更されると、それに応じて Vue オブジェクトの data 属性のデータも変更されます。
- 双方向バインディングの役割: フォームデータの値を取得してサーバーに送信できます。
データ属性のデータは代入によって変更できることはわかっていますが、なぜビューデータが変更されるのでしょうか? フォームアイテムラベルのみ！したがって、フォーム項目タグでは双方向バインディングを使用する必要があります。

コードは以下のように表示されます。

<body>
    <div id="app">

        <a v-bind:href="url">链接1</a>
        <a :href="url">链接2</a>

        <input type="text" v-model="url">

    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
      
      
        el: "#app", //vue接管区域
        data:{
      
      
           url: "https://www.baidu.com"
        }
    })
</script>

3.2 ヴオン

v-on: イベントを HTML タグにバインドするために使用されます。注意すべき点は以下の2点です。

v-on 構文によってラベルのイベントにバインドされる関数は、vue オブジェクトによって宣言された関数である必要があります
v-on 構文でイベントをバインドする場合、イベント名は on を除いた js のイベント名と比較されます。

例: js のイベントバインディングデモ関数
```
<input onclick="demo()">
```
Vueのイベントバインディングデモ関数
```
<input v-on:click="demo()">
```

コードは以下のように表示されます。

<body>
    <div id="app">

        <input type="button" value="点我一下" v-on:click="handle()">

        <input type="button" value="点我一下" @click="handle()">

    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
      
      
        el: "#app", //vue接管区域
        data:{
      
      
           
        },
        methods: {
      
      
            handle: function(){
      
      
                alert("你点我了一下...");
            }
        }
    })
</script>

3.3 v-if と v-show

v-show と v-if の効果は同じですが、原理が異なります。v-if命令では条件を満たさないラベルコードがなくなり、v-show命令では条件を満たさないコードが残りますが、ラベルが表示されないように制御するcssスタイルが追加されています。表示される。

<body>
    <div id="app">
        
        年龄<input type="text" v-model="age">经判定,为:
        <span v-if="age <= 35">年轻人(35及以下)</span>
        <span v-else-if="age > 35 && age < 60">中年人(35-60)</span>
        <span v-else>老年人(60及以上)</span>

        <br><br>

        年龄<input type="text" v-model="age">经判定,为:
        <span v-show="age <= 35">年轻人(35及以下)</span>
        <span v-show="age > 35 && age < 60">中年人(35-60)</span>
        <span v-show="age >= 60">老年人(60及以上)</span>

    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
      
      
        el: "#app", //vue接管区域
        data:{
      
      
           age: 20
        },
        methods: {
      
      
            
        }
    })
</script>

3.4 v-for

v-for: このコマンドはトラバースに使用されます。その構文形式は次のとおりです。

<标签 v-for="变量名 in 集合模型数据">
    {
   
   {变量名}}
</标签>

ラベルはループする必要があり、v-for 命令はそのラベルに書かれていることに注意してください。

場合によっては、トラバース時にインデックスを使用する必要があるため、v-for 命令トラバーサルの構文形式は次のようになります。

<标签 v-for="(变量名,索引变量) in 集合模型数据">
    <!--索引变量是从0开始，所以要表示序号的话，需要手动的加1-->
   {
   
   {索引变量 + 1}} {
   
   {变量名}}
</标签>

コードは以下のように表示されます。

<body>
    <div id="app">
        <div v-for="addr in addrs">{
   
   {addr}}</div>
        <hr>
        <div v-for="(addr,index) in addrs">{
   
   {index + 1}} : {
   
   {addr}}</div>
    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
      
      
        el: "#app", //vue接管区域
        data:{
      
      
           addrs:["北京", "上海", "西安", "成都", "深圳"]
        },
        methods: {
      
                  
        }
    })
</script>

ここに画像の説明を挿入

3.5 包括的なケース

<body>
    <div id="app">  
        <table border="1" cellspacing="0" width="60%">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>成绩</th>
                <th>等级</th>
            </tr>

            <tr align="center" v-for="(user,index) in users">
                <td>{
   
   {index + 1}}</td>
                <td>{
   
   {user.name}}</td>
                <td>{
   
   {user.age}}</td>
                <td>
                    <span v-if="user.gender == 1">男</span>
                    <span v-if="user.gender == 2">女</span>
                </td>
                <td>{
   
   {user.score}}</td>
                <td>
                    <span v-if="user.score >= 85">优秀</span>
                    <span v-else-if="user.score >= 60">及格</span>
                    <span style="color: red;" v-else>不及格</span>
                </td>
            </tr>
        </table>

    </div>

</body>

<script>
    new Vue({
      
      
        el: "#app",
        data: {
      
      
            users: [{
      
      
                name: "Tom",
                age: 20,
                gender: 1,
                score: 78
            },{
      
      
                name: "Rose",
                age: 18,
                gender: 2,
                score: 86
            },{
      
      
                name: "Jerry",
                age: 26,
                gender: 1,
                score: 90
            },{
      
      
                name: "Tony",
                age: 30,
                gender: 1,
                score: 52
            }]
        },
        methods: {
      
      
            
        },
    })
</script>
</html>

ブラウザの効果は次のとおりです。ここに画像の説明を挿入

4. Vueのライフサイクル

Vue のライフサイクル: Vue オブジェクトの作成から破棄までのプロセスを指します。vue のライフサイクルには 8 つのステージが含まれます。ライフサイクルイベントがトリガーされるたびに、ライフサイクルメソッドが自動的に実行されます。これらのライフサイクルメソッドはフックメソッドとも呼ばれます。その完全なライフサイクルを次の図に示します。

州	ステージサイクル
作成前	作成前
作成した	作成後
マウント前	マウント前
取り付けられた	マウント完了
更新前	アップデート前
更新しました	更新しました
前に破壊する	破壊の前に
破壊されました	破壊後

ここに画像の説明を挿入
mounted：マウントが完了し、Vue が正常に初期化され、HTML ページが正常にレンダリングされます。将来的には、通常、ページの初期化と自動 Ajax リクエストのバックグラウンドデータに使用します。

<script>
    //定义Vue对象
    new Vue({
      
      
        el: "#app", //vue接管区域
        data:{
      
      
           
        },
        methods: {
      
      
            
        },
        mounted () {
      
      
            alert("vue挂载完成,发送请求到服务端")
        }
    })
</script>

ここに画像の説明を挿入

以下の図は、Vue の作成から Vue オブジェクトに影響を与えるまでの全体プロセスと、Vue 公式 Web サイトで提供されている各段階に対応するフック関数を示しています。
ここに画像の説明を挿入

Web フロントエンド: Vue

目次

1. Vueの概要

2、Vue クイックスタート

3、Vueコマンド

3.1 v-bind と v-model

3.2 ヴオン

3.3 v-if と v-show

3.4 v-for

3.5 包括的なケース

4. Vueのライフサイクル

おすすめ

Web フロントエンド: Vue

目次

1. Vueの概要

2、Vue クイック スタート

3、Vueコマンド

3.1 v-bind と v-model

3.2 ヴオン

3.3 v-if と v-show

3.4 v-for

3.5 包括的なケース

4. Vueのライフサイクル

おすすめ

2、Vue クイックスタート