vue2のクイックスタート

クイックスタート#

環境設定#

vue.js ファイルを取得

公式サイトにアクセスして vue2 をダウンロード

ブラウザの警告を無効にする#

ブラウザで開発者ツールをダウンロード

2. html 内の js スクリプトで生産警告を無効にする

<script>
    Vue.config.productionTip = false //生産vue警告を無効にする
</script>

基本的な使用法#

コンテナの作成#

el の他の書き方#

<script>
    Vue.config.productionTip = false //生産vue警告を無効にする
    const v = new Vue({
        // el:"#app",
        data: {
            name: "miaolme"
        }
    })
    // 1秒後に実行
    setTimeout(() => {
        v.$mount("#app") //elを設定
    }, 1000);
</script>

data の 2 つの書き方#

関数型

//1. vueのコアオブジェクトを作成
new Vue({
    el:"#app",
    data: function(){
        return {
            username:""
        }
    }
});

簡略型

//1. vueのコアオブジェクトを作成
new Vue({
    el: "#app",
    data() {
        return {
            username: ""
        }
    }
})

例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue使用</title>
    <script src="./js/vue2.js"></script>
</head>

<body>
    <div id="app">

        <input v-model="username">
        <!-- 挿入式表現 -->
        {{username}}
    </div>

</body>
<script>
    //1. vueのコアオブジェクトを作成
    new Vue({
        el: "#app",
        data() {
            return {
                username: ""
            }
        }
    })

</script>

</html>

Vue の一般的なディレクティブ#

ディレクティブ：HTML タグに V - プレフィックスが付いた特別な属性で、異なるディレクティブは異なる意味を持つ

ディレクティブ	効果
v-bind	HTML タグに属性値をバインドする、例えば`href`、`css`スタイルなどを設定する
v-model	フォーム要素で双方向データバインディングを作成する
v-on	HTML タグにイベントをバインドする
v-if v-else v-else-if	条件に基づいて特定の要素をレンダリングし、true の場合はレンダリングし、そうでない場合はレンダリングしない
v-show	条件に基づいて特定の要素を表示し、切り替えるのは display 属性の値の違い
v-for	リストレンダリング、コンテナの要素またはオブジェクトのプロパティを反復処理する

v-model#

v-model はフォーム要素で双方向データバインディングを作成する

フォームの変化は全体の vue の設定値に影響を与える

v-bind#

href、cssなどのスタイルを変更する

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue使用</title>
    <script src="./js/vue2.js"></script>
</head>

<body>
    <div id="app">
        <a v-bind:href="url">クリックしてください</a>
        <br>
        <a :href="url">簡略形式</a>
    </div>

</body>
<script>
    //1. vueのコアオブジェクトを作成
    new Vue({
        el: "#app",
        data() {
            return {
                username: "",
                url: "https://baidu.com"
            }
        }
    })

</script>

</html>

v-on#

イベントを定義する

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue使用</title>
    <script src="./js/vue2.js"></script>
</head>

<body>
    <!-- このdivのidは下のvueが使用可能かどうかを決定します -->
    <div id="app">
        <input type="button" value="ボタン1" v-on:click="show()">
        <br>
        <!-- 簡略記法 -->
        <input type="button" value="ボタン2" @click="show()">
    </div>

</body>
<script>
    //1. vueのコアオブジェクトを作成
    new Vue({
        el: "#app",
        data() {
            return {
                username: "",
                url: "https://baidu.com"
            }
        },
        methods: {
            show() {
                alert("クリックされました", number)
            }
        }
        /*
        methods: {
            show(number) { //引数を渡すことができます
                alert("クリックされました", number)
            }
        }
        */
    })

</script>

</html>

<input type="button" value="ボタン1" v-on:click="show()">
<!-- 簡略記法 -->
<input type="button" value="ボタン2" @click="show()">

v-for#

リストレンダリング、コンテナの要素またはオブジェクトのプロパティを反復処理する

v-for:

<div v-for='addr in addrs'>
	{{addr}}<br>
</div>

インデックスを追加

<div v-for="(addr,i) in addrs">
 <!-- iはインデックスを示し、0から始まります -->
  {{i + 1}}:{{addr}}<br>
</div>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue2.js"></script>
</head>

<body>
    <div id="app">

        <div v-for="addr in addrs">
            {{addr}} <br>
        </div>
        <hr>
        <div v-for="(addr,i) in addrs">
            {{i+1}}--{{addr}} <br>
        </div>
    </div>

</body>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                addrs: ["北京", "上海", "天津"]
            }
        }
    })
</script>

</html>

Vue データプロキシ#

オブジェクトにデータを追加#

Object.defineProperty

<script>
    let person = {
        name: "張三",
        sex: "男"
    }

    Object.defineProperty(person, 'age', {
        value: 18 //personオブジェクトに新しいキーと値を追加 age:18
        enumerable: true //プロパティが列挙可能かどうかを制御します。デフォルトはfalse
        writable: true  //プロパティが変更可能かどうかを制御します。デフォルトはfalse
        configurable: true  //プロパティが削除可能かどうかを制御します。デフォルトはfalse
    })
    console.log(person)  //{name: '張三', sex: '男', age: 18}
</script>

デフォルト：列挙不可、反復不可、変更不可、削除不可

let person = {
    name: "張三",
    sex: "男"
}
let number = 18

Object.defineProperty(person, 'age', {
    /*
    get: function () {
        return number //ageの値を呼び出すたびにnumberを返します
    }
    */
    //簡略記法
     get(){
        return number //ageの値を呼び出すたびにnumberを返します
    },
    //誰かがpersonのageプロパティを変更すると、set関数（setter）が呼び出され、変更された具体的な値を受け取ります
     set(value){
        console.log('ageプロパティが変更されました、変更された値は', value)
        number = value
	}
})
console.log(person)

イベント処理#

    new Vue({
        el: "#App",
        data: {
            name: 'xingli'
        },
        methods: {
            showInfo(e) {
                console.log(e.target.value)
            }
        },
    })

メソッドは method に書き込む

v-on#

イベントバインディングに使用でき、@で代替できます例えば @click

@click.stop イベントバブリングを停止します

Vue のイベント修飾子：
1.prevent: デフォルトイベントを防止します（一般的に使用されます）;
2.stop: イベントバブリングを防止します（一般的に使用されます）;
3.once: イベントは一度だけトリガーされます（一般的に使用されます）;
4.capture: イベントのキャプチャモードを使用します； イベントキャプチャ段階でイベント処理を行います
5.self.target が現在操作している要素である場合のみイベントがトリガーされます；
6.passive: イベントのデフォルト動作が即座に実行され、イベントコールバックの実行が完了するのを待つ必要はありません；

キーボードイベント#

vue のキーボードイベントをバインドする @

一般的な@keydown @keyup

Vue で一般的なキーのエイリアス：

Enter=>enter
Delete=>delete（「削除」と「バックスペース」キーをキャッチ）
Esc=>esc
Space=>space
Tab=>tab
Up=>up
Down=>down
Left=>left
Right=>right

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue2.js"></script>
</head>

<body>
    <div id="App">
        <input type="text" placeholder="Enterを押して入力を表示" @keyup="showInfo">
    </div>

</body>
<script>
    new Vue({
        el: "#App",
        data: {
            name: 'xingli'
        },
        methods: {
            showInfo(e) {
                if (e.keyCode !== 13) return //Enterを押したときに入力値を返す
                console.log(e.target.value)
            }
        },
    })
</script>

</html>

2.Vue がエイリアスを提供していないキーは、キーの元の key 値を使用してバインドできますが、kebab-case（ハイフン命名）に変換する必要があります。

showInfo(e) {//このコードを使用するとkey値を取得できます
     console.log(e.key)
     console.log(e.keyCode)
}

**4. 特定のキーを指定するために keyCode を使用することもできます（推奨されません）** 異なるキーボードの keyCode は異なります
5.Vue.config.keyCodes. カスタムキー名 = キーコードを使用して、キーのエイリアスをカスタマイズできます

3. システム修飾キー（特殊な使用法）：ctrl、alt、shift、meta
(1).keyup と組み合わせて使用します：修飾キーを押しながら他のキーを押し、その後他のキーを放すと、イベントがトリガーされます。
(2).keydown と組み合わせて使用します：通常通りイベントがトリガーされます。

修飾子は。で連結して書くことができます#

@keyup.ctrl.y ctrl+y を押すとイベントがトリガーされます

@click.prevent.stop まずデフォルトイベントを防止し、その後バブリングを停止します

計算プロパティと監視#

計算プロパティ computed#

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue2.js"></script>
</head>

<body>
    <div id="App">
        姓<input type="text" v-model="firstName"> <br> <br>
        名<input type="text" v-model="lastName"> <br> <br>
        名前: <span>{{fullName}}</span>
    </div>
</body>

<script>
    new Vue({
        el: '#App',
        data: {
            firstName: '張',
            lastName: '三'
        },
        computed: {
            fullName: {//最終的にdataに存在します
                get() {
                    console.log('getが呼び出されました')
                    return this.firstName + '-' + this.lastName
                },
               /*   set(value) {
                    console.log('setが呼び出されました',value)
                    const arr = value.split('-') // 配列の間に1つの-があります
                    this.firstName = arr[0]
                    this.lastName = arr[1]
                }  */
            }
     
        },
    })
</script>

</html>

計算プロパティの簡略記法

computed: {
    fullname:function(){//読み取りのみを考慮し、変更は考慮しません
	console.log('getが呼び出されました')
	return this.firstName + '-' + this.lastName
	}
}

監視プロパティ watch#

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue2.js"></script>
</head>

<body>

    <div id="app">

        <!-- <h2>今日の天気は{{ishot ? '暑い' : '涼しい'}}</h2> -->
        <h2>今日の天気は{{info}}</h2>
        <br>
        <button @click="gaiTian">天気を切り替える</button> <br>
        ヒント: <h3>{{tip}}</h3>

    </div>

</body>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            ishot: true,
            tip: '多くの水を飲んでください',
        },
        computed: {
            info() {
                return this.ishot ? '暑い' : '涼しい'
            }
        },
        watch: {
            ishot: {
                immediate: true,//ブール値 初期化時に関数を実行するかどうか
                handler() { //ここではhandler関数のみを使用できます
                    console.log('ishotが変更されました')
                }
            }
        },
        methods: {
            gaiTian() {
                if (this.ishot)
                    this.ishot = false; else this.ishot = true
            }
        },
    })
    // 別の監視方法
/*     vm.$watch('ishot', {//,前に監視するオブジェクトを書き、後に関数と設定を書きます 監視オブジェクトが存在しない場合はエラーになりません
        immediate: true,//ブール値 初期化時に関数を実行するかどうか
        handler() { //ここではhandler関数のみを使用できます
            console.log('ishotが変更されました')
        }
    }) */
</script>

</html>

深い監視#

Vue はオブジェクト内部の値の変更を検出できますが、Vue が提供する watch はデフォルトではできません
実際の状況に応じて watch の深い監視を有効にするかどうかを判断します

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue2.js"></script>
</head>

<body>

    <div id="app">

        <!-- <h2>今日の天気は{{ishot ? '暑い' : '涼しい'}}</h2> -->
        <h2>今日の天気は{{info}}</h2>
        <br>
        <button @click="gaiTian">天気を切り替える</button> <br>
        <button @click="numbers.a++">クリックしてaを+1にする</button>
        <h3>aの値は{{numbers.a}}</h3> <br>
        <br>
        <button @click="numbers.b++">クリックしてbを+1にする</button> <br>
        <h3>bの値は{{numbers.b}}</h3>

    </div>

</body>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            ishot: true,
            numbers: {
                a: 1,
                b: 2
            }
        },
        computed: {
            info() {
                return this.ishot ? '暑い' : '涼しい'
            }
        },
        watch: {
            ishot: {
                handler() { //ここではhandler関数のみを使用できます
                    console.log('ishotが変更されました')
                }
            },
            /*   //多層構造の中の特定のプロパティの変化を監視します
              'numbers.a': {// この書き方は原始的な書き方です
                  handler() {
                      console.log('aが変更されました')
                  }
              } */
            //多層構造の中のすべてのプロパティの変化を監視します 開かない場合はnumbersのすべての値が変更されると関数が有効になります
            numbers: {
                deep: true,
                handler() {
                    console.log('numbersの値が変更されました')
                }
            }
        },
        methods: {
            gaiTian() {
                if (this.ishot)
                    this.ishot = false; else this.ishot = true
            }
        },
    })
</script>

</html>

監視の簡略記法#

watch: {
    /*ishot: { //通常の書き方
            handler(newValue, oldValue) { //ここではhandler関数のみを使用できます
                console.log('ishotが変更されました', newValue, oldValue)
            }
        }, */
    ishot(newValue, oldValue) {
        console.log('ishotが変更されました', newValue, oldValue)
    },

},

スタイルバインディング#

class スタイルのバインディング#

<div id="app">
	<div class ="basic" :class="a">
    <!--最後のdivのclassは"basic normal"になります-->
	</div>
	<!--複数のスタイルを追加する"-->
    <div class ="basic" :class="addr">
    <!--最後のdivのclassは"basic class1 class2 class3"になります-->
	</div>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            a:'normal',
            addr:['class1','class2','class3']
        },
        methods: {
            change:{
                
            }
        },
    })
</script>

Math.floor(Math.random()*3) //ランダム数 範囲0-3
//floor 四捨五入して切り捨て
//Math.random()は0-1の数を生成します 1を含まない *3は0-3の数を生成します 3を含まない 小数を生成します

style スタイルのバインディング#

<body>
    <div id="app">
        <div class="" :style="{fontSize: fsize + 'px'}">{{name}}</div>
        <!--:styleは等号の後の内容が式であることを示します 上記のコードはフォントサイズを変更できます"-->
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            a: 'normal',
            name: 'miaolme',
            fsize: 40
        },
    })
</script>

別の書き方

<body>
    <div id="app">
        <div class="" :style="styleObj">{{name}}</div>
        <!--:styleは等号の後の内容が式であることを示します 上記のコードはフォントサイズを変更できます"-->
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            a: 'normal',
            name: 'miaolme',
            styleObj:{
                fontSize:'40px',
                backgroundColor: 'orange',
                color: 'red'
            }
        },
    })
</script>

配列の書き方

<body>
    <div id="app">
         <div class="" :style="[styleObj,styleObj2]">{{name}}</div>
        <!--:styleは等号の後の内容が式であることを示します 上記のコードはフォントサイズを変更できます"-->
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            a: 'normal',
            name: 'miaolme',
 		    styleObj: {
                fontSize: '40px',
                backgroundColor: 'orange',
                color: 'red'
            },
            styleObj2: {
                color: 'red'
            }
        },
    })
</script>

条件レンダリング#

v-show と v-if#

<body>
    <div id="app">
        <!-- v-showの等号の後に式を書き、結果はブール値になります
             v-ifとv-showの使い方は同じ -->
        <!-- <h2 v-show="false">ようこそVueを学ぶ{{name}}</h2> -->
        <!-- <h2 v-show="1===1">ようこそVueを学ぶ{{name}}</h2> -->
        <h2 v-if="false">ようこそVueを学ぶ{{name}}</h2>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            name: 'miaolme'
        }
    })
</script>

v-else-if と v-else#

使い方は通常のプログラミングの else if の使い方と同じです

if が実行された後
else if のコードは実行されません

すべての条件が満たされない場合、else のコードが実行されます

v-show は切り替え頻度が高いシーンに適しています
v-if は切り替え頻度が低いシーンに適しています

div をネストして使用できます

リストレンダリング#

v-for#

<body>
    <div id="app">
        <h2>人物リスト</h2>
        <ul>
            <!-- persons配列の長さに基づいてliを生成 -->
            <!-- keyはノードの識別子を示します -->
            <li v-for="ren in persons" :key="ren.id">
                <!-- inはofに置き換えることができます -->
                {{ren.name}}-{{ren.age}} 
            </li>
        </ul>
    </div>

</body>
<script>
    new Vue({
        el: '#app',
        data: {
            persons: [
                { id: '001', name: '張三', age: 18 },
                { id: '002', name: '李四', age: 19 },
                { id: '003', name: '王五', age: 20 }
            ]
        }
    })
</script>

<body>
    <div id="app">
        <h2>人物リスト</h2>
        <ul>
            <!-- persons配列の長さに基づいてliを生成 -->
            <!-- keyはノードの識別子を示します -->
            <!-- indexは他の単語に置き換えることができ、インデックスを取得できます -->
            <li v-for="(ren,index) in persons" :key="ren.id">
                <!-- inはofに置き換えることができます -->
                {{ren.name}}-{{ren.age}}-{{index}}
            </li>
        </ul>
    </div>
</body>

v-for は他のデータを反復処理できます

<body>
    <div id="app">
        <h2>人物リスト</h2>
        <ul>
            <!-- persons配列の長さに基づいてliを生成 -->
            <!-- keyはノードの識別子を示します -->
            <!-- indexは他の単語に置き換えることができ、インデックスを取得できます -->
            <li v-for="(value,key) in neko" :key="key.id">
                {{key}}-{{value}}
                <!-- キーと値のペアに似ています -->
            </li>
        </ul>
    </div>

</body>
<script>
    new Vue({
        el: '#app',
        data: {
            neko: {
                mao: '粉毛',
                eye: '大眼',
                tile: '大尾巴'
            }
        }
    })
</script>

v-for は文字列を反復処理できます

<body>
    <div id="app">
        <h2>人物リスト</h2>
        <ul>
            <!-- persons配列の長さに基づいてliを生成 -->
            <!-- keyはノードの識別子を示します -->
            <!-- indexは他の単語に置き換えることができ、インデックスを取得できます -->
            <li v-for="(char,index) in str" :key="index.id">
                {{index}}-{{char}}
                <!-- キーと値のペアに似ています -->
            </li>
        </ul>
    </div>

</body>
<script>
    new Vue({
        el: '#app',
        data: {
            str: 'Hello'
        }
    })
</script>

あまり使用されません

v-for は指定された回数を反復処理できます

<body>
    <div id="app">
        <h2>人物リスト</h2>
        <ul>
            <!-- persons配列の長さに基づいてliを生成 -->
            <!-- keyはノードの識別子を示します -->
            <!-- indexは他の単語に置き換えることができ、インデックスを取得できます -->
            <li v-for="(number,index) in 5" :key="index.id">
                {{number}}-{{index}}
                <!-- キーと値のペアに似ています -->
            </li>
        </ul>
    </div>
</body>

key の値は一意でなければなりません

リスト機能#

フィルタリング#

1 双方向バインディング

2 条件 + 色変更

.indexOf() このメソッドは前の数が () 内の文字を含むかどうかを判断します

含まれている場合はどの位置にあるかを返し、最初の位置は0、含まれていない場合は-1を返します

this.persons = this.persons.filter((p) => {
    return p.name.indexOf(val) !== -1
})
// filter フィルタリングメソッド 
配列.filter((変数) => {
    return ブール値
})
//新しい配列を返します

完全な watch メソッド

<body>
    <div id="app">
        <div>
            <input type="text" placeholder="名前を入力してください" v-model="keyWord">
            <button>これはボタンです</button>
            <ul>
                <li v-for="(p, index) in fillPersons" :key="p.id">
                    {{p.name}}-{{p.age}}-{{p.sex}}
                </li>
            </ul>
        </div>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            persons: [
                { id: '001', name: '馬冬梅', age: 19, sex: '女' },
                { id: '002', name: '周冬雨', age: 20, sex: '女' },
                { id: '003', name: '周杰倫', age: 21, sex: '男' },
                { id: '004', name: '温兆倫', age: 22, sex: '男' }
            ],
            keyWord: '',
            fillPersons: []
        },
        watch: {
            keyWord: {
                immediate: true,
                handler(val) {
                    this.fillPersons = this.persons.filter((p) => {
                        return p.name.indexOf(val) !== -1
                    })
                }
            }
        }
    })
</script>

</html>

computed を使用して実現

<body>
    <div id="app">
        <div>
            <input type="text" placeholder="名前を入力してください" v-model="keyWord">
            <button>これはボタンです</button>
            <ul>
                <li v-for="(p, index) in fillPersons" :key="p.id">
                    {{p.name}}-{{p.age}}-{{p.sex}}
                </li>
            </ul>
        </div>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            persons: [
                { id: '001', name: '馬冬梅', age: 19, sex: '女' },
                { id: '002', name: '周冬雨', age: 20, sex: '女' },
                { id: '003', name: '周杰倫', age: 21, sex: '男' },
                { id: '004', name: '温兆倫', age: 22, sex: '男' }
            ],
            keyWord: '',
        },
        computed: {
            fillPersons() {
                return this.fillPersons = this.persons.filter((p) => {
                    return p.name.indexOf(this.keyWord) !== -1
                })
            }

        },
    })
</script>

</html>

ソート#

vue のデータ検出原理#

学ぶのが面倒

ここを見てください：

033_尚硅谷 Vue 技術_更新時の問題_哔哩哔哩_bilibili

037 を見てください

フォームデータの収集#

v-model はデフォルトで双方向バインディング value 値

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue2.js"></script>
</head>

<body>
    <div id="app">
        <form @submit.prevent="demo">
            <!-- ボタンをクリックしてフォームを送信し、preventでデフォルトの動作を防ぎます  -->
            <!-- <label for="demo"> -->
            <!-- labelとidは2つのオブジェクトを接続できます -->
            <!-- アカウント：<input type="text" id="demo"> -->
            <!-- </label> -->
            アカウント: <input type="text" v-model="account"> <br>
            パスワード: <input type="password" v-model="password"> <br>
            性別： <br>
            男性<input type="radio" name="sex" value="male" v-model="sex">
            <!-- nameを通じてラジオボタンをグループ化できます -->
            女性<input type="radio" name="sex" value="femal" v-model="sex">
            <br>
            趣味: <br>
            <!-- vueはデフォルトでチェックボックスのcheckedのブール値を読み取ります -->
            学習<input type="checkbox" v-model="hobby" value="study">
            ゲームをする<input type="checkbox" v-model="hobby" value="game">
            食事<input type="checkbox" v-model="hobby" value="eat"> <br>
            所属キャンパス <br>
            <select v-model="city">
                <option value="">キャンパスを選択してください</option>
                <option value="beijing">北京</option>
                <option value="shenzhen">深セン</option>
                <option value="shanghai">上海</option>
                <option value="wuhan">武漢</option>
                <br>
            </select> <br>
            その他の情報: <br>
            <textarea v-model="other"></textarea> <br>
            <input type="checkbox" v-model="agree"> 読んで受け入れる<a href="http://baidu.com">《ユーザー契約》</a> <br>
            <button>情報を送信</button>
        </form>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            account: '',
            password: '',
            sex: 'femal',// 双方向バインディングで性別がデフォルトで選択されます
            hobby: [],//hobbyが取得する複数選択ボックスの値は文字列です
            city: '',
            other: '',
            agree: 'false',

        },
        methods: {
            demo() {
                alert(1)
            }
        },
    })
</script>

</html>

vue 基礎#

フィルター#

効果：フォーマットされた時間を表示

現在は：2021-01-09

現在は：2021-01-09 22:53:47

意味はあまりありません、vue3 では削除されました

    <script src="./js/vue2.js"></script>
    <script src="./js/dayjs.min.js"></script>
</head>

<body>
    <!-- コンテナを準備します -->
    <div id="root">
        <h2>フォーマットされた時間を表示</h2>
        <h3>現在は{{fmtTime}}</h3>
    </div>
</body>
<script>
    new Vue({
        el: '#root',
        data: {
            time: 1621561377603 //タイムスタンプ
        },
        computed: {
            fmtTime() {
                return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
            }
        }
    })
</script>

</html>

時間のフォーマットはサードパーティのライブラリを使って実現できます

ビルトインディレクティブ#

学んだディレクティブ#

v-bind : 単方向バインディング式を解析し、簡略化できます：xxx

v-model : 双方向データバインディング

v-for : 配列 / オブジェクト / 文字列を反復処理する

v-on : イベントリスナーをバインドし、@で簡略化できます

v-if : 条件レンダリング（動的にノードの存在を制御）

v-else : 条件レンダリング（動的にノードの存在を制御）

v-show : 条件レンダリング（動的にノードの表示を制御）

v-text ディレクティブ#

<body>
    <div id="app">
        <div>{{name}}</div> <br>
        <div v-text="name"></div> <!-- v-textはdiv全体の内容を置き換えます -->
        <!-- v-textはテキストを挿入し、ノードの内容を置き換えますが、挿入式は置き換えません -->
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            name: '小猫'
        }
    })
</script>

v-html ディレクティブ#

使い方：v-text と同じですが、タグ付き文字列を解析できます例えば<h2>呵呵</h2>

<div v-html="name"></div>

セキュリティ上の問題があり、危険な html 文を挿入するのを無視できます

v-cloak ディレクティブ#

タグ内で使用し、vue がマウントされた後、タグが消えます

スタイルを個別に設定できます本質的には id であり、その id を持つ内容が表示されないように設定できます diskplay、ネットワーク速度が遅いために vue が読み込まれず、{{}}内容が表示されるのを防ぎます

v-once ディレクティブ#

1.v-once があるノードは初回の動的レンダリング後、静的な内容と見なされます。
2. 以降のデータの変更は v-once がある構造の更新を引き起こしません。パフォーマンスを最適化するために使用できます。

タグに{{}}を追加すると、その内容は初期値のみが表示されます

v-pre ディレクティブ#

1.v-pre はそのノードのコンパイルプロセスを除外します。
2. 指示文法や挿入式文法を使用していないノードをスキップするのに利用でき、コンパイルを速くします

カスタムディレクティブ#

現在は使用しません

ライフサイクル#

原理図

ライフサイクル

下のすべてのフィールドは vue のdata:{}と同じレベルです

  new Vue({
        el: '#app',
        data: {
            name: '小猫'
        }
 })

mounted#

mounted(){
	// この関数内のコードはvueがマウントされた後にのみ実行されます
    // 初期化用のコードなどを内部に追加できます
}

template#

使い方 1：改行しない

template:'<h2>現在のn値は：{{n}}/h2><button@click="add">クリックしてn+1</button>'

使い方 2：改行する

template:`<h2>現在のn値は：{{n}}/h2>
<button@click="add">クリックしてn+1</button>`

作用、コンテナの内容を置き換えます <div id="app">内のすべての内容

<div id="app">
    <div>{{name}}</div> <br>
    <div v-text="name"></div> <!-- v-textはdiv全体の内容を置き換えます -->
    <!-- v-textはテキストを挿入し、ノードの内容を置き換えますが、挿入式は置き換えません -->
</div>

vue で template を使用すると、元のコンテナのすべての内容が上書きされます。

テンプレートは空にすることができますが、templateを含める必要があります （ルートノード）

beforeUpdate#

更新プロセスの前の関数

beforeUpdate(){
	// 内部に書かれた関数はvueの値が更新される前に実行されます
}

update#

update(){
	// 内部に書かれた関数はvueの値が更新された後に実行されます
}

beforeDestory#

beforeDestory(){
	// 内部に書かれた関数はvueが破棄される前に実行されます
	// 主に各種サービスの終了関数を書くために使用されます。例えば、タイマー関数の終了など
	//一般にこの段階では：タイマーを閉じる、メッセージの購読をキャンセルする、カスタムイベントを解除するなどの後処理を行います
}

非単一ファイルコンポーネント#

基本的な例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue2.js"></script>
</head>

<body>
    <!-- コンテナを定義します -->
    <div id="app">
        <h1>{{msg}}</h1>
        <hr>
        <school />
    </div>
</body>
<script>
    //コンポーネントを定義します
    const school = Vue.extend({
        template: `
        <div>
            <h2>私の学校:{{name}}</h2>
            <h2>住所:{{address}}</h2>
        </div>`,
        data() {
            return {
                name: '喵校',
                address: '喵娘楽園'
            }
        }
    })

    new Vue({
        el: '#app',
        data: {
            msg: 'こんにちはVue!'
        },
        //コンポーネントを登録します（局所的）
        components: {
            school: school //<school/>タグを使用して呼び出します タグの内容は左側で決まります
        }
    })
</script>

</html>

グローバル登録コンポーネント

//グローバル登録コンポーネント
Vue.component('使用するタグ名',定義したコンポーネント名)

グローバル登録の例

Vue.component('xuexiao',school)
//<xuexiao/>を使用すればこのコンポーネントを呼び出せます
const school = Vue.extend({
        template: `
        <div>
            <h2>私の学校:{{name}}</h2>
            <h2>住所:{{address}}</h2>
        </div>`,
        data() {
            return {
                name: '喵校',
                address: '喵娘楽園'
            }
        }
    })

局所登録とグローバル登録の違い：

局所登録のコンポーネントはその指定されたコンテナ内でのみ使用可能で、グローバル登録のコンポーネントは任意のコンテナで使用可能です。

コンポーネントはネストできます

ただし実行順序は上から下にしなければなりません、さもなければエラーになります

コンストラクタ#

057_尚硅谷 Vue 技術_VueComponent コンストラクタ_哔哩哔哩_bilibili

スキップします、後で学びます

スキャフォールディング#

スキャフォールディングのインストール#

node.js をインストールします
設定淘宝源

npm config set registry=http://registry.npm.taobao.org

スキャフォールディングをグローバルにインストールします

npm install -g @vue/cli

スキャフォールディングファイルを作成する

vue create ファイル名 #（自分でカスタマイズ）できれば中文は避けてください、エラーが発生する可能性があります

単一ファイルコンポーネント#

ファイル拡張子.vue

命名規則

school.vue my-school.vue

School.vue MySchool.vue

構造

<template>
	<!--コンポーネントの構造 -->
</template>

<script>
    //コンポーネントの相互作用に関連するコード（データ、メソッドなど）
</script>

<style>
    /*コンポーネントのスタイル*/
</style>

例

<template>
  <div class="demo">
     <h2>私の学校:{{name}}</h2>
     <h2>住所:{{address}}</h2>
  </div>
</template>

<script>
    const school = Vue.extend({
        data() {
            return {
                name: '喵校',
                address: '喵娘楽園'
            }
        }
    })
</script>

<style>
    .demo{
        background-color: pink;
    }
</style>

メソッドを公開する

public のように、アクセス可能なメソッドを公開する方法は 3 つあります

<script>
  	export const school = Vue.extend({ //それぞれを公開
        data() {
            return {
                name: '喵校',
                address: '喵娘楽園'
            }
        }
    })
</script>

<script>
    const school = Vue.extend({
        data() {
            return {
                name: '喵校',
                address: '喵娘楽園'
            }
        }
    })
    export default school //デフォルトで公開されます、一般的に使用されます
</script>

<script>
/*または*/
export default {
    name:'school',
    data() {
        return {
            name: '喵校',
            address: '喵娘楽園'
        }
    }
}
</script>

<script>
    const school = Vue.extend({
        data() {
            return {
                name: '喵校',
                address: '喵娘楽園'
            }
        }
    })
    export {school} //統一して公開します
</script>

App.vue コンポーネントをまとめる

<template lang="">
    <div>
        <school></school>
    </div>
</template>
<script>
//コンポーネントをインポートします
import school from 'vue1/school'

export default {
    name: 'App',
    components: {
        school: school
    }
}
</script>
<style lang="">
    
</style>

vm main.js

import App from 'vue1/App'

new Vue({
    template:'<App></App>',
    el:'#root',
    components:{App}
    
})

エントリーファイル index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root">
    </div>
    <script src="../js/vue2.js"></script>
    <script src="./main.js"></script>
</body>
</html>

一般的なプロパティ#

render 関数#

main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App), // hは他の内容に置き換えることができ、下の例のように
  //render: test => test(App), 同様に、Appはコンポーネントを示し、テンプレート構造に置き換えることもできます
  //render: test => test('h1','hello') テンプレート効果に似ていますが、あまり使用されません
}).$mount('#app') // これはel:'#app'に相当します

ref 要素#

作用： id セレクターのように、コンポーネントの vm オブジェクトまたは特定の要素のオブジェクトを取得するために使用されます

例：

<h1 ref="sch">こんにちはvue！</h1>

console.log(this.$refs.sch)

ref プロパティ

要素または子コンポーネントに参照情報を登録するために使用されます（id の代替者）
html タグに適用されると、実際の dom 要素が取得され、コンポーネントに適用されると、コンポーネントインスタンスオブジェクト（vc）が取得されます

props 設定#

使い方：

props:['name','address','age']

script 内で data と同じレベルに置きます

値が data の中のものと同じであってはなりません。外部データを渡すために使用されます。

内部に関数を書いて渡される値を制御することができます。

num+(){
	this.age++ //thisを使用する必要があります 
}

mixin 混入#

例

mixin.js

//それぞれを公開
export const mixin = {
    methods: {
        showName() {
            alert(this.name)
        }
    },
}

MyStudent.vue

<template>
    <div>
        <h3 @click="showName">名前:{{ name }}</h3>
        <h3>住所:{{ address }}</h3>
        <h3>年齢:{{ age }}</h3>
    </div>
</template>
<script>
//混合mixinをインポートします
import { mixin } from '../mixin'
export default {
    name: 'MyStudent',
    data() {
        return {
            name: '喵喵',
            address: '桜花キャンパス',
            age: '18'
        }
    },
    //混合を有効にします。自動的に構造に基づいてmixin内のカスタムメソッドを呼び出します
    mixins: [mixin],
    methods: {
    }

}
</script>

コンポーネント内のメソッドコードは優先されます

mounted 関数はすべて実行されます。 mixin 内のコードは優先して実行されます

グローバルミックス

変更するだけでmain.js

import Vue from 'vue'
import App from './App.vue'

//混合をインポートします
import { mixin } from './mixin'
//混合を適用します
Vue.mixin(mixin)
new Vue({
  render: h => h(App),
}).$mount('#app')

スコープ制限とプラグイン#

スコープ制限

scoped#

スタイル内で使用します

<style scoped>
	.title{
		color: red;
	}
</style>

作用：スタイル内のスタイルを現在のコンポーネント内でのみ有効にします。

vue 内のスタイルはコンポーネントの同名スタイルを上書きします

プラグイン#

使用方法： script.js

プラグインを定義します

export default { //デフォルトで公開
    install(Vue,x,y){ //x,yの値を受け取ることができます
        //グローバルフィルター
        Vue.filter('mySlice',function(value){...})
   
        //グローバルディレクティブを定義します
        Vue.directive('fbind',{...})  
                               
    	//グローバルミックスを定義します
        Vue.mixin({...})                       
   }
    //vueプロトタイプにメソッドを追加します              
    Vue.prototype.hello   = ()=>{alert('こんにちはvue')}       
}

プラグインをApp.vueで適用します

<script>
    	//プラグインをインポートします
    	import plugins from './plugins'
    	//プラグインを使用します
    	Vue.use(plugins)
</script>

コンポーネント情報の相互作用#

グローバルイベントバス#

学ばない 084_尚硅谷 Vue 技術_グローバルイベントバス 1_哔哩哔哩_bilibili

メッセージの購読と発行#

1 メッセージを購読する 2 メッセージを発行する

サードパーティライブラリをインストールします

npm install [email protected]

インポート school.vue

<script>
    import pubsub from 'pubsub-js'
    //定義します
    mounted(){ //アロー関数でない場合は、実行関数をmethods内に定義する必要があります
        this.pubId = pubsub.subscribe('hello',(msgName,data)=>{ //メッセージを購読します
            console.log(this) //helloはメッセージ名です
        })
    }
    //購読をキャンセルします
    beforeDestory(){
        pubsub.unsubscribe(this.pubId)
    }
</script>

別の方法

<script>
    import pubsub from 'pubsub-js'
    methods(){
        demo(data){...}
    }
    mounted(){ //アロー関数でない場合は、実行関数をmethods内に定義する必要があります
       this.pubId = pubsub.subscribe('hello',this.demo) //メッセージを購読します
        //helloというメッセージ名が発行されると、コールバック関数が実行されます
    }
    //購読をキャンセルします
    beforeDestory(){
        pubsub.unsubscribe(this.pubId)
    }
</script>

メッセージを発行します

<script>
    import pubsub from 'pubsub-js'
    methods(){
        sendStudentName(){
        	pubsub.publish('hello',666) //メソッドを呼び出すと、helloという名前のメッセージが作成され、データは666です
        }
    }
</script>

methods: $nextTick

this.$nextTick(function(){
    //domノードが更新された後に実行されます vueテンプレートのコンパイルが完了した後に実行されます
    this.$refs.inputTitle.focus()//自動的にフォーカスを取得します
})

setTimeout(){
	this.$refs.inputTitle.focus()//自動的にフォーカスを取得します
    //タイマー関数はvueテンプレートのコンパイルが完了した後に実行されます
}

過渡とアニメーション#

vue アニメーション#

<template>
    <div>
        <!--isShow = !isShowはボタンがisShowのtrueとfalseを切り替えることを示します-->
        <Button @click="isShow = !isShow">表示/非表示</Button>
        <transition name="v" appear>
            <!-- :appear="true"はappearと同じで、追加するとリフレッシュ後にアニメーションが再生されます  -->
            <!-- 遷移タグを設定すると、自動的にアニメーションが再生されます -->
            <h1 v-show="isShow">こんにちは!</h1>
        </transition>

    </div>
</template>
<script>
export default {
    name: 'MyTest',
    data() {
        return {
            isShow: true
        }
    }
}
</script>
<style scoped>
h1 {
    background-color: pink;
}

/*comeとgoは必要な要素にクラスを追加するだけで、設定したアニメーションを再生できます*/
.come {
    /*来るときのアニメーション*/
    animation: dongHua 1s;
}

.go {
    /*去るときのアニメーション*/
    animation: dongHua 1s reverse;
    /*reverseは反転します*/
}

/*過渡アニメーションタグのタイプ vはアニメーションの名前です*/
.v-enter-active {
    /*来るときのアニメーション*/
    animation: dongHua 1s;
}

.v-leave-active {
    /*去るときのアニメーション*/
    animation: dongHua 1s reverse;
    /*reverseは反転します*/
}


@keyframes dongHua {

    /*アニメーションのキーフレームを定義し、アニメーション名を指定します*/
    from {
        transform: translateX(-100%);
        /*単位はpx*/
    }

    to {
        transform: translateX(0px);
    }
}
</style>

vue 過渡#

例

<div>
    <!--isShow = !isShowはボタンがisShowのtrueとfalseを切り替えることを示します-->
    <Button @click="isShow = !isShow">表示/非表示</Button>
    <transition-group name="v">
        <!-- :appear="true"はappearと同じで、追加するとリフレッシュ後にアニメーションが再生されます  -->
        <!-- 遷移タグを設定すると、自動的にアニメーションが再生されます -->
        <h1 v-show="isShow" key="1">こんにちは!</h1>
        <h1 v-show="isShow" key="2">Vue</h1>
    </transition-group>
</div>

group 内のすべての要素は一意の key 値を持つ必要があります

name は異なるタイプのアニメーションを区別するために使用されます

サードパーティアニメーションの統合#

animate.css - 第三者アニメーション (npmjs.com)

インストール：

cmd で必要なプロジェクトに入って実行します

npm install animate.css --save

Animate.css 開発文書

インポート

<script>
	import 'animate.css';
</script>

例

<template>
    <div>
        <!--isShow = !isShowはボタンがisShowのtrueとfalseを切り替えることを示します-->
        <Button @click="isShow = !isShow">表示/非表示</Button>
        <transition-group
         name="animate__animated animate__bounce" 
         appear 
         enter-active-class="animate__rubberBand"
         leave-active-class="animate__bounceOut">
            <!-- :appear="true"はappearと同じで、追加するとリフレッシュ後にアニメーションが再生されます  -->
            <!-- 遷移タグを設定すると、自動的にアニメーションが再生されます -->
            <h1 v-show="isShow" key="1">こんにちは!</h1>
            <h1 v-show="isShow" key="2">Vue</h1>
        </transition-group>
    </div>
</template>
<script>
//アニメーションcssをインポートします
import 'animate.css'
export default {
    name: 'MyTest2',
    data() {
        return {
            isShow: true
        }
    }
}
</script>
<style scoped>
h1 {
    background-color: pink;
}
</style>

enter-active-class=“” とleave-active-class=“”

“” 内にはアニメーションライブラリに必要なアニメーション名を記入します。 name=“”は必ずanimate__animated animate__bounceを記入します
異なるアニメーションライブラリの要求は若干異なります

group 内のすべての要素は一意の key 値を持つ必要があります

スロット#

デフォルトスロット#

使用方法：

コンポーネントは二重タグを書きます
タグ内にコンポーネントに追加する必要のある要素を記入します
コンポーネント内で slot の二重タグで配置位置をマークします

slot タグ内に書かれた内容は、コンポーネントの二重タグ内の内容が空である場合に表示されます

viedo を再生するには controls タグを追加する必要があります

名前付きスロット#

使用：

コンポーネントの二重タグ内で slot="定義したname名称"を書く
slotタグ内にname=“自分で定義した名前”属性を追加します

異なる要素が同じslot名を使用しても上書きされず、自動的に追加されます

別の書き方

<template>の二重タグで包むことができ、divのように、しかしdom構造を生成しません
このタグで包むと、v-slot:自分で定義した名前を使用してdom生成位置を定義できます

スコープスロット#

104_尚硅谷 Vue 技術_スコープスロット_哔哩哔哩_bilibili

あまり役に立たないと感じるので、学びません

Vuex#

vuex を理解する#

原理図

vuex

vuex とは何か#

1. 概念：Vue 内で集中型状態（データ）管理を実現するための Vue プラグインで、vue アプリケーション内の複数のコンポーネントの共有状態を集中管理（読み取り / 書き込み）する方法でもあり、コンポーネント間の通信方法でもあります。
2.Github アドレス：https://github.com/vuejs/vuexe

いつ Vuex を使用するか#

1. 複数のコンポーネントが同じ状態に依存している場合
2. 異なるコンポーネントからの動作が同じ状態を変更する必要がある場合

vuex のインストール#

npm i vuex@3

動的ルーティング#

ルーティングの基本的な使用法#

vue-router3 をインストールする必要があります

npm i vue-router@3

プラグインライブラリ

使用方法

main.js

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'

//Vueeの生産提示を無効にします
Vue.config.productionTip = false
//プラグインを適用します
Vue.use(VueRouter)
new Vue({
  render: h => h(App),
}).$mount('#app')

ルーターを作成する#

router/index.js

// このファイルはアプリケーション全体のルーターを作成するために使用されます
import VueRouter from "vue-router";

//コンポーネントをインポートします
import MyHome from "../comments/home"
import MyAbout from "../comments/about"

// ルーターを作成し、外部に公開します
export default new VueRouter({
    routes: [
        {
            path: '/about',
            component: MyAbout
        },
        {
            path: '/home',
            component: MyHome
        }
    ]
})

ルーターをインポートする#

main.js

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
//ルーターをインポートします
import router from './router'
//Vueeの生産提示を無効にします
Vue.config.productionTip = false
//プラグインを適用します
Vue.use(VueRouter)
new Vue({
  render: h => h(App),
  router: router //ルーターをインポートします
}).$mount('#app')

App.vueを調整します

<template>

  <div>
    <div class="row">
      <div class="col-xs-offset-2 col-xs-8">
        <div class="page-header">
          <h2>Vue Router デモ</h2>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-2 col-xs-offset-2">
        <div class="list-group">
          <!-- 元のhtmlではaタグを使用してページを切り替えました -->
          <!-- <a class="list-group-item active" href="./about.html">About</a>
          <a class="list-group-item" href="./home.html">Home</a> -->

          <!-- ルーティングの切り替え router-link と to タグ 最終的にaタグに変換され、active-classは要素がアクティブなときのスタイル-->
          <router-link class="list-group-item" active-class="active" to="/about">About</router-link>
          <router-link class="list-group-item" active-class="active" to="/home">Home</router-link>
        </div>
      </div>
      <div class="col-xs-6">
        <div class="panel">
          <div class="panel-body">
            <!-- ここでどのコンポーネントを表示するかは、ユーザーがどのナビゲーション項目をクリックするかによります -->
            <!-- コンポーネントの表示位置を指定します -->
            <router-view></router-view>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
export default {
  name: 'App',
  data() {
    return {

    }
  },
  components: {

  }
}
</script>

<style>

</style>

ルーティングコンポーネントは別のフォルダーに置くことをお勧めします

ネスト（多層）ルーティング#

router/index.js

// このファイルはアプリケーション全体のルーターを作成するために使用されます
import VueRouter from "vue-router";

//コンポーネントをインポートします
import MyHome from "../comments/home"
import MyAbout from "../comments/about"
import MyNews from "../comments/news"
import MyMessage from "../comments/message"
// ルーターを作成し、外部に公開します
export default new VueRouter({
    routes: [
        {
            path: '/about',
            component: MyAbout
        },
        {
            path: '/home',
            component: MyHome,
            //二次ルーティング
            children: [
                {
                    path: 'news',
                    component: MyNews
                },
                {
                    path: 'message',
                    component: MyMessage
                }
            ]
        }
    ]
})

home.vue

<template>
    <div>
        <h2>Homeコンポーネントの内容</h2>
        <div>
            <ul class="nav nav-tabs">
                <li>
                    <router-link class="list-group-item" active-class="active" to="/home/news">News</router-link>
                </li>
                <li>
                    <router-link class="list-group-item" active-class="active" to="/home/message">Message</router-link>
                </li>
            </ul>
            <router-view></router-view>
        </div>
    </div>
</template>
<script>
export default {
    name: 'MyHome'
}
</script>
<style>

</style>

ルーティングパラメータの渡し方#

query パラメータ#

toの後に?…を書いてパラメータを渡すことができます

ルーティングを切り替えて query パラメータを持ち運ぶ、to の文字列書き方

<router-link class="list-group-item" active-class="active" to="/home/message?id=666&title=こんにちは！">Message</router-link>

パラメータを取得する

{{$route.query.id}} //666
{{$route.query.title}} //こんにちは！

v-ifを使用して特定の内容を挿入できます

<li v-for="m in messageList" :key="m.id">
	<router-link class="list-group-item" active-class="active" :to="`/home/message?id=${m.id}&title=${m.title}`">Message</router-link>
</li>

ルーティングを切り替えて query パラメータを持ち運ぶ、to のオブジェクト書き方

<li v-for="m in messageList" :key="m.id">
	<router-link :to="{
		path:'/home/message/detail',
		query:{
			id:m.id,
			title:m.title
		}
	}"
</li>

名前付きルーティング#

ルーティングを設定する router/index.js

// このファイルはアプリケーション全体のルーターを作成するために使用されます
import VueRouter from "vue-router";

//コンポーネントをインポートします
import MyHome from "../comments/home"
import MyAbout from "../comments/about"
import MyNews from "../comments/news