vue ライフサイクル、vue インスタンス、テンプレート構文-jsチュートリアル-php.cn

vue ライフサイクル、vue インスタンス、テンプレート構文

php中世界最好的语言

リリース： 2018-03-10 10:19:24

オリジナル

1907 人が閲覧しました

今回は、vueライフサイクル、vueインスタンス、テンプレート構文について説明します。vueライフサイクル、vueインスタンス、テンプレート構文を使用する際の注意点について、実際のケースを見てみましょう。

Vueは誕生以来、サイレントニッチフレームワークから中国三大フレームワークの一つに成長し、初期バージョンから現在の2.5.13(2014年から2018年2018.1.26時点の安定版)まで発展してきました。

要点

Vue.js は、非常に人気のある

JavaScript MVVM ライブラリであり、データ駆動型でコンポーネント化されたアイデアに基づいて構築されています。 Angular.js と比較して、Vue.js はよりシンプルで理解しやすい API を提供するため、すぐに Vue.js を使い始めて使用することができます。

前回のブログでvueのインストールとwebpackの基本設定を紹介したので、今回はvueとvueの使い方について紹介します。

これまで jQuery を使用して DOM を操作することに慣れていた場合は、Vue.js を学習するときに DOM を手動で操作するという考えは脇に置いてください。Vue.js はデータ駆動型であり、手動で DOM を操作する必要はありません。 DOM を手動で操作します。特別な HTML 構文を通じて DOM と

data をバインドします。バインディングを作成すると、DOM はデータと同期したままになり、データが変更されるたびに、DOM もそれに応じて更新されます。

もちろん、Vue.js を使用する場合は、jQuery などの他のライブラリと組み合わせて使用することもできます。

この記事の内容が良いと思われた場合は、後ほどデモを github にアップロードしますので、気に入っていただけましたら、よろしくお願いします。

良いこと

vue を学びたい場合は、HTML、CSS、JavaScript の中級の知識が必要です。

フロントエンド開発を学び始めたばかりの場合、最初のステップとしてフレームワークを使用するのは最善のアイデアではないかもしれません。基本をマスターしてから戻ってきてください。他のフレームワークの以前の経験は役に立ちますが、必須ではありません。（原文は公式サイトより）。

1.最初のステップ、vueライフサイクルテーブル

よく学ぶためにはvueライフサイクルテーブルを理解することが絶対に必要です

印象と理解を深めるために、公式Webサイトのライフサイクルアイコンに注釈を付けます（アドレス付きのソースネットワーク図） )

2. vue インスタンス

すべての Vue アプリケーションは、Vue 関数を使用して新しい Vue インスタンスを作成することから始まります:

var vm = new Vue({
  // 选项
})

ログイン後にコピー

3. インスタンスのライフサイクルフック

各 Vue インスタンスは、作成時に一連の手順を実行します。プロセス - データバインディングの設定、メソッドパラメーターの受け渡し、インスタンスの DOM へのマウント、データ変更時の DOM の更新など。同時に、ライフサイクルフックと呼ばれるいくつかの関数がプロセス中に実行されるため、さまざまな段階で独自のコードを追加できます。

たとえば、マウントされたフックは、インスタンスの作成後にコードを実行するために使用できます:

new Vue({
  data: {
    a: 1
  },
  mounted: function () {
    // `this` 指向 vm 实例
    console.log(&#39;a is: &#39; + this.a)
  }
})
// => "a is: 1"

ログイン後にコピー

更新や破棄など、インスタンスのライフサイクルのさまざまな段階で呼び出される他のフックもいくつかあります。ライフサイクルフックの this コンテキストは、それを呼び出した Vue インスタンスを指します。

3. テンプレート構文

Vue.js は HTML ベースのテンプレート構文を使用し、開発者が基礎となる Vue インスタンスのデータに DOM を宣言的にバインドできるようにします。すべての Vue.js テンプレートは正当な HTML であり、仕様に準拠するブラウザおよび HTML パーサーで解析できます。

基礎となる実装では、Vue はテンプレートを仮想 DOM レンダリング関数にコンパイルします。 Vue を応答システムと組み合わせると、再レンダリングが必要なコンポーネントの数をインテリジェントに計算し、DOM 操作の数を最小限に抑えることができます。

仮想 DOM に精通しており、JavaScript の生のパワーを好む場合は、オプションの JSX 構文を使用して、テンプレートを使用せずにレンダリング関数を直接記述することもできます。 (公式 Web サイトからの原文)

3.1. テキスト補間

データバインディングの最も一般的な形式は、「Mustache」構文 (二重中括弧) を使用したテキスト補間です:

<span>Message: {{ msg }}</span>

ログイン後にコピー

Mustache タグは、対応する msg に置き換えられます。データオブジェクト属性の値。バインドされたデータオブジェクトの msg プロパティが変更されるたびに、補間ポイントのコンテンツが更新されます。

vue はデフォルトの双方向バインディングです。双方向バインディングを望まない場合は、1 回限りのデータに対して v-once コマンドを使用してください。ただし、ノード上のすべてのデータバインディングに影響することに注意してください。

<span v-once>这个将不会改变: {{ msg }}</span>

ログイン後にコピー

3.2、オリジナルの HTML

二重中括弧は、データを HTML コードではなく通常のテキストとして解釈します。実際の HTML を出力するには、v-html ディレクティブを使用する必要があります:

<p>Using v-html directive: <span v-html="rawHtml"></span></p>

ログイン後にコピー

サイト上で動的にレンダリングされる任意の HTML は、XSS 攻撃に簡単につながる可能性があるため、非常に危険です。 HTML 補間は信頼できるコンテンツに対してのみ使用し、ユーザーが提供したコンテンツに対しては決して使用しないでください。

3.3. JavaScript

Expressions の使用

これまでのところ、vue テンプレートでは、vue は単純な属性キー値のみをバインドしています。しかし実際には、すべてのデータバインディングに対して、Vue.js は完全な JavaScript 式サポートを提供します。

{{ number + 1 }}
{{ ok ? &#39;YES&#39; : &#39;NO&#39; }}
{{ message.split(&#39;&#39;).reverse().join(&#39;&#39;) }}
<div v-bind:id="&#39;list-&#39; + id"></div>

ログイン後にコピー

3.4. コマンド

コマンドは v- 接頭辞を持つ特別な属性です。ディレクティブ属性の値は、単一の JavaScript 式であることが想定されます (v-for は例外です)。ディレクティブの役割は、式の値が変更されたときに、それに関連付けられた効果を DOM にリアクティブに適用することです。はじめに見た例を確認してください

<p v-if="seen">现在你看到我了</p>

ログイン後にコピー

v-if 指令将根据表达式 seen 的值的真假来插入/移除

元素。

3.4.1、参数

一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如，v-bind 指令可以用于响应式地更新 HTML 属性：

<a v-bind:href="url">...</a>

ログイン後にコピー

在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。
另一个例子是 v-on 指令，它用于监听 DOM 事件：

<a v-on:click="doSomething">...</a>

ログイン後にコピー

在这里参数是监听的事件名。我们也会更详细地讨论事件处理。

3.4.2、缩写

v- 前缀作为一种视觉提示，用来识别模板中 Vue 特定的特性。当你在使用 Vue.js 为现有标签添加动态行为 (dynamic behavior) 时，v- 前缀很有帮助，然而，对于一些频繁用到的指令来说，就会感到使用繁琐。同时，在构建由 Vue.js 管理所有模板的单页面应用程序 (SPA - single page application) 时，v- 前缀也变得没那么重要了。因此，Vue.js 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写：

v-bind缩写: