Vue宣言レンダリング

2312 ワード

Vue.jsのコアは、簡潔なテンプレート構文を使用してDOMにデータを宣言的にレンダリングできるシステムです.

<div id="app">
  {{ message }}
div>

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

Hello Vue!
最初のVueアプリケーションの作成に成功しました!文字列テンプレートのレンダリングとよく似ているように見えますが、Vueは背後で多くの作業をしています.現在、データとDOMは関連付けられており、すべてのものが応答式である.どうやって確認しますか?ブラウザのJavaScriptコンソール(このページで開く)を開き、app.messageの値を変更すると、前例に従って更新されます.
テキスト補間に加えて、要素attributeをバインドすることもできます.

<div id="app-2">
  <span v-bind:title="message">                     ！ span> div>

var app2 = new Vue({
  el: '#app-2',
  data: { message: '      ' + new Date().toLocaleString() } })

マウスを数秒離して、ここのダイナミックバインドのヒント情報を表示します.
ここで私たちは新しいものに出会った.あなたが見たv-bind attributeは命令と呼ばれています.命令は、Vueによって提供される特別なattributeであることを示す接頭辞v-を有する.レンダリングされたDOMに特殊な応答動作が適用されると推測したかもしれません.ここで、命令は、「この要素ノードのtitle attributeとVueインスタンスのmessage属性を一致させる」ことを意味する.
ブラウザのJavaScriptコンソールを再度開き、app2.message = ' 'と入力すると、title attributeがバインドされたHTMLが更新されているのが再び見えます.

vueコンポーネント化開発(component)

vueテンプレートにおける二重引用符に一重引用符を付ける役割