To demonstrate the first directive we are going to build something simple. We will give you some tips that will make your understanding and work much easier! Suppose you find yourself in need to toggle the display of an element, based upon some set of criteria. Maybe a submit
button shouldn't display unless you've first typed in a message. How can we accomplish that with Vue?
<html> <head> <title>Hello Vue</title> </head> <body> <div id="app"> <textarea></textarea> </div> </body> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script> <script> new Vue({ el: '#app', data: { message: 'Our king is dead!' } }) </script> </html>
Here we have an HTML file with our known div id="app"
and textarea
. Inside the textarea
tag we...