シリーズ記事ディレクトリ

コンテンツ	参考リンク
Vueの基本的な使い方	Vue の基本的な使い方 (Vue の最も基本的な知識ポイントをマスターするための 1 つの記事)
Vue通信と高度な機能	Vue コンポーネントと高度な機能間の通信 (さまざまなコンポーネント、カスタム v-model、nextTick、スロット間の通信)
Vue の高度な機能	Vue の高度な機能 (動的コンポーネント、非同期ロード、キープアライブ、ミックスイン、Vuex、Vue-Router)
ビューの原則 1	Vue の原理 (MVVM モデルの理解、データ変更の詳細/監視、配列変更の監視、仮想 DOM の詳細な理解)
ビューの原則 2	Vue の原則 (diff アルゴリズム、テンプレートのコンパイル、コンポーネントのレンダリングと更新、JS 実装のルーティング)
Vue インタビューの質問	Web フロントエンド面接高頻度テストサイト - Vue 面接の質問

記事ディレクトリ

シリーズ記事ディレクトリ

まずはvueの基本的な使い方

1.補間、式、ディレクティブ、動的プロパティ

補間、表現
ディレクティブ、動的プロパティ
v-html: xss のリスクがあり、子コンポーネントを上書きします

<template>
  <div>
    <p>文本插值 {
    
    {
    
    message}}</p>
    <p>JS 表达式 {
    
    {
    
    flag ? 'yes' : 'no'}}</p>
    <p :id="dynamicId">动态属性 id</p>
    <hr/>
    <p v-html="rawHtml">
        <span>有 xss 风险</span>
        <span>使用 v-html 之后，将会覆盖子元素</span>
    </p>
  </div>
</template>

<script>
export default {
    
    
    data() {
    
    
        return {
    
    
            message: 'hello vue',
            flag: true,
            rawHtml: '指令 - 原始 html <b>加粗</b> <i>斜体</i>',
            dynamicId: `id-${
      
      Date.now()}`
        }
    }
};
</script>

ここに画像の説明を挿入

2. 計算された計算されたプロパティ

Computed にはキャッシュがあり、データが変更されていない場合は再計算されません。

<template>
  <div>
    <p>num {
    
    {
    
     num }}</p>
    <p>double1 {
    
    {
    
     double1 }}</p>
    <input v-model="double2" />
  </div>
</template>

<script>
export default {
    
    
    data() {
    
    
        return {
    
    
          num: 20
        }
    },
    computed: {
    
    
        double1() {
    
    
            return this.num * 2
        },
        double2: {
    
    
            get() {
    
    
                return this.num * 3
            },  
            set(val) {
    
    
                this.num = val / 2
            }
        }
    }
};
</script>

入力ボックスに 4 を入力します。
ここに画像の説明を挿入

3、ウォッチモニタリング

値型、oldVal と val は普通に取得できます
深く見る方法（参照型に耳を傾ける）
ウォッチは参照型をリッスンし、oldVal を取得できません。ポインターが同じであるため、この時点で既に新しい val を指しています。

<template>
  <div>
    <input v-model="name"/>
    <input v-model="info.city">
  </div>
</template>

<script>
export default {
    
    
    data() {
    
    
        return {
    
    
          name: '杂货铺',
          info: {
    
    
            city: '北京'
          }
        }
    },
    watch: {
    
    
        name(oldVal, val) {
    
    
            console.log('watch name', oldVal, val); // 值类型，可正常拿到 oldVal 和 val
        },
        info: {
    
    
            handler(oldVal, val) {
    
    
                console.log('watch info', oldVal, val); // 引用类型，拿不到  oldVal。因为指针相同，此时已经指向了新的 val
            },
            deep: true // 深度监听
        }
    }
};
</script>

聞く前に：

ここに画像の説明を挿入

聞いた後：

ここに画像の説明を挿入

4、クラスとスタイル

動的プロパティを使用する
キャメルケース使用
オブジェクトの書き込み (オブジェクトを:classバインド、データ関数で true/false を定義)
配列の書き込み方法（キーと値の両方をデータ関数に書き込み:class、キーをそのまま使用）
style: データ関数でスタイルを直接定義し、スタイルを直接:style使用します

<template>
  <div>
    <p :class="{black: isBlack, orange: isOrange}">使用 class</p>
    <p :class="[black, orange]">使用 class</p>
    <p :style="styleData">使用 style</p>
  </div>
</template>

<script>
export default {
    
    
    data() {
    
    
        return {
    
    
          isBlack: true,
          isOrange: true,

          black: 'black',
          orange: 'orange',

          styleData: {
    
    
            fontSize: '40px', // 转换为驼峰式
            color: 'red',
            backgroundColor: "#ccc"
          }
        }
    }
};
</script>

<style>
  .black {
    
    
    border: 1px solid black;
  }
  .orange {
    
    
    color: orange;
  }
</style>

ここに画像の説明を挿入

5. 条件付きレンダリング

v-if v-else の使用法、変数を使用することも、=== 式を使用することもできます
v-if と v-show の違い

(1) 手段: v-if は DOM 要素を DOM ツリーに動的に追加または削除すること v-show は DOM 要素の display style 属性を設定して表示と非表示を制御すること
(2) コンパイル処理: v-if はlazy, ラベルは条件が true の場合にのみレンダリングされます. 初期条件が true でない場合, v-if はラベルをレンダリングしません. v-show は、初期条件が true であるかどうかに関係なく、ラベルをレンダリングします。
(3) パフォーマンスの消費: v-if はスイッチングの消費が多く、v-show は初期のレンダリングの消費が多く、
(4) 使用シナリオ: v-if使用条件が変化しにくい場合に適しており、v-show は頻繁に切り替える場合に適しています。

v-if および v-show の使用シナリオ (更新まれにいつ選ぶv-if、更新頻繁にいつ選ぶvショー)

<template>
  <div>
    <p v-if="type === 'a'">A</p>
    <p v-else-if="type === b">B</p>
    <p v-else>other</p>
    <p v-if="showInfo">show info</p>

    <p v-show="type === 'a'">A by v-show</p>
    <p v-show="type === 'b'">B by v-show</p>
  </div>
</template>

<script>
export default {
    
    
    data() {
    
    
        return {
    
    
          type: 'a',
          showInfo: true
        }
    }
};
</script>

ここに画像の説明を挿入

第二に、Vue 2 の基本的な使い方

1. ループ (リスト) レンダリング

オブジェクトを反復処理する方法 - v-for も使用できます
キーの重要性。キーを走り書きすることはできません (一意性を確保するため)。
v-for と v-if は一緒に使用できません

例: v-for は配列 (item、index) とオブジェクト (val、key、index) を反復処理します。

<template>
  <div>
    <p>遍历数组</p>
    <ul>
      <li v-for="(item, index) in listArr" :key="item.id">
        {
    
    {
    
    index}} - {
    
    {
    
    item.id}} - {
    
    {
    
    item.title}}
      </li>
    </ul>

    <p>遍历对象</p>
    <ul>
      <li v-for="(val, key, index) in listObj" :key="key">
        {
    
    {
    
    index}} - {
    
    {
    
    key}} - {
    
    {
    
    val.title}}
       </li>
    </ul>

  </div>
</template>

<script>
export default {
    
    
    data() {
    
    
        return {
    
    
          listArr: [
            {
    
    id: 'a', title: '标题1'},
            {
    
    id: 'b', title: '标题2'},
            {
    
    id: 'c', title: '标题3'},
          ],
          listObj: {
    
    
            a: {
    
     title: '标题1' },
            b: {
    
     title: '标题2' },
            c: {
    
     title: '标题3' },
          }
        }
    }
};
</script>

ここに画像の説明を挿入
例: v-if と v-for を同時に使用すると、エラーが報告されます

ここに画像の説明を挿入

2. イベント

イベントパラメータ、カスタムパラメータ
イベント修飾子、キー修飾子
[考察] イベントはどこにバインドされていますか? - イベントはネイティブで、イベントは現在の要素にバインドされています

例: イベントとそのパラメーター

<template>
  <div>
    <p>{
    
    {
    
     num }}</p>
    <button @click="increment1">+1</button>
    <button @click="increment2(2, $event)">+2</button>
  </div>
</template>

<script>
export default {
    
    
  data() {
    
    
    return {
    
    
      num: 0,
    };
  },
  methods: {
    
    
    increment1(event) {
    
    
      console.log("event##", event, event.__proto__.constructor); // 是原生的 event 对象
      console.log(event.target); // 触发事件的元素
      console.log(event.currentTarget); // 监听事件绑定的元素
      this.num++;
    },
    increment2(val, event) {
    
    
      console.log(event.target);
      this.num = this.num + val;
    },
  },
};
</script>

ここに画像の説明を挿入

3. イベント修飾子

// 阻止单击事件继续传播
<a v-on:click.stop="doThis"></a>
// 提交事件不再重载页面
<form v-on:submit.prevent="onSubmit"></form>
// 修饰符可以串联
<a v-on:click.stop.prevent="doThat"></a>
// 只有修饰符
<form v-on:submit.prevent></form>
// 添加事件监听器时使用事件捕获模式
// 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理
<div v-on:click.capture="doThis">...</div>
// 只当在 event.target 是当前元素自身时触发处理函数
// 即事件不是从内部元素触发的
<div v-on:click.self="doThat">...</div>

4. キー修飾子

修飾子を押したままクリックして効果をトリガーする
正確な修飾子を使用すると、システム修飾子の正確な組み合わせによってトリガーされるイベントを制御できます

<template>
  <div>
    <button @click.ctrl="onClick">A</button>
    <button @click.ctrl.exact="onCtrlClick">A</button>
    <button @click.exact="onNullClick">A</button>
  </div>
</template>

<script>
export default {
    
    
  methods: {
    
    
    onClick() {
    
    
      console.log('按住Ctrl，点击按钮触发 or 同时按住Ctrl+Alt/Shift 点击按钮也能触发');
    },
    onCtrlClick() {
    
    
      console.log('只有按住Ctrl，点击按钮才能触发');
    },
    onNullClick() {
    
    
      console.log('没有任何系统修饰符被按下的时候才触发');
    }
  },
};
</script>

ここに画像の説明を挿入

5.フォーム

双方向データバインディングを使用: v-model
共通フォームアイテムテキストエリアチェックボックスラジオ選択
修飾子 lazy (手ぶれ防止効果に似ています) number (数字のみが許可されます) trim (スペースを削除します)

<template>
  <div>
    <p>输入框：{
    
    {
    
    name}} - {
    
    {
    
    lazyName}} - {
    
    {
    
    age}}</p>
    <input type="text" v-model.trim="name">
    <input type="text" v-model.lazy="lazyName">
    <input type="text" v-model.number="age">

    <p>多行文本：{
    
    {
    
    desc}}</p>
    <textarea type="text" v-model="desc"></textarea>
    <!-- 注意，<textarea>{
    
    {
    
    desc}}</textarea> 是不允许的！ -->

    <p>复选框：{
    
    {
    
    checked}}</p>
    <input type="checkbox" v-model="checked">

    <p>多选复选框：{
    
    {
    
    mchecked}}</p>
    <input type="checkbox" id="jack" value="jack" v-model="mchecked">
    <label for="jack">Jack</label>
    <input type="checkbox" id="mike" value="mike" v-model="mchecked">
    <label for="mike">Mike</label>
    <input type="checkbox" id="john" value="john" v-model="mchecked">
    <label for="john">John</label>

    <p>单选框：{
    
    {
    
    gender}}</p>
    <input type="radio" id="male" value="male" v-model="gender" />
    <label for="male">男</label>
    <input type="radio" id="female" value="female" v-model="gender" />
    <label for="female">女</label>

    <p>下拉列表选择：{
    
    {
    
    selected}}</p>
    <select v-model="selected">
      <option disabled value="">请选择</option>
      <option>A</option>
      <option>B</option>
      <option>C</option>
    </select>

    <p>下拉列表选择（多选）{
    
    {
    
    selectedList}}</p>
    <select v-model="selectedList" multiple>
      <option disabled value="">请选择</option>
      <option>A</option>
      <option>B</option>
      <option>C</option>
    </select>
  </div>
</template>

<script>
export default {
    
    
  data() {
    
    
    return {
    
    
      name: '杂货铺',
      lazyName: '杂货铺老板',
      age: 20,
      desc: '自我介绍',

      checked: true,
      mchecked: true,
      checkedNames: [],

      gender: 'male',

      selected: '',
      selectedList: []
    };
  }
};
</script>

フォームエフェクト

不积跬步无以至千里不积小流无以成江海

クリックしてフォローし、迷子にならないように、更新を続けてください...

Webフロントエンド面接の高頻度テストサイト - Vueの基本的な使い方 (Vueの最も基本的な知識ポイントをマスターするための1記事)

シリーズ記事ディレクトリ

記事ディレクトリ

まずはvueの基本的な使い方

1.補間、式、ディレクティブ、動的プロパティ

2. 計算された計算されたプロパティ

3、ウォッチモニタリング

4、クラスとスタイル

5. 条件付きレンダリング

第二に、Vue 2 の基本的な使い方

1. ループ (リスト) レンダリング

2. イベント

3. イベント修飾子

4. キー修飾子

5.フォーム

おすすめ