You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<p>We have already created our very first Vue app! This looks pretty similar to just rendering a string template, but Vue has done a lot of work under the hood. The data and the DOM are now linked, and everything is now <strong>reactive</strong>. How do we know? Just open up your browser’s JavaScript console and set <code>app.message</code> to a different value. You should see the rendered example above update accordingly.</p>
389
389
<p>In addition to text interpolation, we can also bind element attributes like this:</p>
<figureclass="highlight html"><table><tr><tdclass="code"><pre><divclass="line"><spanclass="tag"><<spanclass="name">div</span><spanclass="attr">id</span>=<spanclass="string">"app-2"</span>></span></div><divclass="line"><spanclass="tag"><<spanclass="name">span</span><spanclass="attr">v-bind:title</span>=<spanclass="string">"message"</span>></span></div><divclass="line"> Hover your mouse over me for a few seconds to see my dynamically bound title!</div><divclass="line"><spanclass="tag"></<spanclass="name">span</span>></span></div><divclass="line"><spanclass="tag"></<spanclass="name">div</span>></span></div></pre></td></tr></table></figure>
391
+
<figureclass="highlight js"><table><tr><tdclass="code"><pre><divclass="line"><spanclass="keyword">var</span> app2 = <spanclass="keyword">new</span> Vue({</div><divclass="line"> el: <spanclass="string">'#app-2'</span>,</div><divclass="line"> data: {</div><divclass="line">message: <spanclass="string">'You loaded this page on '</span> + <spanclass="keyword">new</span><spanclass="built_in">Date</span>()</div><divclass="line"> }</div><divclass="line">})</div></pre></td></tr></table></figure>
392
392
393
393
<divid="app-2" class="demo">
394
-
<spanv-bind:id="id">Inspect me</span>
394
+
<spanv-bind:title="message">
395
+
Hover your mouse over me for a few seconds to see my dynamically bound title!
396
+
</span>
395
397
</div>
396
398
<script>
397
399
varapp2=newVue({
398
400
el: '#app-2',
399
401
data: {
400
-
id: 'inspect-me'
402
+
message: 'You loaded this page on '+newDate()
401
403
}
402
404
})
403
405
</script>
404
406
405
-
<p>Here we are encountering something new. The <code>v-bind</code> attribute you are seeing is called a <strong>directive</strong>. Directives are prefixed with <code>v-</code> to indicate that they are special attributes provided by Vue, and as you may have guessed, they apply special reactive behavior to the rendered DOM. Here it is basically saying “bind this element’s <code>id</code> attribute to the <code>id</code> property on the Vue instance.”</p>
406
-
<p>Use the browser devtools to inspect the element above - you should see that it has the id <code>inspect-me</code>. And yes, it would update if you modify <code>app2.id</code>in the console.</p>
407
+
<p>Here we are encountering something new. The <code>v-bind</code> attribute you are seeing is called a <strong>directive</strong>. Directives are prefixed with <code>v-</code> to indicate that they are special attributes provided by Vue, and as you may have guessed, they apply special reactive behavior to the rendered DOM. Here it is basically saying “keep this element’s <code>title</code> attribute up-to-date with the <code>message</code> property on the Vue instance.”</p>
408
+
<p>If you open up your JavaScript console again and enter <code>app2.message = 'some new message'</code>, you’ll once again see that the bound HTML - in this case the <code>title</code>attribute - has been updated.</p>
407
409
<h2id="Conditionals-and-Loops"><ahref="#Conditionals-and-Loops" class="headerlink" title="Conditionals and Loops"></a>Conditionals and Loops</h2><p>It’s quite simple to toggle the presence of an element, too:</p>
408
410
<figureclass="highlight html"><table><tr><tdclass="code"><pre><divclass="line"><spanclass="tag"><<spanclass="name">div</span><spanclass="attr">id</span>=<spanclass="string">"app-3"</span>></span></div><divclass="line"><spanclass="tag"><<spanclass="name">p</span><spanclass="attr">v-if</span>=<spanclass="string">"seen"</span>></span>Now you see me<spanclass="tag"></<spanclass="name">p</span>></span></div><divclass="line"><spanclass="tag"></<spanclass="name">div</span>></span></div></pre></td></tr></table></figure>
0 commit comments