Getting Started with Vue.js Chapter 1Within the app space, add the code to output the string:
<div id="app">
{{ message }}
</div>Save the file, open it up in your browser, and you should be presented with your
Hello! string.
If you don't see any output, check the JavaScript console to see if there are
any errors. Ensure the remote JavaScript file is loading correctly, as some
browsers and operating systems require additional security steps before
allowing some remote files to be loaded when viewing pages locally on
your computer.The data object can handle multiple keys and data types. Add some more values to the
data object and see what happens - make sure you add a comma after each value. Data
values are simple JavaScript and can handle basic math, too - try adding a new price key
and setting the value to 18 + 6 to see what happens. Alternatively, try adding a JavaScript
array and printing it out:
const app = new Vue({
el: '#app',data: {
message: 'Hello!',
price: 18 + 6,
details: ['one', 'two', 'three']
}
});In your app space, you can now output each of those values - {{ price }} and {{
details }} now output data - although the list may not be quite what you had expected.
We'll cover using and displaying lists in Chapter 2, Displaying, Looping, Searching, and
Filtering Data.
All the data in Vue is reactive and can be updated by either the user or the application. This
can be tested by opening up the browser's JavaScript console and updating the content
yourself. Try typing app.message = 'Goodbye!'; and pressing Enter - your app's
content will update. This is because you are referencing the property directly - the first app
refers to the const app variable that your app is initialized to in your JavaScript. The
period denotes a property within there, and the message refers to the data key. You could
also update app.details or price to anything you want!