【フロントエンドVue】Vue学習ノートの基本的な内容

1.Vueインスタンス

Vue インスタンス: new Vue() を通じて作成された Vue インスタンス。DOM 要素を関連付け、データとコンポーネントのコンテキストを提供します。

var vm = new Vue({
    
    
  el: '#app',
  data: {
    
    
    message: 'Hello Vue!'
  }
})

DOMとは何ですか?

ドキュメント オブジェクト モデル (DOM) は、HTML および XML ドキュメントのプログラミング インターフェイスです。これは、文書の構造化された表現を提供し、プログラムから構造にアクセスして文書の構造、スタイル、コンテンツを変更する方法を定義します。DOM はドキュメントを解析して、ノードとオブジェクト (プロパティとメソッドを含むオブジェクト) の構造化されたコレクションを作成します。簡単に言えば、Web ページをスクリプトまたはプログラミング言語に接続します。

2. テンプレートの構文

テンプレート構文: Vue では、テンプレートを使用して宣言的にデータを DOM にレンダリングします。一般的に使用されるものには{ {}}、補間v-bind、v-if、v-forなどが含まれます。

<div id="app">
  {
   
   { message }}
  <span v-bind:title="message">鼠标悬停显示</span>
  <span v-if="seen">现在你看到我了</span>
  <ol>
    <li v-for="todo in todos">{
   
   { todo.text }}</li>
  </ol> 
</div>

3. 計算された特性

計算されたプロパティ: 計算されたプロパティは、現在のコンポーネントの状態から新しい値を取得するために使用され、ゲッターとセッターを通じてデータに応答できます。その利点は、効率的なキャッシュであり、データが変更されない場合には、前の計算結果がすぐに返されることです。

var vm = new Vue({
    
    
  data: {
    
    
    message: 'Hello'
  },
  computed: {
    
    
    // 计算属性的 getter
    reversedMessage: function () {
    
    
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

4. モニター

リスナー:watchオプションを使用して、指定されたデータ ソースを監視できます。データが変更されると、リスナーで定義された関数が実行されます。計算よりも幅広い用途があり、データを変換するだけでなく、非同期操作をトリガーすることもできます。

watch: {
    
    
  message: function (newVal, oldVal) {
    
     
    // 这个函数将在 `message` 改变后调用
  }
}

5. コンポーネント

コンポーネント: コンポーネントは Vue の最も強力な機能の 1 つで、HTML 要素を拡張し、再利用可能なコードをカプセル化できます。Vue.component() を通じてグローバル コンポーネントを作成し、Vue.component() によってローカル コンポーネントが作成されます。

// 全局组件定义
Vue.component('my-component', {
    
    
  template: '<div>{
    
    { msg }}</div>',
  data: function () {
    
    
    return {
    
    
      msg: 'Hello World!'
    }
  }
})
// 局部组件定义
var Child = {
    
    
  template: '<div>{
    
    { msg }}</div>',
  data: function () {
    
    
    return {
    
    
      msg: 'Hello World!'
    }
  } 
}
new Vue({
    
    
  // ...
  components: {
    
    
    'my-component': Child
  }
})

6. 双方向のデータバインディング

双方向データ バインディング: Vue はデータとビューの間の双方向バインディングを実装しており、js でデータを変更するとビューが自動的に更新され、その逆も同様です。これは、他の MVVM フレームワークと比較した Vue のハイライトの 1 つです。
Vue では、双方向のデータ バインディングは、パブリッシャー/サブスクライバー モデルと組み合わせたデータ ハイジャックによって実現されます。
簡単な例を次に示します。

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

var vm = new Vue({
    
    
  el: '#app',
  data: {
    
    
    message: 'Hello!'
  }
})

コードの説明

1. input 要素で v-model ディレクティブを使用し、入力を data.message に関連付けます。
2. ユーザーが何を入力しても、data.message の値はそのままになります。
3. 次に、レンダリング

   新しい値は同じ data.message プロパティにバインドされているため、更新されて表示されます。

4. Vue インスタンスのコードが後で data.message を変更すると、input 要素によって表示される値も変更されます。
5. Vue インスタンス内のデータを変更すると、DOM が更新されます。これがデータインパクトビューです。
   DOM (入力など) を変更すると、データも更新されます。これはデータに影響を与えるビューです。

7. ライフサイクルフック

ライフサイクルフック: 各 Vue インスタンスは、作成時に一連の初期化プロセスを実行する必要があります。たとえば、データ監視の設定、テンプレートのコンパイル、DOM へのインスタンスのマウント、データのレンダリングなどが必要です。このプロセス中に、Vue はライフサイクル フックと呼ばれるいくつかの関数を実行し、開発者が独自のコードを追加できるようにします。

8. スロット（追加予定）

スロット: スロットを通じてコン​​テンツを配布すると、親コンポーネントのスロットを通じて子コンポーネントにコンテンツを渡すことができます。子コンポーネントは、デフォルトのコンテンツを設定したり、名前付きスロットを設定して親コンポーネントのコンテンツを指定された場所に配布したりできます。

<navigation-link url="/profile">
  <!-- Add slot content here -->
  <span class="profile">Your Profile</span> 
</navigation-link>

<script>
Vue.component('navigation-link', {
      
      
  props: ['url'],
  template: `
    <a :href="url" class="nav-link">
      <slot></slot>
    </a>
  `
})
</script>

スロットには典型的な使用例がいくつかあります。

• ベースレイアウト
• スロットの交換
• 部分的なコンテンツ (スコープ付きスロット)
  を追加します

注: この記事では、簡単な例をいくつか紹介するだけであり、後ほど詳しく説明します。

間違いがありましたら、お知らせください。
この記事の内容を転載または引用する場合は、出典と原著者を明記してください。