ホームページ >ウェブフロントエンド >jsチュートリアル >vue ライフサイクル、vue インスタンス、テンプレート構文
vue ライフサイクル、vue インスタンス、テンプレート構文
- php中世界最好的语言オリジナル
- 2018-03-10 10:19:241935ブラウズ
今回は、vueライフサイクル、vueインスタンス、テンプレート構文について説明します。vueライフサイクル、vueインスタンス、テンプレート構文を使用する際の注意点について、実際のケースを見てみましょう。
Vueは誕生以来、サイレントニッチフレームワークから中国三大フレームワークの一つに成長し、初期バージョンから現在の2.5.13(2014年から2018年2018.1.26時点の安定版)まで発展してきました。 要点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 の中級の知識が必要です。 フロントエンド開発を学び始めたばかりの場合、最初のステップとしてフレームワークを使用するのは最善のアイデアではないかもしれません。基本をマスターしてから戻ってきてください。他のフレームワークの以前の経験は役に立ちますが、必須ではありません。 （原文は公式サイトより）。
2. vue インスタンスすべての Vue アプリケーションは、Vue 関数を使用して新しい Vue インスタンスを作成することから始まります:
var vm = new Vue({
// 选项
})3. インスタンスのライフサイクル フック 各 Vue インスタンスは、作成時に一連の手順を実行します。プロセス - データ バインディングの設定、メソッド パラメーターの受け渡し、インスタンスの DOM へのマウント、データ変更時の DOM の更新など。同時に、ライフサイクルフックと呼ばれるいくつかの関数がプロセス中に実行されるため、さまざまな段階で独自のコードを追加できます。 たとえば、マウントされたフックは、インスタンスの作成後にコードを実行するために使用できます: new Vue({
data: {
a: 1
},
mounted: function () {
// `this` 指向 vm 实例
console.log('a is: ' + 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 ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>3.4. コマンド
コマンドは v- 接頭辞を持つ特別な属性です。ディレクティブ属性の値は、単一の JavaScript 式であることが想定されます (v-for は例外です)。ディレクティブの役割は、式の値が変更されたときに、それに関連付けられた効果を DOM にリアクティブに適用することです。はじめに見た例を確認してください
<p v-if="seen">现在你看到我了</p>
v-if 指令将根据表达式 seen 的值的真假来插入/移除 e388a4556c0f65e1904146cc1a846bee 元素。
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缩写:
<a v-bind:href="url">...</a>...
v-on缩写:
<a v-on:click="doSomething">...</a>...
它们看起来可能与普通的 HTML 略有不同，但 : 与 @ 对于特性名来说都是合法字符，在所有支持 Vue.js 的浏览器都能被正确地解析。而且，它们不会出现在最终渲染的标记中。缩写语法是完全可选的，但随着你更深入地了解它们的作用，你会庆幸拥有它们。
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
相关阅读：
前端微信分享jssdk config:invalid signature 签名错误的解决方法
以上がvue ライフサイクル、vue インスタンス、テンプレート構文の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。